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

53
.idea/workspace.xml generated
View file

@ -2,42 +2,20 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment=""> <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/framework/helper/dark-mode.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/polyfills.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/content/content.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/framework/cache.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/animations.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/container-page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/mix-colors.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/mix-colors.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/random.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/framework/helper/random.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/framework/polyfills.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/polyfills.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page-event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-event.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/primitives.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/primitives.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/icons/at.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/icons/cv.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
@ -82,19 +60,19 @@
<property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" /> <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
</component> </component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/framework/helper" />
<recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
</key>
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" /> <recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" /> <recent name="$PROJECT_DIR$" />
</key> </key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="C:\Projects\portfolio\CompiledCV\src" />
</key>
</component> </component>
<component name="RunDashboard"> <component name="RunDashboard">
<option name="ruleStates"> <option name="ruleStates">
@ -148,7 +126,8 @@
<workItem from="1578327147961" duration="16067000" /> <workItem from="1578327147961" duration="16067000" />
<workItem from="1578383579118" duration="5883000" /> <workItem from="1578383579118" duration="5883000" />
<workItem from="1578391423465" duration="34000" /> <workItem from="1578391423465" duration="34000" />
<workItem from="1578392333248" duration="20581000" /> <workItem from="1578392333248" duration="21735000" />
<workItem from="1578472848376" duration="13628000" />
</task> </task>
<servers /> <servers />
</component> </component>

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 = () => { export const addImul = () => {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
if (!Math.imul) if (!Math.imul)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
Math.imul = function(opA, opB) { Math.imul = function(opA, opB) {
opB |= 0; // ensure that opB is an integer. opA will automatically be coerced. 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 // 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 { export class Random {
public constructor(private seed: number) { 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 { 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="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="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> <title>Portfolio - András Schmelczer</title>
</head> </head>

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

@ -25,7 +25,9 @@
} }
transition: transform map_get($vars, $long-transition-time), 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; will-change: transform, opacity;
animation: fade-in 1s linear; animation: fade-in 1s linear;
@keyframes fade-in { @keyframes fade-in {

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

@ -49,7 +49,7 @@
width: map_get($vars, $body-width); width: map_get($vars, $body-width);
h6 { h6 {
@include insignificant-font(); @include special-text-font($vars);
display: inline; display: inline;
opacity: 0.75; 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'; import './theme-switcher.scss';
export const generate = (): html => ` 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 { input[type='checkbox']#theme-switcher {
@include on-large-screen { @include on-large-screen {
position: fixed; position: fixed;
top: map_get($vars, $large-margin); top: map_get($vars, $normal-margin);
right: map_get($vars, $large-margin); right: map_get($vars, $normal-margin);
} }
@include on-small-screen { @include on-small-screen {
position: relative; position: relative;
margin-top: map_get($vars, $small-margin); margin-top: map_get($vars, $normal-margin);
} }
$size: map_get($vars, $icon-size); background-color: map_get($vars, $accent-color);
$small-size: 4 / 5 * $size;
z-index: 10; z-index: 10;
cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
$size: map_get($vars, $icon-size);
width: 2 * $size; width: 2 * $size;
height: $size; height: $size;
$icon-size: 0.7 * $size;
$margin: ($size - $icon-size) / 2;
border-radius: 1000px; 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, &:before,
&:after { &:after {
@ -37,53 +47,47 @@
display: block; display: block;
border-radius: 1000px; border-radius: 1000px;
@include square($size); top: 50%;
transform: translateY(-50%);
transition: height map_get($vars, $long-transition-time), transition: transform 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),
background-color map_get($vars, $long-transition-time); background-color map_get($vars, $long-transition-time);
} }
&:before { &:not(:checked) {
left: 0; &:before {
background-color: transparent; transform: translateY(-50%) translateX(3 * $margin + $icon-size);
}
&:after { animation: shine 3s linear alternate infinite;
$delta: 4px; background-color: map_get($vars, $theme-switcher-foreground);
top: -$delta / 2; @keyframes shine {
left: $size; from {
@include square($size + $delta); filter: brightness(1.01);
background-color: map_get($vars, $theme-switcher-color); box-shadow: 0 0 4px 2px map_get($vars, $theme-switcher-foreground);
}
animation: shine 3s linear alternate infinite; to {
filter: brightness(1.1);
@keyframes shine { box-shadow: 0 0 15px 2px map_get($vars, $theme-switcher-foreground);
from { }
filter: brightness(1.01);
box-shadow: 0 0 4px 2px map_get($vars, $theme-switcher-color);
} }
}
to { &:after {
filter: brightness(1.1); background-color: transparent;
box-shadow: 0 0 15px 2px map_get($vars, $theme-switcher-color); transform: translateY(-50%) translateX($size * 2 - $icon-size);
}
} }
} }
&:checked { &:checked {
&:before { &:before {
background-color: map_get($vars, $normal-text-color); background-color: map_get($vars, $normal-text-color);
transform: translateY(-50%) translateX($margin);
} }
&:after { &:after {
@include square($small-size); background-color: map_get($vars, $accent-color);
$offset: $small-size / 5.5; transform: translateY(-50%) translateX($margin + $icon-size * 0.33);
left: $size - $small-size + $offset;
top: ($size - $small-size) / 2;
background-color: map_get($vars, $background);
} }
} }

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

@ -8,19 +8,33 @@ import {
} from '../../framework/helper/dark-mode'; } from '../../framework/helper/dark-mode';
import { PageEvent, PageEventType } from '../../framework/page-event'; import { PageEvent, PageEventType } from '../../framework/page-event';
import { EventBroadcaster } from '../../framework/event-broadcaster'; import { EventBroadcaster } from '../../framework/event-broadcaster';
import {
turnOffAnimations,
turnOnAnimations,
} from '../../framework/helper/animations';
export class PageThemeSwitcher extends PageElement { export class PageThemeSwitcher extends PageElement {
private static readonly LOCAL_STORAGE_KEY = 'dark-mode';
public constructor() { public constructor() {
super(createElement(generate())); super(createElement(generate()));
if (isSystemLevelDarkModeEnabled()) {
const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
const isDark = storedIsDark ? storedIsDark : isSystemLevelDarkModeEnabled();
if (isDark) {
(this.element as HTMLInputElement).checked = true; (this.element as HTMLInputElement).checked = true;
turnOffAnimations();
turnOnDarkMode();
setTimeout(() => turnOnAnimations(), 0);
} else {
turnOnLightMode();
} }
this.element.onchange = this.handleThemeChange.bind(this); this.element.onchange = this.handleThemeChange.bind(this);
} }
protected handleEvent(event: PageEvent, parent: EventBroadcaster) { protected handleEvent(event: PageEvent, parent: EventBroadcaster) {
if (event.type === PageEventType.onLoad) { if (event.type === PageEventType.onLoad) {
console.log('a');
this.handleThemeChange(); this.handleThemeChange();
} }
} }
@ -36,5 +50,21 @@ export class PageThemeSwitcher extends PageElement {
type: PageEventType.pageThemeChanged, type: PageEventType.pageThemeChanged,
data: isDark, 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 { &:before {
content: ''; content: '';
@include square(map_get($vars, $icon-size)); @include square(map_get($vars, $icon-size));
box-sizing: content-box;
position: absolute; position: absolute;
left: calc( left: calc(
-0.5 * #{map_get($vars, $icon-size)} - -0.5 * #{map_get($vars, $icon-size)} -
@ -26,8 +27,7 @@
} }
.date { .date {
@include insignificant-font(); @include special-text-font($vars);
color: map_get($vars, $accent-color);
} }
} }
@ -77,8 +77,10 @@
.card { .card {
@include card-base($vars); @include card-base($vars);
border-radius: map_get($vars, $border-radius); border-radius: map_get($vars, $border-radius);
background-color: map_get($vars, $card-color); background-color: map_get($vars, $card-color);
overflow: hidden; overflow: hidden;
& > *:not(:first-child) { & > *:not(:first-child) {
@ -116,10 +118,7 @@
.show-less { .show-less {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
position: absolute; @include absolute-center();
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
} }
} }
} }

3
src/style/a.scss
View file

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

78
src/style/fonts.scss
View file

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

14
src/style/mixins.scss
View file

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

71
src/style/vars.scss
View file

@ -16,7 +16,9 @@ $important-card-text-color: id();
$inverse-text-color: id(); $inverse-text-color: id();
$card-color: id(); $card-color: id();
$important-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(); $accent-color: id();
$scrollbar-color: id(); $scrollbar-color: id();
@ -48,43 +50,12 @@ $universal-variables: (
$long-transition-time: 350ms, $long-transition-time: 350ms,
$line-width: 3px, $line-width: 3px,
$line-height: 18px, $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), $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( $large-screen-variables: map_merge(
( (
$border-radius: 15px, $border-radius: 15px,
@ -112,3 +83,33 @@ $small-screen-variables: map_merge(
), ),
$universal-variables $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) { @include responsive() using ($vars) {
& { & {
background-color: map_get($vars, $background); background-color: map_get($vars, $background);
transition: background-color map_get($vars, $long-transition-time);
height: 100%; height: 100%;
@include on-small-screen { @include on-small-screen {
font-size: 0.8em; font-size: 0.8em;
} }
}
svg { &[animations='off'] {
fill: hotpink; &,
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}
} }
body { body {
@ -28,11 +36,16 @@
overflow: hidden; overflow: hidden;
} }
* { *,
*::before,
*::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
color: map_get($vars, $normal-text-color); 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; hyphens: auto;
:focus { :focus {

2
webpack.config.js
View file

@ -16,7 +16,7 @@ module.exports = {
}, },
devServer: { devServer: {
host: '0.0.0.0', host: '0.0.0.0',
//disableHostCheck: true, disableHostCheck: true,
}, },
optimization: { optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],