513 lines
No EOL
16 KiB
CSS
513 lines
No EOL
16 KiB
CSS
/* ╭──────────────────────────────────────╮
|
|
/ │ _ │
|
|
/ │ _ __ __ ___ _| |__ __ _ _ __ │
|
|
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
|
|
/ │ | | | | (_| |\ V /| |_) | (_| | | │
|
|
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
|
|
/ ╰──────────────────────────────────────╯
|
|
/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
|
|
|
|
.navbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-height: 1.8em !important;
|
|
max-width: 100%;
|
|
min-height: 1.8em !important;
|
|
min-width: 100%;
|
|
position: fixed;
|
|
top: 0 !important;
|
|
padding: .4rem 0 .4rem 0;
|
|
z-index: 100;
|
|
|
|
align-content: center;
|
|
color: var(--foreground);
|
|
vertical-align: middle;
|
|
|
|
transition: .2s background-color;
|
|
|
|
.nav-base {
|
|
padding: 0px .2em !important;
|
|
align-content: center;
|
|
outline: .13rem solid var(--border);
|
|
border-radius: 1rem;
|
|
height: 1.9rem;
|
|
}
|
|
|
|
.nav-left {
|
|
margin-left: .6rem !important;
|
|
padding: 0px .5rem .1rem !important;
|
|
text-decoration: unset !important;
|
|
}
|
|
|
|
.nav-baselink {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
margin-left: .4rem !important;
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
padding: .13rem;
|
|
|
|
.synth-icon {
|
|
height: 2rem;
|
|
margin-right: 1rem;
|
|
pointer-events: none;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
|
|
transition: all .2s ease-out;
|
|
width: 2rem;
|
|
}
|
|
}
|
|
|
|
.nav-baselink:hover, .nav-baselink:focus-visible {
|
|
.synth-icon {
|
|
transition: all .2s ease-out;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
|
|
}
|
|
}
|
|
|
|
.nav-desktop {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: none;
|
|
}
|
|
|
|
.nav-links {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
overflow: clip;
|
|
position: relative;
|
|
text-shadow: none;
|
|
transition: all .3s;
|
|
|
|
.text {
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition: all .3s;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.icon {
|
|
transform: scale(1.1);
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
|
|
.nav-links:hover, .nav-links:focus-visible {
|
|
padding-right: 9rem !important;
|
|
padding-bottom: 7rem !important;
|
|
transition: all .3s;
|
|
|
|
.text {
|
|
opacity: 1;
|
|
transform: scale(1.5) translateX(-.4rem);
|
|
transition: all .3s;
|
|
}
|
|
|
|
.icon {
|
|
transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
|
|
transition: all .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-right {
|
|
padding: 0px .5rem .1rem !important;
|
|
margin-right: .6rem !important;
|
|
}
|
|
|
|
.nav-settings {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
cursor: pointer;
|
|
margin-left: auto !important;
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
|
|
|
|
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;
|
|
overflow: hidden !important;
|
|
padding: .3rem .5rem !important;
|
|
position: relative;
|
|
|
|
.icon {
|
|
padding: 0 .5rem !important;
|
|
pointer-events: none;
|
|
transform: translateY(.1rem) scale(1.5);
|
|
transition: all 1.3s;
|
|
}
|
|
}
|
|
|
|
label[data-toggle="nav-settings"]:hover ,label[data-toggle="nav-settings"]:focus-visible {
|
|
.icon {
|
|
transform: translateY(.1rem) scale(1.5) rotate(360deg);
|
|
transition: all 1.3s;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-radius: 1rem;
|
|
border: var(--accent) solid .15rem;
|
|
cursor: initial !important; /* reset the cursor otherwise it uses the pointer cursor */
|
|
margin-top: 1.2rem !important;
|
|
max-height: 27rem;
|
|
max-width: 17rem;
|
|
min-height: 27rem;
|
|
min-width: 17rem;
|
|
overflow: scroll;
|
|
position: absolute;
|
|
right: .4rem;
|
|
visibility: hidden;
|
|
|
|
/* inital "hidden" state, used for providing animation when activated */
|
|
opacity: 0;
|
|
scale: .5;
|
|
transform-origin: top right;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
|
|
li {
|
|
border-radius: 1rem;
|
|
color: var(--foreground);
|
|
list-style-type: none;
|
|
margin-left: -2rem;
|
|
padding: .4rem;
|
|
|
|
span {
|
|
padding: .1rem 0px .1rem 0px !important;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]#nav-settings-menu: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-systray {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
padding: 0px .1rem;
|
|
min-width: 6.45rem;
|
|
margin-right: .4rem !important;
|
|
}
|
|
|
|
a,
|
|
p {
|
|
margin: unset !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: 1083px) {
|
|
.navbar {
|
|
.nav-desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: inline-block !important;
|
|
max-width: 3rem;
|
|
min-width: 3rem;
|
|
position: relative;
|
|
|
|
input[type="checkbox"] {
|
|
left: -100vw;
|
|
position: absolute;
|
|
}
|
|
|
|
label {
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
left: -.5rem;
|
|
margin-right: .1rem;
|
|
max-height: 2rem;
|
|
max-width: 3rem;
|
|
min-height: 2rem;
|
|
min-width: 3rem;
|
|
overflow: hidden !important;
|
|
padding-right: 1rem;
|
|
position: relative;
|
|
|
|
.synth-icon {
|
|
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
|
|
}
|
|
}
|
|
|
|
label:hover {
|
|
.synth-icon {
|
|
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-radius: 1rem;
|
|
border: var(--accent) solid .15rem;
|
|
height: max-content;
|
|
left: 0;
|
|
margin-top: .4rem !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 {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
} |