~vyivel/eclair.cafe

5868cf447eb87019609134ac856b86f2ecdac972 — Kirill Primak 3 months ago 9d163e4
styles: update colors, use prefers-color-scheme
1 files changed, 34 insertions(+), 11 deletions(-)

M assets/styles/main.scss
M assets/styles/main.scss => assets/styles/main.scss +34 -11
@@ 3,18 3,41 @@

/* Colors */

$foreground: #16100f;
$link-foreground: #681825;
$light-primary: #fff6f2;
$light-secondary: #ffeee5;
$light-accent: #ff9f7f;
$light-title: #f279b5;

$dark-primary: #0c0907;
$dark-secondary: #0f0d0c;
$dark-accent: #660616;
$dark-title: #3f0c26;

:root {
	@media (prefers-color-scheme: light) {
		--background-primary: #{$light-primary};
		--background-secondary: #{$light-secondary};

		--foreground-primary: #{$dark-primary};
		--foreground-accent: #{$dark-accent};
		--foreground-title: #{$dark-title};
	}
	@media (prefers-color-scheme: dark) {
		--background-primary: #{$dark-primary};
		--background-secondary: #{$dark-secondary};

$background: #f7bead;
$header-footer-background: #fec89a;
		--foreground-primary: #{$light-primary};
		--foreground-accent: #{$light-accent};
		--foreground-title: #{$light-title};
	}
}

/* Layout */

html {
	background-color: $background;
	background-color: var(--background-primary);
	font-size: 15pt;
	color: $foreground;
	color: var(--foreground-primary);
	font-family: Lato, sans-serif;
	font-weight: 300;
	height: 100%;


@@ 36,7 59,7 @@ main {
}

header, footer {
	background-color: $header-footer-background;
	background-color: var(--background-secondary);
}

p {


@@ 56,12 79,13 @@ h1 {
}

a {
	color: $link-foreground;
	color: var(--foreground-accent);
}

.title {
	font-family: Patua One, sans-serif; 
	font-weight: normal;
	color: var(--foreground-title);
}

.header-footer {


@@ 74,7 98,6 @@ a {

	.title {
		font-size: 1.75rem;
		color: $foreground;
		text-decoration: none;
		margin: 0.25rem 0;
	}


@@ 99,7 122,7 @@ a {

.tooltip {
	cursor: help;
	border-bottom: 1px dashed $foreground;
	border-bottom: 1px dashed var(--foreground-primary);
}

.emoji {


@@ 152,7 175,7 @@ a {
		$width: 0.25rem;
		$size: 0.35rem;

		border: solid $foreground;
		border: solid var(--foreground-primary);
		border-width: 0 $width $width 0;
		display: inline-block;
		padding: $size;