179 lines
3.6 KiB
CSS
179 lines
3.6 KiB
CSS
:root{
|
|
--nord0: #2E3440;
|
|
--nord1: #3B4252;
|
|
--nord2: #434C5E;
|
|
--nord3: #4C566A;
|
|
--nord4: #D8DEE9;
|
|
--nord5: #E5E9F0;
|
|
--nord6: #ECEFF4;
|
|
--nord7: #8FBCBB;
|
|
--nord8: #88C0D0;
|
|
--nord9: #81A1C1;
|
|
--nord10: #5E81AC;
|
|
--nord11: #BF616A;
|
|
--nord12: #D08770;
|
|
--nord13: #EBCB8B;
|
|
--nord14: #A3BE8C;
|
|
--nord15: #B48EAD;
|
|
--lightblue: var(--nord9);
|
|
--blue: var(--nord10);
|
|
--red: var(--nord11);
|
|
--orange: var(--nord12);
|
|
--yellow: var(--nord13);
|
|
--green: var(--nord14);
|
|
--purple: var(--nord15);
|
|
--nord6-dark: #292c31;
|
|
--accent-dark: #1f1f21;
|
|
--background-dark: #21201b;
|
|
--font-default-dark: #ffffff;
|
|
/* Shared transitions & shadows */
|
|
--transition-fast: 100ms;
|
|
--transition-normal: 200ms;
|
|
--shadow-sm: 0 0 0.4em 0.05em rgba(0,0,0,0.2);
|
|
--shadow-md: 0 0 0.5em 0.1em rgba(0,0,0,0.3);
|
|
--shadow-lg: 0 0 1em 0.1em rgba(0,0,0,0.4);
|
|
--shadow-hover: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
|
|
--radius-pill: 1000px;
|
|
--radius-card: 20px;
|
|
--radius-sm: 0.3rem;
|
|
}
|
|
|
|
a:not(:visited){
|
|
color: var(--blue);
|
|
}
|
|
|
|
a:visited{
|
|
color: var(--purple);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
a:not(:visited){
|
|
color: var(--nord8);
|
|
}
|
|
}
|
|
|
|
*{
|
|
box-sizing: border-box;
|
|
font-family: Helvetica, Arial, "Noto Sans", sans-serif
|
|
}
|
|
body{
|
|
margin:0;
|
|
padding:0;
|
|
background-color: #fbf9f3;
|
|
overflow-x: hidden;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body{
|
|
color: white;
|
|
background-color: var(--background-dark);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Global Utility Classes
|
|
Use these in components to avoid CSS duplication
|
|
======================================== */
|
|
|
|
/* Pill-shaped element base */
|
|
.g-pill {
|
|
border-radius: var(--radius-pill);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
/* Interactive hover/focus effects */
|
|
.g-interactive {
|
|
transition: var(--transition-fast);
|
|
}
|
|
.g-interactive:hover,
|
|
.g-interactive:focus-visible {
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.g-interactive:focus {
|
|
scale: 0.9;
|
|
}
|
|
|
|
/* Light background button (with dark mode) */
|
|
.g-btn-light {
|
|
background-color: var(--nord5);
|
|
color: var(--nord0);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.g-btn-light {
|
|
background-color: var(--nord0);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* Dark background button */
|
|
.g-btn-dark,
|
|
.g-btn-dark:visited,
|
|
.g-btn-dark:link {
|
|
background-color: var(--nord0);
|
|
color: var(--nord6);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.g-btn-dark:hover,
|
|
.g-btn-dark:focus-visible {
|
|
background-color: var(--nord1);
|
|
color: var(--nord6);
|
|
}
|
|
|
|
/* Icon badge (circular icon container) */
|
|
.g-icon-badge {
|
|
font-family: "Noto Color Emoji", emoji, sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
text-decoration: none;
|
|
transition: var(--transition-fast);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.g-icon-badge:hover,
|
|
.g-icon-badge:focus-visible {
|
|
transform: scale(1.1);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
/* Tag/chip styling */
|
|
.g-tag,
|
|
.g-tag:visited,
|
|
.g-tag:link {
|
|
font-size: 1.1rem;
|
|
padding: 0.25em 1em;
|
|
border-radius: var(--radius-pill);
|
|
background-color: var(--nord5);
|
|
color: var(--nord0);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
box-shadow: var(--shadow-sm);
|
|
border: none;
|
|
display: inline-block;
|
|
}
|
|
.g-tag:hover,
|
|
.g-tag:focus-visible {
|
|
transform: scale(1.05);
|
|
background-color: var(--nord8);
|
|
box-shadow: var(--shadow-hover);
|
|
color: var(--nord0);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.g-tag,
|
|
.g-tag:visited,
|
|
.g-tag:link {
|
|
background-color: var(--nord0);
|
|
color: white;
|
|
}
|
|
.g-tag:hover,
|
|
.g-tag:focus-visible {
|
|
color: var(--nord0);
|
|
}
|
|
}
|