improve instance pages, start work on proper toc element
All checks were successful
/ build (push) Successful in 1m19s
All checks were successful
/ build (push) Successful in 1m19s
This commit is contained in:
parent
2e4dc59d4c
commit
a2d12ebead
13 changed files with 489 additions and 291 deletions
|
|
@ -342,6 +342,10 @@ details.styled {
|
|||
section {
|
||||
padding: 1.4rem;
|
||||
text-align: start !important;
|
||||
|
||||
ul {
|
||||
margin: -.5rem -.5rem -.5rem -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -385,22 +389,22 @@ details.styled {
|
|||
|
||||
/* Dashed border */
|
||||
hr.dashed {
|
||||
border-top: .1rem dashed var(--border);
|
||||
border: .1rem dashed var(--border);
|
||||
}
|
||||
|
||||
/* Dotted border */
|
||||
hr.dotted {
|
||||
border-top: .1rem dotted var(--border);
|
||||
border: .1rem dotted var(--border);
|
||||
}
|
||||
|
||||
/* Solid border */
|
||||
hr.solid {
|
||||
border-top: .1rem solid var(--border);
|
||||
border: .1rem solid var(--border);
|
||||
}
|
||||
|
||||
/* Rounded border */
|
||||
hr.rounded {
|
||||
border-top: .2rem solid var(--border);
|
||||
border: .2rem solid var(--border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +418,7 @@ summary {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
/* link "button" styling */
|
||||
/* button link styling */
|
||||
.button {
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
border-radius: 1rem;
|
||||
|
|
@ -423,6 +427,12 @@ summary {
|
|||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
transition: all .2s;
|
||||
white-space: nowrap;
|
||||
line-height: 3rem;
|
||||
|
||||
.icon {
|
||||
transform: scale(1.13) translateY(.7rem);
|
||||
}
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
|
|
@ -438,6 +448,24 @@ summary {
|
|||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
/* image-button grid */
|
||||
.img-buttons {
|
||||
text-align: center;
|
||||
font-size: 0px;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
image-rendering: auto;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
- alt text popup -
|
||||
--------------- */
|
||||
|
|
@ -497,266 +525,13 @@ summary {
|
|||
}
|
||||
}
|
||||
|
||||
/* 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-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-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);
|
||||
}
|
||||
}
|
||||
|
||||
details.styled {
|
||||
section {
|
||||
/* reset margins for list on mobile view */
|
||||
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-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;
|
||||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-settings {
|
||||
span {
|
||||
padding: 0 .4rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.window:not(#footer) {
|
||||
.header {
|
||||
.icon {
|
||||
padding: .3rem .4rem .3rem .4rem;
|
||||
}
|
||||
|
||||
.window-buttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
main, section, article {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
animation: unset !important;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: unset !important;
|
||||
border-radius: unset !important;
|
||||
border-right: unset !important;
|
||||
border-top: var(--accent) solid .15rem;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
/* window when its the first one on the page */
|
||||
.window:first-child {
|
||||
margin-top: 3.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-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-webmaster:hover a, .nav-webmaster:focus-visible a {
|
||||
color: var(--green);
|
||||
}
|
||||
.nav-donate:hover a, .nav-donate:focus-visible a {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
#footer {
|
||||
border-top: var(--accent) solid .15rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: unset !important;
|
||||
border-right: unset !important;
|
||||
border-radius: unset !important;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue