summaryrefslogtreecommitdiff
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
-rw-r--r--.github/workflows/build-and-deploy-prod.yml37
-rw-r--r--.github/workflows/build-and-deploy-stage.yml43
-rw-r--r--.gitignore2
-rw-r--r--Dockerfile1
-rw-r--r--internal/router/router.go57
-rw-r--r--static/favicon-dark.svg2
-rw-r--r--static/favicon.icobin0 -> 7633 bytes
-rw-r--r--static/input.css211
-rw-r--r--views/layouts/general-page.html187
-rw-r--r--views/pages/blog-catalogue.html8
-rw-r--r--views/pages/blog-page.html11
-rw-r--r--views/pages/global-map.html45
-rw-r--r--views/pages/home-page.html30
-rw-r--r--views/pages/unsubscribe-page.html5
-rw-r--r--views/partials/blog-page-like-button.html31
-rw-r--r--views/partials/general-page-header.html4
16 files changed, 303 insertions, 371 deletions
diff --git a/.github/workflows/build-and-deploy-prod.yml b/.github/workflows/build-and-deploy-prod.yml
index 97afdf7..060ae32 100644
--- a/.github/workflows/build-and-deploy-prod.yml
+++ b/.github/workflows/build-and-deploy-prod.yml
@@ -40,6 +40,8 @@ jobs:
context: .
file: ./Dockerfile
push: true
+ cache-from: type=gha
+ cache-to: type=gha,mode=max
tags: |
ghcr.io/sayaandy/saya-today-web:latest
ghcr.io/sayaandy/saya-today-web:stable
@@ -50,10 +52,16 @@ jobs:
runs-on: ubuntu-latest
environment: Production
needs: [build-and-push]
+ container:
+ image: ghcr.io/ansible/community-ansible-dev-tools:v26.4.6
+ options: --user root
steps:
- name: Checkout
uses: actions/checkout@v6
+ - name: Install community.docker collection
+ run: ansible-galaxy collection install community.docker
+
- name: Set up SSH connection for uz.saya.casa
run: |
mkdir -p ~/.ssh
@@ -67,17 +75,28 @@ jobs:
- name: Test SSH connection
run: |
- ssh -o ConnectTimeout=10 -i ~/.ssh/id_ed25519 svc_github@uz.saya.casa "echo 'SSH connection successful'"
-
- - name: Install Ansible
- shell: bash
- run: |
- sudo apt update
- sudo apt install -y ansible
+ ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i ~/.ssh/id_ed25519 svc_github@uz.saya.casa "echo 'SSH connection successful'"
- name: Run Ansible playbook
env:
- ANSIBLE_HOST_KEY_CHECKING: False
+ ANSIBLE_HOST_KEY_CHECKING: "False"
working-directory: ./deploy
run: |
- ansible-playbook -i inventory.yml -l prod playbook.yml --private-key ~/.ssh/id_ed25519 -u svc_github -e saya_today_web_auth_salt="${{ secrets.AUTH_SALT }}" -e saya_today_web_s3_access_key_id="${{ secrets.S3_ACCESS_KEY_ID }}" -e saya_today_web_s3_secret_access_key="${{ secrets.S3_SECRET_ACCESS_KEY }}" -e saya_today_web_environment=prod -e saya_today_web_tag=${{ github.ref_name }} -e saya_today_web_mail_salt="${{ secrets.MAIL_SALT }}" -e saya_today_web_mail_host="${{ secrets.MAIL_HOST }}" -e saya_today_web_mail_address="${{ secrets.MAIL_ADDRESS }}" -e saya_today_web_mail_username="${{ secrets.MAIL_USERNAME }}" -e saya_today_web_mail_password="${{ secrets.MAIL_PASSWORD }}" -e saya_today_google_site_verification="${{ secrets.GOOGLE_SITE_VERIFICATION }}" -e saya_today_yandex_verification="${{ secrets.YANDEX_VERIFICATION }}"
+ ansible-playbook \
+ playbook.yml \
+ -i inventory.yml \
+ -l prod \
+ --private-key ~/.ssh/id_ed25519 \
+ -u svc_github \
+ -e saya_today_web_auth_salt="${{ secrets.AUTH_SALT }}" \
+ -e saya_today_web_s3_access_key_id="${{ secrets.S3_ACCESS_KEY_ID }}" \
+ -e saya_today_web_s3_secret_access_key="${{ secrets.S3_SECRET_ACCESS_KEY }}" \
+ -e saya_today_web_environment=prod \
+ -e saya_today_web_tag=${{ github.ref_name }} \
+ -e saya_today_web_mail_salt="${{ secrets.MAIL_SALT }}" \
+ -e saya_today_web_mail_host="${{ secrets.MAIL_HOST }}" \
+ -e saya_today_web_mail_address="${{ secrets.MAIL_ADDRESS }}" \
+ -e saya_today_web_mail_username="${{ secrets.MAIL_USERNAME }}" \
+ -e saya_today_web_mail_password="${{ secrets.MAIL_PASSWORD }}" \
+ -e saya_today_google_site_verification="${{ secrets.GOOGLE_SITE_VERIFICATION }}" \
+ -e saya_today_yandex_verification="${{ secrets.YANDEX_VERIFICATION }}"
diff --git a/.github/workflows/build-and-deploy-stage.yml b/.github/workflows/build-and-deploy-stage.yml
index ffee091..ce4a1fb 100644
--- a/.github/workflows/build-and-deploy-stage.yml
+++ b/.github/workflows/build-and-deploy-stage.yml
@@ -9,6 +9,8 @@ jobs:
environment: Stage
permissions:
packages: write
+ outputs:
+ sha_short: ${{ steps.ghss_vars.outputs.sha_short }}
steps:
- name: Checkout
uses: actions/checkout@v6
@@ -35,7 +37,7 @@ jobs:
- name: Set github short sha
id: ghss_vars
- run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+ run: echo "sha_short=${GITHUB_SHA::7}" >> $GITHUB_OUTPUT
- name: Build and push
uses: docker/build-push-action@v7
@@ -43,6 +45,8 @@ jobs:
context: .
file: ./Dockerfile
push: true
+ cache-from: type=gha
+ cache-to: type=gha,mode=max
tags: |
ghcr.io/sayaandy/saya-today-web:latest
ghcr.io/sayaandy/saya-today-web:commit-${{ steps.ghss_vars.outputs.sha_short }}
@@ -52,10 +56,16 @@ jobs:
runs-on: ubuntu-latest
environment: Stage
needs: [build-and-push]
+ container:
+ image: ghcr.io/ansible/community-ansible-dev-tools:v26.4.6
+ options: --user root
steps:
- name: Checkout
uses: actions/checkout@v6
+ - name: Install community.docker collection
+ run: ansible-galaxy collection install community.docker
+
- name: Set up SSH connection for uz.saya.casa
run: |
mkdir -p ~/.ssh
@@ -69,21 +79,26 @@ jobs:
- name: Test SSH connection
run: |
- ssh -o ConnectTimeout=10 -i ~/.ssh/id_ed25519 svc_github@uz.saya.casa "echo 'SSH connection successful'"
-
- - name: Install Ansible
- shell: bash
- run: |
- sudo apt update
- sudo apt install -y ansible
-
- - name: Set github short sha
- id: ghss_vars
- run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+ ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i ~/.ssh/id_ed25519 svc_github@uz.saya.casa "echo 'SSH connection successful'"
- name: Run Ansible playbook
env:
- ANSIBLE_HOST_KEY_CHECKING: False
+ ANSIBLE_HOST_KEY_CHECKING: "False"
working-directory: ./deploy
run: |
- ansible-playbook -i inventory.yml -l stage playbook.yml --private-key ~/.ssh/id_ed25519 -u svc_github -e saya_today_web_auth_salt="${{ secrets.AUTH_SALT }}" -e saya_today_web_s3_access_key_id="${{ secrets.S3_ACCESS_KEY_ID }}" -e saya_today_web_s3_secret_access_key="${{ secrets.S3_SECRET_ACCESS_KEY }}" -e saya_today_web_environment=stage -e saya_today_web_tag=commit-${{ steps.ghss_vars.outputs.sha_short }} -e saya_today_web_mail_salt="${{ secrets.MAIL_SALT }}" -e saya_today_web_mail_host="${{ secrets.MAIL_HOST }}" -e saya_today_web_mail_address="${{ secrets.MAIL_ADDRESS }}" -e saya_today_web_mail_username="${{ secrets.MAIL_USERNAME }}" -e saya_today_web_mail_password="${{ secrets.MAIL_PASSWORD }}"
+ ansible-playbook \
+ playbook.yml \
+ -i inventory.yml \
+ -l stage \
+ --private-key ~/.ssh/id_ed25519 \
+ -u svc_github \
+ -e saya_today_web_auth_salt="${{ secrets.AUTH_SALT }}" \
+ -e saya_today_web_s3_access_key_id="${{ secrets.S3_ACCESS_KEY_ID }}" \
+ -e saya_today_web_s3_secret_access_key="${{ secrets.S3_SECRET_ACCESS_KEY }}" \
+ -e saya_today_web_environment=stage \
+ -e saya_today_web_tag=commit-${{ needs.build-and-push.outputs.sha_short }} \
+ -e saya_today_web_mail_salt="${{ secrets.MAIL_SALT }}" \
+ -e saya_today_web_mail_host="${{ secrets.MAIL_HOST }}" \
+ -e saya_today_web_mail_address="${{ secrets.MAIL_ADDRESS }}" \
+ -e saya_today_web_mail_username="${{ secrets.MAIL_USERNAME }}" \
+ -e saya_today_web_mail_password="${{ secrets.MAIL_PASSWORD }}"
diff --git a/.gitignore b/.gitignore
index b5ae410..a620479 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,5 @@ config*.json
.envrc
/.ansible
+
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
index 5c38111..318ca51 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,6 +4,7 @@ RUN apk add --no-cache sqlite-dev musl-dev gcc
WORKDIR /builddir
COPY . .
+RUN go mod download
RUN CGO_ENABLED=1 go build -o sayana-web .
FROM alpine:3.23 AS runtime-stage
diff --git a/internal/router/router.go b/internal/router/router.go
index 65e35a4..7f3511a 100644
--- a/internal/router/router.go
+++ b/internal/router/router.go
@@ -394,6 +394,11 @@ func (r *Router) Listen() error {
case "unix":
unixConfig := r.endpoint.Config.(*config.UnixConfig)
endpoint, _ := strings.CutPrefix(unixConfig.Path, "unix://")
+
+ if err := os.Remove(endpoint); err != nil && !errors.Is(err, os.ErrNotExist) {
+ return fmt.Errorf("error while cleaning up existing unix socket: %w", err)
+ }
+
ln, err := net.Listen("unix", endpoint)
if err != nil {
return fmt.Errorf("error while initializing unix listener: %w", err)
@@ -446,8 +451,8 @@ func (r *Router) generalPage(c *fiber.Ctx, route Route, lang string) error {
path := c.Path()
method := c.Method()
trimmedPath := strings.Trim(path, "/")
- cacheKey := ""
queryString := c.Request().URI().QueryString()
+ cacheKey := ""
switch route.ToCache() {
case ByUrlOnly:
@@ -464,6 +469,7 @@ func (r *Router) generalPage(c *fiber.Ctx, route Route, lang string) error {
valueMap := fiber.Map{
"L": r.supplements.Localization[lang],
"Lang": lang,
+ "Path": trimmedPath,
"QueryString": queryString,
"CanonicalEndpoint": r.canonicalEndpoint,
"StaticStorageBaseUrl": r.supplements.StaticStorage.BaseUrl,
@@ -484,10 +490,52 @@ func (r *Router) generalPage(c *fiber.Ctx, route Route, lang string) error {
valueMap["LinkedData"] = template.JS(ldBytes)
}
+ syntheticReferer := path
+ if len(queryString) > 0 {
+ syntheticReferer += "?" + string(queryString)
+ }
+ c.Request().Header.Set("Referer", syntheticReferer)
+
+ parts := []struct {
+ name string
+ key string
+ render func(c *fiber.Ctx, supplements *Supplements, lang string, templateMap fiber.Map) (int, error)
+ }{
+ {"top-embeds", "RenderedTopEmbeds", route.RenderTopEmbeds},
+ {"header", "RenderedHeader", route.RenderHeader},
+ {"body", "RenderedBody", route.RenderBody},
+ {"footer", "RenderedFooter", route.RenderFooter},
+ {"bottom-embeds", "RenderedBottomEmbeds", route.RenderBottomEmbeds},
+ }
+
+ for _, p := range parts {
+ statusCode, err := p.render(c, r.supplements, lang, valueMap)
+ if err != nil {
+ slog.Error("failed to render segment for full page",
+ slog.String("path", path),
+ slog.String("segment", p.name),
+ slog.String("error", err.Error()),
+ )
+ c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+ return c.Status(statusCode).SendString(err.Error())
+ }
+ segContent, err := r.supplements.TemplateManager.Render("general-page-"+p.name, valueMap, route.TemplatesToInject()...)
+ if err != nil {
+ slog.Error("failed to render segment template for full page",
+ slog.String("path", path),
+ slog.String("segment", p.name),
+ slog.String("error", err.Error()),
+ )
+ c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+ return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate segment")
+ }
+ valueMap[p.key] = template.HTML(segContent)
+ }
+
content, err := r.supplements.TemplateManager.Render("general-page", valueMap)
if err != nil {
- slog.Warn("failed to generate div", slog.String("path", path), slog.String("error", err.Error()))
- return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
+ slog.Warn("failed to generate full page", slog.String("path", path), slog.String("error", err.Error()))
+ return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate full page")
}
go r.supplements.PageCache.SetWithTTL(cacheKey, content, int64(len(content)), route.CacheDuration())
@@ -642,8 +690,7 @@ func (r *Router) getAndValidateLang(c *fiber.Ctx, langSetting LangSetting, defau
return lang, nil
}
}
- c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
- return "", c.Status(fiber.ErrBadRequest.Code).SendString(fmt.Sprintf("lang value is invalid: '%s' is not considered an available language", lang))
+ return "", fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("lang value is invalid: '%s' is not considered an available language", lang))
}
func GetPathFromReferer(c *fiber.Ctx) (path string, pathParts []string, queryString string, err error) {
diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg
index a7820cb..65e31d5 100644
--- a/static/favicon-dark.svg
+++ b/static/favicon-dark.svg
@@ -4,7 +4,7 @@
</desc>
<defs>
<linearGradient gradientTransform="rotate(150, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gradient">
- <stop stop-color="hsl(31.4, 100%, 70.8%)" stop-opacity="1" offset="0%"></stop><stop stop-color="hsl(17, 100%, 31%)" stop-opacity="1" offset="100%"></stop>
+ <stop stop-color="oklch(83.7% 0.128 66.29)" stop-opacity="1" offset="0%"></stop><stop stop-color="#fefad8" stop-opacity="1" offset="100%"></stop>
</linearGradient>
</defs>
<path d="m106.155 94.45 0.005 -0.01c-6.465 16.215 -26.09 26.16 -47.235 25.525C26.5 119.965 0 92.4 0 59.53S26.38 0.005 58.925 0.005c8.965 0 17.465 2.03 25.075 5.65 0.405 -0.885 1.355 -2.72 2.255 -2.785 1.19 -0.085 1.87 0.685 2.63 1.545 0.77 0.86 2.3 2.145 2.3 2.145s6.965 -2.405 14.775 1.885c7.815 4.29 8.915 5.58 10.45 8.58 0.76 1.505 0.975 4.145 1 6.41a3.98 3.98 0 0 0 -0.35 -0.015c-2.48 0 -4.8 2.275 -4.8 5.4 0 1.315 0.41 2.48 1.075 3.39l-0.05 0.035a7.525 7.525 0 0 0 -0.66 0.05 93.52 93.52 0 0 0 -1.945 -0.71 12.65 12.65 0 0 1 -4.1 -2.36 7.01 7.01 0 0 0 -5.98 -10.56c-1.915 0 -3.65 0.78 -4.91 2.05 -2.36 -1.355 -5.87 -2.41 -12.635 -2.825l-2.035 -0.055c-11.41 0.06 -18.055 1.395 -29.895 6.505 -3.015 1.415 -6.03 3.075 -8.925 5.005 -2.115 1.5 -3.195 3.35 -3.545 5.685a6.63 6.63 0 0 0 6.15 6.865h0.210c6.35 0.3 10.195 9.95 10.315 12.485 0.02 0.25 0.02 0.115 0.015 0.4 -0.16 3.635 -1.85 6.335 -5.44 6.23a6.155 6.155 0 0 1 -4.88 -2.47c-0.315 -0.385 -0.515 -0.86 -0.795 -1.27 -3.33 -5.405 -8.66 -6.80 -13.855 -7.615 -2.19 -0.34 -5.365 -0.61 -6.55 1.25a41.4 41.4 0 0 0 -2.885 15.315c-0.1 25.18 20.205 45.59 45.13 45.59 12.875 0 26.745 -4.76 34.965 -13.5l-0.175 0.15c-8.86 7.365 -23.3 9.705 -30.135 9.705 -21.51 0 -39.09 -16.16 -39.09 -37.89 0 -6.38 1.44 -11.98 4.07 -16.8 2.475 0.915 4.735 2.415 6.4 5.11a1.2 1.2 0 0 0 0.065 0.1050c0.32 0.46 0.555 0.985 0.91 1.42 2.12 2.62 4.405 3.29 6.71 3.4h0.05c2.15 0.065 3.84 -0.6 5.12 -1.71 1.735 -1.5 2.75 -3.95 2.885 -6.91v-0.07c0.01 -0.425 0 -0.265 -0.02 -0.56 -0.12 -1.88 -1.665 -6.59 -4.53 -10.135 -1.33 -1.655 -2.935 -3.035 -4.75 -3.87l0.6 -0.37c3.78 -2.285 11.82 -4.885 22.96 -3.19 5.65 0.865 10.275 2.095 17.415 4.395 8.285 2.67 12.895 6.395 19.27 7.135 0.75 0.085 1.505 0.09 2.25 0.015 2.05 5.645 3.17 11.75 3.17 18.105 0 10.34 -2.95 19.975 -8.055 28.1zm9.735 -61.37s-0.575 1.005 -1.82 1.61c-0.515 0.25 -1.41 -0.375 -2.25 0.5 -1.795 3.63 2.58 6.66 4.615 6.575 2.04 -0.085 3.65 -2.16 3.56 -3.965 -0.085 -2.79 -4.1 -4.72 -4.1 -4.72zm1.17 -7.16c1.275 0 2.31 1.3 2.31 2.9 0 1.6 -1.035 2.9 -2.31 2.9 -1.27 0 -2.3 -1.3 -2.3 -2.9 0 -1.6 1.03 -2.9 2.3 -2.9zm-16.46 -4.755c2.46 0 4.45 2.015 4.45 4.5a4.475 4.475 0 0 1 -4.45 4.49 4.475 4.475 0 0 1 -4.45 -4.495c0 -2.48 1.995 -4.495 4.45 -4.495z" fill="url(#gradient)" stroke-width="5"></path>
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..99d5fbf
--- /dev/null
+++ b/static/favicon.ico
Binary files differ
diff --git a/static/input.css b/static/input.css
index 04d68b7..e1ba37d 100644
--- a/static/input.css
+++ b/static/input.css
@@ -72,14 +72,6 @@ html {
background-size: --value([bg-size]), 128px;
}
-@utility faw-full {
- --fa-width: 100%;
-}
-
-@utility faw-* {
- --fa-width: calc(--value(integer) * var(--spacing));
-}
-
body {
scrollbar-width: thin;
scrollbar-color: var(--color-background-light) var(--color-main-soft);
@@ -405,10 +397,6 @@ form.crossable.htmx-request input {
border-style: inset;
}
-.border-outset {
- border-style: outset;
-}
-
.bg-sidebar {
background-image: var(--squares-and-triangles-background);
background-repeat: var(--squares-and-triangles-background-repeat);
@@ -508,64 +496,42 @@ form.crossable.htmx-request input {
border-radius: 50%;
}
-.themed-button::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: linear-gradient(
- 135deg,
- var(--color-main-light-hard),
- var(--color-main-dark-hard)
- );
- opacity: 0.2;
- z-index: 10;
- content: "";
-}
-
-.themed-button:active::before {
- opacity: 0.4;
-}
-
-.themed-button:hover:not(:active)::before {
- opacity: 0;
-}
-
-.themed-button {
- border-top: var(--border-size) solid var(--color-main-light-hard);
- border-left: var(--border-size) solid var(--color-main-light-hard);
- border-bottom: var(--border-size) solid var(--color-main-dark-hard);
- border-right: var(--border-size) solid var(--color-main-dark-hard);
- position: relative;
- --border-size: 0.5rem;
+.accent-button,
+.accent-button.active:active {
+ --tw-duration: 1500ms;
+ --tw-ease: var(--ease-in-out);
+ --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 10%, transparent);
+ --tw-gradient-position: from 225deg in oklab;
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 10%, transparent);
+ --tw-gradient-via: transparent;
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+ background-image: conic-gradient(var(--tw-gradient-stops));
+ transition-duration: 1500ms;
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+ transition-timing-function: var(--ease-in-out);
}
-.themed-button:active,
-.themed-button.active {
- border-top: var(--border-size) solid var(--color-main-dark-hard);
- border-left: var(--border-size) solid var(--color-main-dark-hard);
- border-bottom: var(--border-size) solid var(--color-main-light-hard);
- border-right: var(--border-size) solid var(--color-main-light-hard);
+.accent-button:hover,
+.accent-button.active:active:hover {
+ cursor: pointer;
+ --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
+ --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
}
-.themed-button:active > *,
-.themed-button.active > * {
- transform: translateY(calc(var(--border-size) / 2));
+.accent-button.active,
+.accent-button:active {
+ --tw-gradient-from: color-mix(in oklab, var(--color-accent-dark) 30%, transparent);
+ --tw-gradient-position: from 45deg in oklab;
+ --tw-gradient-to: color-mix(in oklab, var(--color-accent-dark) 30%, transparent);
+ --tw-gradient-via: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
}
-.themed-button.themed-button-sidebar {
- --border-size: 0.25rem;
- background-image: var(--squares-and-triangles-background);
- background-repeat: var(--squares-and-triangles-background-repeat);
- background-size: calc(
- var(--squares-and-triangles-background-width-coef) * 0.9rem
- )
- calc(var(--squares-and-triangles-background-height-coef) * 0.9rem);
-}
-
-.themed-button.themed-button-like {
- --border-size: 0.2rem;
+.accent-button.active:hover,
+.accent-button:active:hover {
+ --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 70%, transparent);
+ --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 70%, transparent);
+ --tw-gradient-via: color-mix(in oklab, var(--color-accent-dark) 50%, transparent);
}
.custom-svg-marker {
@@ -757,123 +723,6 @@ body[data-theme~="ram"] .leaflet-tile {
filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
}
-@media (min-aspect-ratio: 0.8/1) {
- .ar-gt-0\.8\:mr-6 {
- margin-right: 1.5rem;
- }
-
- .ar-gt-0\.8\:w-fit {
- width: fit-content;
- }
-
- .ar-gt-0\.8\:w-\[100dvh\] {
- width: 100dvh;
- flex-basis: 100dvh;
- }
-
- .ar-gt-0\.8\:min-w-fit {
- min-width: fit-content;
- }
-
- .ar-gt-0\.8\:min-w-1\/10 {
- min-width: 10%;
- }
-
- .ar-gt-0\.8\:max-w-1\/4 {
- max-width: 25%;
- }
-
- .ar-gt-0\.8\:items-center {
- align-items: center;
- }
-}
-
-@media (max-aspect-ratio: 0.8/1) {
- .bg-pattern-body {
- background-size: 10dvh;
- }
-
- .ar-lt-0\.8\:grid {
- display: grid;
- }
-
- .ar-lt-0\.8\:flex-col {
- flex-direction: column;
- }
-
- .ar-lt-0\.8\:flex-row {
- flex-direction: row;
- }
-
- .ar-lt-0\.8\:h-\[8dvh\] {
- height: 8dvh;
- }
-
- .ar-lt-0\.8\:h-\[10dvh\] {
- height: 10dvh;
- }
-
- .ar-lt-0\.8\:h-\[30dvh\] {
- height: 30dvh;
- }
-
- .ar-lt-0\.8\:h-\[90dvh\] {
- height: 90dvh;
- }
-
- .ar-lt-0\.8\:w-\[8dvh\] {
- width: 8dvh;
- }
-
- .ar-lt-0\.8\:w-\[80\%\] {
- width: 80%;
- }
-
- .ar-lt-0\.8\:w-\[90dvw\] {
- width: 90dvw;
- }
-
- .ar-lt-0\.8\:w-\[100dvw\] {
- width: 100dvw;
- }
-
- .ar-lt-0\.8\:max-h-\[30\%\] {
- max-height: 30%;
- }
-
- .ar-lt-0\.8\:max-h-\[80\%\] {
- max-height: 80%;
- }
-
- .ar-lt-0\.8\:max-h-\[92dvh\] {
- max-height: 92dvh;
- }
-
- .ar-lt-0\.8\:text-\[5dvh\] {
- font-size: 5dvh;
- }
-
- .ar-lt-0\.8\:hidden {
- display: none;
- }
-}
-
-@media (min-aspect-ratio: 0.6/1) {
- .ar-gt-0\.6\:flex-3\/5 {
- flex: 60%;
- }
-
- .ar-gt-0\.6\:flex-2\/5 {
- flex: 40%;
- }
-}
-
-@media (max-aspect-ratio: 0.6/1) {
- .ar-lt-0\.6\:flex-col {
- flex-direction: column;
- }
-}
-
.home-page-heart {
position: absolute;
color: var(--color-pink-700);
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index b435402..d787c16 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -24,18 +24,6 @@
/>
<link
rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css"
- />
- <link
- rel="stylesheet"
href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
/>
<link
@@ -55,6 +43,11 @@
type="image/svg+xml"
media="(prefers-color-scheme: dark)"
/>
+ <link
+ rel="icon"
+ href="/favicon.ico"
+ type="image/x-icon"
+ />
{{- with .LinkedData }}
<script type="application/ld+json">
{{ . }}
@@ -318,14 +311,50 @@
switchTheme(savedTheme);
</script>
- <div
- id="general-page-top-embeds"
- class="flex"
- hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
- hx-trigger="load"
- hx-target="this"
- hx-swap="innerHTML"
- ></div>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
+
+ <script>
+ // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
+ var __resetLayout = Packery.prototype._resetLayout;
+ Packery.prototype._resetLayout = function () {
+ __resetLayout.call(this);
+ var parentSize = getSize(this.element.parentNode);
+ var colW = this.columnWidth + this.gutter;
+ this.fitWidth =
+ Math.floor((parentSize.innerWidth + this.gutter) / colW) *
+ colW;
+ this.packer.width = this.fitWidth;
+ this.packer.height = Number.POSITIVE_INFINITY;
+ this.packer.reset();
+ };
+
+ Packery.prototype._getContainerSize = function () {
+ var emptyWidth = 0;
+ for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
+ var space = this.packer.spaces[i];
+ if (
+ space.y === 0 &&
+ space.height === Number.POSITIVE_INFINITY
+ ) {
+ emptyWidth += space.width;
+ }
+ }
+
+ return {
+ width: this.fitWidth - this.gutter - emptyWidth,
+ height: this.maxY - this.gutter,
+ };
+ };
+
+ Packery.prototype.needsResizeLayout = function () {
+ return true;
+ };
+ </script>
+
+ <div id="general-page-top-embeds" class="flex">{{ .RenderedTopEmbeds }}</div>
<div
id="general-page-top-embeds-trigger"
hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -346,9 +375,7 @@
class="flex flex-row w-full h-24 md:flex-col md:w-24 md:h-full bg-paper bg-background shadow-elevation-6 z-2 shrink-0"
>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/..', true);"
href="../"
id="sidebar-back-button"
@@ -357,9 +384,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}');"
href="/{{ .Lang }}"
id="sidebar-home-button"
@@ -368,9 +393,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}/blog');"
href="/{{ .Lang }}/blog"
id="sidebar-blog-button"
@@ -379,9 +402,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="/{{ .Lang }}/map"
id="sidebar-map-button"
draggable="false"
@@ -389,9 +410,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
</a>
<div
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="toggleThemeWheel()"
id="sidebar-theme-button"
draggable="false"
@@ -399,9 +418,7 @@
<svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
</div>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}/user');"
href="/{{ .Lang }}/user"
id="sidebar-user-button"
@@ -434,6 +451,11 @@
);
function updateSidebar() {
+ sidebarHomeButton.classList.remove("active");
+ sidebarMapButton.classList.remove("active");
+ sidebarBlogButton.classList.remove("active");
+ sidebarBackButton.classList.remove("active");
+ sidebarUserButton.classList.remove("active");
if (
location.pathname == "" ||
location.pathname == "/"
@@ -455,6 +477,9 @@
"onclick",
`return changeUrl('/${lang}', false);`,
);
+ if (location.pathname == `/${lang}`) {
+ sidebarHomeButton.classList.add("active");
+ }
sidebarMapButton.setAttribute(
"href",
`/${lang}/map`,
@@ -467,6 +492,9 @@
"onclick",
`return changeUrl('/${lang}/blog', false);`,
);
+ if (location.pathname.startsWith(`/${lang}/blog`)) {
+ sidebarBlogButton.classList.add("active");
+ }
sidebarUserButton.setAttribute(
"href",
`/${lang}/user`,
@@ -475,6 +503,9 @@
"onclick",
`return changeUrl('/${lang}/user', false);`,
);
+ if (location.pathname.startsWith(`/${lang}/user`)) {
+ sidebarUserButton.classList.add("active");
+ }
}
}
window.addEventListener("popstate", updateSidebar);
@@ -485,23 +516,19 @@
</nav>
<div
- class="flex flex-1 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
+ class="flex flex-1 min-h-0 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
>
<div
class="bg-paper bg-background-dark border-r-2 border-dashed border-main-hard"
></div>
<div
- class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative pt-4 pr-0 md:pr-4"
+ class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative md:pt-4 md:pr-4"
>
<header
id="general-page-header"
class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col ml-8 basis-8"
- hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
- hx-trigger="load"
- hx-target="this"
- hx-swap="innerHTML"
- ></header>
+ >{{ .RenderedHeader }}</header>
<div
id="general-page-header-trigger"
hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -516,12 +543,8 @@
<main
id="general-page-body"
- class="relative flex flex-col grow overflow-y-auto"
- hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
- hx-trigger="load"
- hx-target="this"
- hx-swap="innerHTML"
- ></main>
+ class="relative flex-1 overflow-y-auto"
+ >{{ .RenderedBody }}</main>
<div
id="general-page-body-trigger"
hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -533,11 +556,7 @@
<footer
id="general-page-footer"
class="flex flex-row basis-4 my-1"
- hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
- hx-trigger="load"
- hx-target="this"
- hx-swap="innerHTML"
- ></footer>
+ >{{ .RenderedFooter }}</footer>
<div
id="general-page-footer-trigger"
hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -559,57 +578,7 @@
<div class="grow bg-split-right"></div>
- <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
-
- <script>
- // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
- var __resetLayout = Packery.prototype._resetLayout;
- Packery.prototype._resetLayout = function () {
- __resetLayout.call(this);
- var parentSize = getSize(this.element.parentNode);
- var colW = this.columnWidth + this.gutter;
- this.fitWidth =
- Math.floor((parentSize.innerWidth + this.gutter) / colW) *
- colW;
- this.packer.width = this.fitWidth;
- this.packer.height = Number.POSITIVE_INFINITY;
- this.packer.reset();
- };
-
- Packery.prototype._getContainerSize = function () {
- var emptyWidth = 0;
- for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
- var space = this.packer.spaces[i];
- if (
- space.y === 0 &&
- space.height === Number.POSITIVE_INFINITY
- ) {
- emptyWidth += space.width;
- }
- }
-
- return {
- width: this.fitWidth - this.gutter - emptyWidth,
- height: this.maxY - this.gutter,
- };
- };
-
- Packery.prototype.needsResizeLayout = function () {
- return true;
- };
- </script>
-
- <div
- id="general-page-bottom-embeds"
- class="flex"
- hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
- hx-trigger="load"
- hx-target="this"
- hx-swap="innerHTML"
- ></div>
+ <div id="general-page-bottom-embeds" class="flex">{{ .RenderedBottomEmbeds }}</div>
<div
id="general-page-bottom-embeds-trigger"
hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -622,7 +591,6 @@
const themeWheel = document.getElementById("theme-wheel");
const themeButton = document.getElementById("sidebar-theme-button");
const themeIcons = document.querySelectorAll(".theme-icon");
- const themeWheelRadius = convertRemToPixels(6);
themeIcons.forEach((icon) => {
if (icon.getAttribute("data-theme") == savedTheme) {
@@ -651,7 +619,7 @@
const clipPath = createSliceClipPath(
startAngle,
endAngle,
- themeWheelRadius,
+ convertRemToPixels(6),
);
icon.style.clipPath = clipPath;
});
@@ -686,6 +654,7 @@
const buttonRect = themeButton.getBoundingClientRect();
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
+ const themeWheelRadius = convertRemToPixels(6);
const margin = 0;
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 8e1cf72..9c0f7fd 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -55,15 +55,15 @@
<path fill="currentColor" d="M23.2453 20.5533c-0.04 -0.2181 -0.1001 -0.4321 -0.1797 -0.6391 -0.1361 -0.3547 -0.3173 -0.6903 -0.5393 -0.9986 -0.3034 -0.4388 -0.637 -0.8559 -0.9986 -1.2482 -0.5284 -0.5741 -1.0956 -1.1113 -1.6976 -1.6078 -0.8288 -0.679 -1.6976 -1.2981 -2.5763 -1.9971 0.2631 -0.5055 0.4803 -1.0335 0.649 -1.5778 0.248 -0.8172 0.4349 -1.6516 0.5592 -2.4965 0.1569 -0.81258 0.2305 -1.63902 0.2197 -2.46652 -0.0078 -0.57747 -0.1055 -1.1502 -0.2896 -1.6976 -0.1575 -0.4947 -0.3476 -0.97841 -0.5692 -1.44796 -0.1562 -0.33202 -0.347 -0.64665 -0.5691 -0.93868 -0.3781 -0.48797 -0.8217 -0.92146 -1.3182 -1.28818 -0.7357 -0.52062 -1.53 -0.95298 -2.3666 -1.288183 -0.5827 -0.254108 -1.1835 -0.464396 -1.7975 -0.629112 -0.6518 -0.1693231 -1.324 -0.246631 -1.9972 -0.22967613C8.94606 0.0473495 8.12871 0.212165 7.34773 0.491599c-0.76731 0.278516 -1.50629 0.629611 -2.20689 1.048521 -0.60025 0.33964 -1.16553 0.73768 -1.68762 1.18832C1.21637 4.69567 0.757023 8.98961 0.727065 9.45895 0.620124 10.7287 0.804559 12.0061 1.2663 13.1937c0.12146 0.3013 0.26153 0.5948 0.41941 0.8787 0.22968 0.3995 0.48931 0.7889 0.75893 1.1784 0.5038 0.7726 1.12352 1.463 1.83741 2.0471 0.49826 0.396 1.06292 0.7003 1.66765 0.8987 0.69046 0.2254 1.39862 0.3924 2.11701 0.4993 0.49142 0.0823 0.99015 0.1124 1.4879 0.0899 0.77439 -0.05 1.53939 -0.1977 2.27679 -0.4394 0.7156 -0.2507 1.4101 -0.5579 2.0771 -0.9187 0.1351 0.1597 0.2617 0.3264 0.3794 0.4993 0.4294 0.6591 0.769 1.3681 1.1684 1.9972 0.2809 0.4341 0.5877 0.851 0.9187 1.2482 0.3126 0.3904 0.646 0.7638 0.9986 1.1184 0.9711 0.9019 2.1935 1.4871 3.505 1.6777 0.262 0.0471 0.5307 0.0413 0.7904 -0.0169 0.2597 -0.0582 0.5052 -0.1678 0.7219 -0.3222 0.2168 -0.1544 0.4005 -0.3506 0.5404 -0.5771 0.1398 -0.2264 0.233 -0.4785 0.2741 -0.7415 0.0404 -0.1745 0.0704 -0.3512 0.0898 -0.5292 0.0097 -0.1763 0.0097 -0.353 0 -0.5293 0.0036 -0.234 -0.0131 -0.4679 -0.0499 -0.699Zm-1.1584 1.4679c-0.0509 0.2532 -0.1979 0.4768 -0.4102 0.6239 -0.2122 0.1471 -0.4732 0.2062 -0.7282 0.165 -1.0467 -0.1308 -2.0325 -0.5647 -2.836 -1.2482 -0.3522 -0.313 -0.6856 -0.6464 -0.9986 -0.9986 -0.3312 -0.341 -0.6381 -0.7047 -0.9187 -1.0885 -0.4393 -0.6191 -0.8388 -1.3081 -1.2981 -1.9372 -0.1219 -0.1597 -0.2519 -0.313 -0.3895 -0.4594l0.1298 -0.0899c0.2213 -0.1586 0.4315 -0.3321 0.6292 -0.5192 0.0617 -0.0665 0.096 -0.1539 0.096 -0.2447 0 -0.0908 -0.0343 -0.1782 -0.096 -0.2447 -0.0637 -0.0634 -0.1499 -0.099 -0.2397 -0.099 -0.0898 0 -0.176 0.0356 -0.2397 0.099 -0.1708 0.1582 -0.3545 0.3018 -0.5492 0.4294 -0.1917 0.1358 -0.3918 0.2592 -0.5991 0.3695 -0.6447 0.3275 -1.3121 0.6078 -1.9972 0.8388 -0.6937 0.2123 -1.4121 0.3332 -2.13702 0.3595 -0.55091 0.0138 -1.10132 -0.0432 -1.63769 -0.1697 -0.5569 -0.1063 -1.10451 -0.2566 -1.63769 -0.4494 -0.62749 -0.2261 -1.19946 -0.5835 -1.67763 -1.0485 -0.49431 -0.4831 -0.93003 -1.0228 -1.29817 -1.6077 -0.22967 -0.3595 -0.46934 -0.719 -0.67904 -1.1185 -0.13067 -0.2462 -0.24735 -0.4996 -0.34951 -0.7589 -0.38354 -1.05 -0.52354 -2.1734 -0.40942 -3.28536 0.45935 -5.29254 3.14556 -6.55076 3.91448 -6.99014 0.63297 -0.38101 1.30193 -0.69877 1.99718 -0.94867 0.6757 -0.25505 1.38606 -0.40655 2.10703 -0.44936 0.56148 -0.01552 1.12238 0.04495 1.66768 0.17975 0.5643 0.13703 1.1183 0.31389 1.6576 0.52925 0.6401 0.2469 1.2581 0.54755 1.8474 0.89873 0.5688 0.32061 1.076 0.7399 1.4979 1.23825 0.1894 0.23504 0.3534 0.48943 0.4893 0.75893 0.2209 0.42872 0.4111 0.87254 0.5692 1.32813 0.1632 0.46345 0.2607 0.94748 0.2896 1.43797 0.0241 0.77857 -0.026 1.55767 -0.1498 2.32672 -0.0854 0.6722 -0.2088 1.3389 -0.3695 1.9972 -0.1609 0.6599 -0.3954 1.2996 -0.699 1.9073 -0.1608 0.3485 -0.3513 0.6826 -0.5692 0.9986 -0.2143 0.3034 -0.4549 0.5874 -0.719 0.8488 -0.0288 0.0275 -0.052 0.0605 -0.0681 0.097 -0.0161 0.0364 -0.0249 0.0757 -0.0258 0.1156 -0.0019 0.0805 0.0283 0.1585 0.084 0.2168 0.0556 0.0582 0.1321 0.092 0.2126 0.0939 0.0805 0.0019 0.1585 -0.0283 0.2168 -0.0839 0.2935 -0.2844 0.5639 -0.5916 0.8088 -0.9187 0.1099 -0.1498 0.1997 -0.3096 0.2996 -0.4694 0.8088 0.6791 1.6177 1.3182 2.3866 1.9972 0.5434 0.4957 1.0506 1.0297 1.5179 1.5978 0.3133 0.3747 0.6034 0.7682 0.8688 1.1783 0.1584 0.2534 0.2858 0.525 0.3794 0.8088 0.0505 0.1638 0.0905 0.3305 0.1198 0.4993 0.0099 0.1597 0.0099 0.3197 0 0.4794l-0.0599 0.8088Z" stroke-width="1"></path>
</symbol>
</svg>
-<div class="flex flex-row ar-lt-0.8:flex-col text-base h-full">
- <div class="relative flex shrink-0 ar-gt-0.8:min-w-1/10 ar-gt-0.8:max-w-1/4 ar-gt-0.8:w-fit ar-lt-0.8:w-full ar-lt-0.8:max-h-[30%]">
+<div class="flex md:flex-row flex-col text-base h-full">
+ <div class="relative flex shrink-0 w-full max-h-[30%] md:min-w-1/10 md:max-w-1/4 md:max-h-full md:h-full md:w-fit">
<div class="absolute w-full h-full inset-shadow-[0_0_0.4rem_black] pointer-events-none z-20"></div>
<form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
class="tags-list relative flex flex-col w-full bg-paper bg-background-light">
<div class="flex flex-col overflow-y-auto">
<fieldset>
<legend class="font-bold w-full text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
- <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
+ <div class="md:flex flex-col grid grid-cols-3 grid-rows-2 grid-flow-col">
<div>
<label class="flex justify-start gap-1 items-center">
<input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" class="bg-accent-light border-transparent text-accent-deep focus:border-transparent focus:bg-accent-light focus:ring-1 focus:ring-offset-2 focus:ring-accent-deep" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}>
@@ -110,7 +110,7 @@
</fieldset>
<fieldset class="mt-1">
<legend class="font-bold w-full text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
- <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense">
+ <div class="md:flex flex-col grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense">
<div class="m-1">
<label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();" class="bg-accent-light rounded border-transparent text-accent-deep focus:border-transparent focus:bg-background-dark focus:ring-1 focus:ring-offset-2 focus:ring-accent-deep"> {{ .L.BlogSearch.ChooseAllTags }}</label>
</div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 8978eb8..d8cfbff 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,7 +1,10 @@
{{ define "body" }}
<div class="absolute w-full h-full inset-0 inset-shadow-[0_0_0.4rem_black] pointer-events-none z-20"></div>
<article class="relative bg-paper bg-background-light flex flex-col px-8 py-4 overflow-y-auto">
- <h1 class="max-xs:block [@media(max-height:32rem)]:block hidden font-gentium text-2xl font-bold italic text-main-hard tracking-[.0125rem] mb-1">{{ .Title }}</h1>
+ <h1 class="max-xs:flex flex-row content-center [@media(max-height:32rem)]:block hidden font-gentium text-2xl font-bold italic text-main-hard tracking-[.0125rem] mb-1">
+ <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
+ {{ .Title }}
+ </h1>
<p class="block grow text-lg font-gentium text-secondary">
<b>{{ .L.Metadata.Published }}</b>:
<time datetime="{{ .PublishedDate }}" hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load">
@@ -14,16 +17,16 @@
{{ .ParsedMarkdown }}
{{- if .MapLocationX }}
<hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
- <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
+ <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[80%] lg:w-[60%] h-[30dvh] md:h-[40dvh]"></div>
<hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
<script>
function initLocationMap(id, x, y, relativeErrorMeters = 0) {
map = L.map(id).setView([x, y], 8);
- L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+ L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
- attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
}).addTo(map);
if (relativeErrorMeters != 0) {
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 53e6448..1501111 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -20,18 +20,6 @@
rel="stylesheet"
href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css"
/>
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css"
- />
{{ block "header" . }}{{ end }}
<link rel="stylesheet" href="/output.css" />
<link
@@ -47,6 +35,11 @@
media="(prefers-color-scheme: dark)"
/>
<link
+ rel="icon"
+ href="/favicon.ico"
+ type="image/x-icon"
+ />
+ <link
rel="stylesheet"
href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
/>
@@ -165,9 +158,7 @@
class="fixed flex flex-row w-full h-24 md:flex-col md:w-24 md:h-auto bg-paper bg-background shadow-elevation-6 z-1001 shrink-0 md:rounded-br-md"
>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="./"
id="sidebar-back-button"
draggable="false"
@@ -175,9 +166,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="/{{ .Lang }}"
id="sidebar-home-button"
draggable="false"
@@ -185,9 +174,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="/{{ .Lang }}/blog"
id="sidebar-blog-button"
draggable="false"
@@ -195,9 +182,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- bg-conic-45 from-accent-dark/30 via-accent-light/50 to-accent-dark/30 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/70 hover:via-accent-dark/50 hover:to-accent-light/70"
+ class="w-18 h-18 rounded-xl m-3 accent-button active"
href="/{{ .Lang }}/map"
id="sidebar-map-button"
draggable="false"
@@ -205,9 +190,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
</a>
<div
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="toggleThemeWheel()"
id="sidebar-theme-button"
draggable="false"
@@ -215,9 +198,7 @@
<svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
</div>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="/{{ .Lang }}/user"
id="sidebar-user-button"
draggable="false"
@@ -413,9 +394,9 @@
function initLocationMap() {
map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4);
- L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+ L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
- attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
zoomControl: false
}).addTo(map);
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index b14b08c..6e026aa 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -1,7 +1,25 @@
{{ define "body" }}
+<!-- Streamline Icons: https://streamlinehq.com -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+ <symbol id="icon-discord" viewBox="0 0 24 24"><g>
+ <path d="M23.8 8.8A10.45 10.45 0 0 0 20 3 13 13 0 0 0 13.59 0.4c-0.14 0 -6 -1 -9.79 2.77C1.67 5.32 0.56 8.65 0.15 11.77A15.3 15.3 0 0 0 0 14.71a8.77 8.77 0 0 0 3.46 6.44 13.74 13.74 0 0 0 4 2 13.55 13.55 0 0 0 1.91 0.52 5.32 5.32 0 0 0 1.41 0.11 16.63 16.63 0 0 0 6.12 -1.57A12.19 12.19 0 0 0 21.75 18a14.6 14.6 0 0 0 1.87 -4.4 10.74 10.74 0 0 0 0.18 -4.8Zm-1.19 4.56a13.31 13.31 0 0 1 -1.77 4.05 11 11 0 0 1 -4.43 3.73 15.5 15.5 0 0 1 -5.71 1.47 4.07 4.07 0 0 1 -1.13 -0.09 13.63 13.63 0 0 1 -1.76 -0.47 13.06 13.06 0 0 1 -3.68 -1.75 7.87 7.87 0 0 1 -2.5 -3.08A7.75 7.75 0 0 1 1 14.63a14.11 14.11 0 0 1 0 -2.75c0.32 -3 1.29 -6.15 3.27 -8.23 0.1 -0.11 2.84 -3.36 9.2 -2.5a12.09 12.09 0 0 1 5.95 2.53A9.47 9.47 0 0 1 22.86 9a9.56 9.56 0 0 1 -0.25 4.36Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M20.27 11.06c-0.33 -0.59 -0.74 -1.14 -1.08 -1.69a16.78 16.78 0 0 0 -1.4 -2 6 6 0 0 0 -1.27 -1.17A6.34 6.34 0 0 0 14 5.36a31.12 31.12 0 0 0 -3.83 -0.08 12.94 12.94 0 0 0 -3 0.18c-1.41 0.35 -0.76 0.32 -2 2.72 -0.57 0.89 -1.02 1.82 -1.49 2.72a11.42 11.42 0 0 0 -0.77 1.39 1.65 1.65 0 0 0 -0.1 0.82 2.77 2.77 0 0 0 0.45 1.15 8.92 8.92 0 0 0 1.08 1.27l1.09 1.29a3.51 3.51 0 0 0 0.29 0.37 0.47 0.47 0 0 0 0.42 0.15 2 2 0 0 0 1.16 -0.62 12.55 12.55 0 0 0 1.49 -2c0.06 -0.08 0.36 -0.36 0.37 -0.52l0.93 0.11 2.91 0c1.31 0.09 0.41 -0.77 1.77 1.78a9.19 9.19 0 0 0 0.52 0.85 5.71 5.71 0 0 0 0.53 0.81 0.67 0.67 0 0 0 0.39 0.19 1.49 1.49 0 0 0 0.74 -0.11 5 5 0 0 0 1 -0.67 11.91 11.91 0 0 0 1.52 -1.42 13 13 0 0 0 1.28 -1.64 1.47 1.47 0 0 0 0.25 -0.77 3.09 3.09 0 0 0 -0.16 -0.94 6.06 6.06 0 0 0 -0.57 -1.33Zm-0.38 2.43A12.53 12.53 0 0 1 18.7 15a11.92 11.92 0 0 1 -1.4 1.28 5 5 0 0 1 -0.57 0.42l-0.14 0.08a2.55 2.55 0 0 0 -0.38 -0.48 6.07 6.07 0 0 1 -0.45 -0.74c-0.35 -0.64 -0.64 -1.32 -1 -1.95a0.73 0.73 0 0 0 -0.48 -0.31 11.39 11.39 0 0 0 -1.22 -0.09h-2.95c-0.21 0 -0.69 -0.1 -1 -0.1a1.13 1.13 0 0 0 -0.45 0.08 0.88 0.88 0 0 0 -0.34 0.29c-0.14 0.19 -0.28 0.53 -0.35 0.63a19.39 19.39 0 0 1 -1.11 1.72 1.93 1.93 0 0 1 -0.59 0.53l-0.11 -0.09L5 14.93a10 10 0 0 1 -1 -1.12 1.94 1.94 0 0 1 -0.41 -0.81 1.11 1.11 0 0 1 0.11 -0.64c0.17 -0.4 0.45 -0.79 0.62 -1.14 0.45 -0.91 0.87 -1.84 1.33 -2.75 1.29 -2.53 1.18 -2.29 2 -2.41a14.57 14.57 0 0 1 2.46 0 28 28 0 0 1 3.71 0.16A5.33 5.33 0 0 1 16 7a5.08 5.08 0 0 1 1 1 16.3 16.3 0 0 1 1.27 1.93c0.33 0.55 0.72 1.11 1 1.69a5.1 5.1 0 0 1 0.48 1.1 2.36 2.36 0 0 1 0.1 0.53 0.43 0.43 0 0 1 0.04 0.24Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M7.15 8.26a1.44 1.44 0 0 0 -0.51 0.6 1.56 1.56 0 0 0 0.14 1.48A1.49 1.49 0 0 0 8.2 11a1.77 1.77 0 0 0 1.38 -1.42c0.27 -1.69 -1.45 -1.94 -2.43 -1.32Zm1.53 1.11a0.71 0.71 0 0 1 -0.6 0.53 0.44 0.44 0 0 1 -0.41 -0.2 0.65 0.65 0 0 1 -0.19 -0.54 0.68 0.68 0 0 1 0.21 -0.37c0.75 -0.55 1.17 0.02 0.99 0.58Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M15 8a1.38 1.38 0 0 0 -0.77 -0.21 2.68 2.68 0 0 0 -1 0.25 3.12 3.12 0 0 0 -0.72 1 1.65 1.65 0 0 0 0.55 1.53 1.6 1.6 0 0 0 1.69 0.38 1.71 1.71 0 0 0 0.89 -1.47A1.65 1.65 0 0 0 15 8Zm-0.37 1.4a0.62 0.62 0 0 1 -0.3 0.53 0.36 0.36 0 0 1 -0.27 0 1.28 1.28 0 0 1 -0.4 -0.25c-0.15 -0.14 -0.3 -0.29 -0.28 -0.47a0.45 0.45 0 0 1 0.17 -0.34 2.73 2.73 0 0 1 0.53 -0.29 0.57 0.57 0 0 1 0.39 0.14 0.74 0.74 0 0 1 0.2 0.69Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ </g></symbol>
+ <symbol id="icon-telegram" viewBox="0 0 24 24"><g>
+ <path d="M23.8 9.74a10.54 10.54 0 0 0 -3.1 -5.5c-1.25 -1.19 -7.2 -6 -13.52 -3.12a12 12 0 0 0 -4.56 18.49 12.24 12.24 0 0 0 2.66 2.53 9.1 9.1 0 0 0 3.43 1.45c3.79 0.74 7.9 -0.75 10.9 -3.38s5.03 -6.67 4.19 -10.47Zm-4.87 9.68c-2.78 2.38 -6.54 3.78 -10 3.09a8.18 8.18 0 0 1 -3 -1.27 11.8 11.8 0 0 1 -2.44 -2.3 11 11 0 0 1 -2.25 -9.53 11.25 11.25 0 0 1 6.24 -7.66C8.17 1.42 12.94 -0.79 19 3.84a10 10 0 0 1 3.91 6.08c0.74 3.49 -1.1 7.08 -3.98 9.5Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M17.5 6.52a8 8 0 0 0 -2.14 0.35l-0.78 0.13c-1.67 0.31 -3.36 0.63 -5 1 -1.11 0.28 -2.21 0.59 -3.29 1a5.12 5.12 0 0 0 -0.65 0.25 4.6 4.6 0 0 0 -0.64 0.34l-0.61 0.4 -0.39 0.34a0.93 0.93 0 0 0 -0.24 1.09C4 12 5 12.34 5.49 12.48l0.53 0.17 0.15 0 0 0.81 0 1 0.08 0.74 0.06 0.53A8.91 8.91 0 0 0 6.53 17a1.4 1.4 0 0 0 0.42 0.71H7a0.3 0.3 0 0 0 0.34 0.22A13.32 13.32 0 0 0 9 17.8a5.35 5.35 0 0 0 0.69 -0.17c0.23 -0.07 0.45 -0.15 0.67 -0.24 0.49 -0.19 0.94 -0.41 1.4 -0.63l0.58 0.56 0.66 0.47 0.52 0.23a1.08 1.08 0 0 0 1 -0.19 4.55 4.55 0 0 0 0.92 -1.51l1.4 -2.92c0.38 -0.76 0.78 -1.51 1.15 -2.28 0.25 -0.52 0.48 -1 0.68 -1.59A3.92 3.92 0 0 0 19 8.2a1.73 1.73 0 0 0 -0.31 -1.08 1.51 1.51 0 0 0 -1.19 -0.6ZM6.88 13.44l-0.07 -0.58c0.46 0 0.49 -0.43 5.26 -1.84l0.62 -0.16A16.71 16.71 0 0 1 11.34 12c-0.74 0.57 -1.51 1.12 -2.26 1.69l-0.46 0.52 -0.69 1.49s-0.22 0.44 -0.4 0.82c-0.07 -0.36 -0.1 -0.74 -0.14 -0.91l-0.12 -0.54 -0.19 -0.7Zm3.14 3c-0.23 0.05 -0.46 0.1 -0.68 0.17l-0.66 0.21 -0.27 0.12c0.07 -0.25 0.26 -0.76 0.31 -0.93 0.12 -0.36 0.35 -1.18 0.48 -1.5a0.3 0.3 0 0 0 0 -0.23s0.07 0 0.11 0l1.81 2c-0.35 -0.02 -0.72 0.04 -1.12 0.13Zm7.83 -8.08a3.2 3.2 0 0 1 -0.22 0.82c-0.14 0.39 -0.3 0.77 -0.46 1.14 -0.4 0.9 -0.83 1.79 -1.24 2.68l-1.31 2.95a6 6 0 0 1 -0.55 1.15 0.34 0.34 0 0 1 -0.36 0.16l-0.35 -0.14 -0.57 -0.38 -1 -0.91 -1.86 -1.93c0.78 -0.49 1.56 -1 2.32 -1.48 0.4 -0.27 0.8 -0.55 1.17 -0.85 0.2 -0.17 0.41 -0.34 0.59 -0.52a2.16 2.16 0 0 0 0.36 -0.51 2.52 2.52 0 0 0 0.14 -0.56 0.54 0.54 0 0 0 -0.51 -0.55 1.06 1.06 0 0 0 -0.24 0 3.54 3.54 0 0 0 -0.47 0.12l-1.51 0.45c-0.58 0.19 -1.14 0.38 -1.69 0.6 -1.27 0.5 -2.49 1.07 -3.78 1.55l-0.09 0 -0.53 -0.18a3.39 3.39 0 0 1 -1.22 -0.65c-0.11 -0.11 -0.11 -0.26 0.06 -0.43l0.3 -0.25 0.52 -0.32 1.16 -0.52c1.08 -0.32 2.17 -0.58 3.26 -0.8 1.66 -0.35 3.33 -0.62 5 -0.89l0.81 -0.16a10 10 0 0 1 1.6 -0.32c0.23 0 0.46 0 0.57 0.14a0.76 0.76 0 0 1 0.1 0.56Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ </g></symbol>
+ <symbol id="icon-email" viewBox="0 0 24 24"><g>
+ <path d="M23.58 5.09a2.73 2.73 0 0 0 -0.71 -1.43 4.24 4.24 0 0 0 -1.62 -0.34 99 99 0 0 0 -11.89 0.07C5.34 3.65 1.7 4.18 0.55 5a1.12 1.12 0 0 0 -0.35 0.68A25.75 25.75 0 0 0 0 9.6a93.2 93.2 0 0 0 0.5 10.09 0.31 0.31 0 1 0 0.61 -0.11c-0.15 -0.95 -0.29 -4 -0.31 -7.11A56 56 0 0 1 1 6.36c1.64 1.1 4.88 3.25 7.53 4.69l1.46 0.72a7.13 7.13 0 0 0 2.53 0.82 3.16 3.16 0 0 0 1.14 -0.42 8.38 8.38 0 0 0 0.79 -0.48l1.44 -1c0.34 -0.25 0.67 -0.49 1 -0.77A44.32 44.32 0 0 0 22.32 5c0 0.11 0.07 0.24 0.1 0.38a24.38 24.38 0 0 1 0.41 4.75 65 65 0 0 1 -0.36 8.17c0 0.22 -0.07 0.45 -0.1 0.58l-0.69 0c-1.79 0.18 -5.6 0.46 -9.48 0.7 -4.39 0.27 -8.86 0.5 -10.56 0.54a0.35 0.35 0 0 0 -0.35 0.35 0.36 0.36 0 0 0 0.36 0.35c2.27 0 9.45 -0.29 14.83 -0.58 2.56 -0.13 4.71 -0.27 5.73 -0.37a2.73 2.73 0 0 0 0.86 -0.19 0.6 0.6 0 0 0 0.24 -0.3 4.17 4.17 0 0 0 0.22 -0.94A65.86 65.86 0 0 0 24 10.1a26 26 0 0 0 -0.42 -5.01Zm-6.33 3.28c-1.23 0.92 -2.48 1.78 -3.44 2.36a4.31 4.31 0 0 1 -1.36 0.67 3.75 3.75 0 0 1 -1.27 -0.4c-0.9 -0.37 -2.06 -0.94 -3.29 -1.59C5.34 8.1 2.52 6.49 1.13 5.68c1.18 -0.69 4.57 -1 8.29 -1.2a106 106 0 0 1 11.74 0h0.62a38.87 38.87 0 0 1 -4.53 3.89Z" fill="var(--color-main)" stroke-width="1"></path>
+ <path d="M17.68 14.41c0.34 0.33 0.69 0.65 1 0.95 1 0.93 2 1.74 2.46 2.19a0.36 0.36 0 0 0 0.5 0 0.35 0.35 0 0 0 0 -0.5c-0.43 -0.51 -1.23 -1.46 -2.18 -2.49q-0.48 -0.51 -1 -1c-0.34 -0.33 -0.69 -0.66 -1 -1s-0.81 -0.68 -1.19 -1c-0.69 -0.47 -1.2 0 -0.71 0.59 0.34 0.37 0.71 0.78 1.12 1.2s0.66 0.73 1 1.06Z" fill="var(--color-accent-deep)" stroke-width="1"></path>
+ <path d="M4.59 15.35a39.94 39.94 0 0 0 -2.94 3.25 0.35 0.35 0 1 0 0.53 0.46c0.59 -0.6 1.69 -1.51 2.89 -2.58 0.63 -0.57 1.29 -1.17 1.9 -1.79s1.42 -1.52 2 -2.21 -0.14 -1 -0.82 -0.39c-0.52 0.46 -1.08 0.94 -1.67 1.47s-1.28 1.19 -1.89 1.79Z" fill="var(--color-accent-deep)" stroke-width="1"></path>
+ </g></symbol>
+</svg>
<div class="absolute w-full h-full inset-0 inset-shadow-[0_0_0.4rem_black] pointer-events-none z-20"></div>
-<div class="relative bg-paper bg-background-light font-gentium flex flex-row ar-lt-0.6:flex-col w-full h-full overflow-y-auto text-base/loose tracking-wide z-10">
- <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-8">
+<div class="relative bg-paper bg-background-light font-gentium flex flex-col sm:flex-row w-full h-full overflow-y-auto text-base/loose tracking-wide z-10">
+ <div class="sm:flex-3/5 justify-center content-start p-8">
<div class="flex flex-col justify-start items-start bg-paper bg-background-dark mb-8 shadow-[0.4rem_0.4rem_0.4rem_black]">
<p class="text-3xl/loose sm:text-4xl/loose lg:text-5xl/loose tracking-widest uppercase w-full font-m-plus font-thin italic text-left
border-l-4 border-solid border-background-dark
@@ -25,24 +43,24 @@
</div>
</div>
- <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-8">
+ <div class="sm:flex-2/5 justify-center content-start p-8">
<div class="flex flex-col justify-center items-start mb-4">
<p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-m-plus font-thin italic text-left
border-l-1.5 border-solid border-background-dark
bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.Contacts }}</p>
<hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
<a href="https://t.me/EarlInisMona">
- <i class="fa-brands fa-telegram faw-4 h-4 mr-1"></i>
+ <svg class="w-4 h-4 mr-1 inline" viewBox="0 0 24 24"><use href="#icon-telegram"/></svg>
<span class="font-bold">Telegram:</span>
<span>@EarlInisMona</span>
</a>
<a href="https://discord.com/users/356057270951346176">
- <i class="fa-brands fa-discord faw-4 h-4 mr-1"></i>
+ <svg class="w-4 h-4 mr-1 inline" viewBox="0 0 24 24"><use href="#icon-discord"/></svg>
<span class="font-bold">Discord:</span>
<span>montferrat</span>
</a>
<a href="mailto:saya.andy@posteo.com">
- <i class="fas fa-envelope faw-4 h-4 mr-1"></i>
+ <svg class="w-4 h-4 mr-1 inline" viewBox="0 0 24 24"><use href="#icon-email"/></svg>
<span class="font-bold">E-mail:</span>
<span>saya.andy@posteo.com</span>
</a>
diff --git a/views/pages/unsubscribe-page.html b/views/pages/unsubscribe-page.html
index a917746..9a78488 100644
--- a/views/pages/unsubscribe-page.html
+++ b/views/pages/unsubscribe-page.html
@@ -16,6 +16,11 @@
type="image/svg+xml"
media="(prefers-color-scheme: dark)"
/>
+ <link
+ rel="icon"
+ href="/favicon.ico"
+ type="image/x-icon"
+ />
<title>{{ .L.UnsubscribePage.Header }} // SAYA.UZ</title>
<style>
.bg-paper {
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index d8238f4..54b2914 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,5 +1,28 @@
<button hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
- class="themed-button themed-button-like flex flex-col shrink-0 w-fit h-fit mr-2 my-auto{{ if .Liked }} active{{ end }}">
- <i class="fas fa-thumbs-up faw-8 h-fit py-0.5 content-center text-center"></i>
- <div class="h-fit px-0.5 content-center bg-background-medium text-main-hard">{{ .LikedCount }}</div>
-</button> \ No newline at end of file
+ class="accent-button rounded-xl flex flex-row shrink-0 w-fit h-full mx-2 my-auto{{ if .Liked }} active{{ end }}">
+ {{ if .Liked }}
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Like-Hand-1--Streamline-Freehand" class="h-10">
+ <desc>
+ Like Hand 1 Streamline Icon: https://streamlinehq.com
+ </desc>
+ <g>
+ <path d="M18.36 11a4.26 4.26 0 0 0 -3 -0.92 22.21 22.21 0 0 0 -3.72 0.43c0 -0.69 0.05 -1.76 0 -2.69a4.77 4.77 0 0 0 -0.31 -1.56 1.73 1.73 0 0 0 -2 -1 2.13 2.13 0 0 0 -1.69 1.29 17.51 17.51 0 0 1 -2.3 4.14c-0.77 1 -1.56 1.83 -2.17 1.89a1.68 1.68 0 0 0 -0.12 -0.31A2 2 0 0 0 2 11.52a4.67 4.67 0 0 0 -1.7 -0.21 0.3 0.3 0 0 0 -0.28 0.32 0.3 0.3 0 0 0 0.32 0.28 3.71 3.71 0 0 1 1.17 0.22 1.31 1.31 0 0 1 0.81 0.55 7.78 7.78 0 0 1 0.17 1.68c0 0.54 0 1.14 0.06 1.78 0 0.88 0.07 1.82 0.1 2.66s0.06 1.82 0 2.35c0 0.17 -0.08 0.34 -0.06 0.39a2.1 2.1 0 0 1 -0.91 0.36 2.74 2.74 0 0 1 -1.21 0 0.34 0.34 0 0 0 -0.22 0.65 3.61 3.61 0 0 0 1.54 0.11 2.85 2.85 0 0 0 1.53 -0.58 1.4 1.4 0 0 0 0.24 -0.72 31.22 31.22 0 0 0 0.14 -4.27c0 -0.82 -0.09 -1.64 -0.17 -2.36s-0.15 -1.15 -0.23 -1.57a5.48 5.48 0 0 0 2.56 -2.06 18 18 0 0 0 2.55 -4.26 1.32 1.32 0 0 1 1 -0.77 0.88 0.88 0 0 1 1 0.51 4.12 4.12 0 0 1 0.18 1.24c0 1.09 -0.08 2.38 0 3a1.39 1.39 0 0 0 0.12 0.57 0.55 0.55 0 0 0 0.51 0.27 4 4 0 0 0 0.52 -0.06 18.17 18.17 0 0 1 4.26 -0.36 2.45 2.45 0 0 1 1.57 0.55c0.85 0.9 1.31 3 1.4 5s-0.18 4.15 -1.05 5 -2.57 1.05 -4.37 1.21a12 12 0 0 1 -4.67 -0.46C8 22.1 6.71 21.39 5.6 21a3.82 3.82 0 0 0 -1.66 -0.27 0.34 0.34 0 0 0 -0.3 0.38 0.34 0.34 0 0 0 0.36 0.29 3.15 3.15 0 0 1 1.34 0.27c1.09 0.41 2.33 1.14 3.2 1.54a14.07 14.07 0 0 0 6 0.58 7.25 7.25 0 0 0 4 -1.28c1 -1 1.55 -3.37 1.46 -5.78S19.34 12 18.36 11Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M0.37 6c0.31 0 0.82 0.13 1.41 0.17H2v0.1c0.06 0.68 0.15 1.25 0.17 1.46a0.34 0.34 0 0 0 0.68 0C2.84 7.54 3 7 3 6.27l0 -0.15c0.64 -0.08 1.16 -0.2 1.25 -0.18a0.34 0.34 0 0 0 0.43 -0.22 0.32 0.32 0 0 0 -0.21 -0.42 7 7 0 0 0 -1.46 -0.24V5c-0.07 -0.67 -0.2 -1.24 -0.24 -1.47a0.31 0.31 0 0 0 -0.31 -0.3 0.29 0.29 0 0 0 -0.29 0.3C2.17 3.78 2 4.34 2 5l-0.2 0a10.33 10.33 0 0 0 -1.43 0.32 0.3 0.3 0 0 0 -0.27 0.33 0.3 0.3 0 0 0 0.27 0.35Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M23.77 10.81a5.83 5.83 0 0 0 -1.25 -0.25c-0.1 -0.39 -0.24 -0.71 -0.29 -0.92a0.3 0.3 0 1 0 -0.6 0c0 0.2 -0.11 0.53 -0.15 0.91a8.85 8.85 0 0 0 -1.2 0.31 0.29 0.29 0 0 0 -0.26 0.33 0.3 0.3 0 0 0 0.32 0.27c0.3 0 0.7 0.13 1.17 0.18h0.07c0.09 0.44 0.22 0.81 0.25 1a0.34 0.34 0 1 0 0.68 0 8.85 8.85 0 0 0 0.14 -1.08c0.47 -0.07 0.84 -0.17 0.93 -0.15a0.34 0.34 0 0 0 0.22 -0.65Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M13.94 4.33a2.57 2.57 0 0 1 1.43 0.88 4.52 4.52 0 0 1 1 1.54 0.57 0.57 0 0 0 0.56 0.37 0.57 0.57 0 0 0 0.53 -0.41 2.81 2.81 0 0 1 1 -1.41 6.9 6.9 0 0 1 1.69 -1 0.49 0.49 0 0 0 0.31 -0.43 0.5 0.5 0 0 0 -0.24 -0.47 8.18 8.18 0 0 1 -2.26 -1.47 2.39 2.39 0 0 1 -0.71 -1.46 0.34 0.34 0 0 0 -0.34 -0.34 0.35 0.35 0 0 0 -0.34 0.35 0.29 0.29 0 0 0 -0.27 0.23 4.41 4.41 0 0 1 -1 1.63 3.53 3.53 0 0 1 -1.48 1 0.47 0.47 0 0 0 -0.32 0.5 0.48 0.48 0 0 0 0.44 0.49Zm2 -1.47a5.53 5.53 0 0 0 0.82 -1.44 3.34 3.34 0 0 0 0.59 1 6.91 6.91 0 0 0 1.53 1.3 5.93 5.93 0 0 0 -1.48 1 6.91 6.91 0 0 0 -0.51 0.57 4.8 4.8 0 0 0 -0.7 -0.85 4 4 0 0 0 -1 -0.74 5.76 5.76 0 0 0 0.71 -0.84Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ </g>
+ </svg>
+ <div class="ml-auto bg-accent-light rounded-full w-6 h-6 text-main">{{ .LikedCount }}</div>
+ {{ else }}
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Like-Hand--Streamline-Freehand" class="h-10">
+ <desc>
+ Like Hand Streamline Icon: https://streamlinehq.com
+ </desc>
+ <g>
+ <path d="M24 14.66c-0.1 -2.79 -0.84 -5.58 -2 -6.82a5 5 0 0 0 -3.59 -1.08 27.12 27.12 0 0 0 -4.58 0.54 1.27 1.27 0 0 1 0 -0.2c0 -0.82 0.06 -2.11 0 -3.23a5.56 5.56 0 0 0 -0.4 -1.87A2 2 0 0 0 11.16 0.87a2.51 2.51 0 0 0 -1.94 1.55 20.45 20.45 0 0 1 -2.79 5C5.52 8.64 5 9.45 4.22 9.58c-0.37 0.13 -0.11 0.56 0.22 0.45C5.27 9.81 6 9.12 7 7.85a21.68 21.68 0 0 0 3 -5.14 1.66 1.66 0 0 1 1.3 -1 1.15 1.15 0 0 1 1.28 0.67 4.82 4.82 0 0 1 0.23 1.52c0 1.31 -0.08 2.87 -0.06 3.61a1.57 1.57 0 0 0 0.14 0.63 0.58 0.58 0 0 0 0.53 0.28 5 5 0 0 0 0.58 -0.06 22.31 22.31 0 0 1 5.15 -0.43 3 3 0 0 1 2 0.7c1.05 1.1 1.61 3.6 1.72 6.08s-0.23 5.07 -1.3 6.11c-0.91 0.88 -3.09 1.3 -5.29 1.43a14.43 14.43 0 0 1 -5.66 -0.57c-1.07 -0.47 -2.61 -1.33 -3.95 -1.8a4.56 4.56 0 0 0 -2 -0.33 0.34 0.34 0 0 0 -0.29 0.38 0.34 0.34 0 0 0 0.38 0.3 3.7 3.7 0 0 1 1.64 0.32c1.32 0.49 2.82 1.37 3.86 1.85 1.4 0.65 4.49 0.93 7.24 0.68 2 -0.19 3.87 -0.71 4.74 -1.52 1.26 -1.17 1.85 -4.02 1.76 -6.9Z" fill="var(--color-main)" fill-rule="evenodd" stroke-width="1"></path>
+ <path d="M3.53 9.34a2.22 2.22 0 0 0 -1.24 -0.88 5.37 5.37 0 0 0 -2 -0.26 0.3 0.3 0 0 0 -0.29 0.31 0.3 0.3 0 0 0 0.32 0.29 4.36 4.36 0 0 1 1.44 0.25 1.74 1.74 0 0 1 1 0.69A9.16 9.16 0 0 1 3 11.8c0 0.64 0.06 1.38 0.09 2.14 0 1.07 0.08 2.2 0.11 3.22s0.06 2.19 0 2.84c0 0.23 -0.12 0.45 -0.07 0.51A2.7 2.7 0 0 1 2 21a3.34 3.34 0 0 1 -1.49 0 0.34 0.34 0 0 0 -0.22 0.65 4.22 4.22 0 0 0 1.82 0.13 3.37 3.37 0 0 0 1.79 -0.69 1.82 1.82 0 0 0 0.26 -0.82 37.13 37.13 0 0 0 0.14 -5.13c0 -1 -0.1 -2 -0.19 -2.83a12.48 12.48 0 0 0 -0.58 -2.97Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
+ </g>
+ </svg>
+ <div class="ml-auto bg-accent-deep rounded-full w-6 h-6 text-background">{{ .LikedCount }}</div>
+ {{ end }}
+</button>
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 995ebf3..3b8a6c8 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,9 +1,9 @@
<title>{{ .Title }} // SAYA.UZ</title>
<div class="flex flex-row mb-2">
{{ block "header" . }}{{ end }}
- <p
+ <h1
class="text-4xl font-m-plus font-bold italic text-shadow-[0_2px_2px_var(--color-main-soft)] text-left my-auto"
>
{{ .Title }}
- </p>
+ </h1>
</div>