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

revamping the services page
All checks were successful
/ build (push) Successful in 4m35s
Details

Browse source
This commit is contained in:
Ruben 2025-10-19 23:24:45 -05:00
commit 5834fd1e04
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
17 changed files with 207 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

11
_includes/styles/accessibility.css
View file

@ -25,6 +25,10 @@
--font-family: monospace, system-ui, -apple-system, sans-serif;
}
&:has(#font-system:checked) { /* system ui*/
--font-family: system-ui, -apple-system, sans-serif;
}
&:has(#font-sserif:checked) { /* sans seris */
--font-family: sans-serif, 'Segoe UI', system-ui, -apple-system;
}
@ -39,11 +43,14 @@
text-transform: none !important;
}
}
&:has(#disable-bg:checked) { /* disable background gradient */
body {
background: var(--background) !important;
background: var(--background);
bg-gradient, bg-image {
display: none !important;
}
}
}

123
_includes/styles/base.css
View file

@ -128,6 +128,15 @@ button {
}
}
/* information colors */
[info] {
color: var(--blue);
}
[warning] {
color: var(--warning);
}
/* links should look good i think */
a {
color: var(--foreground);
@ -319,45 +328,66 @@ details.cw[open] {
/* card styling */
card-container {
display: flex;
gap: .5rem;
.card {
background-color: ;
}
&[horizontal] {
flex-flow: row wrap;
}
}
.card {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: 1rem;
border: .2rem solid var(--border);
gap: .5rem;
margin-bottom: 1.4rem;
padding: 1rem;
h4 {
margin-top: unset !important;
margin-bottom: .4rem !important;
}
}
.card.last {
margin-bottom: unset !important;
}
.card.tilde-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
margin-bottom: unset !important;
}
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
margin-bottom: 1.5rem;
.card.question {
p {
margin: .6rem !important;
card-entry {
background-color: var(--background-secondary);
border-radius: 1rem;
border: .15rem solid var(--border);
display: flex;
flex-flow: column;
padding: .6rem;
width: auto;
h3 {
margin-top: 0;
margin-bottom: .6rem;
[icon] {
height: 1.4rem;
transition: .3s;
vertical-align: middle;
}
icon-tabler {
float: right;
vertical-align: middle;
&[server] {
color: var(--link);
}
}
}
&:hover {
h3 {
[icon] {
margin-right: .4rem;
transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem);
}
}
}
p {
margin-top: 0;
}
&[dont-suggest] {
opacity: .7;
transition: 1s;
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
&:hover {
opacity: 1;
}
}
buttons-container {
margin-top: auto;
}
}
}
@ -619,6 +649,25 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
/* widgets */
buttons-container {
display: flex;
flex-flow: row wrap;
gap: .4rem;
[button] {
background: light-dark(color-mix(in srgb,var(--accent)60%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
padding: .2rem .5rem;
border-radius: 10rem;
transition: .2s;
text-decoration: none !important;
&:hover {
background: var(--accent);
color: light-dark(var(--foreground), var(--background));
}
}
}
radio-button-group {
display: flex;
flex-flow: row wrap;

5
_includes/styles/colors.css
View file

@ -8,7 +8,8 @@
:root {
--background: light-dark(#fafafa, #121418);
--foreground: light-dark(#575f66, #caccd3);
--background-secondary: light-dark(hsl(from var(--background) h s calc(l - 6)), hsl(from var(--background) h s calc(l + 4)));
--foreground: light-dark(#393e42, #caccd3);
--accent: light-dark(#f2ae49, #efbd58);
--link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent));
@ -32,6 +33,8 @@
--dark-cyan: light-dark(#4CBF99, #00B298);
--dark-white: light-dark(#FAFAFA, #ADB0BB);
--warning: light-dark(hsl(from var(--yellow) h s calc(l - 25)), var(--yellow));
--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));

2
_includes/styles/footer.css
View file

@ -56,7 +56,7 @@ footer {
width: 13rem;
p {
margin-bottom: .6rem;
margin-bottom: .8rem;
margin-top: 0;
}

1
_includes/styles/icons.css
View file

@ -71,6 +71,7 @@ icon-tabler {
&[rosette-discount-check] { --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='M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); }
&[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"); }
&[server] { --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-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.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"); }