templates/zauberhaft-astro
1
0
Fork 0
mirror of https://github.com/ariqnrnns/zauberhaft-astro.git synced 2025-04-20 03:31:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions
zauberhaft-astro/src/styles/src/css-variable.css
henk 2804a5084f Add public & CSS src files
2022-11-21 10:31:55 +00:00

537 lines
No EOL
13 KiB
CSS
Raw Blame History

/*
* This file contains CSS variables (without dark mode), mixins & typography helpers.
*** Read Ravenbright CSS docs 👉: https://ravenbrightcss.com/docs/customize/cssvariables
* Steps to customize
*** 1. Download Ravenbright CSS 👉: https://github.com/ravenbrightdesign/ravenbrightcss
*** 2. Run `npm install`
*** 3. Run `npm run dev`
*** 4. Change the CSS properties or values & it's done!
*/
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,600,400&display=swap');
/* CSS variables
============================================= */
html,
[data-theme="light"] {
/* Colors */
--rbrh-white: #fff;
--rbrh-black: #090f17;
--rbrh-gray-50: #f7f7f7;
--rbrh-gray-100: #ebeef3;
--rbrh-gray-200: #dfe4eb;
--rbrh-gray-300: #afbbce;
--rbrh-gray-400: #7e92b0;
--rbrh-gray-500: #5c7496;
--rbrh-gray-600: #385580;
--rbrh-gray-700: #1d2c42;
--rbrh-gray-800: #172335;
--rbrh-gray-900: #0f1723;
--rbrh-green-50: #f6fefa;
--rbrh-green-100: #e4fdf1;
--rbrh-green-200: #adf8d6;
--rbrh-green-300: #9df0cb;
--rbrh-green-400: #62e3a7;
--rbrh-green-500: #29d082;
--rbrh-green-600: #078848;
--rbrh-green-700: #054a2b;
--rbrh-green-800: #032114;
--rbrh-green-900: #04100a;
--rbrh-lime-50: #f8fcf7;
--rbrh-lime-100: #ebf7e9;
--rbrh-lime-200: #d0edcc;
--rbrh-lime-300: #c3e8bd;
--rbrh-lime-400: #9bd991;
--rbrh-lime-500: #59bf49;
--rbrh-lime-600: #050605;
--rbrh-lime-700: #1d310e;
--rbrh-lime-800: #0e1c04;
--rbrh-lime-900: #0b0f06;
--rbrh-cyan-50: #ebf9f9;
--rbrh-cyan-100: #c0eeec;
--rbrh-cyan-200: #a2e5e2;
--rbrh-cyan-300: #78d9d5;
--rbrh-cyan-400: #5dd2cd;
--rbrh-cyan-500: #35c7c1;
--rbrh-cyan-600: #098480;
--rbrh-cyan-700: #13716e;
--rbrh-cyan-800: #0e5653;
--rbrh-cyan-900: #0b4d4b;
--rbrh-teal-50: #e7f5f2;
--rbrh-teal-100: #d6f5ed;
--rbrh-teal-200: #acebdc;
--rbrh-teal-300: #7ae5cc;
--rbrh-teal-400: #42e0ba;
--rbrh-teal-500: #14cc9f;
--rbrh-teal-600: #048464;
--rbrh-teal-700: #077156;
--rbrh-teal-800: #053f31;
--rbrh-teal-900: #022019;
--rbrh-red-50: #fee7e7;
--rbrh-red-100: #fdd5d5;
--rbrh-red-200: #faafaf;
--rbrh-red-300: #ec757b;
--rbrh-red-400: #e85a61;
--rbrh-red-500: #e2313a;
--rbrh-red-600: #ce2d35;
--rbrh-red-700: #a02329;
--rbrh-red-800: #7c1b20;
--rbrh-red-900: #5f1518;
--rbrh-magenta-50: #ffedf4;
--rbrh-magenta-100: #ffc6dc;
--rbrh-magenta-200: #ff99c0;
--rbrh-magenta-300: #ff72a8;
--rbrh-magenta-400: #ff297a;
--rbrh-magenta-500: #ff0262;
--rbrh-magenta-600: #d90052;
--rbrh-magenta-700: #9f003c;
--rbrh-magenta-800: #77002d;
--rbrh-magenta-900: #3d0017;
--rbrh-orange-50: #fff2e6;
--rbrh-orange-100: #ffd6b0;
--rbrh-orange-200: #ffc28a;
--rbrh-orange-300: #fea654;
--rbrh-orange-400: #fe9533;
--rbrh-orange-500: #fe7a00;
--rbrh-orange-600: #e76f00;
--rbrh-orange-700: #b45700;
--rbrh-orange-800: #8c4300;
--rbrh-orange-900: #6b3300;
--rbrh-yellow-50: #fffae8;
--rbrh-yellow-100: #fff1c1;
--rbrh-yellow-200: #ffe899;
--rbrh-yellow-300: #ffe072;
--rbrh-yellow-400: #ffd74b;
--rbrh-yellow-500: #ffce24;
--rbrh-yellow-600: #e0ae00;
--rbrh-yellow-700: #aa8500;
--rbrh-yellow-800: #866800;
--rbrh-yellow-900: #5e4a00;
--rbrh-blue-50: #e9eefe;
--rbrh-blue-100: #d6dffe;
--rbrh-blue-200: #c3d0fd;
--rbrh-blue-300: #9db2fc;
--rbrh-blue-400: #2c58f8;
--rbrh-blue-500: rgb(8, 59, 244);
--rbrh-blue-600: #0732ce;
--rbrh-blue-700: #052495;
--rbrh-blue-800: #041b6f;
--rbrh-blue-900: #090f22;
--rbrh-sky-50: #e6f7fe;
--rbrh-sky-100: #d8f5ff;
--rbrh-sky-200: #a5e7ff;
--rbrh-sky-300: #78dbff;
--rbrh-sky-400: #5ad0fb;
--rbrh-sky-500: #00b2f1;
--rbrh-sky-600: #0c78a0;
--rbrh-sky-700: #086385;
--rbrh-sky-800: #08485f;
--rbrh-sky-900: #063b4c;
--rbrh-indigo-50: #eeedfe;
--rbrh-indigo-100: #cac6fc;
--rbrh-indigo-200: #b0abfa;
--rbrh-indigo-300: #8c84f8;
--rbrh-indigo-400: #756df7;
--rbrh-indigo-500: #5348f5;
--rbrh-indigo-600: #4c42df;
--rbrh-indigo-700: #3b33ae;
--rbrh-indigo-800: #040405;
--rbrh-indigo-900: #231e67;
--rbrh-purple-50: #f6ebff;
--rbrh-purple-100: #e4c4ff;
--rbrh-purple-200: #dcb0ff;
--rbrh-purple-300: #ca89ff;
--rbrh-purple-400: #af4eff;
--rbrh-purple-500: #8c00ff;
--rbrh-purple-600: #59039f;
--rbrh-purple-700: #480182;
--rbrh-purple-800: #2b004e;
--rbrh-purple-900: #150027;
--rbrh-violet-50: #eee9fd;
--rbrh-violet-100: #cbbbf8;
--rbrh-violet-200: #b29af4;
--rbrh-violet-300: #8f6cf0;
--rbrh-violet-400: #7950ed;
--rbrh-violet-500: #5824e8;
--rbrh-violet-600: #5021d3;
--rbrh-violet-700: #3e1aa5;
--rbrh-violet-800: #301480;
--rbrh-violet-900: #250f61;
/* Spacing */
--rbrh-spacing-0: 0rem;
--rbrh-spacing-1: 0.125rem;
--rbrh-spacing-2: 0.25rem;
--rbrh-spacing-3: 0.5rem;
--rbrh-spacing-4: 0.75rem;
--rbrh-spacing-5: 1rem;
--rbrh-spacing-6: 1.25rem;
--rbrh-spacing-7: 1.5rem;
--rbrh-spacing-8: 1.75rem;
--rbrh-spacing-9: 2rem;
--rbrh-spacing-10: 2.5rem;
--rbrh-spacing-12: 3rem;
--rbrh-spacing-14: 3.5rem;
--rbrh-spacing-16: 4rem;
--rbrh-spacing-18: 4.5rem;
--rbrh-spacing-20: 5rem;
--rbrh-spacing-22: 5.5rem;
--rbrh-spacing-24: 6rem;
--rbrh-screen-sm: 36rem;
--rbrh-screen-md: 55rem;
--rbrh-screen-lg: 67.5rem;
--rbrh-screen-xl: 81.25rem;
/* Typography */
--rbrh-font-family-sans: "Satoshi", "Helvetica", system-ui, sans-serif,
"Segoe UI", "Arial", "Verdana";
--rbrh-font-family-serif: serif, "Times", "Georgia", "Times New Roman";
--rbrh-font-weight-extrabold: 800;
--rbrh-font-weight-bold: 700;
--rbrh-font-weight-semibold: 600;
--rbrh-font-weight-medium: 500;
--rbrh-font-weight-default: 400;
--rbrh-font-weight-light: 300;
--rbrh-font-size-7xl: 5rem;
--rbrh-font-size-6xl: 3.5rem;
--rbrh-font-size-5xl: 2.9rem;
--rbrh-font-size-4xl: 2.1rem;
--rbrh-font-size-3xl: 1.8rem;
--rbrh-font-size-2xl: 1.5rem;
--rbrh-font-size-xl: 1.375rem;
--rbrh-font-size-lg: 1.25rem;
--rbrh-font-size-md: 1.125rem;
--rbrh-font-size-sm: 1rem;
--rbrh-font-size-xs: 0.875rem;
--rbrh-font-size-xxs: 0.75rem;
--rbrh-line-h-7xl: 5.25rem;
--rbrh-line-h-6xl: 3.75rem;
--rbrh-line-h-5xl: 3.15rem;
--rbrh-line-h-4xl: 2.5rem;
--rbrh-line-h-3xl: 2.2rem;
--rbrh-line-h-2xl: 2rem;
--rbrh-line-h-xl: 1.75rem;
--rbrh-line-h-lg: 1.5rem;
--rbrh-line-h-md: 1.5rem;
--rbrh-line-h-sm: 1.25rem;
--rbrh-line-h-xs: 1.25rem;
--rbrh-line-h-xxs: 1rem;
--rbrh-letter-spacing-lg: 0.0125rem;
--rbrh-letter-spacing-md: -0.025rem;
--rbrh-letter-spacing-sm: -0.0375rem;
--rbrh-letter-spacing-xs: -0.05rem;
/* Border radius */
--rbrh-radius-circle: 100rem;
--rbrh-radius-xl: 1.25rem;
--rbrh-radius-lg: 1rem;
--rbrh-radius-md: 0.75rem;
--rbrh-radius-sm: 0.5rem;
--rbrh-radius-xs: 0.25rem;
/* Box shadow */
--rbrh-shadow-xl: rgba(0, 0, 0, 0.1) 0px 16px 32px;
--rbrh-shadow-lg: rgba(0, 0, 0, 0.2) 0px 4px 48px -4px,
rgba(0, 0, 0, 0.25) 0px 4px 28px -4px;
--rbrh-shadow-md: 0 5px 40px -5px rgba(0, 0, 0, 0.1);
--rbrh-shadow-sm: 0px 4px 10px -8px rgba(0, 0, 0, 0.1),
0px 4px 10px -2px rgba(0, 0, 0, 0.1);
--rbrh-shadow-xs: 0px 2px 8px -3px rgba(0, 0, 0, 0.07),
0px 2px 8px -1px rgba(0, 0, 0, 0.08);
--rbrh-shadow-inset-xs: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--rbrh-shadow-inset-sm: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
--rbrh-shadow-inset-md: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
/* Theming */
--rbrh-background-300: var(--rbrh-gray-300);
--rbrh-background-200: var(--rbrh-gray-200);
--rbrh-background-50: var(--rbrh-gray-50);
--rbrh-background: var(--rbrh-white);
--rbrh-border-500: var(--rbrh-gray-500);
--rbrh-border-400: var(--rbrh-gray-400);
--rbrh-border-300: var(--rbrh-gray-300);
--rbrh-border-200: var(--rbrh-gray-200);
--rbrh-border-100: var(--rbrh-gray-100);
--rbrh-text: var(--rbrh-black);
--rbrh-text-900: var(--rbrh-gray-900);
--rbrh-text-800: var(--rbrh-gray-800);
--rbrh-text-700: var(--rbrh-gray-700);
--rbrh-text-600: var(--rbrh-gray-600);
--rbrh-text-link-hover: inherit;
--rbrh-text-link: var(--rbrh-white);
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-400);
}
/* Font-family & background-color
============================================= */
body {
font-family: var(--rbrh-font-family-sans);
background-color: var(--rbrh-background);
}
/*! purgecss start ignore */
[data-theme="dark"] {
--rbrh-background-300: var(--rbrh-gray-600);
--rbrh-background-200: var(--rbrh-gray-700);
--rbrh-background-50: var(--rbrh-gray-800);
--rbrh-background: var(--rbrh-black);
--rbrh-border-500: var(--rbrh-gray-500);
--rbrh-border-400: var(--rbrh-gray-400);
--rbrh-border-300: var(--rbrh-gray-700);
--rbrh-border-200: var(--rbrh-gray-800);
--rbrh-border-100: var(--rbrh-gray-900);
--rbrh-text: var(--rbrh-gray-50);
--rbrh-text-900: var(--rbrh-gray-100);
--rbrh-text-800: var(--rbrh-gray-200);
--rbrh-text-700: var(--rbrh-gray-300);
--rbrh-text-600: var(--rbrh-gray-400);
--rbrh-text-link-hover: var(--rbrh-white);
--rbrh-text-link: var(--rbrh-white);
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-300);
}
/*! purgecss end ignore */
/* Breakpoint mixins
============================================= */
@define-mixin screen-xs-up {
@media (min-width: 12.5rem) {
@mixin-content;
}
}
@define-mixin screen-sm-up {
@media (min-width: 36rem) {
@mixin-content;
}
}
@define-mixin screen-md-up {
@media (min-width: 55rem) {
@mixin-content;
}
}
@define-mixin screen-lg-up {
@media (min-width: 67.5rem) {
@mixin-content;
}
}
@define-mixin screen-xl-up {
@media (min-width: 81.25rem) {
@mixin-content;
}
}
@define-mixin screen-xxl-up {
@media (min-width: 100rem) {
@mixin-content;
}
}
/* Typography mixins
============================================= */
@define-mixin font-size-7xl {
font-size: var(--rbrh-font-size-7xl);
line-height: var(--rbrh-line-h-7xl);
letter-spacing: var(--rbrh-letter-spacing-md);
}
@define-mixin font-size-6xl {
font-size: var(--rbrh-font-size-6xl);
line-height: var(--rbrh-line-h-6xl);
letter-spacing: var(--rbrh-letter-spacing-md);
}
@define-mixin font-size-5xl {
font-size: var(--rbrh-font-size-5xl);
line-height: var(--rbrh-line-h-5xl);
letter-spacing: var(--rbrh-letter-spacing-lg);
}
@define-mixin font-size-4xl {
font-size: var(--rbrh-font-size-4xl);
line-height: var(--rbrh-line-h-4xl);
}
@define-mixin font-size-3xl {
font-size: var(--rbrh-font-size-3xl);
line-height: var(--rbrh-line-h-3xl);
}
@define-mixin font-size-2xl {
font-size: var(--rbrh-font-size-2xl);
line-height: var(--rbrh-line-h-xl);
letter-spacing: var(--rbrh-letter-spacing-lg);
}
@define-mixin font-size-xl {
font-size: var(--rbrh-font-size-xl);
line-height: var(--rbrh-line-h-xl);
letter-spacing: var(--rbrh-letter-spacing-lg);
}
@define-mixin font-size-lg {
font-size: var(--rbrh-font-size-lg);
line-height: var(--rbrh-line-h-md);
letter-spacing: var(--rbrh-letter-spacing-xl);
}
@define-mixin font-size-md {
font-size: var(--rbrh-font-size-md);
line-height: var(--rbrh-line-h-md);
letter-spacing: normal;
}
@define-mixin font-size-sm {
font-size: var(--rbrh-font-size-sm);
line-height: var(--rbrh-line-h-md);
letter-spacing: normal;
}
@define-mixin font-size-xs {
font-size: var(--rbrh-font-size-xs);
line-height: var(--rbrh-line-h-sm);
}
@define-mixin font-size-xxs {
font-size: var(--rbrh-font-size-xxs);
line-height: var(--rbrh-line-h-xxs);
}
/* Font size
============================================= */
@mixin screen-xs-up {
h1,
.h1 {
@mixin font-size-5xl;
}
h2,
.h2 {
@mixin font-size-4xl;
}
h3,
.h3 {
@mixin font-size-3xl;
}
h4,
.h4 {
@mixin font-size-2xl;
}
h5,
.h5 {
@mixin font-size-xl;
}
h6,
.h6 {
@mixin font-size-lg;
}
}
@mixin screen-lg-up {
h1,
.h1 {
@mixin font-size-7xl;
}
h2,
.h2 {
@mixin font-size-6xl;
}
h3,
.h3 {
@mixin font-size-5xl;
}
h4,
.h4 {
@mixin font-size-4xl;
}
h5,
.h5 {
@mixin font-size-2xl;
}
h6,
.h6 {
@mixin font-size-lg;
}
}
p,
.par {
@mixin font-size-md;
}
.subtitle,
label,
summary {
@mixin font-size-sm;
width: fit-content;
}
small,
.small {
@mixin font-size-xxs;
}
.caption {
@mixin font-size-xs;
}
/* Text styles
============================================= */
.h1,
h1 {
color: var(--rbrh-text-900);
font-weight: var(--rbrh-font-weight-bold);
word-break: normal;
}
.h2,
h2,
.h3,
h3,
.h4,
h4 {
color: var(--rbrh-text-900);
font-weight: var(--rbrh-font-weight-bold);
}
.h5,
h5,
.h6,
h6 {
color: var(--rbrh-text-800);
font-weight: var(--rbrh-font-weight-bold);
}
p,
a,
span,
li {
font-weight: var(--rbrh-font-weight-medium);
color: var(--rbrh-text-800);
}
small,
label,
cite,
summary {
color: var(--rbrh-text-700);
}
summary {
font-weight: var(--rbrh-font-weight-semibold);
}
Reference in a new issue View git blame Copy permalink