1 files changed, 165 insertions, 36 deletions

diff --git a/static/input.css b/static/input.css
index 8080d13..c308796 100644
--- a/static/input.css
+++ b/static/input.css
@@ -10,25 +10,25 @@ html {
     font-size: 12px;
 }
 
-@media screen and (width >= 640px) {
+@media screen and (min-width: 640px) and (min-height: 640px) {
     html {
         font-size: 14px;
     }
 }
 
-@media screen and (width >= 1200px) {
+@media screen and (min-width: 900px) and (min-height: 900px) {
     html {
         font-size: 16px;
     }
 }
 
-@media screen and (width >= 1920px) {
+@media screen and (min-width: 1400px) and (min-height: 1400px) {
     html {
         font-size: 20px;
     }
 }
 
-@media screen and (width >= 2560px) {
+@media screen and (min-width: 1920px) and (min-height: 1920px) {
     html {
         font-size: 24px;
     }
@@ -122,12 +122,12 @@ html {
     --squares-and-triangles-background-height-coef: 15;
 }
 
-a {
+a, .linklike {
     color: var(--main-medium-color) !important;
     text-decoration: underline;
 }
 
-a:hover {
+a:hover, .linklike:hover {
     color: var(--main-light-color) !important;
 }
 
@@ -239,17 +239,16 @@ a:hover {
 .bg-sidebar {
     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) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw);
+    background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem);
 }
 
 .logo-custom {
-    width: 3.5dvw;
-    height: 20dvw;
-    font-size: 2.5dvw;
-    -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color);
+    width: 3.5rem;
+    height: 20rem;
+    font-size: 2.5rem;
+    -webkit-text-stroke: 0.1rem var(--sidebar-stroke-color);
     writing-mode: sideways-lr;
     text-orientation: mixed;
-    display: block;
 }
 
 .inset-shadow {
@@ -269,13 +268,10 @@ a:hover {
 
 .theme-wheel {
     position: fixed;
-    width: 15vmax;
-    height: 15vmax;
+    width: 12rem;
+    height: 12rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color);
     border-radius: 50%;
-    background: var(--background-light-color);
-    opacity: 0.8;
-    border: 1vmax outset var(--background-dark-color);
-    box-shadow: 0 0 5vmax var(--main-light-color);
     opacity: 0;
     visibility: hidden;
     transform: scale(0.5);
@@ -291,26 +287,56 @@ a:hover {
 
 .theme-icon {
     position: absolute;
-    width: 4vmax;
-    height: 4vmax;
-    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     transition: all 0.3s ease;
-    border: 0.1vmax inset var(--background-light-color);
+    color: white;
     background: var(--interlocked-hexagons-background);
-    background-size: contain;
+    background-size: 100% 100%;
+    font-size: 1.5rem;
 }
 
 .theme-icon:hover {
-    transform: scale(1.2);
+    filter: brightness(1.2);
+}
+
+.theme-icon i {
+    position: absolute;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+    z-index: 1;
 }
 
 .theme-icon.active {
-    transform: scale(1.2);
-    border: 0.3vmax outset var(--main-light-color);
+    filter: brightness(1.3);
+}
+
+.theme-icon.active::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.25);
+    pointer-events: none;
+    clip-path: inherit;
+}
+
+.theme-pin {
+    position: relative;
+    background: color-mix(in srgb, var(--main-light-color) 75%, transparent);
+    box-shadow: 0rem 0rem 1rem var(--main-dark-color);
+    border: 0.5rem solid color-mix(in srgb, var(--main-light-color) 90%, transparent);
+    backdrop-filter: blur(2px);
+    top: 35%;
+    left: 35%;
+    width: 30%;
+    height: 30%;
+    z-index: 1002;
+    border-radius: 50%;
 }
 
 .custom-svg-marker {
@@ -327,15 +353,79 @@ a:hover {
     transform: scale(1.1);
 }
 
+.grid-tooltip {
+    position: relative;
+    display: inline-block;
+    box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color);
+    transition: box-shadow 0.5s ease-in-out;
+}
+
+.grid-tooltip:hover {
+    box-shadow: none;
+}
+
+.grid-tooltip-text {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.5s;
+    width: 100%;
+    top: 100%;
+    background-color: var(--background-dark-color);
+    color: var(--main-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    margin-top: 0.25rem;
+    border-radius: 0.5rem;
+    position: absolute;
+    z-index: 1001;
+}
+
+.grid-tooltip:hover .grid-tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.grid-tooltip-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -0.25rem;
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent var(--background-dark-color) transparent;
+}
+
 .grid-item, .grid-sizer {
+    position: relative;
+    display: inline-block;
     width: 50%;
 }
 
+.grid-item-index {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s;
+    top: 0%;
+    left: 0%;
+    background-color: var(--main-light-color);
+    color: var(--background-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    position: absolute;
+    z-index: 14;
+}
+
+.grid-item:hover .grid-item-index {
+    visibility: hidden;
+    opacity: 0;
+}
+
 .grid-item-2x {
     width: 100%;
 }
 
-@media (width >= 32rem) {
+@container main (width >= 32rem) {
     .grid-item, .grid-sizer {
         width: 33%;
     }
@@ -345,7 +435,7 @@ a:hover {
     }
 }
 
-@media (width >= 40rem) {
+@container main (width >= 56rem) {
     .grid-item, .grid-sizer {
         width: 25%;
     }
@@ -355,7 +445,7 @@ a:hover {
     }
 }
 
-@media (width >= 48rem) {
+@container main (width >= 96rem) {
     .grid-item, .grid-sizer {
         width: 20%;
     }
@@ -365,6 +455,49 @@ a:hover {
     }
 }
 
+.goverlay {
+    background: color-mix(in srgb, var(--background-light-color) 50%, transparent) !important;
+    backdrop-filter: blur(1rem);
+}
+
+.glightbox-clean .gslide-description {
+    background: color-mix(in srgb, var(--background-dark-color) 50%, transparent) !important;
+    backdrop-filter: blur(1rem);
+}
+
+.glightbox-clean .gslide-title {
+    font-family: var(--font-spectral) !important;
+    font-weight: 600 !important;
+    color: var(--main-light-color) !important;
+    padding-bottom: 1rem !important;
+    margin-bottom: 0 !important;
+}
+
+.glightbox-clean .gslide-desc {
+    font-size: 1rem !important;
+    font-family: var(--font-spectral) !important;
+    font-weight: 400;
+    color: var(--main-medium-color) !important;
+}
+
+.glightbox-mobile .glightbox-container .gslide-description {
+    padding: 0 !important;
+}
+
+.glightbox-clean .gdesc-inner {
+    padding: 1rem 1rem !important;
+}
+
+.glightbox-container .ginner-container {
+    height: 100dvh !important;
+}
+
+.gslide-description {
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
+
 .map-container .leaflet-container {
     width: 100% !important;
     height: 100% !important;
@@ -415,10 +548,6 @@ body[data-theme~="ram"] .leaflet-tile {
         background-color: var(--background-light-color);
     }
 
-    .logo-custom {
-        display: none;
-    }
-
     .bg-pattern-body {
         background-size: 10dvh;
     }