optimize everything ("Eleventy Harder"), improve some css
All checks were successful
/ build (push) Successful in 3m22s
All checks were successful
/ build (push) Successful in 3m22s
This commit is contained in:
parent
d2a5e561bf
commit
8b904b03de
36 changed files with 1107 additions and 1367 deletions
|
|
@ -76,7 +76,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
|
|||
--selection: #253340;
|
||||
--comment: #5c6773;
|
||||
--accent: #e6b450;
|
||||
--link: #e6b450;
|
||||
--link: var(--accent);
|
||||
|
||||
/* original ayu colors */
|
||||
--orange: #ffb454;
|
||||
|
|
@ -168,7 +168,7 @@ html[data-theme="dark"] {
|
|||
--selection: #253340;
|
||||
--comment: #5c6773;
|
||||
--accent: #e6b450;
|
||||
--link: #e6b450;
|
||||
--link: var(--accent);
|
||||
|
||||
/* original ayu colors */
|
||||
--orange: #ffb454;
|
||||
|
|
@ -228,25 +228,36 @@ body {
|
|||
/* text formatting and config stuff */
|
||||
|
||||
/* headings */
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
color: var(--foreground);
|
||||
margin-top: .5rem;
|
||||
text-decoration-color: transparent;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
|
||||
text-decoration-color: var(--accent);
|
||||
text-decoration-thickness: .3rem !important;
|
||||
text-decoration: underline;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
h1,
|
||||
h1 a {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* apparently having more than one h1 is against web standards
|
||||
but i prefer how it looks so i just use the same styling again */
|
||||
h2,
|
||||
h2 a {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 2rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
/* text */
|
||||
|
|
@ -293,11 +304,6 @@ li {
|
|||
-moz-animation: 2s linear infinite rainbow;
|
||||
}
|
||||
|
||||
/* heading 1 is also clickable */
|
||||
h1 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* the tabler icons svgs styling */
|
||||
.tabler-icon,
|
||||
.icon .icon-tabler {
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@ html[page-is="goopy"] {
|
|||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--accent: #65ff88 !important;
|
||||
--link: var(--accent) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 59em) {
|
||||
|
|
@ -168,6 +169,7 @@ html[page-is="goopy"] {
|
|||
|
||||
html[data-theme="light"][page-is="goopy"] {
|
||||
--accent: #00d131 !important;
|
||||
--link: #008d21 !important;
|
||||
|
||||
.nav-baselink, .nav-accessibility {
|
||||
background-color: var(--accent) !important;
|
||||
|
|
@ -177,4 +179,5 @@ html[data-theme="light"][page-is="goopy"] {
|
|||
|
||||
html[data-theme="dark"][page-is="goopy"] {
|
||||
--accent: #65ff88 !important;
|
||||
--link: var(--accent) !important;
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
/* ╭──────────────────────────────────────╮
|
||||
/ │ _ │
|
||||
/ │ _ __ __ ___ _| |__ __ _ _ __ │
|
||||
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
|
||||
/ │ | | | | (_| |\ V /| |_) | (_| | | │
|
||||
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
|
||||
/ ╰──────────────────────────────────────╯
|
||||
/ table of contents - styling for the table of contents button and list that appears on some pages */
|
||||
|
||||
.toc {
|
||||
align-content: center;
|
||||
background-color: var(--accent);
|
||||
border-radius: 1rem;
|
||||
color: var(--background);
|
||||
cursor: pointer;
|
||||
height: 1.9rem;
|
||||
margin-left: auto !important;
|
||||
outline: .13rem solid color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0px .2em !important;
|
||||
/* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
|
||||
|
||||
input[type="checkbox"]#toc-menu {
|
||||
left: -100vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input[type="checkbox"]#toc-menu:focus-visible {
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
label[data-toggle="toc"] {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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"]#toc-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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue