Update CSS variable architecture
This commit is contained in:
schmelczerandras
parent
d77aabf966
commit
7e75685b0e
39 changed files with 585 additions and 1952 deletions
|
|
@ -1,69 +1,64 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
section#about {
|
||||
@include card-base($vars);
|
||||
background-color: map_get($vars, $accent-color);
|
||||
font-size: 0;
|
||||
section#about {
|
||||
@include card-base();
|
||||
background-color: var(--accent-color);
|
||||
font-size: 0;
|
||||
|
||||
$img-size: 125px;
|
||||
h1,
|
||||
img,
|
||||
.placeholder {
|
||||
@include title-font($vars);
|
||||
}
|
||||
$img-size: 125px;
|
||||
h1,
|
||||
img,
|
||||
.placeholder {
|
||||
@include title-font();
|
||||
}
|
||||
|
||||
img {
|
||||
@include square($img-size);
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
@include main-font();
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
h1 {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
p,
|
||||
h1 {
|
||||
color: var(--very-light-text-color);
|
||||
margin-top: var(--small-margin);
|
||||
}
|
||||
|
||||
@include on-large-screen {
|
||||
$img-size: 190px;
|
||||
|
||||
width: var(--body-width);
|
||||
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
img {
|
||||
@include square($img-size);
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
|
||||
}
|
||||
|
||||
p {
|
||||
@include main-font($vars);
|
||||
text-align: justify;
|
||||
.placeholder {
|
||||
@include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
|
||||
box-sizing: content-box;
|
||||
float: left;
|
||||
margin: 0 0.75ex 0.75ex 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
p,
|
||||
h1 {
|
||||
color: map_get($vars, $very-light-text-color);
|
||||
margin-top: map_get($vars, $small-margin);
|
||||
}
|
||||
|
||||
@include on-large-screen {
|
||||
$img-size: 190px;
|
||||
|
||||
width: map_get($vars, $body-width);
|
||||
margin: calc(#{map_get($vars, $normal-margin)} + #{$img-size} * 1 / 3)
|
||||
auto 0 auto;
|
||||
position: relative;
|
||||
border-radius: map_get($vars, $border-radius);
|
||||
|
||||
img {
|
||||
@include square($img-size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
@include square(
|
||||
calc(#{$img-size} * 2 / 3 - #{map_get($vars, $normal-margin)})
|
||||
);
|
||||
box-sizing: content-box;
|
||||
float: left;
|
||||
margin: 0 0.75ex 0.75ex 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
}
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
canvas#background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -10;
|
||||
canvas#background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -10;
|
||||
|
||||
@media print {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
@media print {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class PageBackground extends PageElement {
|
|||
public static readonly ANIMATION_TIME = 250;
|
||||
|
||||
private backgroundSize: Animation<Vec2>;
|
||||
private scrollPosition: number = 0;
|
||||
private scrollPosition = 0;
|
||||
private previousTimestamp: DOMHighResTimeStamp = null;
|
||||
private readonly blobs: Array<Blob> = [];
|
||||
private readonly canvas: HTMLCanvasElement;
|
||||
|
|
@ -179,11 +179,7 @@ export class PageBackground extends PageElement {
|
|||
);
|
||||
}
|
||||
|
||||
private convertFrom2Dto3D(
|
||||
p: Vec2,
|
||||
z: number,
|
||||
scrollPosition: number = 0
|
||||
): Vec2 {
|
||||
private convertFrom2Dto3D(p: Vec2, z: number, scrollPosition = 0): Vec2 {
|
||||
const m = 1 + z / PageBackground.PERSPECTIVE;
|
||||
return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
.content {
|
||||
margin-top: map_get($vars, $small-margin);
|
||||
.content {
|
||||
margin-top: var(--small-margin);
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,60 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
footer#page-footer {
|
||||
text-align: center;
|
||||
footer#page-footer {
|
||||
text-align: center;
|
||||
|
||||
margin-top: map_get($vars, $large-margin);
|
||||
width: 100%;
|
||||
margin-top: var(--large-margin);
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
@include title-font($vars);
|
||||
}
|
||||
h2 {
|
||||
@include title-font();
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: map_get($vars, $normal-margin);
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
ul {
|
||||
margin-top: var(--normal-margin);
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
@include center-children();
|
||||
justify-content: flex-start;
|
||||
li {
|
||||
@include center-children();
|
||||
justify-content: flex-start;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: map_get($vars, $line-height);
|
||||
}
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--line-height);
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
@include max-square(map_get($vars, $icon-size));
|
||||
margin-right: map_get($vars, $small-margin);
|
||||
img,
|
||||
svg {
|
||||
@include max-square(var(--icon-size));
|
||||
margin-right: var(--small-margin);
|
||||
|
||||
* {
|
||||
fill: map_get($vars, $normal-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.4rem;
|
||||
* {
|
||||
fill: var(--normal-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside.other {
|
||||
@include center-children();
|
||||
flex-direction: column;
|
||||
margin: map_get($vars, $large-margin) auto 0 auto;
|
||||
padding-bottom: map_get($vars, $line-height);
|
||||
width: map_get($vars, $body-width);
|
||||
|
||||
h6 {
|
||||
display: inline;
|
||||
&,
|
||||
* {
|
||||
@include special-text-font($vars);
|
||||
color: map_get($vars, $normal-text-color);
|
||||
}
|
||||
opacity: 0.75;
|
||||
a {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside.other {
|
||||
@include center-children();
|
||||
flex-direction: column;
|
||||
margin: var(--large-margin) auto 0 auto;
|
||||
padding-bottom: var(--line-height);
|
||||
width: var(--body-width);
|
||||
|
||||
h6 {
|
||||
display: inline;
|
||||
&,
|
||||
* {
|
||||
@include special-text-font();
|
||||
color: var(--normal-text-color);
|
||||
}
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,39 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
section#image-viewer {
|
||||
@include center-children();
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
section#image-viewer {
|
||||
@include center-children();
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
|
||||
#container > * {
|
||||
width: auto;
|
||||
height: auto;
|
||||
#container > * {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
@include on-large-screen {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
}
|
||||
@include on-large-screen {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
#cancel {
|
||||
@include square(map_get($vars, $icon-size));
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
padding: map_get($vars, $normal-margin);
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
@include on-small-screen {
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
}
|
||||
}
|
||||
|
||||
#cancel {
|
||||
@include square(var(--icon-size));
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
padding: var(--normal-margin);
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,102 +1,97 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive using($vars) {
|
||||
input[type='checkbox']#theme-switcher {
|
||||
@include on-large-screen {
|
||||
position: absolute;
|
||||
top: -1 * map_get($vars, $small-margin);
|
||||
right: calc(
|
||||
-1 * (50vw - #{map_get($vars, $body-width)} / 2) + #{map_get(
|
||||
$vars,
|
||||
$normal-margin
|
||||
)}
|
||||
);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
input[type='checkbox']#theme-switcher {
|
||||
@include on-large-screen {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--small-margin));
|
||||
right: calc(-1 * (50vw - var(--body-width) / 2) + var(--normal-margin));
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
position: relative;
|
||||
margin-top: map_get($vars, $normal-margin);
|
||||
}
|
||||
@include on-small-screen {
|
||||
position: relative;
|
||||
margin-top: var(--normal-margin);
|
||||
}
|
||||
|
||||
&::-ms-check {
|
||||
display: none;
|
||||
}
|
||||
&::-ms-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
background-color: map_get($vars, $accent-color);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
$size: map_get($vars, $icon-size);
|
||||
width: 2 * $size;
|
||||
height: $size;
|
||||
$icon-size: 0.7 * $size;
|
||||
$margin: ($size - $icon-size) / 2;
|
||||
$size: var(--icon-size);
|
||||
width: calc(2 * #{$size});
|
||||
height: $size;
|
||||
$icon-size: calc(0.7 * #{$size});
|
||||
$margin: calc((#{$size} - #{$icon-size}) / 2);
|
||||
|
||||
border-radius: 1000px;
|
||||
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&:before {
|
||||
// moon + sun
|
||||
@include square($icon-size);
|
||||
}
|
||||
|
||||
&:after {
|
||||
// sun blocking moon
|
||||
@include square(calc(#{$icon-size} * 0.8));
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 1000px;
|
||||
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
transition: transform var(--transition-time),
|
||||
background-color var(--transition-time);
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
// moon + sun
|
||||
@include square($icon-size);
|
||||
}
|
||||
transform: translateY(-50%)
|
||||
translateX(calc(3 * #{$margin} + #{$icon-size}));
|
||||
|
||||
&:after {
|
||||
// sun blocking moon
|
||||
@include square($icon-size * 0.8);
|
||||
}
|
||||
animation: shine 3s linear alternate infinite;
|
||||
background-color: var(--sun-color);
|
||||
@keyframes shine {
|
||||
from {
|
||||
filter: brightness(1.01);
|
||||
box-shadow: 0 0 4px 2px var(--sun-color);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 1000px;
|
||||
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
transition: transform map_get($vars, $transition-time),
|
||||
background-color map_get($vars, $transition-time);
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
transform: translateY(-50%) translateX(3 * $margin + $icon-size);
|
||||
|
||||
animation: shine 3s linear alternate infinite;
|
||||
background-color: map_get($vars, $sun-color);
|
||||
@keyframes shine {
|
||||
from {
|
||||
filter: brightness(1.01);
|
||||
box-shadow: 0 0 4px 2px map_get($vars, $sun-color);
|
||||
}
|
||||
|
||||
to {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 0 15px 2px map_get($vars, $sun-color);
|
||||
}
|
||||
to {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 0 15px 2px var(--sun-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
transform: translateY(-50%) translateX($size * 2 - $icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
background-color: map_get($vars, $normal-text-color);
|
||||
transform: translateY(-50%) translateX($margin);
|
||||
}
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
transform: translateY(-50%) translateX(calc(#{$size} * 2 - #{$icon-size}));
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: map_get($vars, $accent-color);
|
||||
transform: translateY(-50%) translateX($margin + $icon-size * 0.33);
|
||||
}
|
||||
&:checked {
|
||||
&:before {
|
||||
background-color: var(--normal-text-color);
|
||||
transform: translateY(-50%) translateX($margin);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-50%)
|
||||
translateX(calc(#{$margin} + #{$icon-size} * 0.33));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@use '../../../style/include' as *;
|
||||
@use '../../../style/mixins' as *;
|
||||
|
||||
@mixin q-dependent-line-container($vars, $q) {
|
||||
@mixin q-dependent-line-container($q) {
|
||||
.line {
|
||||
height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
|
||||
height: calc(#{$q} - var(--icon-size) / 2);
|
||||
|
||||
&:before {
|
||||
height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
|
||||
height: calc(100% - #{$q} - var(--icon-size) / 2);
|
||||
}
|
||||
&:after {
|
||||
top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
|
||||
top: calc(#{$q} - var(--icon-size) / 2);
|
||||
}
|
||||
}
|
||||
.date {
|
||||
|
|
@ -16,123 +16,117 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
section.timeline-element {
|
||||
display: flex;
|
||||
width: map_get($vars, $body-width);
|
||||
margin: auto;
|
||||
section.timeline-element {
|
||||
display: flex;
|
||||
width: var(--body-width);
|
||||
margin: auto;
|
||||
|
||||
.line-container {
|
||||
position: relative;
|
||||
@include q-dependent-line-container(33%);
|
||||
min-width: 160px;
|
||||
|
||||
.line {
|
||||
border-left: var(--line-width) solid var(--accent-color);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: var(--line-width) solid var(--accent-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include square(var(--icon-size));
|
||||
border-radius: 1000px;
|
||||
border: var(--line-width) solid var(--accent-color);
|
||||
left: calc(-1 * var(--icon-size) / 2 + var(--line-width) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
@include special-text-font();
|
||||
position: absolute;
|
||||
transform-origin: left center;
|
||||
transform: rotate(30deg) translateX(calc(var(--icon-size) / 2 + 6px))
|
||||
translateY(-10%);
|
||||
|
||||
padding-right: var(--normal-margin);
|
||||
}
|
||||
}
|
||||
|
||||
@include on-large-screen {
|
||||
&:not(:first-of-type) .card {
|
||||
margin-top: var(--large-margin);
|
||||
}
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.line-container {
|
||||
position: relative;
|
||||
@include q-dependent-line-container($vars, 33%);
|
||||
min-width: 160px;
|
||||
|
||||
.line {
|
||||
border-left: map_get($vars, $line-width) solid
|
||||
map_get($vars, $accent-color);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: map_get($vars, $line-width) solid
|
||||
map_get($vars, $accent-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include square(map_get($vars, $icon-size));
|
||||
border-radius: 1000px;
|
||||
border: map_get($vars, $line-width) solid
|
||||
map_get($vars, $accent-color);
|
||||
left: -1 * map_get($vars, $icon-size) / 2 +
|
||||
map_get($vars, $line-width) / 2;
|
||||
}
|
||||
}
|
||||
@include q-dependent-line-container(50%);
|
||||
height: 150px;
|
||||
width: 50%;
|
||||
|
||||
.date {
|
||||
@include special-text-font($vars);
|
||||
position: absolute;
|
||||
transform-origin: left center;
|
||||
transform: rotate(30deg)
|
||||
translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);
|
||||
|
||||
padding-right: map_get($vars, $normal-margin);
|
||||
transform: translateX(calc(var(--icon-size) / 2 + 12px))
|
||||
translateY(-10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include on-large-screen {
|
||||
&:not(:first-of-type) .card {
|
||||
margin-top: map_get($vars, $large-margin);
|
||||
}
|
||||
.card {
|
||||
@include card-base();
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--card-color);
|
||||
|
||||
& > *:not(:first-child) {
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.line-container {
|
||||
@include q-dependent-line-container($vars, 50%);
|
||||
height: 150px;
|
||||
width: 50%;
|
||||
|
||||
.date {
|
||||
transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
|
||||
translateY(-10%);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
@include card-base($vars);
|
||||
border-radius: map_get($vars, $border-radius);
|
||||
background-color: map_get($vars, $card-color);
|
||||
h2 {
|
||||
@include sub-title-font();
|
||||
}
|
||||
|
||||
& > *:not(:first-child) {
|
||||
margin-top: map_get($vars, $line-height);
|
||||
& > p {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height var(--transition-time);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: relative;
|
||||
margin-top: var(--line-height);
|
||||
|
||||
.show-more,
|
||||
.show-less {
|
||||
transition: opacity var(--transition-time);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 0;
|
||||
.show-more {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include sub-title-font($vars);
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height map_get($vars, $transition-time);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: relative;
|
||||
margin-top: map_get($vars, $line-height);
|
||||
|
||||
.show-more,
|
||||
.show-less {
|
||||
transition: opacity map_get($vars, $transition-time);
|
||||
}
|
||||
|
||||
.show-more {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.show-less {
|
||||
@include absolute-center();
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.show-less {
|
||||
@include absolute-center();
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ import { html } from '../../framework/model/misc';
|
|||
import './timeline.scss';
|
||||
|
||||
export const generate = (): html => `
|
||||
<div id="timeline"></div> <!-- IE11 doesn't know <main> -->
|
||||
<div id="timeline"></div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@use '../../style/include' as *;
|
||||
@use '../../style/mixins' as *;
|
||||
|
||||
@include responsive() using ($vars) {
|
||||
div#timeline {
|
||||
@include on-large-screen {
|
||||
// workaround for IE
|
||||
& > :first-child {
|
||||
margin-top: map_get($vars, $large-margin);
|
||||
}
|
||||
div#timeline {
|
||||
@include on-large-screen {
|
||||
// workaround for IE
|
||||
& > :first-child {
|
||||
margin-top: var(--large-margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue