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

Update features

Browse source
This commit is contained in:
schmelczerandras 2020-11-18 23:31:26 +01:00
parent f66f052d7e
commit 4d7d15c3c7
34 changed files with 482 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/style/a.scss
View file

@ -1,48 +0,0 @@
@use 'sass:color';
@use 'style/mixins' as *;
a {
$border-shift: 10px;
$line-width: 2px;
@include special-text-font();
text-decoration: none;
cursor: pointer;
position: relative;
display: inline-block;
overflow: hidden;
padding: 0 3px $line-width 0;
&:before,
&:after {
content: '';
display: block;
position: absolute;
bottom: 0;
}
&:before {
width: calc(100% + #{$border-shift});
border-bottom: $line-width dashed var(--accent-color);
transition: transform var(--transition-time);
}
&:after {
width: 100%;
height: $line-width;
background: linear-gradient(
90deg,
var(--card-color) 0,
transparent 4px,
transparent calc(100% - 4px),
var(--card-color) 100%
);
}
&:hover {
&:before {
transform: translateX(-$border-shift);
}
}
}

67
src/style/mixins.scss
View file

@ -12,6 +12,24 @@ $breakpoint-width: 925px !default;
}
}
@mixin image-button($icon-size) {
display: block;
box-sizing: content-box;
cursor: pointer;
text-decoration: none;
&:hover svg {
transform: translateX(-50%) translateY(-50%) scale(1.15);
}
svg {
@include absolute-center;
@include square($icon-size);
transition: transform var(--transition-time);
transform-origin: center center;
}
}
@mixin center-children() {
display: flex;
align-items: center;
@ -27,7 +45,6 @@ $breakpoint-width: 925px !default;
@mixin card-base() {
text-align: center;
padding: var(--normal-margin);
box-shadow: var(--shadow);
z-index: 1;
width: 100%;
@ -64,7 +81,7 @@ $breakpoint-width: 925px !default;
@mixin main-font() {
font: 400 1.1rem 'Open Sans', sans-serif;
color: var(--normal-text-color);
line-height: 1.6;
line-height: 1.8;
}
@mixin special-text-font() {
@ -72,3 +89,49 @@ $breakpoint-width: 925px !default;
color: var(--special-text-color);
font-style: italic;
}
@mixin link {
$border-shift: 10px;
$line-width: 2px;
@include special-text-font();
text-decoration: none;
cursor: pointer;
position: relative;
display: inline-block;
overflow: hidden;
padding: 0 3px $line-width 0;
&:before,
&:after {
content: '';
display: block;
position: absolute;
bottom: 0;
}
&:before {
width: calc(100% + #{$border-shift});
border-bottom: $line-width dashed var(--accent-color);
transition: transform var(--transition-time);
}
&:after {
width: 100%;
height: $line-width;
background: linear-gradient(
90deg,
var(--card-color) 0,
transparent 4px,
transparent calc(100% - 4px),
var(--card-color) 100%
);
}
&:hover {
&:before {
transform: translateX(-$border-shift);
}
}
}

14
src/style/vars.scss
View file

@ -27,9 +27,9 @@
--normal-margin: 45px;
--small-margin: 25px;
--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
--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;
--inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.07);
--icon-size: 45px;
--large-icon-size: 80px;
--body-width: 765px;
}
}
@ -41,9 +41,9 @@
--normal-margin: 30px;
--small-margin: 15px;
--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.125);
--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;
--inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.07);
--icon-size: 35px;
--large-icon-size: 55px;
--body-width: 90%;
}
}
@ -52,7 +52,7 @@
--background: #242638;
--normal-text-color: #ffffff;
--card-color: #263551;
--blurred-card-color: #26355166;
--blurred-card-color: #26355155;
--blur-radius: 24px;
--special-text-color: #ffffff;
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),