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

Minor fixes

Browse source
This commit is contained in:
Schmelczer András 2020-01-08 22:22:26 +01:00
parent 073f087e52
commit aa0906405c
19 changed files with 219 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/framework/cache.ts
View file

5
src/framework/helper/animations.ts Normal file
View file

@ -0,0 +1,5 @@
export const turnOnAnimations = () =>
document.body.parentElement.setAttribute('animations', 'on');
export const turnOffAnimations = () =>
document.body.parentElement.setAttribute('animations', 'off');

2
src/framework/polyfills.ts → src/framework/helper/polyfills.ts
View file

@ -1,6 +1,6 @@
export const addImul = () => {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
if (!Math.imul)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
Math.imul = function(opA, opB) {
opB |= 0; // ensure that opB is an integer. opA will automatically be coerced.
// floating points give us 53 bits of precision to work with plus 1 sign bit

2
src/framework/helper/random.ts
View file

@ -1,4 +1,4 @@
import { addImul } from '../polyfills';
import { addImul } from './polyfills';
export class Random {
public constructor(private seed: number) {

6
src/framework/primitives/implementations/anchor.ts
View file

@ -8,6 +8,10 @@ export class Anchor implements Primitive {
) {}
public toHTML(): html {
return `<a class="primitive-anchor" href="${this.href}" rel="noreferrer" target="_blank">${this.text}</a>`;
return `<a class="primitive-anchor"
href="${this.href}"
rel="noreferrer"
target="_blank"
>${this.text}</a>`;
}
}

3
src/index.html
View file

@ -12,7 +12,8 @@
<meta name="description" content="You can view my projects on a timeline.">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#AA4465" />
<meta name="theme-color" content="#b7455e" />
<title>Portfolio - András Schmelczer</title>
</head>

4
src/page/background/background.scss
View file

@ -25,7 +25,9 @@
}
transition: transform map_get($vars, $long-transition-time),
opacity map_get($vars, $long-transition-time);
opacity map_get($vars, $long-transition-time),
background-color map_get($vars, $long-transition-time);
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {

2
src/page/footer/footer.scss
View file

@ -49,7 +49,7 @@
width: map_get($vars, $body-width);
h6 {
@include insignificant-font();
@include special-text-font($vars);
display: inline;
opacity: 0.75;
}

2
src/page/theme-switcher/theme-switcher.html.ts
View file

@ -3,5 +3,5 @@ import { html } from '../../model/misc';
import './theme-switcher.scss';
export const generate = (): html => `
<input id="theme-switcher" type="checkbox" name="switch-theme"/>
<input id="theme-switcher" type="checkbox" name="switch-theme"/>
`;

80
src/page/theme-switcher/theme-switcher.scss
View file

@ -5,30 +5,40 @@
input[type='checkbox']#theme-switcher {
@include on-large-screen {
position: fixed;
top: map_get($vars, $large-margin);
right: map_get($vars, $large-margin);
top: map_get($vars, $normal-margin);
right: map_get($vars, $normal-margin);
}
@include on-small-screen {
position: relative;
margin-top: map_get($vars, $small-margin);
margin-top: map_get($vars, $normal-margin);
}
$size: map_get($vars, $icon-size);
$small-size: 4 / 5 * $size;
background-color: map_get($vars, $accent-color);
z-index: 10;
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;
border-radius: 1000px;
box-shadow: map_get($vars, $shadow1), map_get($vars, $shadow2);
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
inset 0 0 1px rgba(0, 0, 0, 0.4);
cursor: pointer;
&:before {
@include square($icon-size);
}
&:after {
@include square($icon-size * 0.8);
}
&:before,
&:after {
@ -37,53 +47,47 @@
display: block;
border-radius: 1000px;
@include square($size);
top: 50%;
transform: translateY(-50%);
transition: height map_get($vars, $long-transition-time),
width map_get($vars, $long-transition-time),
left map_get($vars, $long-transition-time),
top map_get($vars, $long-transition-time),
transform map_get($vars, $long-transition-time),
transition: transform map_get($vars, $long-transition-time),
background-color map_get($vars, $long-transition-time);
}
&:before {
left: 0;
background-color: transparent;
}
&:not(:checked) {
&:before {
transform: translateY(-50%) translateX(3 * $margin + $icon-size);
&:after {
$delta: 4px;
top: -$delta / 2;
left: $size;
@include square($size + $delta);
background-color: map_get($vars, $theme-switcher-color);
animation: shine 3s linear alternate infinite;
background-color: map_get($vars, $theme-switcher-foreground);
@keyframes shine {
from {
filter: brightness(1.01);
box-shadow: 0 0 4px 2px map_get($vars, $theme-switcher-foreground);
}
animation: shine 3s linear alternate infinite;
@keyframes shine {
from {
filter: brightness(1.01);
box-shadow: 0 0 4px 2px map_get($vars, $theme-switcher-color);
to {
filter: brightness(1.1);
box-shadow: 0 0 15px 2px map_get($vars, $theme-switcher-foreground);
}
}
}
to {
filter: brightness(1.1);
box-shadow: 0 0 15px 2px map_get($vars, $theme-switcher-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 {
@include square($small-size);
$offset: $small-size / 5.5;
left: $size - $small-size + $offset;
top: ($size - $small-size) / 2;
background-color: map_get($vars, $background);
background-color: map_get($vars, $accent-color);
transform: translateY(-50%) translateX($margin + $icon-size * 0.33);
}
}

34
src/page/theme-switcher/theme-switcher.ts
View file

@ -8,19 +8,33 @@ import {
} from '../../framework/helper/dark-mode';
import { PageEvent, PageEventType } from '../../framework/page-event';
import { EventBroadcaster } from '../../framework/event-broadcaster';
import {
turnOffAnimations,
turnOnAnimations,
} from '../../framework/helper/animations';
export class PageThemeSwitcher extends PageElement {
private static readonly LOCAL_STORAGE_KEY = 'dark-mode';
public constructor() {
super(createElement(generate()));
if (isSystemLevelDarkModeEnabled()) {
const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
const isDark = storedIsDark ? storedIsDark : isSystemLevelDarkModeEnabled();
if (isDark) {
(this.element as HTMLInputElement).checked = true;
turnOffAnimations();
turnOnDarkMode();
setTimeout(() => turnOnAnimations(), 0);
} else {
turnOnLightMode();
}
this.element.onchange = this.handleThemeChange.bind(this);
}
protected handleEvent(event: PageEvent, parent: EventBroadcaster) {
if (event.type === PageEventType.onLoad) {
console.log('a');
this.handleThemeChange();
}
}
@ -36,5 +50,21 @@ export class PageThemeSwitcher extends PageElement {
type: PageEventType.pageThemeChanged,
data: isDark,
});
PageThemeSwitcher.saveToLocalStorage(isDark);
}
private static saveToLocalStorage(darkModeEnabled: boolean) {
window.localStorage?.setItem(
PageThemeSwitcher.LOCAL_STORAGE_KEY,
JSON.stringify(darkModeEnabled)
);
}
private static loadFromLocalStorage(): boolean | null {
return JSON.parse(
window.localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY) ||
'null'
);
}
}

11
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -15,6 +15,7 @@
&:before {
content: '';
@include square(map_get($vars, $icon-size));
box-sizing: content-box;
position: absolute;
left: calc(
-0.5 * #{map_get($vars, $icon-size)} -
@ -26,8 +27,7 @@
}
.date {
@include insignificant-font();
color: map_get($vars, $accent-color);
@include special-text-font($vars);
}
}
@ -77,8 +77,10 @@
.card {
@include card-base($vars);
border-radius: map_get($vars, $border-radius);
background-color: map_get($vars, $card-color);
overflow: hidden;
& > *:not(:first-child) {
@ -116,10 +118,7 @@
.show-less {
opacity: 0;
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
@include absolute-center();
}
}
}

3
src/style/a.scss
View file

@ -3,11 +3,10 @@
@include responsive() using ($vars) {
a {
@include insignificant-font();
@include special-text-font($vars);
text-decoration: none;
position: relative;
cursor: pointer;
color: map_get($vars, $accent-color);
display: inline-block;
overflow: hidden;

78
src/style/fonts.scss
View file

@ -1,65 +1,65 @@
// https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin
// add font-display: swap;
/*
/* lato-regular - latin */
@font-face {
font-family: "Lato";
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../static/fonts/lato/lato-v16-latin-regular.eot"); /* IE9 Compat Modes */
src: local("Lato Regular"), local("Lato-Regular"),
url("../static/fonts/lato/lato-v16-latin-regular.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */ url("../static/fonts/lato/lato-v16-latin-regular.woff2")
format("woff2"),
font-display: block;
src: url('../static/fonts/lato/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Lato Regular'), local('Lato-Regular'),
url('../static/fonts/lato/lato-v16-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('../static/fonts/lato/lato-v16-latin-regular.woff2')
format('woff2'),
/* Super Modern Browsers */
url("../static/fonts/lato/lato-v16-latin-regular.woff") format("woff"),
/* Modern Browsers */ url("../static/fonts/lato/lato-v16-latin-regular.ttf")
format("truetype"),
url('../static/fonts/lato/lato-v16-latin-regular.woff') format('woff'),
/* Modern Browsers */ url('../static/fonts/lato/lato-v16-latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url("../static/fonts/lato/lato-v16-latin-regular.svg#Lato") format("svg"); /* Legacy iOS */
url('../static/fonts/lato/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-italic - latin */
@font-face {
font-family: "Lato";
font-family: 'Lato';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../static/fonts/lato/lato-v16-latin-italic.eot"); /* IE9 Compat Modes */
src: local("Lato Italic"), local("Lato-Italic"),
url("../static/fonts/lato/lato-v16-latin-italic.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */ url("../static/fonts/lato/lato-v16-latin-italic.woff2")
format("woff2"),
font-display: block;
src: url('../static/fonts/lato/lato-v16-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Lato Italic'), local('Lato-Italic'),
url('../static/fonts/lato/lato-v16-latin-italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('../static/fonts/lato/lato-v16-latin-italic.woff2')
format('woff2'),
/* Super Modern Browsers */
url("../static/fonts/lato/lato-v16-latin-italic.woff") format("woff"),
/* Modern Browsers */ url("../static/fonts/lato/lato-v16-latin-italic.ttf")
format("truetype"),
url('../static/fonts/lato/lato-v16-latin-italic.woff') format('woff'),
/* Modern Browsers */ url('../static/fonts/lato/lato-v16-latin-italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url("../static/fonts/lato/lato-v16-latin-italic.svg#Lato") format("svg"); /* Legacy iOS */
url('../static/fonts/lato/lato-v16-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
font-family: "Montserrat";
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../static/fonts/montserrat/montserrat-v14-latin-regular.eot"); /* IE9 Compat Modes */
src: local("Montserrat Regular"), local("Montserrat-Regular"),
url("../static/fonts/montserrat/montserrat-v14-latin-regular.eot?#iefix")
format("embedded-opentype"),
font-display: block;
src: url('../static/fonts/montserrat/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../static/fonts/montserrat/montserrat-v14-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */
url("../static/fonts/montserrat/montserrat-v14-latin-regular.woff2")
format("woff2"),
url('../static/fonts/montserrat/montserrat-v14-latin-regular.woff2')
format('woff2'),
/* Super Modern Browsers */
url("../static/fonts/montserrat/montserrat-v14-latin-regular.woff")
format("woff"),
url('../static/fonts/montserrat/montserrat-v14-latin-regular.woff')
format('woff'),
/* Modern Browsers */
url("../static/fonts/montserrat/montserrat-v14-latin-regular.ttf")
format("truetype"),
url('../static/fonts/montserrat/montserrat-v14-latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url("../static/fonts/montserrat/montserrat-v14-latin-regular.svg#Montserrat")
format("svg"); /* Legacy iOS */
url('../static/fonts/montserrat/montserrat-v14-latin-regular.svg#Montserrat')
format('svg'); /* Legacy iOS */
}

14
src/style/mixins.scss
View file

@ -37,6 +37,13 @@
justify-content: center;
}
@mixin absolute-center() {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
@mixin card-base($vars) {
text-align: center;
padding: map_get($vars, $normal-margin);
@ -44,8 +51,8 @@
z-index: 1;
@include on-large-screen {
transition: box-shadow map_get($vars, $long-transition-time);
transition: box-shadow map_get($vars, $long-transition-time),
background-color map_get($vars, $long-transition-time);
&:hover {
box-shadow: map_get($vars, $shadow3), map_get($vars, $shadow2);
}
@ -83,7 +90,8 @@
line-height: 1.6;
}
@mixin insignificant-font() {
@mixin special-text-font($vars) {
font: 400 1.1rem 'Lato', sans-serif;
color: map_get($vars, $special-text-color);
font-style: italic;
}

71
src/style/vars.scss
View file

@ -16,7 +16,9 @@ $important-card-text-color: id();
$inverse-text-color: id();
$card-color: id();
$important-card-color: id();
$theme-switcher-color: id();
$theme-switcher-background: id();
$theme-switcher-foreground: id();
$special-text-color: id();
$accent-color: id();
$scrollbar-color: id();
@ -48,43 +50,12 @@ $universal-variables: (
$long-transition-time: 350ms,
$line-width: 3px,
$line-height: 18px,
$theme-switcher-foreground: #f7f78c,
$accent-color: #b7455e,
$important-card-color: #b7405a,
$shadow3: 0 0 15px 4px rgba(0, 0, 0, 0.1),
);
$light-theme-variables: map_merge(
(
$background: #ffffff,
$normal-text-color: #31343f,
$light-text-color: #7a7d8e,
$inverse-text-color: #ffffff,
$theme-switcher-color: #f7f78c,
$card-color: #ffffff,
$important-card-color: #aa4465,
$important-card-text-color: #ffffff,
$accent-color: #aa4465,
$scrollbar-color: #ffd6d6,
),
$universal-variables
);
$dark-theme-variables: map_merge(
(
$background: #242638,
$normal-text-color: #ffffff,
$light-text-color: #fff9e0,
$inverse-text-color: #242638,
$theme-switcher-color: #ffff92,
$card-color: #263551,
$important-card-text-color: #fff9e0,
$accent-color: #f7f78c,
$important-card-color: #263551,
$scrollbar-color: #ffd6d6,
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.175),
$shadow2: 0 0 1px rgba(0, 0, 0, 0.4),
),
$universal-variables
);
$large-screen-variables: map_merge(
(
$border-radius: 15px,
@ -112,3 +83,33 @@ $small-screen-variables: map_merge(
),
$universal-variables
);
$light-theme-variables: map_merge(
(
$background: #ffffff,
$normal-text-color: #31343f,
$light-text-color: #7a7d8e,
$inverse-text-color: #ffffff,
$card-color: #ffffff,
$important-card-text-color: #ffffff,
$special-text-color: map_get($universal-variables, $accent-color),
$scrollbar-color: #ffd6d6,
),
$universal-variables
);
$dark-theme-variables: map_merge(
(
$background: #242638,
$normal-text-color: #ffffff,
$light-text-color: #fff9e0,
$inverse-text-color: #242638,
$card-color: #263551,
$special-text-color: #ffffff,
$important-card-text-color: #fff9e0,
$scrollbar-color: #ffd6d6,
$shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.175),
$shadow2: 0 0 1px rgba(0, 0, 0, 0.4),
),
$universal-variables
);

21
src/styles.scss
View file

@ -6,15 +6,23 @@
@include responsive() using ($vars) {
& {
background-color: map_get($vars, $background);
transition: background-color map_get($vars, $long-transition-time);
height: 100%;
@include on-small-screen {
font-size: 0.8em;
}
}
svg {
fill: hotpink;
&[animations='off'] {
&,
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}
}
body {
@ -28,11 +36,16 @@
overflow: hidden;
}
* {
*,
*::before,
*::after {
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);
hyphens: auto;
:focus {