159 lines
3 KiB
SCSS
159 lines
3 KiB
SCSS
$breakpoint-width: 925px !default;
|
|
|
|
@mixin on-small-screen() {
|
|
@media (max-width: ($breakpoint-width - 1px)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin on-large-screen() {
|
|
@media (min-width: $breakpoint-width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin in-dark-mode() {
|
|
html[theme='dark'] {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
html[animations='off'] {
|
|
&,
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin absolute-center() {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
@mixin blurred-background() {
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
-webkit-backdrop-filter: blur(var(--blur-radius));
|
|
|
|
@supports not (
|
|
(backdrop-filter: blur(var(--blur-radius))) or
|
|
(-webkit-backdrop-filter: blur(var(--blur-radius)))
|
|
) {
|
|
background-color: var(--card-color);
|
|
}
|
|
}
|
|
|
|
@mixin square($size) {
|
|
width: $size;
|
|
height: $size;
|
|
}
|
|
|
|
@mixin title-font() {
|
|
font: 400 3rem 'Comfortaa', sans-serif;
|
|
font-style: normal;
|
|
color: var(--normal-text-color);
|
|
line-height: 1;
|
|
transition: color var(--transition-time);
|
|
|
|
@include on-small-screen {
|
|
font-size: 3rem;
|
|
line-height: 1.1;
|
|
}
|
|
}
|
|
|
|
@mixin sub-title-font() {
|
|
font: 400 1.75rem 'Comfortaa', sans-serif;
|
|
color: var(--normal-text-color);
|
|
font-style: normal;
|
|
hyphens: auto;
|
|
transition: color var(--transition-time);
|
|
}
|
|
|
|
@mixin main-font() {
|
|
font: 400 1.1rem 'Open Sans', sans-serif;
|
|
color: var(--normal-text-color);
|
|
line-height: 1.8;
|
|
hyphens: auto;
|
|
transition: color var(--transition-time);
|
|
}
|
|
|
|
@mixin special-text-font() {
|
|
font: 400 1rem 'Open Sans', sans-serif;
|
|
color: var(--special-text-color);
|
|
font-style: italic;
|
|
transition: color var(--transition-time);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
}
|