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

Add final touches

Browse source
This commit is contained in:
Schmelczer András 2020-01-10 20:10:59 +01:00
parent b1fd2f372f
commit 0429ea7f72
64 changed files with 576 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/styles.scss
View file

@ -1,91 +1,120 @@
@import 'style/vars';
@import 'style/mixins';
@import 'style/a';
@import 'framework/index';
@use 'style/include' as *;
@use 'style/a';
@use 'framework/styles/index';
@include responsive() using ($vars) {
& {
background-color: map_get($vars, $background);
transition: background-color map_get($vars, $long-transition-time);
height: 100%;
background-color: map_get($vars, $background);
transition: background-color map_get($vars, $transition-time);
touch-action: manipulation;
@include on-small-screen {
font-size: 0.8em;
}
}
body {
@include main-font();
:focus {
outline: none;
//noinspection CssInvalidFunction
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
&:not(:hover) {
outline: map_get($vars, $accent-color) solid 2px;
outline-offset: 4px;
}
}
height: 100%;
overflow: hidden;
::-moz-selection {
background-color: map_get($vars, $accent-color);
color: map_get($vars, $very-light-text-color);
}
::selection {
background-color: map_get($vars, $accent-color);
color: map_get($vars, $very-light-text-color);
}
*,
*::before,
*::after {
@include main-font($vars);
margin: 0;
padding: 0;
box-sizing: border-box;
color: map_get($vars, $normal-text-color);
transition: background-color map_get($vars, $long-transition-time),
color map_get($vars, $long-transition-time);
transition: background-color map_get($vars, $transition-time),
color map_get($vars, $transition-time);
hyphens: auto;
:focus {
/* border: 2px solid map_get($vars, $accent-color);
outline: 0;
border-radius: map_get($vars, $border-radius);*/
}
touch-action: manipulation;
}
img,
video {
video,
.figure-container {
width: 100%;
height: auto;
object-fit: contain;
}
::-moz-selection {
background: map_get($vars, $accent-color);
color: map_get($vars, $inverse-text-color);
}
::selection {
background: map_get($vars, $accent-color);
color: map_get($vars, $inverse-text-color);
}
.figure-container {
font-size: 0;
box-shadow: map_get($vars, $inset-shadow);
pointer-events: none;
cursor: pointer;
.main {
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
will-change: transform;
-webkit-overflow-scrolling: touch;
perspective: 5px;
perspective-origin: center center;
noscript {
@include square(100%);
@include center-children();
* {
pointer-events: all;
position: relative;
z-index: -2;
}
}
@include on-large-screen {
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
.primitive-text,
.primitive-anchor,
.figure-container {
margin-top: map_get($vars, $line-height);
}
.primitive-text {
text-align: left;
}
body {
height: 100%;
overflow: hidden;
//noinspection CssInvalidFunction
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
.main {
height: 100vh; // to take mobile nav-bar into account
overflow-y: scroll;
overflow-x: hidden;
will-change: transform;
perspective: 5px;
perspective-origin: center center;
noscript {
@include square(100%);
@include center-children();
}
&::-webkit-scrollbar-thumb {
background-color: map_get($vars, $accent-color);
border-radius: map_get($vars, $border-radius);
@include on-large-screen {
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: map_get($vars, $accent-color);
border-radius: map_get($vars, $border-radius);
}
}
}
}