456 lines
No EOL
14 KiB
CSS
456 lines
No EOL
14 KiB
CSS
/* ╭──────────────────────────────────────╮
|
|
/ │ _ │
|
|
/ │ _ __ __ ___ _| |__ __ _ _ __ │
|
|
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
|
|
/ │ | | | | (_| |\ V /| |_) | (_| | | │
|
|
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
|
|
/ ╰──────────────────────────────────────╯
|
|
/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
|
|
|
|
.navbar {
|
|
align-content: center;
|
|
color: var(--foreground);
|
|
display: flex;
|
|
flex-direction: row;
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
height: 1.8rem;
|
|
max-height: 1.8rem !important;
|
|
padding: .4rem .6rem .4rem .6rem;
|
|
position: fixed;
|
|
transition: .2s background-color;
|
|
vertical-align: middle;
|
|
z-index: 100;
|
|
|
|
navbar-left {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
gap: .5rem;
|
|
}
|
|
|
|
navbar-right {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
gap: .5rem;
|
|
margin-left: auto;
|
|
margin-right: .7rem;
|
|
}
|
|
|
|
.nav-base {
|
|
align-content: center;
|
|
border-radius: 1rem;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
height: 1.9rem;
|
|
outline: .13rem solid var(--border);
|
|
overflow: hidden;
|
|
padding: 0px .2em !important;
|
|
text-decoration: unset !important;
|
|
}
|
|
|
|
.nav-baselink {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
|
|
.synth-icon {
|
|
height: 2rem;
|
|
margin-right: 1rem;
|
|
pointer-events: none;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
|
|
transition: .2s ease-out;
|
|
width: 2rem;
|
|
}
|
|
|
|
&:hover, &:focus-visible {
|
|
.synth-icon {
|
|
transition: .2s ease-out;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: none;
|
|
position: relative;
|
|
|
|
input[type="checkbox"] {
|
|
left: -100vw;
|
|
position: absolute;
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-radius: 1rem;
|
|
border: var(--accent) solid .15rem;
|
|
height: max-content;
|
|
left: 0;
|
|
margin-top: 2.2rem !important;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
width: max-content;
|
|
|
|
/* inital "hidden" state, used for providing animation when activated */
|
|
opacity: 0;
|
|
scale: .5;
|
|
transform-origin: top left;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
|
|
li {
|
|
border-radius: 1rem;
|
|
list-style-type: none;
|
|
margin: .5rem .5rem .5rem -1.9rem;
|
|
overflow: clip;
|
|
padding: .7rem;
|
|
transition: .2s all;
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
text-shadow: unset;
|
|
}
|
|
|
|
.icon {
|
|
padding-right: .3em;
|
|
transition: .2s all;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
transition: .2s all;
|
|
|
|
.icon {
|
|
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
|
|
transition: .2s all;
|
|
}
|
|
}
|
|
|
|
.nav-home:hover,
|
|
.nav-home:focus-visible {
|
|
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.nav-notebook:hover,
|
|
.nav-home:focus-visible {
|
|
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.nav-services:hover,
|
|
.nav-services:focus-visible {
|
|
background-color: color-mix(in srgb, var(--blue) 20%, transparent);
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.nav-webmaster:hover,
|
|
.nav-home:focus-visible {
|
|
background-color: color-mix(in srgb, var(--green) 20%, transparent);
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.nav-donate:hover,
|
|
.nav-home:focus-visible {
|
|
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]:checked~ul {
|
|
/* makes the menu visibile when activated and makes it appear from the top right */
|
|
opacity: 1;
|
|
scale: 1;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.nav-links {
|
|
align-items: center;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
overflow: clip;
|
|
padding: 0 .4rem !important;
|
|
text-shadow: none;
|
|
transition: all .3s;
|
|
|
|
span {
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition: all .3s;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
icon-tabler {
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
|
|
.nav-links {
|
|
&:hover, &:focus-visible {
|
|
padding-right: 9rem !important;
|
|
padding-bottom: 7rem !important;
|
|
transition: .3s;
|
|
|
|
span {
|
|
opacity: 1;
|
|
transform: scale(1.5) translateX(.7rem) translateY(.1rem);
|
|
transition: .3s;
|
|
}
|
|
|
|
icon-tabler {
|
|
transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-home:hover, .nav-home:focus-visible {
|
|
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
}
|
|
|
|
.nav-notebook:hover, .nav-notebook:focus-visible {
|
|
background-color: color-mix(in srgb, var(--purple) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(0rem);
|
|
}
|
|
}
|
|
|
|
.nav-services:hover, .nav-services:focus-visible {
|
|
background-color: color-mix(in srgb, var(--blue) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(0rem);
|
|
}
|
|
}
|
|
|
|
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
|
background-color: color-mix(in srgb, var(--green) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(-.2rem);
|
|
}
|
|
}
|
|
|
|
.nav-donate:hover, .nav-donate:focus-visible {
|
|
background-color: color-mix(in srgb, var(--pink) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--pink) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(-.2rem);
|
|
}
|
|
}
|
|
|
|
.nav-settings {
|
|
input[type="checkbox"]#nav-settings-menu {
|
|
left: -100vw;
|
|
position: absolute;
|
|
}
|
|
|
|
input[type="checkbox"]#nav-settings-menu:focus-visible {
|
|
left: unset !important;
|
|
}
|
|
|
|
label[data-toggle="nav-settings"] {
|
|
cursor: pointer;
|
|
align-items: center;
|
|
|
|
icon-tabler {
|
|
padding: 0 .4rem !important;
|
|
pointer-events: none;
|
|
transform: scale(1.3);
|
|
transition: 1.3s;
|
|
}
|
|
|
|
&:hover, &:focus-visible {
|
|
icon-tabler {
|
|
transform: scale(1.3) rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(input[type="checkbox"]#nav-settings-menu:checked) {
|
|
label[data-toggle="nav-settings"] {
|
|
background-color: var(--red);
|
|
outline-color: color-mix(in srgb, var(--red) 70%, transparent);
|
|
icon-tabler[settings] {
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-systray {
|
|
align-items: center;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
gap: .2rem;
|
|
margin-right: .4rem !important;
|
|
padding: 0 .4rem !important;
|
|
}
|
|
|
|
small {
|
|
opacity: .7;
|
|
}
|
|
|
|
svg {
|
|
color: var(--foreground) !important;
|
|
}
|
|
}
|
|
|
|
.navbar:hover {
|
|
transition: .2s all;
|
|
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
border-bottom: solid .2rem var(--accent);
|
|
}
|
|
|
|
/* different styling for elements in dark mode
|
|
must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
|
|
html:not([data-theme="light"]) {
|
|
@media (prefers-color-scheme: dark) {
|
|
.navbar {
|
|
.nav-home:hover, .nav-home:focus-visible {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
.nav-notebook:hover, .nav-notebook:focus-visible {
|
|
background-color: var(--purple);
|
|
color: var(--background);
|
|
}
|
|
.nav-services:hover, .nav-services:focus-visible {
|
|
background-color: var(--blue);
|
|
color: var(--background);
|
|
}
|
|
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
|
background-color: var(--green);
|
|
color: var(--background);
|
|
}
|
|
.nav-donate:hover,.nav-donate:focus-visible {
|
|
background-color: var(--pink);
|
|
color: var(--background);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
.navbar {
|
|
.nav-home:hover, .nav-home:focus-visible {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
.nav-notebook:hover, .nav-notebook:focus-visible {
|
|
background-color: var(--purple);
|
|
color: var(--background);
|
|
}
|
|
.nav-services:hover, .nav-services:focus-visible {
|
|
background-color: var(--blue);
|
|
color: var(--background);
|
|
}
|
|
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
|
background-color: var(--green);
|
|
color: var(--background);
|
|
}
|
|
.nav-donate:hover, .nav-donate:focus-visible {
|
|
background-color: var(--pink);
|
|
color: var(--background);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* modify widths and spacing depending on the size of the display */
|
|
@media screen and (max-width: 35rem) {
|
|
.navbar {
|
|
.nav-desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: inline-flex !important;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-settings {
|
|
span {
|
|
padding: 0 .4rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme="light"]) {
|
|
.navbar .nav-mobile-menu ul {
|
|
.nav-home:hover a, .nav-home:focus-visible a {
|
|
color: var(--accent);
|
|
}
|
|
.nav-notebook:hover a, .nav-notebook:focus-visible a {
|
|
color: var(--purple);
|
|
}
|
|
.nav-services:hover a, .nav-services:focus-visible a {
|
|
color: var(--blue);
|
|
}
|
|
.nav-webmaster:hover a, .nav-webmaster:focus-visible a {
|
|
color: var(--green);
|
|
}
|
|
.nav-donate:hover a, .nav-donate:focus-visible a {
|
|
color: var(--pink);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
.navbar .nav-mobile-menu ul {
|
|
.nav-home:hover a, .nav-home:focus-visible a {
|
|
color: var(--accent);
|
|
}
|
|
.nav-notebook:hover a, .nav-notebook:focus-visible a {
|
|
color: var(--purple);
|
|
}
|
|
.nav-services:hover a, .nav-services:focus-visible a {
|
|
color: var(--blue);
|
|
}
|
|
.nav-webmaster:hover a, .nav-webmaster:focus-visible a {
|
|
color: var(--green);
|
|
}
|
|
.nav-donate:hover a, .nav-donate:focus-visible a {
|
|
color: var(--pink);
|
|
}
|
|
}
|
|
}
|
|
} |