Fix that sidebar

This commit is contained in:
augustin64 2023-06-24 15:37:03 +02:00
parent 78f229211a
commit 1cb8d45960
2 changed files with 9 additions and 14 deletions

View File

@ -11,9 +11,4 @@
#content-container { #content-container {
overflow: hidden; overflow: hidden;
} }
/* calc(var(--sidebar-size) - 20px) seems not to be working so I'm hardcoding this.. */
#settings-container {
width: calc(75vw - 20px);
}
} }

View File

@ -1,4 +1,4 @@
@import url('https://www.augustin64.fr/static/font/iosevka.css'); /** @import url('https://www.augustin64.fr/static/font/iosevka.css'); */
/** Color Schemes */ /** Color Schemes */
@ -34,7 +34,7 @@
--color-mantle: #181825; --color-mantle: #181825;
--color-crust: #11111b; --color-crust: #11111b;
--font-family: Iosevka Web; /* --font-family: Iosevka Web; /* Specify the font here */
} }
/* Light theme: Catppuccin Latte */ /* Light theme: Catppuccin Latte */
@ -72,8 +72,9 @@
/** Various settings (variables) */ /** Various settings (variables) */
:root { :root {
/*--sidebar-size: max(10vw, 160px);*/ --sidebar-size: max(10vw, 160px);
--sidebar-size: 200px; --sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
--sidebar-sz-moins20: calc(var(--sidebar-size) - 20px);
} }
* { * {
@ -192,7 +193,7 @@ input:checked#slide-sidebar~label {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: 20px; top: 20px;
left: calc(var(--sidebar-size) + 10px); left: var(--sidebar-sz-plus10);
background-color: var(--color-base); background-color: var(--color-base);
-moz-transition: left 0.5s ease; -moz-transition: left 0.5s ease;
@ -325,7 +326,7 @@ img.partition-thumbnail {
#albums { #albums {
overflow: scroll; overflow: scroll;
height: 70vh; height: calc(100% - 375px); /* we don't want it hidden behind settings */
padding: 0 5px; padding: 0 5px;
} }
@ -367,8 +368,7 @@ img.partition-thumbnail {
bottom: 0; bottom: 0;
background-color: var(--color-base); background-color: var(--color-base);
width: 180px; width: var(--sidebar-sz-moins20);
/*TODO width: calc(var-(--sidebar-size) - 20px); ?*/
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
@ -538,7 +538,7 @@ input[type="file"] {
/** Dangerous buttons */ /** Dangerous buttons */
button#logout:hover, button#logout:hover,
a#delete-album:hover, a#delete-album:hover,
button#delete-partition { #delete-partition {
background-color: var(--color-red); background-color: var(--color-red);
color: var(--color-mantle); color: var(--color-mantle);
} }