Diffstat (limited to 'static/input.css')
| -rw-r--r-- | static/input.css | 163 |
1 files changed, 23 insertions, 140 deletions
diff --git a/static/input.css b/static/input.css index d03764b..d766049 100644 --- a/static/input.css +++ b/static/input.css @@ -10,25 +10,25 @@ html { font-size: 12px; } -@media screen and (min-width: 640px) and (min-height: 640px) { +@media screen and (width >= 640px) { html { font-size: 14px; } } -@media screen and (min-width: 900px) and (min-height: 900px) { +@media screen and (width >= 1200px) { html { font-size: 16px; } } -@media screen and (min-width: 1400px) and (min-height: 1400px) { +@media screen and (width >= 1920px) { html { font-size: 20px; } } -@media screen and (min-width: 1920px) and (min-height: 1920px) { +@media screen and (width >= 2560px) { html { font-size: 24px; } @@ -122,12 +122,12 @@ html { --squares-and-triangles-background-height-coef: 15; } -a, .linklike { +a { color: var(--main-medium-color) !important; text-decoration: underline; } -a:hover, .linklike:hover { +a:hover { color: var(--main-light-color) !important; } @@ -239,16 +239,17 @@ a:hover, .linklike: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) * 0.8rem) calc(var(--squares-and-triangles-background-height-coef) * 0.8rem); + background-size: calc(var(--squares-and-triangles-background-width-coef) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw); } .logo-custom { - width: 3.5rem; - height: 20rem; - font-size: 2.5rem; - -webkit-text-stroke: 0.1rem var(--sidebar-stroke-color); + width: 3.5dvw; + height: 20dvw; + font-size: 2.5dvw; + -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color); writing-mode: sideways-lr; text-orientation: mixed; + display: block; } .inset-shadow { @@ -290,15 +291,15 @@ a:hover, .linklike:hover { .theme-icon { position: absolute; - width: 4rem; - height: 4rem; + width: 4vmax; + height: 4vmax; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; - border: 0.1rem inset var(--background-light-color); + border: 0.1vmax inset var(--background-light-color); background: var(--interlocked-hexagons-background); background-size: contain; } @@ -309,7 +310,7 @@ a:hover, .linklike:hover { .theme-icon.active { transform: scale(1.2); - border: 0.3rem outset var(--main-light-color); + border: 0.3vmax outset var(--main-light-color); } .custom-svg-marker { @@ -326,148 +327,26 @@ a:hover, .linklike: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: 15; -} - -.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%; -} - -@container main (width >= 32rem) { +@media (width >= 32rem) { .grid-item, .grid-sizer { width: 33%; } - - .grid-item-2x { - width: 66%; - } } -@container main (width >= 48rem) { +@media (width >= 40rem) { .grid-item, .grid-sizer { width: 25%; } - - .grid-item-2x { - width: 50%; - } } -@container main (width >= 64rem) { +@media (width >= 48rem) { .grid-item, .grid-sizer { width: 20%; } - - .grid-item-2x { - width: 40%; - } -} - -.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; } .map-container .leaflet-container { @@ -520,6 +399,10 @@ body[data-theme~="ram"] .leaflet-tile { background-color: var(--background-light-color); } + .logo-custom { + display: none; + } + .bg-pattern-body { background-size: 10dvh; } |