Notebook
-NOTE: this page is still a very heavy wip aaa aaa aaa
+NOTE: This page is still heavily a work in progress, nothing on here is functional or what is meant to be.
A public facing journal for myself, as probably the best way to put it. A blog-ish, writeup-ish, rant-ish place to dump personal thoughts and such into for myself.
diff --git a/styles/base.css b/styles/base.css
index 4d58df0..9dce84d 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -470,28 +470,60 @@ summary {
.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 */
- span {
- transform: scale(1.5);
- padding: 0 .5rem !important;
+ input[type="checkbox"] {
+ left: -100vw;
+ position: absolute;
+ }
+
+ label {
+ cursor: pointer;
+ overflow: hidden !important;
+ padding: .3rem .5rem !important;
+ position: relative;
+
+ [class^="tabler--"] {
+ padding: 0 .5rem !important;
+ pointer-events: none;
+ transform: translateY(.1rem) scale(1.5);
+ transition: all 1.3s;
+ }
+ }
+
+ label:hover {
+ [class^="tabler--"] {
+ 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;
- max-width: 17rem;
overflow: scroll;
position: absolute;
right: .4rem;
- top: 2.2rem;
+ 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;
@@ -500,8 +532,20 @@ summary {
span {
padding: .1rem 0px .1rem 0px !important;
}
+
+ h2 {
+ margin: 0 !important;
+ }
}
}
+
+ 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-systray {
@@ -530,10 +574,6 @@ summary {
transition: .2s all;
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
border-bottom: solid .2rem var(--accent);
-
- .nav-accessibility {
- border-left: .2rem solid var(--background);
- }
}
/* --------------------------------------------------------------------
@@ -907,13 +947,29 @@ footer {
/* disable certain animations if user has animations disabled on their system */
-@media (prefers-reduced-motion) {
+@media (prefers-reduced-motion: reduce) {
body {
background: var(--background) !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
+
+ /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
+ * {
+ transition: none !important;
+ animation: unset !important;
+ -moz-animation: unset !important;
+ -webkit-animation: unset !important;
+ }
+
+ /* fedi icon on /me should keep its animation (temp, find a better solution later) */
+ .fedi-icon {
+ animation: opacity-blink 4s infinite !important;
+ }
+ .fedi-icon-2 {
+ animation: opacity-blink-reverse 4s infinite !important;
+ }
}
/* different styling for elements in dark mode
@@ -1011,13 +1067,19 @@ html[data-theme="dark"] {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
- display: none;
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;
@@ -1073,8 +1135,12 @@ html[data-theme="dark"] {
}
}
- input[type="checkbox"]:checked~ul {
- display: block;
+ 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;
}
}