sel/webbed-site
1
0
Fork 0
mirror of https://gitlab.wasp.best/sel/web.git synced 2026-04-29 05:54:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat!: redesigned some things, updated button, links, etc.

Browse source
This commit is contained in:
sel 2026-04-23 22:50:19 +02:00
parent 6bad069e07
commit 8159880aca
Signed by: sel
SSH key fingerprint: SHA256:33R/4Rx5Lu4o81LyJyXdMrmP5CJ6j7j1Soo0Dn7mKc0
11 changed files with 97 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

109
themes/webbed-theme/assets/css/main.css
View file

@ -1,5 +1,6 @@
:root {
color-scheme: light dark;
--wallpaper-background: light-dark(rgba(245, 245, 245, 0.90), rgba(17, 17, 27, 0.90))
}
html, body {
@ -8,16 +9,20 @@ html, body {
}
body {
font-family: "Cascadia Code", sans-serif;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
font-size: 20px;
color: light-dark(#4c4f69, #cdd6f4);
background-color: light-dark(#dce0e8, #11111b);
background-color: light-dark(#f5f5f7, #11111b);
line-height: 1.5;
}
display: flex;
flex-direction: column;
header {
width: 100%;
display: flex;
justify-content: start;
position: fixed;
}
nav {
@ -25,30 +30,31 @@ nav {
/* border-radius: 0.5rem 0.5rem 0 0; */
display: flex;
flex-direction: row;
justify-content: start;
justify-content: space-between;
align-items: center;
border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
background-color: light-dark(#dce0e8, #11111b);
position: fixed;
border: 1px solid light-dark(#bcc0cc60, #31324460);
background-color: light-dark(#ebebef60, #1A1A2960);
backdrop-filter: blur(5px);
top: 0;
left: 0;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 0.40rem;
padding-bottom: 0.40rem;
width: 100%;
padding: 0.40rem 1.20rem;
margin: 0.50rem;
height: 2rem;
gap: 1.75rem
gap: 1.75rem;
border-radius: 0.75rem;
user-select: none;
}
nav > a {
nav > div {
display: flex;
flex-direction: row;
gap: 1.75rem
}
nav > div > a {
display: block;
text-decoration: none;
}
main {
display: flex;
flex-direction: row;
color: light-dark(#4c4f69, #cdd6f4);
}
section.buttons-wrapper {
@ -56,16 +62,22 @@ section.buttons-wrapper {
flex-direction: column;
align-items: center;
background-color: light-dark(#ccd0da, #181825);
max-width: 100%
background-color: light-dark(#ebebef, #1A1A29);
width: auto;
max-width: 100%;
margin: 0;
}
section.highlighted {
background-color: light-dark(#ccd0da, #181825);
background-color: light-dark(#ebebef, #181825);
}
section.full-height {
min-height: calc(100vh - 4rem);
}
section {
border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
border-bottom: 1px solid light-dark(#bcc0cc, #313244);
padding-left: 2.5rem;
padding-right: 2.5rem;
@ -74,7 +86,7 @@ section {
}
section > p {
max-width: 95ch;
max-width: 60ch;
}
section > div.buttons {
@ -97,19 +109,25 @@ section > div.buttons {
}
main {
margin-top: 2.8rem;
/* border-radius: 0 0 0.5rem 0.5rem; */
flex-grow: 1;
display: flex;
flex-direction: column;
}
main > :first-child {
padding-top: 4rem;
}
main > :first-child.highlighted {
text-align: center;
}
main > :first-child.highlighted > p {
max-width: 100%;
}
footer {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
padding: 1rem;
}
.summary, .date {
@ -139,12 +157,9 @@ small {
}
table {
border-collapse: collapse;
width: 100%
}
table, th, td {
border: 3px dashed light-dark(#bcc0cc, #313244);
width: 100%;
border: 1px solid light-dark(#bcc0cc, #313244);
border-radius: 0.75rem;
}
th, td {
@ -154,16 +169,17 @@ th, td {
}
th {
background-color: light-dark(#bcc0cc, #313244);
background-color: light-dark(#ebebef, #1A1A29);
}
code {
color: light-dark(#dc8a78, #f5e0dc)
color: light-dark(#dc8a78, #f5e0dc);
font-family: 'Cascadia Code', monospace;
}
blockquote {
color: light-dark(#6c6f85, #a6adc8);
border-left: 3px dashed light-dark(#bcc0cc, #313244);
border-left: 5px solid light-dark(#6c6f85, #a6adc8);
margin-left: 0;
padding-left: 2rem;
max-width: calc(95ch - 2rem);
@ -178,3 +194,10 @@ li {
top: 0.25rem;
height: 2rem;
}
.wallpaper {
background: linear-gradient(var(--wallpaper-background), var(--wallpaper-background)), url('/wallpaper.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}