kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Created default color scheme

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-19 16:42:20 +02:00
parent 99da301a45
commit bce82d5c5f
3 changed files with 91 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/main/css/index.css
View File

@ -1,8 +1,8 @@
:root { :root {
--clr-purple: hsl(251, 91%, 63%); --color-mail: #7e63f8;
--clr-blue: hsl(201, 85%, 55%); --color-telegram: #2baaee;
--clr-dark-blue: hsl(201, 100%, 35%); --color-linkedin: #0074b3;
--clr-black: hsl(248, 16%, 10%); --color-github: #0d1117;
} }
#landing { #landing {
@ -45,7 +45,7 @@ img {
.social-link > i { .social-link > i {
display: grid; display: grid;
place-items: center; place-items: center;
color: var(--clr-secondary); color: var(--color-fg-default);
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 100px; border-radius: 100px;
margin: auto 0.5rem 1rem 0.5rem; margin: auto 0.5rem 1rem 0.5rem;
@ -55,33 +55,33 @@ img {
} }
.social-link:hover > i { .social-link:hover > i {
background-color: var(--clr-secondary); background-color: var(--color-fg-default);
} }
.email:hover > i { .email:hover > i {
color: var(--clr-purple); color: var(--color-mail);
border: 2px solid var(--clr-purple); border: 2px solid var(--color-mail);
background-image: none; background-image: none;
} }
.telegram:hover > i { .telegram:hover > i {
color: var(--clr-blue); color: var(--color-telegram);
border: 2px solid var(--clr-blue); border: 2px solid var(--color-telegram);
background-image: none; background-image: none;
} }
.linkedin:hover > i { .linkedin:hover > i {
color: var(--clr-dark-blue); color: var(--color-linkedin);
border: 2px solid var(--clr-dark-blue); border: 2px solid var(--color-linkedin);
background-image: none; background-image: none;
} }
.github:hover > i { .github:hover > i {
color: var(--clr-black); color: var(--color-github);
border: 2px solid var(--clr-black); border: 2px solid var(--color-github);
background-image: none; background-image: none;
} }
.social-link .label { .social-link .label {
display: none; display: none;
color: var(--clr-secondary); color: var(--color-fg-default);
} }
.social-link:hover .label { .social-link:hover .label {

90
static/main/css/layout.css
View File

@ -1,23 +1,72 @@
:root { :root {
--color-scale-black: #010409;
--color-scale-white: #ffffff;
--color-scale-white-transparent-7: #ffffffbc;
--color-scale-gray-0: #f0f6fc;
--color-scale-gray-1: #c9d1d9;
--color-scale-gray-2: #b1bac4;
--color-scale-gray-3: #8b949e;
--color-scale-gray-4: #6e7681;
--color-scale-gray-5: #484f58;
--color-scale-gray-6: #30363d;
--color-scale-gray-7: #21262d;
--color-scale-gray-8: #161b22;
--color-scale-gray-9: #0d1117;
--color-scale-gray-0-transparent-10: #f0f6fc1a;
--color-scale-gray-8-transparent-50: #161b2280;
--color-scale-gray-9-transparent-0: #0d111700;
--color-scale-purple-0: #eddeff;
--color-scale-purple-1: #e2c5ff;
--color-scale-purple-2: #d2a8ff;
--color-scale-purple-3: #bc8cff;
--color-scale-purple-4: #a371f7;
--color-scale-purple-5: #8957e5;
--color-scale-purple-6: #6e40c9;
--color-scale-purple-7: #553098;
--color-scale-purple-8: #3c1e70;
--color-scale-purple-9: #271052;
--color-scale-purple-4-transparent-06: #a371f70f;
--color-canvas-default: var(--color-scale-gray-9);
--color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
--color-canvas-subtle: var(--color-scale-gray-8);
--color-border-default: var(--color-scale-gray-6);
--color-header-bg-default: var(--color-scale-gray-8);
--color-header-bg-transparent: var(--color-scale-gray-8-transparent-5);
--color-header-text: var(--color-scale-white-transparent-7);
--color-btn-text: var(--color-scale-gray-1);
--color-btn-bg: var(--color-scale-gray-7);
--color-btn-border: var(--color-scale-gray-0-transparent-1);
--color-btn-hover-bg: var(--color-scale-gray-6);
--color-btn-hover-border: var(--color-scale-gray-3);
--color-btn-active-border: var(--color-scale-gray-5);
--color-fg-default: var(--color-scale-gray-1);
--color-fg-muted: var(--color-scale-gray-3);
--color-fg-subtle: var(--color-scale-gray-4);
--color-fg-on-emphasis: var(--color-scale-white);
--color-text-hover: var(--color-fg-muted);
--color-accent-fg: var(--color-scale-purple-4);
--color-text-link: var(--color-accent-fg);
font-size: 16px; font-size: 16px;
--clr-primary: hsl(216, 28%, 7%);
--clr-primary-100: hsla(215, 21%, 11%, 0.9);
--clr-primary-200: hsla(215, 21%, 11%, 0.5);
--clr-primary-300: hsl(218, 17%, 12%);
--clr-primary-400: hsl(212, 12%, 21%);
--clr-primary-500: hsl(216, 12%, 25%);
--clr-secondary: hsl(210, 67%, 96%);
--clr-secondary-hover: hsl(210, 3%, 73%);
--clr-secondary-link: hsl(212, 100%, 67%);
font-family: "Roboto", arial, sans-serif; font-family: "Roboto", arial, sans-serif;
} }
html, html,
body { body {
color: var(--clr-secondary); color: var(--color-fg-default);
background-color: var(--clr-primary); background-color: var(--color-canvas-default);
line-height: 1.5; line-height: 1.5;
min-height: 100vh; min-height: 100vh;
min-width: 300px; min-width: 300px;
@ -73,22 +122,22 @@ body {
} }
.primary-navigation { .primary-navigation {
background-color: var(--clr-primary-100); background-color: var(--color-header-bg-default);
} }
@supports (backdrop-filter: blur(2rem)) { @supports (backdrop-filter: blur(2rem)) {
.primary-navigation { .primary-navigation {
background-color: var(--clr-primary-200); background-color: var(--color-header-bg-transparent);
backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);
} }
} }
.primary-navigation a { .primary-navigation a {
color: var(--clr-secondary); color: var(--color-fg-default);
text-decoration: none; text-decoration: none;
} }
.primary-navigation a:hover { .primary-navigation a:hover {
color: var(--clr-secondary-hover); color: var(--color-fg-muted);
} }
.primary-navigation a > [aria-hidden="true"] { .primary-navigation a > [aria-hidden="true"] {
@ -136,16 +185,11 @@ body {
} }
} }
@media (min-width: 35em) and (max-width: 55em) {
.primary-navigation a > [aria-hidden="true"] {
display: none;
}
}
@media (min-width: 35em) { @media (min-width: 35em) {
.primary-navigation { .primary-navigation {
--gap: clamp(1.5rem, 5vw, 3rem); --gap: clamp(1.5rem, 5vw, 3rem);
padding-block: 16px; padding-block: 16px;
padding-inline: clamp(3rem, 8vw, 10rem); padding-inline: clamp(3rem, 8vw, 10rem);
background-color: var(--color-header-bg-default);
} }
} }

25
static/main/css/projects.css
View File

@ -1,9 +1,8 @@
:root { :root {
--clr-card: hsl(218, 17%, 12%); --color-card-default: var(--color-scale-gray-8);
--clr-card-060: hsla(0, 0%, 100%, 0.06); --color-card-border: var(--color-scale-gray-0-transparent-10);
--clr-card-100: hsla(0, 0%, 100%, 0.1); --color-card-bg-hover: var(--color-scale-purple-4-transparent-06);
--clr-card-400: hsla(0, 0%, 100%, 0.4); --color-card-accent: var(--color-accent-fg);
--clr-card-500: hsla(0, 0%, 100%, 0.5);
} }
.body { .body {
@ -25,7 +24,7 @@
} }
.card { .card {
background-color: var(--clr-card-100); background-color: var(--color-card-border);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -55,7 +54,7 @@
.card::before { .card::before {
background: radial-gradient( background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y), 800px circle at var(--mouse-x) var(--mouse-y),
var(--clr-card-060), var(--color-card-bg-hover),
transparent 40% transparent 40%
); );
z-index: 3; z-index: 3;
@ -64,14 +63,14 @@
.card::after { .card::after {
background: radial-gradient( background: radial-gradient(
600px circle at var(--mouse-x) var(--mouse-y), 600px circle at var(--mouse-x) var(--mouse-y),
var(--clr-card-400), var(--color-card-accent),
transparent 40% transparent 40%
); );
z-index: 1; z-index: 1;
} }
.card > .card-content { .card > .card-content {
background-color: var(--clr-card); background-color: var(--color-card-default);
border-radius: inherit; border-radius: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -89,7 +88,7 @@ h2,
h3, h3,
h4, h4,
span { span {
color: rgb(240, 240, 240); color: var(--color-fg-default);
font-weight: 400; font-weight: 400;
margin: 0px; margin: 0px;
} }
@ -113,12 +112,6 @@ span {
line-height: 20px; line-height: 20px;
} }
.card-info-title > h4 {
color: var(--clr-card-500);
font-size: 0.85em;
margin-top: 8px;
}
/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */ /* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
@media (max-width: 1000px) { @media (max-width: 1000px) {