sel/webbed-site
1
0
Fork 0
mirror of https://gitlab.wasp.best/sel/web.git synced 2026-09-13 09:30:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat!: updated & redesigned basically everything

Browse source
This commit is contained in:
sel 2026-08-09 03:43:25 +02:00
parent 6ec7e8cb91
commit 79083d6683
Signed by: sel
SSH key fingerprint: SHA256:33R/4Rx5Lu4o81LyJyXdMrmP5CJ6j7j1Soo0Dn7mKc0
7 changed files with 114 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
:root {
color-scheme: light dark;
--wallpaper-background: light-dark(rgba(245, 245, 245, 0.90), rgba(17, 17, 27, 0.90))
--dark-text: #eee8ea;
--dark-background: #171113;
--dark-primary: #bfabb3;
--dark-secondary: #1c1516;
--light-text: #171113;
--light-background: #eee8ea;
--light-primary: #544048;
--light-secondary: #ebe4e6;
--wallpaper-background: light-dark(rgba(238, 232, 234, 0.90), rgba(23, 17, 19, 0.90))
}
html, body {
@ -9,12 +21,12 @@ html, body {
}
body {
font-family: "Space Grotesk", sans-serif;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
color: light-dark(#4c4f69, #cdd6f4);
background-color: light-dark(#f5f5f7, #11111b);
color: light-dark(var(--light-text), var(--dark-text));
background-color: light-dark(var(--light-background), var(--dark-background));
line-height: 1.5;
}
@ -32,8 +44,8 @@ nav {
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 1px solid light-dark(#bcc0cc60, #31324460);
background-color: light-dark(#ebebef60, #1A1A2960);
border: 1px solid light-dark(var(#ebe4e680), var(#1c151680));
background-color: light-dark(var(#eee8ea80), var(#17111380));
backdrop-filter: blur(5px);
top: 0;
left: 0;
@ -54,25 +66,27 @@ nav > div {
nav > div > a {
display: block;
text-decoration: none;
color: light-dark(#4c4f69, #cdd6f4);
color: light-dark(var(--light-text), var(--dark-text));
}
section.buttons-wrapper {
display: flex;
flex-direction: column;
background-color: light-dark(#ebebef, #1A1A29);
background-color: light-dark(var(--light-secondary), var(--dark-secondary));
width: auto;
max-width: 100%;
margin: 0;
}
section.highlighted {
background-color: light-dark(#ebebef, #181825);
background-color: light-dark(var(--light-secondary), var(--dark-secondary));
}
section.full-height {
min-height: calc(100vh - 4rem);
padding-top: 3rem;
padding-bottom: 3rem;
}
section.full-height > p {
@ -80,7 +94,8 @@ section.full-height > p {
}
section {
border-bottom: 1px solid light-dark(#bcc0cc, #313244);
border-bottom: 2px solid light-dark(var(--light-secondary), var(--dark-secondary));
padding-left: 2.5rem;
padding-right: 2.5rem;
@ -91,12 +106,21 @@ section {
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
section.content {
.content {
max-width: 60ch;
border-bottom: none;
overflow-x: scroll;
height: fit-content;
-ms-overflow-style: none;
scrollbar-width: none;
}
.content::-webkit-scrollbar {
display: none;
}
section > div.buttons {
@ -132,12 +156,16 @@ main > :first-child.highlighted > p {
}
footer {
text-align: center;
padding: 1rem;
}
footer > a {
color: light-dark(var(--light-text), var(--dark-text));
text-decoration: none;
}
.summary, .date {
color: light-dark(#6c6f85, #a6adc8)
color: light-dark(var(--light-primary), var(--dark-primary));
}
a {
@ -159,7 +187,7 @@ s, del {
}
small {
color: light-dark(#6c6f85, #a6adc8)
color: light-dark(var(--light-primary), var(--dark-primary));
}
img {
@ -169,18 +197,19 @@ img {
table {
width: 100%;
border: 1px solid light-dark(#bcc0cc, #313244);
border: 1px solid light-dark(var(--light-secondary), var(--dark-secondary));
border-radius: 0.75rem;
}
th, td {
padding: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem
padding-right: 0.5rem;
}
th {
background-color: light-dark(#ebebef, #1A1A29);
background-color: light-dark(var(--light-secondary), var(--dark-secondary));
border-radius: 0.75rem;
}
code {
@ -189,8 +218,9 @@ code {
}
blockquote {
color: light-dark(#6c6f85, #a6adc8);
border-left: 5px solid light-dark(#6c6f85, #a6adc8);
color: light-dark(var(--light-primary), var(--dark-primary));
border-left: 5px solid light-dark(var(--light-secondary), var(--dark-secondary));
border-radius: 0.25rem;
margin-left: 0;
padding-left: 2rem;
max-width: calc(95ch - 2rem);
@ -206,17 +236,24 @@ li {
height: 2rem;
}
.detailed {
text-decoration: underline;
text-decoration-color: light-dark(var(--light-primary), var(--dark-primary));
}
.wallpaper {
background: linear-gradient(var(--wallpaper-background), var(--wallpaper-background)), url('/wallpaper.jpg');
background: linear-gradient(var(--wallpaper-background), var(--wallpaper-background)), url('/wallpaper-3.gifv');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: bottom;
image-rendering: pixelated;
}
.post-title {
font-size: 1.5rem;
text-decoration: none;
margin-right: 1rem;
color: light-dark(var(--light-text), var(--dark-text));
font-size: 1.5rem;
text-decoration: none;
margin-right: 1rem;
}
.tag {
@ -226,3 +263,7 @@ li {
h1 {
font-size: 2rem;
}
summary {
font-size: 1.5rem;
}