sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revamped footer
All checks were successful
/ build (push) Successful in 4m44s
Details

Browse source
This commit is contained in:
Ruben 2025-10-19 00:06:48 -05:00
commit 35f323b54c
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
6 changed files with 146 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

7
_includes/styles/base.css
View file

@ -456,8 +456,13 @@ summary {
}
}
/* no forced uncapitalization */
[no-uncap] {
text-transform: none !important;
}
/* spoiler text */
._spoiler {
spoiler {
filter: blur(.4rem) contrast(200%);
transition: 0.2s;

4
_includes/styles/colors.css
View file

@ -10,7 +10,7 @@
--background: light-dark(#fafafa, #121418);
--foreground: light-dark(#575f66, #caccd3);
--accent: light-dark(#f2ae49, #efbd58);
--link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent))
--link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent));
/* light theme is Ayu Light, dark theme is modified Astrodark */
@ -35,7 +35,7 @@
--border: light-dark(hsl(from var(--foreground) h s calc(l + 45)), hsl(from var(--background) h s calc(l + 15)));
--hover: light-dark(hsl(from var(--background) h s calc(l - 20)), hsl(from var(--background) h s calc(l + 10)));
--shadow: light-dark(rgba(from var(--foreground) r g b / .8), rgba(from var(--background) r g b / .8));
--focused: light-dark(var(--dark-purple), var(--dark-purple))
--focused: light-dark(var(--dark-purple), var(--dark-purple));
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);

204
_includes/styles/footer.css
View file

@ -8,116 +8,130 @@
/ footer - related styling for the footer window on all pages */
footer {
max-width: 30em;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
width: 50rem;
.header > a {
padding: .3rem 0rem .3rem 1rem !important;
}
main, section, article {
padding: 1rem !important;
}
.fediring {
.header {
padding: .25rem !important;
a {
color: var(--green);
display: inline-grid;
font-size: 1.5rem;
margin-bottom: .5em;
text-decoration: none !important;
vertical-align: bottom;
}
[href="https://fediring.net"] {
color: var(--foreground);
background: color-mix(in srgb, var(--purple) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://keithhacks.cyou/furryring.php"] {
color: var(--foreground);
background: color-mix(in srgb, var(--sapphire) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://stellophiliac.github.io/roboring"] {
color: var(--foreground);
background: color-mix(in srgb, var(--comment) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href*="prev"] {
background: color-mix(in srgb, var(--orange) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--orange) !important;
}
}
[href*="next"] {
background: color-mix(in srgb, var(--green) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--green) !important;
}
margin-left: .5rem;
font-size: .9rem;
}
}
p, a {
text-align: center;
font-size: 0.938rem;
margin: .2em 0px .2em;
}
img {
padding-top: 18px;
max-width: 30%;
section {
display: flex;
margin-left: auto;
margin-right: auto;
transition: 1s animation;
}
flex-flow: row wrap;
gap: 2rem;
padding: 1rem !important;
img:hover {
animation: spin 5s infinite linear;
}
footer-section {
display: flex;
flex-flow: column wrap;
.inner-footer {
text-align: center;
margin-top: -.7rem;
margin-bottom: -.7rem;
p {
margin-top: 0;
margin-bottom: .6rem;
}
p:last-of-type { margin-bottom: 0; }
a {
width: 3rem;
height: 3rem;
display: inline-block;
vertical-align: middle;
align-content: center;
border-radius: .5rem;
h3 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: .8rem;
}
}
span {
transform: scale(1.58);
footer-section[icon] {
margin-right: 1rem;
img {
width: 3rem;
height: 3rem;
}
}
footer-section[webrings] {
width: 13rem;
p {
margin-bottom: .6rem;
margin-top: 0;
}
a {
border-radius: .5rem;
padding: 0.25rem .06rem;
text-decoration-color: transparent;
icon-tabler {
pointer-events: none;
}
&:hover {
text-decoration-color: inherit;
}
}
a[aria-label="Previous"] {
color: var(--yellow);
background: light-dark(color-mix(in srgb, var(--yellow) 30%, transparent), color-mix(in srgb, var(--yellow) 25%, transparent));
}
a[aria-label="Next"] {
color: var(--green);
background: light-dark(color-mix(in srgb, var(--green) 30%, transparent), color-mix(in srgb, var(--green) 25%, transparent));
}
a[href="https://fediring.net"] {
padding: 0.25rem .3rem;
color: var(--purple);
background: light-dark(color-mix(in srgb, var(--purple) 25%, transparent), color-mix(in srgb, var(--purple) 15%, transparent));
}
a[href="https://keithhacks.cyou/furryring.php"] {
padding: 0.25rem .3rem;
color: var(--blue);
background: light-dark(color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--blue) 15%, transparent));
}
a[href="https://stellophiliac.github.io/roboring"] {
padding: 0.25rem .3rem;
color: var(--foreground);
background: light-dark(color-mix(in srgb, var(--foreground) 20%, var(--background)), color-mix(in srgb, var(--foreground) 15%, var(--background)));
}
}
footer-section[links] {
a {
margin-bottom: .2rem;
margin-top: 0;
width: fit-content;
}
span:last-of-type {
margin-top: .5rem;
}
}
}
}
@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;
@media screen and (max-width: 50rem) {
& {
width: unset !important;
border-radius: 0 !important;
margin-top: 1rem;
section {
footer-section[icon] {
margin-right: auto;
}
footer-section[webrings] {
width: unset;
}
}
}
}
}

3
_includes/styles/icons.css
View file

@ -72,14 +72,15 @@ icon-tabler {
&[rss] { --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='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); }
&[server-cog] { --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='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
&[settings] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[shield-lock] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3'/%3E%3Cpath d='M11 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 1v2.5'/%3E%3C/g%3E%3C/svg%3E"); }
&[text-size] { --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='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); }
&[thumb-down] { --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='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); }
&[thumb-up] { --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='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); }
&[universe] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[user] { --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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
&[user-cog] { --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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
&[user-heart] { --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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); }
&[user-plus] { --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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
&[user] { --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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
&[volume] { --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='M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); }
&[wifi] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[x] { --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"); }

2
_includes/styles/settings.css
View file

@ -43,7 +43,7 @@ settings-area {
.container {
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
gap: 1.5rem;
settings-section {