janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 21:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

df

Browse Source
This commit is contained in:
Janis
2022-12-23 00:16:56 +01:00
parent e44d6cc967
commit 1bb4cc82e2
12 changed files with 164 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
styles/variables.scss
View File

@@ -1,59 +1,70 @@
/* By default colors are in dark mode */
/* Colors: General */
:root {
/*! By default colors are in DARK mode */
/* Colors: General */
--color-background-body: #181a1b;
--color-font: #ffffff;
--color-shadow-nav: #00000033;
$color-background-body: #ffffff; //181a1b
$color-font: #000000;
$color-shadow-nav: #000c2b0d;
// Light
.theme-light {
$color-background-body: #ffffff; //181a1b
$color-font: #000000;
$color-shadow-nav: #000c2b0d;
--color-overlay-mix: var(--color-font);
--color-background-nav: transparent;
--color-svg-nav: rgb(191, 191, 191);
--color-background-card: rgba(123, 123, 123, 0.13);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
/* Colors: Markdown */
--md-color-font: rgb(220, 217, 217);
--md-color-headline: rgb(229, 228, 228);
--md-color-hr: rgba(125, 125, 125, 0.481);
--md-color-table-col-even-background: #3b556f;
--md-color-table-col-odd-background: #2f4459;
--md-color-table-row-even-background: rgba(52, 52, 52, 0.174);
--md-color-table-row-odd-background: transparent;
--md-color-blockquote-border: var(--color-accent);
--md-color-blockquote-background: rgba(52, 52, 52, 0.2);
.theme-light {
--color-background-body: #ffffff;
--color-font: #000000;
--color-shadow-nav: #000c2b0d;
--color-overlay-mix: var(--color-font);
--color-background-nav: transparent;
--color-svg-nav: rgb(54, 54, 54);
--color-background-card: rgba(171, 170, 170, 0.13);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
/* Colors: Markdown */
--md-color-font: rgb(33, 33, 33);
--md-color-headline: rgb(22, 22, 22);
--md-color-hr: rgba(145, 145, 145, 0.481);
--md-color-table-col-even-background: #3b556f;
--md-color-table-col-odd-background: #2f4459;
--md-color-table-row-even-background: rgba(150, 148, 148, 0.174);
--md-color-table-row-odd-background: transparent;
--md-color-blockquote-border: var(--color-accent);
--md-color-blockquote-background: rgba(176, 175, 175, 0.2);
}
/* Tutorial Page */
--tutorial-grid-sticky-top: 60px;
--tutorial-content-table-width: 200px;
--tutorial-sidebar-width: 200px;
--tutorial-breakpoint-1: 1200px;
--tutorial-breakpoint-2: 1000px;
--tutorial-breakpoint-3: 700px;
/* Footer */
--footer-ad-container-width: 920px;
--footer-ad-container-height: 90px;
--footer-breakpoint-1: 1270px;
--footer-breakpoint-2: 950px;
--footer-breakpoint-3: 800px;
--footer-breakpoint-4: 440px;
}
// Dark
.theme-dark {
$color-background-body: #181a1b; //181a1b
$color-font: #ffffff;
$color-shadow-nav: #00000033;
}
$color-overlay-mix: $color-font;
$color-background-nav: transparent;
$color-background-card: mix($color-overlay-mix, $color-background-body, 5%);
$color-accent: #2294ff;
$color-font-link: $color-accent;
/* Colors: Markdown */
$md-color-font: mix($color-background-body, $color-font, 5%);
$md-color-headline: mix($color-background-body, $color-font, 20%);
$md-color-hr: mix($color-background-body, $color-overlay-mix, 80%);
$md-color-table-col-even-background: #3b556f;
$md-color-table-col-odd-background: #2f4459;
$md-color-table-row-even-background: mix(
$color-background-body,
$color-font,
95%
);
$md-color-table-row-odd-background: transparent;
$md-color-blockquote-border: $color-accent;
$md-color-blockquote-background: mix($color-background-body, $color-font, 95%);
/* Tutorial Page */
$tutorial-grid-sticky-top: 60px;
$tutorial-content-table-width: 200px;
$tutorial-sidebar-width: 200px;
$tutorial-breakpoint-1: 1200px;
$tutorial-breakpoint-2: 1000px;
$tutorial-breakpoint-3: 700px;
/* Footer */
$footer-ad-container-width: 920px;
$footer-ad-container-height: 90px;
$footer-breakpoint-1: 1270px;
$footer-breakpoint-2: 950px;
$footer-breakpoint-3: 800px;
$footer-breakpoint-4: 440px;