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

Add dark mode

Browse source
This commit is contained in:
Schmelczer András 2020-01-07 21:30:23 +01:00
parent 48a55a4a97
commit 073f087e52
40 changed files with 864 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/page/about/about.scss
View file

@ -1,64 +1,75 @@
@import '../../style/mixins';
@import '../../style/vars';
#about {
@include important-card();
@include responsive() using ($vars) {
#about {
@include card-base($vars);
$img-size: 125px;
background-color: map_get($vars, $important-card-color);
h1,
img,
.placeholder,
& {
@include title-font();
}
img {
@include square($img-size);
border-radius: 100%;
}
p {
@include main-font();
text-align: justify;
margin-top: $small-margin;
}
h1 {
hyphens: none;
}
@media (max-width: $breakpoint-width) {
h1 {
margin-top: $small-margin;
* {
color: map_get($vars, $important-card-text-color);
}
}
@media (min-width: $breakpoint-width) {
$img-size: 190px;
$img-size: 125px;
width: $body-width;
margin: calc(#{$normal-margin} + #{$img-size} * 1 / 3) auto 0 auto;
position: relative;
border-radius: $border-radius;
h1,
img,
.placeholder,
& {
@include title-font();
}
img {
@include square($img-size);
position: absolute;
left: 0;
top: 0;
transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
border-radius: 100%;
}
.placeholder {
@include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
box-sizing: content-box;
float: left;
margin: 0 0.75ex 0.75ex 0;
p {
@include main-font();
text-align: justify;
margin-top: map_get($vars, $small-margin);
}
h1 {
text-align: left;
hyphens: none;
}
@include on-small-screen {
h1 {
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;
}
}
}
}

6
src/page/about/about.ts
View file

@ -5,9 +5,13 @@ import { PageElement } from '../../framework/page-element';
import { generate } from './about.html';
import { createElement } from '../../framework/helper/create-element';
import { ContainerPage } from '../../framework/container-page';
import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
export class PageHeader extends ContainerPage {
public constructor(header: Header) {
super(createElement(generate(header)), [new PageContent(header.about)]);
super(createElement(generate(header)), [
new PageContent(header.about),
new PageThemeSwitcher(),
]);
}
}