aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-01-31 03:34:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

last tailwind conversions: generic prose things and .column_content, eliminate styles entirely.

Browse Source
This commit is contained in:
fiatjaf
2023-10-25 20:24:28 -03:00
parent 88dcf490c2
commit 35e9a6da30
11 changed files with 19 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
justfile
View File

@@ -10,8 +10,5 @@ deploy: build
refresh_build: scss prettier
go build -tags=nocache -o ./tmp/main .
scss:
sass static/styles.scss static/styles.css
prettier:
prettier -w static/*.css static/*.scss templates/*.html
prettier -w templates/*.html

120
static/styles.css
View File

@@ -1,120 +0,0 @@
.column_content {
flex-grow: 0;
flex-shrink: 0;
word-wrap: break-word;
}
.column_content a.button {
display: inline-block;
max-width: 100%;
padding: 2px 8px;
margin-top: 0.6em;
margin-right: 0.2em;
border-bottom: 0;
border: 1px solid #c9c9c9;
border-radius: 8px;
}
.column_content a.button:hover {
color: #ffffff;
background-color: #e32a6d;
border: 1px solid #e32a6d;
}
.column_content blockquote {
padding: 0.5rem 0 0.5rem 1rem;
margin: 2rem 0;
font-style: italic;
}
.theme--default .column_content blockquote {
border-left: 0.5rem solid #f3f3f3;
}
.theme--dark .column_content blockquote {
border-left: 0.5rem solid #2d2d2d;
}
.column_content blockquote.mention {
border-left: 0.5rem solid #e32a6d;
padding: 0rem 0 0.5rem 1rem;
}
.theme--default .column_content blockquote.mention div {
padding: 0.5rem 0.5rem 0.5rem 1rem;
margin: 0 0 1rem -1rem;
background-color: #f3f3f3;
}
.theme--dark .column_content blockquote.mention div {
padding: 0.5rem 0.5rem 0.5rem 1rem;
margin: 0 0 1rem -1rem;
background-color: #2d2d2d;
}
.column_content blockquote p {
margin: 0 0 0.5rem 0;
}
.column_content cite {
font-size: 0.8em;
}
.column_content strong {
font-weight: 400;
}
.column_content ol,
.column_content ul {
margin: 0;
padding: 0 0 0 1rem;
}
.column_content ol li,
.column_content ul li {
margin-bottom: 0.5rem;
}
.column_content sup {
font-size: 0.6rem;
vertical-align: baseline;
position: relative;
top: -0.8em;
margin: 0 0.3rem 0 0.1rem;
}
.column_content hr {
display: none;
}
.column_content .footnotes {
padding-top: 1rem;
margin-top: 2rem;
font-size: 0.9rem;
line-height: 1.2rem;
}
.theme--default .column_content .footnotes {
border-top: 6px solid #f3f3f3;
}
.theme--dark .column_content .footnotes {
border-top: 6px solid #2d2d2d;
}
body.profile .column_content {
flex-basis: 50%;
max-width: 50%;
}
@media (max-width: 580px) {
body.profile .column_content {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
body.note .column_content,
body.other .column_content {
flex-basis: 75%;
max-width: 75%;
}
@media (max-width: 580px) {
body.note .column_content,
body.other .column_content {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
@media print {
body.note .column_content,
body.other .column_content {
flex-basis: 100%;
max-width: 100%;
}
}
/*# sourceMappingURL=styles.css.map */

198
static/styles.scss
View File

@@ -1,198 +0,0 @@
$color-base1: #ffffff;
$color-base2: #fafafa;
$color-base3: #f3f3f3;
$color-base4: #c9c9c9;
$color-base5: #9a9a9a;
$color-base6: #3d3d3d;
$color-base7: #373737;
$color-accent1: #e32a6d;
$color-accent2: #bc1150;
$themes: (
default: (
base1: $color-base1,
base2: $color-base2,
base3: $color-base3,
base4: $color-base4,
base5: $color-base5,
base6: $color-base6,
base7: $color-base7,
accent1: $color-accent1,
accent2: $color-accent2,
bg-up: $color-base1,
bg-down: $color-base2,
boxed-title: $color-base7,
boxed-bg-title: $color-base4,
boxed-bg: $color-base3,
over-bg: $color-base3,
theme-toggle: $color-base3,
hrefbg: lighten($color-accent1, 44%)
),
dark: (
base1: $color-base7,
base2: $color-base6,
base3: $color-base5,
base4: darken($color-base4, 20%),
base5: $color-base3,
base6: $color-base2,
base7: $color-base2,
accent1: $color-accent1,
accent2: $color-accent2,
bg-up: darken($color-base6, 12%),
bg-down: darken($color-base7, 12%),
boxed-title: $color-base5,
boxed-bg-title: darken($color-base6, 14%),
boxed-bg: darken($color-base7, 14%),
over-bg: darken($color-base7, 4%),
theme-toggle: $color-base6,
hrefbg: darken($color-accent1, 38%)
)
);
$base1: 'base1';
$base2: 'base2';
$base3: 'base3';
$base4: 'base4';
$base5: 'base5';
$base6: 'base6';
$base7: 'base7';
$accent1: 'accent1';
$accent2: 'accent2';
$bg-up: 'bg-up';
$bg-down: 'bg-down';
$boxed-title: 'boxed-title';
$boxed-bg-title: 'boxed-bg-title';
$boxed-bg: 'boxed-bg';
$over-bg: 'over-bg';
$theme-toggle: 'theme-toggle';
$hrefbg: 'hrefbg';
$theme-map: null;
@mixin themed() {
@each $theme, $map in $themes {
.theme--#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge(
$theme-map,
(
$key: $value
)
) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function t($key) {
@return map-get($theme-map, $key);
}
.column_content {
flex-grow: 0;
flex-shrink: 0;
word-wrap: break-word;
a.button {
display: inline-block;
max-width: 100%;
padding: 2px 8px;
margin-top: 0.6em;
margin-right: 0.2em;
border-bottom: 0;
border: 1px solid $color-base4;
border-radius: 8px;
&:hover {
color: $color-base1;
background-color: $color-accent1;
border: 1px solid $color-accent1;
}
}
blockquote {
@include themed() {
border-left: 0.5rem solid t($over-bg);
}
padding: 0.5rem 0 0.5rem 1rem;
margin: 2rem 0;
font-style: italic;
&.mention {
border-left: 0.5rem solid $color-accent1;
padding: 0rem 0 0.5rem 1rem;
div {
@include themed() {
padding: 0.5rem 0.5rem 0.5rem 1rem;
margin: 0 0 1rem -1rem;
background-color: t($over-bg);
}
}
}
p {
margin: 0 0 0.5rem 0;
}
}
cite {
font-size: 0.8em;
}
strong {
font-weight: 400;
}
ol,
ul {
margin: 0;
padding: 0 0 0 1rem;
li {
margin-bottom: 0.5rem;
}
}
sup {
font-size: 0.6rem;
vertical-align: baseline;
position: relative;
top: -0.8em;
margin: 0 0.3rem 0 0.1rem;
}
hr {
display: none;
}
.footnotes {
padding-top: 1rem;
margin-top: 2rem;
@include themed() {
border-top: 6px solid t($over-bg);
}
font-size: 0.9rem;
line-height: 1.2rem;
}
}
body.profile {
.column_content {
flex-basis: 50%;
max-width: 50%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
}
body.note,
body.other {
.column_content {
flex-basis: 75%;
max-width: 75%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
@media print {
flex-basis: 100%;
max-width: 100%;
}
}
}

4
templates/archive.html
View File

@@ -7,7 +7,7 @@
{{template "head_common" .}}
</head>
<body class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900">
<body class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800">
{{template "top" .}}
<div
@@ -20,7 +20,7 @@
<div class="text-2xl">{{.Title}}</div>
</div>
<div class="column column_content">
<div class="break-words w-full sm:w-1/2 print:w-full break-all">
<div class="leading-5 mb-6">
<h1 class="text-xl">{{.Title}}</h1>
</div>

2
templates/footer.html
View File

@@ -1,5 +1,5 @@
<div
class="fixed overflow-hidden -z-10 inset-y-64 -inset-x-24 bg-gray-50 dark:bg-stone-800 w-[200%] h-full -rotate-12 print:hidden"
class="fixed overflow-hidden -z-10 inset-y-64 -inset-x-24 bg-gray-50 dark:bg-neutral-900 w-[200%] h-full -rotate-12 print:hidden"
></div>
<footer class="mb-4 mt-6 text-gray-400 text-sm text-center">

1
templates/head_common.html
View File

@@ -1,5 +1,4 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/njump/static/styles.css?v=20230914" />
{{if .IsProfile}}
<link

6
templates/note.html
View File

@@ -53,7 +53,7 @@
</head>
<body
class="note | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
>
{{template "top" .}}
@@ -61,7 +61,7 @@
<div
class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
>
<div class="column column_content">
<div class="break-words w-full sm:w-9/12 print:w-full">
<header class="max-w-full mb-4">
<a class="flex items-center flex-wrap" href="/{{.Npub}}">
<div
@@ -99,7 +99,7 @@
></div>
<article
class="leading-5 mb-6 prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light"
class="leading-5 mb-6 prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light prose-blockquote:mx-0 prose-blockquote:my-8 prose-blockquote:pl-4 prose-blockquote:pr-0 prose-blockquote:py-2 prose-blockquote:border-l-8 prose-blockquote:border-solid prose-blockquote:border-l-gray-100 dark:prose-blockquote:border-l-zinc-800 prose-p:m-0 prose-p:mb-2 prose-cite:text-sm prose-ul:m-0 prose-ul:p-0 prose-ul:pl-4 prose-ol:m-0 prose-ol:p-0 prose-ol:pl-4 prose-li:mb-2 prose"
>
{{ if (not (eq "" .Subject))}}
<h1 class="text-2xl">{{.Subject}}</h1>

4
templates/other.html
View File

@@ -13,7 +13,7 @@
</head>
<body
class="other | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
>
{{template "top" .}}
@@ -23,7 +23,7 @@
<div
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
>
<div class="column column_content">
<div class="break-words w-full sm:w-9/12 print:w-full">
<header class="">
<div class="text-2xl mb-4">{{.KindDescription}}</div>
</header>

10
templates/profile.html
View File

@@ -29,7 +29,7 @@
</head>
<body
class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
>
{{template "top" .}}
@@ -60,7 +60,7 @@
</div>
</header>
<div class="column column_content">
<div class="break-words w-full sm:w-1/2 print:w-full">
<header class="leading-5 mb-6 hidden sm:flex sm:items-center">
<h1>
<div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
@@ -106,7 +106,11 @@
<div class="leading-5 mb-6">
<div class="text-sm text-strongpink">Posting on these relays</div>
{{range $index, $element := .AuthorRelays}}
<a href="/r/{{$element}}" class="button">{{$element}}</a>
<a
href="/r/{{$element}}"
class="inline-block max-w-full border mr-1 mt-2.5 px-2 py-0.5 rounded-lg border-slate-300 hover:text-white hover:bg-strongpink hover:border hover:border-solid hover:border-strongpink"
>{{$element}}</a
>
{{end}}
</div>
{{ end }}

4
templates/relay.html
View File

@@ -26,7 +26,7 @@
</head>
<body
class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
>
{{template "top" .}}
@@ -50,7 +50,7 @@
</div>
</div>
<div class="column column_content">
<div class="break-words w-full sm:w-1/2 print:w-full">
<header class="leading-5 mb-6 hidden sm:flex sm:items-center">
<h1>
<div id="relay_name" class="text-2xl">{{.Info.Name}}</div>

2
utils.go
View File

@@ -312,7 +312,7 @@ func renderQuotesAsHTML(ctx context.Context, input string, usingTelegramInstantV
}
content := fmt.Sprintf(
`<blockquote class="mention"><div>quoting %s </div> %s </blockquote>`, match, event.Content)
`<blockquote class="pl-4 pr-0 pt-0 pb-2 border-l-8 border-l-strongpink border-solid"><div class="-ml-4 bg-gray-100 dark:bg-zinc-800 mr-0 mt-0 mb-4 pl-4 pr-2 py-2">quoting %s </div> %s </blockquote>`, match, event.Content)
return basicFormatting(content, false, usingTelegramInstantView)
})
}