Add dark mode
This commit is contained in:
Schmelczer András
parent
48a55a4a97
commit
073f087e52
40 changed files with 864 additions and 531 deletions
|
|
@ -1,48 +1,51 @@
|
|||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
a {
|
||||
@include insignificant-font();
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
@include responsive() using ($vars) {
|
||||
a {
|
||||
@include insignificant-font();
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: map_get($vars, $accent-color);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
$border-shift: 10px;
|
||||
$border-shift: 10px;
|
||||
|
||||
transition: transform $long-transition-time;
|
||||
transition: transform map_get($vars, $long-transition-time);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
$card-color 0,
|
||||
transparentize($card-color, 1) 4px,
|
||||
transparentize($card-color, 1) calc(100% - 4px),
|
||||
$card-color 100%
|
||||
);
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: map_get($vars, $line-width);
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
map_get($vars, $card-color) 0,
|
||||
transparentize(map_get($vars, $card-color), 1) 4px,
|
||||
transparentize(map_get($vars, $card-color), 1) calc(100% - 4px),
|
||||
map_get($vars, $card-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% + #{$border-shift});
|
||||
z-index: 0;
|
||||
border-bottom: $line-width dashed $accent-color;
|
||||
transition: transform $long-transition-time;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
transform: translateX(-$border-shift);
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% + #{$border-shift});
|
||||
z-index: 0;
|
||||
border-bottom: map_get($vars, $line-width) dashed
|
||||
map_get($vars, $accent-color);
|
||||
transition: transform map_get($vars, $long-transition-time);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,57 @@
|
|||
@import 'vars';
|
||||
|
||||
@mixin on-small-screen() {
|
||||
@media (max-width: $breakpoint-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin on-large-screen() {
|
||||
@media (min-width: $breakpoint-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin responsive() {
|
||||
html {
|
||||
@include on-small-screen {
|
||||
@content (map_merge($small-screen-variables, $light-theme-variables));
|
||||
&[theme='dark'] {
|
||||
@content (map_merge($small-screen-variables, $dark-theme-variables));
|
||||
}
|
||||
}
|
||||
}
|
||||
@include on-large-screen {
|
||||
html {
|
||||
@content (map_merge($large-screen-variables, $light-theme-variables));
|
||||
&[theme='dark'] {
|
||||
@content (map_merge($large-screen-variables, $dark-theme-variables));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center-children() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
%card {
|
||||
@mixin card-base($vars) {
|
||||
text-align: center;
|
||||
padding: $normal-margin;
|
||||
box-shadow: $shadow1, $shadow2;
|
||||
padding: map_get($vars, $normal-margin);
|
||||
box-shadow: map_get($vars, $shadow1), map_get($vars, $shadow2);
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: $breakpoint-width) {
|
||||
transition: box-shadow $long-transition-time;
|
||||
@include on-large-screen {
|
||||
transition: box-shadow map_get($vars, $long-transition-time);
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow3, $shadow2;
|
||||
box-shadow: map_get($vars, $shadow3), map_get($vars, $shadow2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card() {
|
||||
@extend %card;
|
||||
border-radius: $border-radius;
|
||||
background-color: $card-color;
|
||||
}
|
||||
|
||||
@mixin important-card() {
|
||||
@extend %card;
|
||||
background-color: $accent-color;
|
||||
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
|
@ -51,7 +67,7 @@
|
|||
font-style: normal;
|
||||
line-height: 1;
|
||||
|
||||
@media (max-width: $breakpoint-width) {
|
||||
@include on-small-screen {
|
||||
font-size: 3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,114 @@
|
|||
@import 'fonts';
|
||||
|
||||
$background: #ffffff;
|
||||
$_id_value: 0;
|
||||
@function id() {
|
||||
$_id_value: $_id_value + 1 !global;
|
||||
@return $_id_value;
|
||||
}
|
||||
|
||||
$normal-text-color: #31343f;
|
||||
$light-text-color: #7a7d8e;
|
||||
$inverse-text-color: #ffffff;
|
||||
/* NAMES */
|
||||
$background: id();
|
||||
|
||||
$card-color: #ffffff;
|
||||
$accent-color: #aa4465;
|
||||
$scrollbar-color: #ffd6d6;
|
||||
$normal-text-color: id();
|
||||
$light-text-color: id();
|
||||
$important-card-text-color: id();
|
||||
|
||||
$inverse-text-color: id();
|
||||
$card-color: id();
|
||||
$important-card-color: id();
|
||||
$theme-switcher-color: id();
|
||||
|
||||
$accent-color: id();
|
||||
$scrollbar-color: id();
|
||||
|
||||
$short-transition-time: id();
|
||||
$long-transition-time: id();
|
||||
$line-width: id();
|
||||
$border-radius: id();
|
||||
$breakpoint-width: id();
|
||||
|
||||
$large-margin: id();
|
||||
$normal-margin: id();
|
||||
$small-margin: id();
|
||||
$line-height: id();
|
||||
|
||||
$shadow1: id();
|
||||
$shadow2: id();
|
||||
$shadow3: id();
|
||||
|
||||
$body-width: id();
|
||||
|
||||
$icon-size: id();
|
||||
/**/
|
||||
|
||||
$short-transition-time: 220ms;
|
||||
$long-transition-time: 350ms;
|
||||
$line-width: 3px;
|
||||
$border-radius: var(--border-radius);
|
||||
$breakpoint-width: 925px;
|
||||
|
||||
$large-margin: var(--large-margin);
|
||||
$normal-margin: var(--normal-margin);
|
||||
$small-margin: var(--small-margin);
|
||||
$line-height: 18px;
|
||||
$universal-variables: (
|
||||
$short-transition-time: 220ms,
|
||||
$long-transition-time: 350ms,
|
||||
$line-width: 3px,
|
||||
$line-height: 18px,
|
||||
$shadow3: 0 0 15px 4px rgba(0, 0, 0, 0.1),
|
||||
);
|
||||
|
||||
$shadow1: var(--shadow1);
|
||||
$shadow2: var(--shadow2);
|
||||
$shadow3: 0 0 15px 4px rgba(0, 0, 0, 0.1);
|
||||
$light-theme-variables: map_merge(
|
||||
(
|
||||
$background: #ffffff,
|
||||
$normal-text-color: #31343f,
|
||||
$light-text-color: #7a7d8e,
|
||||
$inverse-text-color: #ffffff,
|
||||
$theme-switcher-color: #f7f78c,
|
||||
$card-color: #ffffff,
|
||||
$important-card-color: #aa4465,
|
||||
$important-card-text-color: #ffffff,
|
||||
$accent-color: #aa4465,
|
||||
$scrollbar-color: #ffd6d6,
|
||||
),
|
||||
$universal-variables
|
||||
);
|
||||
|
||||
$icon-size: var(--icon-size);
|
||||
$body-width: var(--body-width);
|
||||
$dark-theme-variables: map_merge(
|
||||
(
|
||||
$background: #242638,
|
||||
$normal-text-color: #ffffff,
|
||||
$light-text-color: #fff9e0,
|
||||
$inverse-text-color: #242638,
|
||||
$theme-switcher-color: #ffff92,
|
||||
$card-color: #263551,
|
||||
$important-card-text-color: #fff9e0,
|
||||
$accent-color: #f7f78c,
|
||||
$important-card-color: #263551,
|
||||
$scrollbar-color: #ffd6d6,
|
||||
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
$shadow2: 0 0 1px rgba(0, 0, 0, 0.4),
|
||||
),
|
||||
$universal-variables
|
||||
);
|
||||
|
||||
:root {
|
||||
--large-margin: 70px;
|
||||
--normal-margin: 45px;
|
||||
--small-margin: 25px;
|
||||
--icon-size: 35px;
|
||||
--body-width: 765px;
|
||||
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075);
|
||||
--shadow2: 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
--border-radius: 15px;
|
||||
$large-screen-variables: map_merge(
|
||||
(
|
||||
$border-radius: 15px,
|
||||
$large-margin: 70px,
|
||||
$normal-margin: 45px,
|
||||
$small-margin: 25px,
|
||||
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
$shadow2: 0 0 1px rgba(0, 0, 0, 0.2),
|
||||
$icon-size: 35px,
|
||||
$body-width: 765px,
|
||||
),
|
||||
$universal-variables
|
||||
);
|
||||
|
||||
@media (max-width: $breakpoint-width) {
|
||||
--large-margin: 60px;
|
||||
--normal-margin: 30px;
|
||||
--small-margin: 15px;
|
||||
--icon-size: 25px;
|
||||
--body-width: 90%;
|
||||
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow2: 0 0 1px rgba(0, 0, 0, 0.125);
|
||||
--border-radius: 10px;
|
||||
}
|
||||
}
|
||||
$small-screen-variables: map_merge(
|
||||
(
|
||||
$border-radius: 10px,
|
||||
$large-margin: 60px,
|
||||
$normal-margin: 30px,
|
||||
$small-margin: 15px,
|
||||
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
$shadow2: 0 0 1px rgba(0, 0, 0, 0.125),
|
||||
$icon-size: 25px,
|
||||
$body-width: 90%,
|
||||
),
|
||||
$universal-variables
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue