andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Mostly done

Browse source
This commit is contained in:
Schmelczer András 2019-12-29 15:30:41 +01:00
parent 632a7703ff
commit 10015a4ebe
23 changed files with 258 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/style/a.scss
View file

@ -12,7 +12,7 @@ a {
$border-shift: 10px;
transition: transform $slow-transition-time;
transition: transform $long-transition-time;
$dot-size: 4px;
&:before {
@ -38,7 +38,7 @@ a {
width: calc(100% + #{$border-shift});
z-index: 0;
border-bottom: $dot-size dotted $accent-color;
transition: transform $slow-transition-time;
transition: transform $long-transition-time;
}
&:hover {

2
src/style/fonts.scss
View file

@ -1,3 +1,5 @@
// https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin
/* lato-regular - latin */
@font-face {
font-family: "Lato";

20
src/style/mixins.scss
View file

@ -8,30 +8,27 @@
%card {
text-align: center;
border-radius: $border-radius;
padding: $normal-margin;
box-shadow: $shadow;
box-shadow: $shadow1, $shadow2;
z-index: 1;
@media (max-width: $breakpoint-width) {
& {
transition: box-shadow $fast-transition-time;
@media (min-width: $breakpoint-width) {
transition: box-shadow $long-transition-time;
&:hover {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
}
&:hover {
box-shadow: $shadow3, $shadow2;
}
}
}
@mixin card() {
@extend %card;
border-radius: $border-radius;
background-color: $card-color;
}
@mixin important-card() {
@extend %card;
background-color: $accent-color;
* {
@ -53,6 +50,11 @@
font: 400 3.5rem "Montserrat", serif;
font-style: normal;
line-height: 1;
@media (max-width: $breakpoint-width) {
font-size: 3rem;
line-height: 1.1;
}
}
@mixin sub-title-font() {

30
src/style/vars.scss
View file

@ -1,8 +1,6 @@
@import "fonts";
$background-start: white;
$background-end: white;
$background: white;
$background-gradient: linear-gradient(90deg, #fff9e0 0, #ffd6d6 100%);
$normal-text-color: #31343f;
$light-text-color: #7a7d8e;
@ -12,32 +10,40 @@ $card-color: #ffffff;
$accent-color: #aa4465;
$scrollbar-color: #ffd6d6;
$fast-transition-time: 220ms;
$slow-transition-time: 350ms;
$short-transition-time: 220ms;
$long-transition-time: 350ms;
$line-width: 3px;
$border-radius: 25px;
$breakpoint-width: 900px;
$border-radius: 15px;
$breakpoint-width: 925px;
$large-margin: var(--large-margin);
$normal-margin: var(--normal-margin);
$small-margin: var(--small-margin);
$line-height: 18px;
$shadow: 0 0 5px rgba(0, 0, 0, 0.125);
$shadow1: var(--shadow1);
$shadow2: var(--shadow2);
$shadow3: 0 0 15px 4px rgba(0, 0, 0, 0.1);
$blur-radius: 9px;
$icon-size: var(--icon-size);
$body-width: var(--body-width);
: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);
@media (max-width: $breakpoint-width) {
--normal-margin: 35px;
--large-margin: 60px;
--normal-margin: 30px;
--small-margin: 15px;
--icon-size: 20px;
--body-width: 85%;
--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);
}
}