| -rw-r--r-- | Dockerfile | 6 | ||||
| -rw-r--r-- | static/input.css | 16 | ||||
| -rw-r--r-- | static/output.css | 44 | ||||
| -rw-r--r-- | views/index.html | 51 | ||||
| -rw-r--r-- | views/layouts/blog-page.html | 2 |
5 files changed, 49 insertions, 70 deletions
@@ -6,13 +6,9 @@ RUN go build -o sayana-demo . FROM alpine:3.22.1 AS runtime-stage -ENV B2_KEY_ID="" -ENV B2_APPLICATION_KEY="" - WORKDIR /app COPY --from=build-stage /builddir/sayana-demo /app/sayana-demo COPY --from=build-stage /builddir/static /app/static COPY --from=build-stage /builddir/views /app/views -COPY --from=build-stage /builddir/config/config.yaml /app/config.yaml -ENTRYPOINT [ "/app/sayana-demo", "-c", "/app/config.yaml" ] +ENTRYPOINT [ "/app/sayana-demo" ] diff --git a/static/input.css b/static/input.css index 4058cb1..dfa9219 100644 --- a/static/input.css +++ b/static/input.css @@ -27,7 +27,7 @@ --secondary-color: var(--main-light-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -43,7 +43,7 @@ --secondary-color: var(--main-medium-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -227,20 +227,12 @@ width: 90vw; } -.w-p80 { - width: 80%; -} - -.w-vmax4 { - width: 4vmax; -} - .h-vh90 { height: 90vh; } -.h-vmax4 { - height: 4vmax; +.w-p80 { + width: 80%; } .mt-vmin0-8 { diff --git a/static/output.css b/static/output.css index ea57d8f..2ba01ad 100644 --- a/static/output.css +++ b/static/output.css @@ -12,6 +12,8 @@ --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --spacing: 0.25rem; + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-extrabold: 800; @@ -220,6 +222,9 @@ .my-auto { margin-block: auto; } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } .mt-auto { margin-top: auto; } @@ -229,6 +234,9 @@ .mr-auto { margin-right: auto; } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } .mb-auto { margin-bottom: auto; } @@ -241,12 +249,30 @@ .flex { display: flex; } + .h-4\/12 { + height: calc(4/12 * 100%); + } + .h-16 { + height: calc(var(--spacing) * 16); + } .h-auto { height: auto; } .h-screen { height: 100vh; } + .min-h-16 { + min-height: calc(var(--spacing) * 16); + } + .w-6\/12 { + width: calc(6/12 * 100%); + } + .w-10\/12 { + width: calc(10/12 * 100%); + } + .w-16 { + width: calc(var(--spacing) * 16); + } .max-w-full { max-width: 100%; } @@ -368,6 +394,10 @@ .font-spectral { font-family: var(--font-spectral); } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -425,7 +455,7 @@ --secondary-color: var(--main-light-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -440,7 +470,7 @@ --secondary-color: var(--main-medium-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -584,17 +614,11 @@ .w-vw90 { width: 90vw; } -.w-p80 { - width: 80%; -} -.w-vmax4 { - width: 4vmax; -} .h-vh90 { height: 90vh; } -.h-vmax4 { - height: 4vmax; +.w-p80 { + width: 80%; } .mt-vmin0-8 { margin-top: 0.8vmin; diff --git a/views/index.html b/views/index.html index 1b6f8c8..cff3826 100644 --- a/views/index.html +++ b/views/index.html @@ -9,42 +9,9 @@ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet"> <link href="/output.css" rel="stylesheet"> - <style> - .menu-outer-body { - border-radius: 10%; - width: 60vw; - height: 40vh; - } - - .menu-inner-body { - width: 85%; - } - - @media (max-aspect-ratio: 1.2/1) { - .menu-outer-body { - border-radius: 5%; - } - - .menu-inner-body { - width: 92.5%; - } - } - - @media (max-aspect-ratio: 0.8/1) { - .menu-outer-body { - width: 100vw; - height: 80vh; - border-radius: 0; - } - - .menu-inner-body { - width: 100%; - } - } - </style> </head> -<body data-theme="night" class="font-spectral text-main-dark text-vmax1-5 overflow-hidden bg-interlocked-hexagons h-screen flex flex-col"> +<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-col"> <div class="absolute star z-0">*</div> <div class="absolute star z-0">*</div> @@ -90,22 +57,22 @@ switchTheme(savedTheme); </script> - <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70"> - <p class="font-patua mx-auto text-vmax2-5 mt-vmin0-8 mb-vmin1-6">saya.today</p> - <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-vmin1-6 overflow-y-auto opacity-100"> + <div class="p-4 w-6/12 h-4/12 z-1 rounded-4xl bg-background-dark flex flex-col mx-auto my-auto opacity-70"> + <p class="font-patua mx-auto text-4xl mt-2 mb-4">saya.today</p> + <div class="w-10/12 grow bg-background-light flex flex-col mx-auto mb-4 overflow-y-auto opacity-100"> {{- range .BlogPages }} - <div class="m-2 flex flex-row justify-center justify-items-center gap-4"> - <img style="flex-grow: 0;" class="flex-1 object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp"> + <div class="m-2 min-h-16 flex flex-row justify-center justify-items-center gap-4"> + <img style="flex-grow: 0;" class="flex-1 object-cover w-16 h-16 rounded-4xl select-none" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp"> <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium"> <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a> - <a href="/blog/{{ .Link }}" class="block italic text-vmax1 text-secondary">{{ .ActionDate }}</a> + <a href="/blog/{{ .Link }}" class="block italic text-secondary">{{ .ActionDate }}</a> <p>{{ .ShortDescription }}</p> </div> <div class="flex-3 justify-self-center flex flex-col text-right"> - <p class="grow text-vmax1"> + <p class="grow"> Тэги: {{ .Tags }} </p> - <p class="italic text-secondary text-vmax1"> + <p class="italic text-secondary"> {{ .PublishedTime }} </p> </div> diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html index df5e4cf..6ee7d85 100644 --- a/views/layouts/blog-page.html +++ b/views/layouts/blog-page.html @@ -14,7 +14,7 @@ <link href="/output.css" rel="stylesheet"> </head> -<body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex"> +<body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons bg-repeat bg-pattern-body h-screen flex"> <script> function switchTheme(theme) { |