Add final touches
This commit is contained in:
Schmelczer András
parent
b1fd2f372f
commit
0429ea7f72
64 changed files with 576 additions and 444 deletions
6
src/style/_id.scss
Normal file
6
src/style/_id.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
$_id_value: 0;
|
||||
@function id() {
|
||||
$_id_value: $_id_value + 1 !global;
|
||||
@return $_id_value;
|
||||
}
|
||||
|
||||
|
|
@ -1,48 +1,48 @@
|
|||
@import 'vars';
|
||||
@import 'mixins';
|
||||
@use 'sass:color';
|
||||
@use 'include' as i;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
@include i.responsive() using ($vars) {
|
||||
a {
|
||||
@include special-text-font($vars);
|
||||
$border-shift: 10px;
|
||||
$line-width: 2px;
|
||||
|
||||
@include i.special-text-font($vars);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
$border-shift: 10px;
|
||||
|
||||
transition: transform map_get($vars, $long-transition-time);
|
||||
|
||||
&: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%
|
||||
);
|
||||
}
|
||||
padding-bottom: $line-width;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
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);
|
||||
border-bottom: $line-width dashed map_get($vars, i.$accent-color);
|
||||
transition: transform map_get($vars, i.$transition-time);
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
map_get($vars, i.$card-color) 0,
|
||||
color.adjust(map_get($vars, i.$card-color), $alpha: -1) 4px,
|
||||
color.adjust(map_get($vars, i.$card-color), $alpha: -1) calc(100% - 4px),
|
||||
map_get($vars, i.$card-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
&:before {
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
src/style/configured-responsive.scss
Normal file
7
src/style/configured-responsive.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@use 'vars';
|
||||
@forward "../framework/framework" with (
|
||||
$small-screen-light-theme-variables: vars.$small-screen-light-theme-variables,
|
||||
$small-screen-dark-theme-variables: vars.$small-screen-dark-theme-variables,
|
||||
$large-screen-light-theme-variables: vars.$large-screen-light-theme-variables,
|
||||
$large-screen-dark-theme-variables: vars.$large-screen-dark-theme-variables,
|
||||
);
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
// https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin
|
||||
// add font-display: swap;
|
||||
/*
|
||||
/* lato-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
|
|
|
|||
7
src/style/include.scss
Normal file
7
src/style/include.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@forward "configured-responsive";
|
||||
@forward "mixins";
|
||||
@forward "vars" hide
|
||||
$small-screen-light-theme-variables,
|
||||
$small-screen-dark-theme-variables,
|
||||
$large-screen-light-theme-variables,
|
||||
$large-screen-dark-theme-variables;
|
||||
|
|
@ -1,35 +1,5 @@
|
|||
@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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "configured-responsive";
|
||||
@use "vars";
|
||||
|
||||
@mixin center-children() {
|
||||
display: flex;
|
||||
|
|
@ -46,17 +16,9 @@
|
|||
|
||||
@mixin card-base($vars) {
|
||||
text-align: center;
|
||||
padding: map_get($vars, $normal-margin);
|
||||
box-shadow: map_get($vars, $shadow1), map_get($vars, $shadow2);
|
||||
padding: map_get($vars, vars.$normal-margin);
|
||||
box-shadow: map_get($vars, vars.$shadow);
|
||||
z-index: 1;
|
||||
|
||||
@include on-large-screen {
|
||||
transition: box-shadow map_get($vars, $long-transition-time),
|
||||
background-color map_get($vars, $long-transition-time);
|
||||
&:hover {
|
||||
box-shadow: map_get($vars, $shadow3), map_get($vars, $shadow2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
|
|
@ -69,29 +31,32 @@
|
|||
max-height: $size;
|
||||
}
|
||||
|
||||
@mixin title-font() {
|
||||
@mixin title-font($vars) {
|
||||
font: 400 3.5rem 'Montserrat', serif;
|
||||
font-style: normal;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
line-height: 1;
|
||||
|
||||
@include on-small-screen {
|
||||
@include configured-responsive.on-small-screen {
|
||||
font-size: 3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sub-title-font() {
|
||||
@mixin sub-title-font($vars) {
|
||||
font: 400 2rem 'Montserrat', serif;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@mixin main-font() {
|
||||
@mixin main-font($vars) {
|
||||
font: 400 1.25rem 'Lato', sans-serif;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@mixin special-text-font($vars) {
|
||||
font: 400 1.1rem 'Lato', sans-serif;
|
||||
color: map_get($vars, $special-text-color);
|
||||
color: map_get($vars, vars.$special-text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,115 +1,108 @@
|
|||
@import 'fonts';
|
||||
@use 'fonts';
|
||||
@use "id" as *;
|
||||
|
||||
$_id_value: 0;
|
||||
@function id() {
|
||||
$_id_value: $_id_value + 1 !global;
|
||||
@return $_id_value;
|
||||
}
|
||||
|
||||
/* NAMES */
|
||||
/* KEYS */
|
||||
$background: id();
|
||||
|
||||
$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-background: id();
|
||||
$theme-switcher-foreground: id();
|
||||
$very-light-text-color: id();
|
||||
$special-text-color: id();
|
||||
|
||||
$card-color: id();
|
||||
$sun-color: id();
|
||||
$accent-color: id();
|
||||
$scrollbar-color: id();
|
||||
|
||||
$short-transition-time: id();
|
||||
$long-transition-time: id();
|
||||
$line-width: id();
|
||||
$transition-time: 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();
|
||||
|
||||
$line-width: id();
|
||||
$body-width: id();
|
||||
|
||||
$small-margin: id();
|
||||
$normal-margin: id();
|
||||
$large-margin: id();
|
||||
$icon-size: id();
|
||||
$line-height: id();
|
||||
|
||||
$shadow: id();
|
||||
$inset-shadow: id();
|
||||
/**/
|
||||
|
||||
$breakpoint-width: 925px;
|
||||
|
||||
$universal-variables: (
|
||||
$short-transition-time: 220ms,
|
||||
$long-transition-time: 350ms,
|
||||
$transition-time: 250ms,
|
||||
$line-width: 3px,
|
||||
$line-height: 18px,
|
||||
$theme-switcher-foreground: #f7f78c,
|
||||
$accent-color: #b7455e,
|
||||
$important-card-color: #b7405a,
|
||||
$shadow3: 0 0 15px 4px rgba(0, 0, 0, 0.1),
|
||||
$sun-color: #f7f78c,
|
||||
$very-light-text-color: #ffffff,
|
||||
);
|
||||
|
||||
$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,
|
||||
$large-screen-variables: (
|
||||
$border-radius: 15px,
|
||||
$large-margin: 70px,
|
||||
$normal-margin: 45px,
|
||||
$small-margin: 25px,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
0 0 1px rgba(0, 0, 0, 0.2),
|
||||
),
|
||||
$universal-variables
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.2),
|
||||
),
|
||||
$icon-size: 35px,
|
||||
$body-width: 765px,
|
||||
);
|
||||
|
||||
$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%,
|
||||
$small-screen-variables: (
|
||||
$border-radius: 10px,
|
||||
$large-margin: 60px,
|
||||
$normal-margin: 30px,
|
||||
$small-margin: 15px,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
0 0 1px rgba(0, 0, 0, 0.125),
|
||||
),
|
||||
$universal-variables
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.125),
|
||||
),
|
||||
$icon-size: 25px,
|
||||
$body-width: 90%,
|
||||
);
|
||||
|
||||
$light-theme-variables: map_merge(
|
||||
(
|
||||
$background: #ffffff,
|
||||
$normal-text-color: #31343f,
|
||||
$light-text-color: #7a7d8e,
|
||||
$inverse-text-color: #ffffff,
|
||||
$card-color: #ffffff,
|
||||
$important-card-text-color: #ffffff,
|
||||
$special-text-color: map_get($universal-variables, $accent-color),
|
||||
$scrollbar-color: #ffd6d6,
|
||||
),
|
||||
$universal-variables
|
||||
$light-theme-variables: (
|
||||
$background: #ffffff,
|
||||
$normal-text-color: #31343f,
|
||||
$card-color: #ffffff,
|
||||
$special-text-color: map_get($universal-variables, $accent-color),
|
||||
);
|
||||
|
||||
$dark-theme-variables: map_merge(
|
||||
(
|
||||
$background: #242638,
|
||||
$normal-text-color: #ffffff,
|
||||
$light-text-color: #fff9e0,
|
||||
$inverse-text-color: #242638,
|
||||
$card-color: #263551,
|
||||
$special-text-color: #ffffff,
|
||||
$important-card-text-color: #fff9e0,
|
||||
$scrollbar-color: #ffd6d6,
|
||||
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
$shadow2: 0 0 1px rgba(0, 0, 0, 0.4),
|
||||
$dark-theme-variables: (
|
||||
$background: #242638,
|
||||
$normal-text-color: #ffffff,
|
||||
$card-color: #263551,
|
||||
$special-text-color: #ffffff,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
0 0 1px rgba(0, 0, 0, 0.4),
|
||||
),
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.4),
|
||||
),
|
||||
$universal-variables
|
||||
);
|
||||
|
||||
$small-screen-light-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($small-screen-variables, $light-theme-variables)
|
||||
);
|
||||
$small-screen-dark-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($small-screen-variables, $dark-theme-variables)
|
||||
);
|
||||
$large-screen-light-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($large-screen-variables, $light-theme-variables)
|
||||
);
|
||||
$large-screen-dark-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($large-screen-variables, $dark-theme-variables)
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue