diff options
| -rw-r--r-- | static/input.css | 130 | ||||
| -rw-r--r-- | views/layouts/general-page.html | 14 | ||||
| -rw-r--r-- | views/pages/global-map.html | 14 |
3 files changed, 95 insertions, 63 deletions
diff --git a/static/input.css b/static/input.css index 110e5fd..1eb5ae1 100644 --- a/static/input.css +++ b/static/input.css @@ -46,14 +46,21 @@ html { } [data-theme="olive"] { - --main-hard-color: #4b513a; - --main-medium-color: #8a9d8a; - --main-soft-color: #a5b8a5; - --background-dark-color: #ffffdd; - --background-medium-color: var(--background-dark-color); - --background-light-color: #fffff0; + --main-dark-color-hard: #4b513a; + --main-dark-color-medium: #8a9d8a; + --main-dark-color-soft: #a5b8a5; + --main-light-color-soft: #ffffdd; + --main-light-color-medium: var(--background-dark-color); + --main-light-color-hard: #fffff0; + --main-hard-color: var(--main-dark-color-hard); + --main-medium-color: var(--main-dark-color-medium); + --main-soft-color: var(--main-dark-color-soft); + --background-dark-color: var(--main-light-color-soft); + --background-medium-color: var(--main-light-color-medium); + --background-light-color: var(--main-light-color-hard); + --sidebar-text-color: var(--main-hard-color); --sidebar-text-color: var(--background-dark-color); - --sidebar-stroke-color: var(--main-hard-color); + --sidebar-stroke-color: var(--main-dark-color-hard); --secondary-color: var(--main-soft-color); --leaflet-text-color: var(--main-hard-color); --leaflet-link-color: var(--main-medium-color); @@ -68,14 +75,20 @@ html { } [data-theme="lettuce"] { - --main-hard-color: #384a0c; - --main-medium-color: #9bb665; - --main-soft-color: #bbd095; - --background-dark-color: #f5eee2; - --background-medium-color: var(--background-dark-color); - --background-light-color: #fff9ef; + --main-dark-color-hard: #384a0c; + --main-dark-color-medium: #9bb665; + --main-dark-color-soft: #bbd095; + --main-light-color-soft: #f5eee2; + --main-light-color-medium: var(--background-dark-color); + --main-light-color-hard: #fff9ef; + --main-hard-color: var(--main-dark-color-hard); + --main-medium-color: var(--main-dark-color-medium); + --main-soft-color: var(--main-dark-color-soft); + --background-dark-color: var(--main-light-color-soft); + --background-medium-color: var(--main-light-color-medium); + --background-light-color: var(--main-light-color-hard); --sidebar-text-color: var(--main-hard-color); - --sidebar-stroke-color: var(--background-dark-color); + --sidebar-stroke-color: var(--main-dark-color-hard); --secondary-color: var(--main-medium-color); --leaflet-text-color: var(--main-hard-color); --leaflet-link-color: var(--main-medium-color); @@ -90,14 +103,20 @@ html { } [data-theme="night"] { - --main-hard-color: var(--color-sky-100); - --main-medium-color: var(--color-sky-200); - --main-soft-color: var(--color-sky-300); - --background-dark-color: #13131b; - --background-medium-color: var(--background-dark-color); - --background-light-color: #222230; + --main-light-color-hard: var(--color-sky-100); + --main-light-color-medium: var(--color-sky-200); + --main-light-color-soft: var(--color-sky-300); + --main-dark-color-hard: #13131b; + --main-dark-color-medium: var(--background-dark-color); + --main-dark-color-soft: #222230; + --main-hard-color: var(--main-light-color-hard); + --main-medium-color: var(--main-light-color-medium); + --main-soft-color: var(--main-light-color-soft); + --background-dark-color: var(--main-dark-color-hard); + --background-medium-color: var(--main-dark-color-medium); + --background-light-color: var(--main-dark-color-soft); --sidebar-text-color: var(--main-hard-color); - --sidebar-stroke-color: var(--background-light-color); + --sidebar-stroke-color: var(--main-light-color-soft); --secondary-color: var(--main-soft-color); --leaflet-text-color: var(--background-dark-color); --leaflet-link-color: var(--background-dark-color); @@ -112,14 +131,20 @@ html { } [data-theme="ram"] { - --main-hard-color: #fefad8; - --main-medium-color: #f6e4c5; - --main-soft-color: #e8d4b8; - --background-dark-color: #413b34; - --background-medium-color: #62584f; - --background-light-color: #6d6258; + --main-light-color-hard: #fefad8; + --main-light-color-medium: #f6e4c5; + --main-light-color-soft: #e8d4b8; + --main-dark-color-hard: #413b34; + --main-dark-color-medium: #62584f; + --main-dark-color-soft: #6d6258; + --main-hard-color: var(--main-light-color-hard); + --main-medium-color: var(--main-light-color-medium); + --main-soft-color: var(--main-light-color-soft); + --background-dark-color: var(--main-dark-color-hard); + --background-medium-color: var(--main-dark-color-medium); + --background-light-color: var(--main-dark-color-soft); --sidebar-text-color: var(--main-hard-color); - --sidebar-stroke-color: var(--background-light-color); + --sidebar-stroke-color: var(--main-light-color-soft); --secondary-color: var(--main-soft-color); --leaflet-text-color: var(--background-dark-color); --leaflet-link-color: var(--background-dark-color); @@ -134,14 +159,20 @@ html { } [data-theme="lilac"] { - --main-hard-color: #343b58; - --main-medium-color: #414868; - --main-soft-color: #6c6e75; - --background-dark-color: #c3caff; - --background-medium-color: #d1d6ff; - --background-light-color: #e3e6ff; + --main-dark-color-hard: #343b58; + --main-dark-color-medium: #414868; + --main-dark-color-soft: #6c6e75; + --main-light-color-hard: #e3e6ff; + --main-light-color-medium: #d1d6ff; + --main-light-color-soft: #c3caff; + --main-hard-color: var(--main-dark-color-hard); + --main-medium-color: var(--main-dark-color-medium); + --main-soft-color: var(--main-dark-color-soft); + --background-dark-color: var(--main-light-color-hard); + --background-medium-color: var(--main-light-color-medium); + --background-light-color: var(--main-light-color-soft); --sidebar-text-color: var(--main-hard-color); - --sidebar-stroke-color: var(--background-light-color); + --sidebar-stroke-color: var(--main-light-color-hard); --secondary-color: var(--main-medium-color); --leaflet-text-color: var(--main-hard-color); --leaflet-link-color: var(--main-medium-color); @@ -227,11 +258,11 @@ form.crossable.htmx-request input { } .text-sidebar { - color: var(--sidebar-text-color); -} - -.stroke-sidebar { - border-color: var(--sidebar-stroke-color); + color: var(--main-dark-color-soft); + text-shadow: -0.2rem 0 var(--main-dark-color-hard), 0 -0.2rem var(--main-dark-color-hard), 0.2rem 0rem var(--main-light-color-soft), 0 0.2rem var(--main-light-color-soft); + -webkit-text-stroke-color: var(--sidebar-stroke-color); + -webkit-text-stroke-width: 0.1rem; + background: linear-gradient(135deg, color-mix(in srgb, var(--main-light-color-soft) 20%, transparent), color-mix(in srgb, var(--main-dark-color-soft) 20%, transparent)); } .text-main-hard { @@ -416,7 +447,7 @@ form.crossable.htmx-request input { left: 0; width: 100%; height: 100%; - background: linear-gradient(135deg, #fff, #000); + background: linear-gradient(135deg, var(--main-light-color-hard), var(--main-dark-color-hard)); opacity: 0.2; z-index: 1; content: ""; @@ -434,18 +465,19 @@ form.crossable.htmx-request input { 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); - border-top: 0.3rem solid #fff; - border-left: 0.3rem solid #fff; - border-bottom: 0.3rem solid #000; - border-right: 0.3rem solid #000; + border-top: 0.3rem solid var(--main-light-color-hard); + border-left: 0.3rem solid var(--main-light-color-hard); + border-bottom: 0.3rem solid var(--main-dark-color-hard); + border-right: 0.3rem solid var(--main-dark-color-hard); + position: relative; } .toolbar-button:active { - border-top: 0.3rem solid #000; - border-left: 0.3rem solid #000; - border-bottom: 0.3rem solid #fff; - border-right: 0.3rem solid #fff; + border-top: 0.3rem solid var(--main-dark-color-hard); + border-left: 0.3rem solid var(--main-dark-color-hard); + border-bottom: 0.3rem solid var(--main-light-color-hard); + border-right: 0.3rem solid var(--main-light-color-hard); } .toolbar-button:active > * { diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index f9a30ef..5dce2cf 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -174,24 +174,24 @@ <div class="flex flex-col [@media(max-height:32rem)]:flex-row"> <div id="sidebar" class="bg-sidebar flex sticky flex-col z-20 w-dvw xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] [@media(max-height:32rem)]:w-fit h-fit [@media(max-height:32rem)]:h-dvh shadow-[0_0_1rem_black]"> - <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20"> + <div class="text-[3rem] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20"> <a href="./" id="sidebar-back-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> - <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg select-none"></i> + <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}" id="sidebar-home-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> - <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg select-none"></i> + <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> - <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg select-none"></i> + <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> - <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg select-none"></i> + <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false"> - <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg select-none"></i> + <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i> </div> <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> - <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg select-none"></i> + <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i> </a> </div> <div class="theme-wheel" id="theme-wheel"> diff --git a/views/pages/global-map.html b/views/pages/global-map.html index c13a5f4..8961aab 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -43,24 +43,24 @@ </script> <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto"> - <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col gap-0 relative z-1001"> + <div class="text-[3rem] flex flex-col gap-0 relative z-1001"> <a href="./" class="toolbar-button w-fit h-fit" draggable="false"> - <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}" class="toolbar-button w-fit h-fit" draggable="false"> - <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}/blog" class="toolbar-button w-fit h-fit" draggable="false"> - <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <a href="/{{ .Lang }}/map" class="toolbar-button w-fit h-fit" draggable="false"> - <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i> </a> <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false"> - <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> + <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i> </div> <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit" draggable="false"> - <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i> </a> </div> <div class="theme-wheel" id="theme-wheel"> |