sirlilpanda/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new style

Browse Source
This commit is contained in:
panda
2026-03-27 22:41:38 +13:00
parent 4775b2831e
commit c86cc3cd71
17 changed files with 1192 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/styles/global.css
View File

@@ -11,7 +11,6 @@
--gray-dark: 34, 41, 57;
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
--yellow-light-theme: #f5c300;
--pink-light-theme: #a4036f;
--blue-light-theme: #048ba8;
@@ -19,7 +18,7 @@
--text-color-light-theme: #101010;
--title-color-light-theme: var(--yellow-light-theme);
--link-color-light-theme: var(--blue-light-theme);
--background-light-theme: #ffffff;
--background-light-theme: #cfffc0;
--header-light-theme: #f2f8ff;
--gray-light-theme: rgb(34, 41, 57);
@@ -43,23 +42,27 @@
0 16px 32px rgba(var(--black), 33%);
--box-shadow-lighter: 0 2px 6px rgba(var(--black), 50%), 0 8px 24px rgba(var(--black), 20%);
/* --accent: #2337ff;
--accent-dark: #000d8a;
--black: 15, 18, 25;
--gray: 96, 115, 159;
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
--box-shadow:
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
0 16px 32px rgba(var(--gray), 33%); */
}
@media (prefers-color-scheme: dark) {
:root[data-theme="light"] {
/* defaults to dark theme */
--yellow : var(--yellow-light-theme);
--pink : var(--pink-light-theme);
--blue : var(--blue-light-theme);
--green : var(--green-light-theme);
--text-color: var(--text-color-light-theme);
--title-color: var(--title-color-light-theme);
--link-color: var(--link-color-light-theme);
--background-colour : var(--background-light-theme);
--header-color: var(--header-light-theme);
--gray: var(--gray-light-theme);
--sky-colour : linear-gradient(#3f67b5, #6baadf, #b5d1e8);
--frame-colour : #c2c2c2;
--main-background-colour : #fffeab;
}
:root[data-theme="dark"] {
/* defaults to dark theme */
:root {
--yellow : var(--yellow-dark-theme);
--pink : var(--pink-dark-theme);
--blue : var(--blue-dark-theme);
@@ -70,8 +73,9 @@
--background-colour : var(--background-dark-theme);
--header-color: var(--header-dark-theme);
--gray: var(--gray-dark-theme);
}
--sky-colour: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%);
--frame-colour : #1a1a1e;
--main-background-colour : #3b3b3b;
}
@@ -94,7 +98,8 @@ body {
margin: 0;
padding: 0;
text-align: left;
background: linear-gradient(var(--gray-gradient)) no-repeat;
background-color: var(--background-colour);
/* background: linear-gradient(var(--gray-gradient)) no-repeat; */
background-size: 100% 600px;
word-wrap: break-word;
overflow-wrap: break-word;
@@ -102,12 +107,20 @@ body {
font-size: 20px;
line-height: 1.7;
}
main {
z-index: 4;
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
background-color: var(--main-background-colour);
border-radius: 2em;
border-style: solid;
border-color: blanchedalmond;
}
h1,
h2,
h3,
@@ -145,6 +158,7 @@ a:hover {
}
p {
margin-bottom: 1em;
color: var(--text-color);
}
.prose p {
margin-bottom: 2em;