Skip to content

Commit

Permalink
Updated color system
Browse files Browse the repository at this point in the history
  • Loading branch information
Saleh committed Apr 8, 2024
1 parent 9d1aba6 commit 4a514b8
Showing 1 changed file with 75 additions and 80 deletions.
155 changes: 75 additions & 80 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
:root {
--gray-50: hsl(0, 0%, 96%);
--gray-100: hsl(0, 0%, 91%);
--gray-200: hsl(0, 0%, 82%);
--gray-300: hsl(0, 0%, 69%);
--gray-400: hsl(0, 0%, 50%);
--gray-500: hsl(0, 0%, 34%);
--gray-600: hsl(0, 0%, 26%);
--gray-700: hsl(0, 0%, 24%);
--gray-800: hsl(0, 0%, 16%);
--gray-900: hsl(0, 0%, 9%);
--gray-950: hsl(0, 0%, 6%);
--yellow: #F9D936;
--gray-50: #f5f5f5;
--gray-100: #e8e8e8;
--gray-200: #d1d1d1;
--gray-300: #b0b0b0;
--gray-400: #808080;
--gray-500: #575757;
--gray-600: #424242;
--gray-700: #3d3d3d;
--gray-800: #292929;
--gray-900: #171717;
--gray-950: #0f0f0f;

--cream-50: #F9F7F3;
--cream-100: #F3F0E7;
Expand All @@ -23,19 +24,19 @@
--cream-900: #594435;
--cream-950: #2F231B;

--base-1: var(--cream-50);
--base-2: var(--cream-100);
--base-3: var(--cream-200);
--base-frosted-glass: rgba(255 255 255 / 50%);
--base: var(--cream-50);
--base-hover: var(--cream-200);
--base-active: var(--cream-300);
--base-focused: var(--yellow);
--base-disabled: var(--cream-100);
--base-inverse: var(--cream-950);

--primary: var(--cream-950);
--on-primary: var(--cream-200);

--primary-hover: var(--cream-200);
--primary-active: var(--cream-700);

--on-primary-hover: var(--cream-950);
--on-primary-active: var(--cream-200);
--content: var(--cream-950);
--content-hover: var(--cream-950);
--content-active: var(--cream-950);
--content-focused: var(--gray-950);
--content-disabled: var(--cream-400);
--content-inverse: var(--cream-200);

--h1: 2.027rem;
--h2: 1.802rem;
Expand All @@ -48,18 +49,19 @@

@media (prefers-color-scheme: dark) {
:root {
--base-1: var(--gray-950);
--base-2: var(--gray-900);
--base-3: var(--gray-800);
--base-frosted-glass: rgba(30, 30, 30, 0.5);

--primary: var(--cream-200);
--on-primary: var(--cream-950);

--primary-hover: var(--gray-800);
--primary-active: var(--cream-200);
--on-primary-hover: var(--cream-200);
--on-primary-active: var(--cream-950);
--base: var(--gray-950);
--base-hover: var(--gray-800);
--base-active: var(--gray-700);
--base-focused: var(--yellow);
--base-disabled: var(--gray-900);
--base-inverse: var(--cream-200);

--content: var(--cream-200);
--content-hover: var(--cream-200);
--content-active: var(--cream-300);
--content-focused: var(--gray-950);
--content-disabled: var(--gray-400);
--content-inverse: var(--cream-950);
}
}

Expand All @@ -78,14 +80,15 @@
html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, Cantarell, sans-serif;
font-size: 125%;
background-color: var(--base);
background: url(/images/texture.png)repeat, var(--base);
background-blend-mode: difference;
}

body {
font-weight: normal;
font-style: normal;
background: url(/images/texture.png)repeat, var(--base-2);
background-color: var(--base-1);
color: var(--primary);
color: var(--content);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0 2rem;
Expand Down Expand Up @@ -189,29 +192,19 @@ nav a {
z-index: 50;
}

#bottom-bar {
border-radius: 1rem;
z-index: 50;
backdrop-filter: blur(24px);
background-color: var(--base-frosted-glass);
box-sizing: border-box;
}

.bottom-bar-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
a:hover {
background-color: var(--base-hover);
color: var(--content-hover);
}

a:hover {
background-color: var(--primary-hover);
color: var(--on-primary-hover);
a:focus {
background-color: var(--base-focused);
color: var(--content-focused);
}

a:active {
background-color: var(--primary-active);
color: var(--on-primary-active);
background-color: var(--base-active);
color: var(--content-active);
}

.hero {
Expand Down Expand Up @@ -249,8 +242,8 @@ article p {
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
color: var(--on-primary);
background-color: var(--primary);
color: var(--content-inverse);
background-color: var(--base-inverse);
}

.chillin {
Expand All @@ -262,9 +255,9 @@ article p {

.container {
position: relative;
background-color: var(--base-1);
background-color: var(--base);
border-radius: 1rem;
border: 1px solid var(--primary);
border: 1px solid var(--content);
overflow: hidden;
max-width: 1320px;
margin: 0 auto;
Expand All @@ -276,8 +269,8 @@ article p {
}

.section-heading {
border-top: 1px solid var(--primary);
border-bottom: 1px solid var(--primary);
border-top: 1px solid var(--content);
border-bottom: 1px solid var(--content);
padding: 1rem;
}

Expand All @@ -301,49 +294,52 @@ article p {
.card[disabled] {
justify-content: center;
align-items: center;
background-color: var(--base-2);
background-color: var(--base-disabled);
color: var(--content-disabled);
}

.card[disabled]:hover {
background-color: var(--base-2);

background-color: var(--base-disabled);
}

.card:hover {
background-color: var(--primary-hover);
background-color: var(--base-hover);
}

.card:focus {
background-color: var(--base-focused);
color: var(--content-focused);
}

.card:active {
background-color: var(--base-active);
color: var(--content-active);
}

.card p {
margin: 0;
}

.card:not(:last-child) {
border-right: 1px solid var(--primary);
border-right: 1px solid var(--content);
}

.list .card:not(:last-child) {
border-bottom: 1px solid var(--primary);
}

.frosted-glass {
background: var(--base-frosted-glass);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--content);
}

.title-bar {
display: flex;
gap: 0.5rem;
align-items: center;
background-color: var(--primary);
background-color: var(--base-inverse);
padding: 1.5rem;
height: 56px;
color: var(--on-primary);
color: var(--content-inverse);
}

a.breadcrumb {
font-family: monospace;
color: var(--on-primary);
padding: 0;
text-decoration: none;
font-weight: 600;
Expand All @@ -352,12 +348,12 @@ a.breadcrumb {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
/* Number of lines you want to display */
overflow: hidden;
text-overflow: ellipsis;
}

a.breadcrumb:hover {
color: var(--content-inverse);
background: none;
text-decoration: underline;
}
Expand All @@ -377,7 +373,6 @@ a.breadcrumb.ancestor {
display: flex;
}


@media (max-width: 1408px) {}

@media (max-width: 1216px) {}
Expand Down Expand Up @@ -419,6 +414,6 @@ a.breadcrumb.ancestor {

.card:not(:last-child) {
border-right: 0;
border-bottom: 1px solid var(--primary);
border-bottom: 1px solid var(--content);
}
}

0 comments on commit 4a514b8

Please sign in to comment.