diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..2cb7d2a --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +**/*.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..f934a2b --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,28 @@ +{ + "root": true, + "env": { + "browser": true, + "es2020": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "prettier", + "prettier/@typescript-eslint" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 11, + "sourceType": "module" + }, + "plugins": ["unused-imports", "@typescript-eslint", "prettier"], + "rules": { + "prettier/prettier": "error", + "no-unused-vars": "off", + "unused-imports/no-unused-imports-ts": "error", + "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }], + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } \ No newline at end of file diff --git a/package.json b/package.json index 1d3bd84..0645625 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "private": true, "scripts": { "start": "webpack-dev-server --mode development", + "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"", "build": "webpack && find dist -type f -regex \".*\\(js\\|css\\|txt\\)\" | xargs rm" }, "repository": { @@ -32,10 +33,17 @@ ], "homepage": "https://github.com/schmelczerandras/timeline#readme", "devDependencies": { + "@typescript-eslint/eslint-plugin": "^3.9.1", + "@typescript-eslint/parser": "^3.9.1", "autoprefixer": "^9.8.6", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.6.0", - "cssnano": "latest", + "cssnano": "^4.1.10", + "eslint": "^7.2.0", + "eslint-config-prettier": "^6.11.0", + "eslint-plugin-import": "^2.21.2", + "eslint-plugin-prettier": "^3.1.4", + "eslint-plugin-unused-imports": "^0.1.3", "file-loader": "^5.1.0", "html-webpack-inline-source-plugin": "0.0.10", "html-webpack-plugin": "^3.2.0", @@ -51,7 +59,7 @@ "sharp": "^0.23.4", "style-loader": "^1.2.1", "svg-url-loader": "^3.0.3", - "terser-webpack-plugin": "^2.3.7", + "terser-webpack-plugin": "^2.3.8", "ts-loader": "^6.2.2", "typescript": "^3.9.7", "webpack": "^4.44.1", diff --git a/src/framework/styles/dark-mode/dark-mode.scss b/src/framework/styles/dark-mode/dark-mode.scss index 762c975..98bef70 100644 --- a/src/framework/styles/dark-mode/dark-mode.scss +++ b/src/framework/styles/dark-mode/dark-mode.scss @@ -1,5 +1,5 @@ @mixin in-dark-mode() { - &[theme='dark'] { + html[theme='dark'] { @content; } } diff --git a/src/framework/styles/wrapper.scss b/src/framework/styles/wrapper.scss index 8a95081..7f31213 100644 --- a/src/framework/styles/wrapper.scss +++ b/src/framework/styles/wrapper.scss @@ -1,10 +1,6 @@ @use 'dark-mode/dark-mode' as *; $breakpoint-width: 925px !default; -$small-screen-light-theme-variables: () !default; -$small-screen-dark-theme-variables: () !default; -$large-screen-light-theme-variables: () !default; -$large-screen-dark-theme-variables: () !default; @mixin on-small-screen() { @media (max-width: $breakpoint-width - 1px) { @@ -17,22 +13,3 @@ $large-screen-dark-theme-variables: () !default; @content; } } - -@mixin responsive() { - html { - @include on-small-screen { - @content ($small-screen-light-theme-variables); - @include in-dark-mode { - @content ($small-screen-dark-theme-variables); - } - } - } - @include on-large-screen { - html { - @content ($large-screen-light-theme-variables); - @include in-dark-mode { - @content ($large-screen-dark-theme-variables); - } - } - } -} diff --git a/src/index.html b/src/index.html index 3a7297d..661cb72 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,6 @@ - ; - private scrollPosition: number = 0; + private scrollPosition = 0; private previousTimestamp: DOMHighResTimeStamp = null; private readonly blobs: Array = []; 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); } diff --git a/src/page/content/content.scss b/src/page/content/content.scss index 5bf0461..0da8ef2 100644 --- a/src/page/content/content.scss +++ b/src/page/content/content.scss @@ -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; } } diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss index 0338daf..61667d3 100644 --- a/src/page/footer/footer.scss +++ b/src/page/footer/footer.scss @@ -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; + } + } } diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/image-viewer/image-viewer.scss index 5001d59..b3ea7fe 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/src/page/image-viewer/image-viewer.scss @@ -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; + } } diff --git a/src/page/theme-switcher/theme-switcher.scss b/src/page/theme-switcher/theme-switcher.scss index 51d1ba0..380dccc 100644 --- a/src/page/theme-switcher/theme-switcher.scss +++ b/src/page/theme-switcher/theme-switcher.scss @@ -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)); } } } diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss index a76860d..a811e89 100644 --- a/src/page/timeline/timeline-element/timeline-element.scss +++ b/src/page/timeline/timeline-element/timeline-element.scss @@ -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; } } } diff --git a/src/page/timeline/timeline.html.ts b/src/page/timeline/timeline.html.ts index 8af4756..197cb0d 100644 --- a/src/page/timeline/timeline.html.ts +++ b/src/page/timeline/timeline.html.ts @@ -2,5 +2,5 @@ import { html } from '../../framework/model/misc'; import './timeline.scss'; export const generate = (): html => ` -
+
`; diff --git a/src/page/timeline/timeline.scss b/src/page/timeline/timeline.scss index 897e649..299da19 100644 --- a/src/page/timeline/timeline.scss +++ b/src/page/timeline/timeline.scss @@ -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); } } } diff --git a/src/static/fonts/lato/lato-v16-latin-italic.eot b/src/static/fonts/lato/lato-v16-latin-italic.eot deleted file mode 100644 index 8e32803..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-italic.eot and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.svg b/src/static/fonts/lato/lato-v16-latin-italic.svg deleted file mode 100644 index e288645..0000000 --- a/src/static/fonts/lato/lato-v16-latin-italic.svg +++ /dev/null @@ -1,450 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/lato/lato-v16-latin-italic.ttf b/src/static/fonts/lato/lato-v16-latin-italic.ttf deleted file mode 100644 index cf3da8b..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-italic.ttf and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.woff b/src/static/fonts/lato/lato-v16-latin-italic.woff deleted file mode 100644 index 95251da..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-italic.woff and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.woff2 b/src/static/fonts/lato/lato-v16-latin-italic.woff2 deleted file mode 100644 index 3246c12..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-italic.woff2 and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.eot b/src/static/fonts/lato/lato-v16-latin-regular.eot deleted file mode 100644 index c641306..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-regular.eot and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.svg b/src/static/fonts/lato/lato-v16-latin-regular.svg deleted file mode 100644 index 55b43fb..0000000 --- a/src/static/fonts/lato/lato-v16-latin-regular.svg +++ /dev/null @@ -1,435 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/lato/lato-v16-latin-regular.ttf b/src/static/fonts/lato/lato-v16-latin-regular.ttf deleted file mode 100644 index 3c2d417..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-regular.ttf and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.woff b/src/static/fonts/lato/lato-v16-latin-regular.woff deleted file mode 100644 index 189a0fe..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-regular.woff and /dev/null differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.woff2 b/src/static/fonts/lato/lato-v16-latin-regular.woff2 deleted file mode 100644 index 6904b66..0000000 Binary files a/src/static/fonts/lato/lato-v16-latin-regular.woff2 and /dev/null differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot b/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot deleted file mode 100644 index 2184652..0000000 Binary files a/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot and /dev/null differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg b/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg deleted file mode 100644 index 6cc39cd..0000000 --- a/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg +++ /dev/null @@ -1,327 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf b/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf deleted file mode 100644 index 5da852a..0000000 Binary files a/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf and /dev/null differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff deleted file mode 100644 index 676a065..0000000 Binary files a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff and /dev/null differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 deleted file mode 100644 index 70788c2..0000000 Binary files a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 and /dev/null differ diff --git a/src/style/_id.scss b/src/style/_id.scss deleted file mode 100644 index 351048c..0000000 --- a/src/style/_id.scss +++ /dev/null @@ -1,6 +0,0 @@ -$_id_value: 0; -@function id() { - $_id_value: $_id_value + 1 !global; - @return $_id_value; -} - diff --git a/src/style/a.scss b/src/style/a.scss index f8d8b37..7d708f5 100644 --- a/src/style/a.scss +++ b/src/style/a.scss @@ -1,50 +1,48 @@ @use 'sass:color'; -@use 'include' as i; +@use 'style/mixins' as *; -@include i.responsive() using ($vars) { - a { - $border-shift: 10px; - $line-width: 2px; +a { + $border-shift: 10px; + $line-width: 2px; - @include i.special-text-font($vars); - text-decoration: none; - cursor: pointer; - position: relative; - display: inline-block; - overflow: hidden; + @include special-text-font(); + text-decoration: none; + cursor: pointer; + position: relative; + display: inline-block; + overflow: hidden; - padding-bottom: $line-width; + padding-bottom: $line-width; - &:before, - &:after { - content: ''; - display: block; - position: absolute; - bottom: 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 { - width: calc(100% + #{$border-shift}); - border-bottom: $line-width dashed map_get($vars, i.$accent-color); - transition: transform map_get($vars, i.$transition-time); - } - - &:after { - width: 100%; - height: $line-width; - background: linear-gradient( - 90deg, - map_get($vars, i.$card-color) 0, - color.adjust(map_get($vars, i.$card-color), $alpha: -1) 4px, - color.adjust(map_get($vars, i.$card-color), $alpha: -1) calc(100% - 4px), - map_get($vars, i.$card-color) 100% - ); - } - - &:hover { - &:before { - transform: translateX(-$border-shift); - } + transform: translateX(-$border-shift); } } } diff --git a/src/style/configured-responsive.scss b/src/style/configured-responsive.scss deleted file mode 100644 index 2a5601f..0000000 --- a/src/style/configured-responsive.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'vars'; -@forward "../framework/framework" with ( - $small-screen-light-theme-variables: vars.$small-screen-light-theme-variables, - $small-screen-dark-theme-variables: vars.$small-screen-dark-theme-variables, - $large-screen-light-theme-variables: vars.$large-screen-light-theme-variables, - $large-screen-dark-theme-variables: vars.$large-screen-dark-theme-variables, -); diff --git a/src/style/fonts.scss b/src/style/fonts.scss deleted file mode 100644 index 72998e9..0000000 --- a/src/style/fonts.scss +++ /dev/null @@ -1,63 +0,0 @@ -// https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin -/* lato-regular - latin */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - 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'), - /* Safari, Android, iOS */ - url('../static/fonts/lato/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */ -} -/* lato-italic - latin */ -@font-face { - font-family: 'Lato'; - font-style: italic; - font-weight: 400; - 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'), - /* Safari, Android, iOS */ - url('../static/fonts/lato/lato-v16-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */ -} - -/* montserrat-regular - latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - 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'), - /* Super Modern Browsers */ - url('../static/fonts/montserrat/montserrat-v14-latin-regular.woff') - format('woff'), - /* Modern Browsers */ - 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 */ -} diff --git a/src/style/include.scss b/src/style/include.scss deleted file mode 100644 index 946ce3f..0000000 --- a/src/style/include.scss +++ /dev/null @@ -1,7 +0,0 @@ -@forward "configured-responsive"; -@forward "mixins"; -@forward "vars" hide - $small-screen-light-theme-variables, - $small-screen-dark-theme-variables, - $large-screen-light-theme-variables, - $large-screen-dark-theme-variables; diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 9e1d985..1bb1f44 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -1,5 +1,6 @@ -@use "configured-responsive"; -@use "vars"; +@import '../framework/framework'; + +@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Open+Sans:ital@0;1&display=swap'); @mixin center-children() { display: flex; @@ -14,10 +15,10 @@ transform: translateX(-50%) translateY(-50%); } -@mixin card-base($vars) { +@mixin card-base() { text-align: center; - padding: map_get($vars, vars.$normal-margin); - box-shadow: map_get($vars, vars.$shadow); + padding: var(--normal-margin); + box-shadow: var(--shadow); z-index: 1; width: 100%; } @@ -32,32 +33,32 @@ max-height: $size; } -@mixin title-font($vars) { - font: 400 3.5rem 'Montserrat', serif; +@mixin title-font() { + font: 400 3rem 'Comfortaa', serif; font-style: normal; - color: map_get($vars, vars.$normal-text-color); + color: var(--normal-text-color); line-height: 1; - @include configured-responsive.on-small-screen { - font-size: 3rem; + @include on-small-screen { + font-size: 2.5rem; line-height: 1.1; } } -@mixin sub-title-font($vars) { - font: 400 2rem 'Montserrat', serif; - color: map_get($vars, vars.$normal-text-color); +@mixin sub-title-font() { + font: 400 1.75rem 'Comfortaa', serif; + color: var(--normal-text-color); font-style: normal; } -@mixin main-font($vars) { - font: 400 1.25rem 'Lato', sans-serif; - color: map_get($vars, vars.$normal-text-color); +@mixin main-font() { + font: 400 1.1rem 'Open Sans', sans-serif; + color: var(--normal-text-color); line-height: 1.6; } -@mixin special-text-font($vars) { - font: 400 1.1rem 'Lato', sans-serif; - color: map_get($vars, vars.$special-text-color); +@mixin special-text-font() { + font: 400 1rem 'Open Sans', sans-serif; + color: var(--special-text-color); font-style: italic; } diff --git a/src/style/vars.scss b/src/style/vars.scss index 2e09aa5..a7bf8b4 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -1,108 +1,55 @@ -@use 'fonts'; -@use "id" as *; +@import '../framework/framework'; -/* KEYS */ -$background: id(); -$normal-text-color: id(); -$very-light-text-color: id(); -$special-text-color: id(); -$card-color: id(); -$sun-color: id(); -$accent-color: id(); +:root { + --transition-time: 250ms; + --line-width: 3px; + --line-height: 18px; + --accent-color: #b7455e; + --sun-color: #f7f78c; + --very-light-text-color: #ffffff; +} -$transition-time: id(); -$border-radius: id(); -$line-width: id(); -$body-width: id(); +:root { + --background: #ffffff; + --normal-text-color: #31343f; + --card-color: #ffffff; + --special-text-color: var(--accent-color); +} -$small-margin: id(); -$normal-margin: id(); -$large-margin: id(); -$icon-size: id(); -$line-height: id(); +@include on-large-screen { + :root { + --border-radius: 15px; + --large-margin: 70px; + --normal-margin: 45px; + --small-margin: 25px; + --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.2); + --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.075), + inset 0 0 1px rgba(0, 0, 0, 0.2); + --icon-size: 35px; + --body-width: 765px; + } +} -$shadow: id(); -$inset-shadow: id(); -/**/ +@include on-small-screen { + :root { + --border-radius: 10px; + --large-margin: 60px; + --normal-margin: 30px; + --small-margin: 15px; + --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.125); + --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.05), + inset 0 0 1px rgba(0, 0, 0, 0.125); + --icon-size: 25px; + --body-width: 90%; + } +} -$universal-variables: ( - $transition-time: 250ms, - $line-width: 3px, - $line-height: 18px, - $accent-color: #b7455e, - $sun-color: #f7f78c, - $very-light-text-color: #ffffff, -); - -$large-screen-variables: ( - $border-radius: 15px, - $large-margin: 70px, - $normal-margin: 45px, - $small-margin: 25px, - $shadow: ( - 0 0 10px 2px rgba(0, 0, 0, 0.075), - 0 0 1px rgba(0, 0, 0, 0.2), - ), - $inset-shadow: ( - inset 0 0 10px 2px rgba(0, 0, 0, 0.075), - inset 0 0 1px rgba(0, 0, 0, 0.2), - ), - $icon-size: 35px, - $body-width: 765px, -); - -$small-screen-variables: ( - $border-radius: 10px, - $large-margin: 60px, - $normal-margin: 30px, - $small-margin: 15px, - $shadow: ( - 0 0 10px 2px rgba(0, 0, 0, 0.05), - 0 0 1px rgba(0, 0, 0, 0.125), - ), - $inset-shadow: ( - inset 0 0 10px 2px rgba(0, 0, 0, 0.05), - inset 0 0 1px rgba(0, 0, 0, 0.125), - ), - $icon-size: 25px, - $body-width: 90%, -); - -$light-theme-variables: ( - $background: #ffffff, - $normal-text-color: #31343f, - $card-color: #ffffff, - $special-text-color: map_get($universal-variables, $accent-color), -); - -$dark-theme-variables: ( - $background: #242638, - $normal-text-color: #ffffff, - $card-color: #263551, - $special-text-color: #ffffff, - $shadow: ( - 0 0 10px 2px rgba(0, 0, 0, 0.175), - 0 0 1px rgba(0, 0, 0, 0.4), - ), - $inset-shadow: ( - inset 0 0 10px 2px rgba(0, 0, 0, 0.175), - inset 0 0 1px rgba(0, 0, 0, 0.4), - ), -); - -$small-screen-light-theme-variables: map_merge( - $universal-variables, - map_merge($small-screen-variables, $light-theme-variables) -); -$small-screen-dark-theme-variables: map_merge( - $universal-variables, - map_merge($small-screen-variables, $dark-theme-variables) -); -$large-screen-light-theme-variables: map_merge( - $universal-variables, - map_merge($large-screen-variables, $light-theme-variables) -); -$large-screen-dark-theme-variables: map_merge( - $universal-variables, - map_merge($large-screen-variables, $dark-theme-variables) -); +@include in-dark-mode { + --background: #242638; + --normal-text-color: #ffffff; + --card-color: #263551; + --special-text-color: #ffffff; + --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.175), 0 0 1px rgba(0, 0, 0, 0.4); + --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), + inset 0 0 1px rgba(0, 0, 0, 0.4); +} diff --git a/src/styles.scss b/src/styles.scss index bbbcdbf..7264658 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,119 +1,118 @@ -@use 'style/include' as *; +@use 'style/vars'; +@use 'style/mixins' as *; @use 'style/a'; @use 'framework/styles/index'; -@include responsive() using ($vars) { - & { +html { + height: 100%; + + background-color: var(--background); + transition: background-color linear var(--transition-time); + + @include on-small-screen { + font-size: 0.8rem; + } + + @media print { + & { + font-size: 0.75rem; + } + } +} + +:focus { + outline: none; + + &:not(:hover) { + outline: var(--accent-color) solid 2px; + outline-offset: 4px; + } +} + +::-moz-selection { + background-color: var(--accent-color); + color: var(--very-light-text-color); +} +::selection { + background-color: var(--accent-color); + color: var(--very-light-text-color); +} + +*, +*::before, +*::after { + @include main-font(); + + margin: 0; + padding: 0; + box-sizing: border-box; + transition: background-color linear var(--transition-time), + color var(--transition-time); + + hyphens: auto; +} + +img, +video, +.figure-container { + width: 100%; + height: auto; +} + +.figure-container { + font-size: 0; + box-shadow: var(--inset-shadow); + pointer-events: none; + cursor: pointer; + + * { + pointer-events: all; + position: relative; + z-index: -2; + } +} + +.primitive-text, +.primitive-anchor, +.figure-container { + margin-top: var(--line-height); +} + +.primitive-text { + text-align: left; +} + +body { + padding: env(safe-area-inset-top) env(safe-area-inset-right) + env(safe-area-inset-bottom) env(safe-area-inset-left); + + height: 100%; + + @media print { + & { + height: auto; + } + } + + main { height: 100%; + overflow-x: hidden; + overflow-y: scroll; - background-color: map_get($vars, $background); - transition: background-color linear map_get($vars, $transition-time); - - @include on-small-screen { - font-size: 0.8rem; + noscript { + @include square(100%); + @include center-children(); } - @media print { - & { - font-size: 0.75rem; + @include on-large-screen { + &::-webkit-scrollbar-track, + &::-webkit-scrollbar { + background-color: transparent; + width: 12px; } - } - } - - :focus { - outline: none; - - &:not(:hover) { - outline: map_get($vars, $accent-color) solid 2px; - outline-offset: 4px; - } - } - - ::-moz-selection { - background-color: map_get($vars, $accent-color); - color: map_get($vars, $very-light-text-color); - } - ::selection { - background-color: map_get($vars, $accent-color); - color: map_get($vars, $very-light-text-color); - } - - *, - *::before, - *::after { - @include main-font($vars); - - margin: 0; - padding: 0; - box-sizing: border-box; - transition: background-color linear map_get($vars, $transition-time), - color map_get($vars, $transition-time); - - hyphens: auto; - } - - img, - video, - .figure-container { - width: 100%; - height: auto; - } - - .figure-container { - font-size: 0; - box-shadow: map_get($vars, $inset-shadow); - pointer-events: none; - cursor: pointer; - - * { - pointer-events: all; - position: relative; - z-index: -2; - } - } - - .primitive-text, - .primitive-anchor, - .figure-container { - margin-top: map_get($vars, $line-height); - } - - .primitive-text { - text-align: left; - } - - body { - padding: env(safe-area-inset-top) env(safe-area-inset-right) - env(safe-area-inset-bottom) env(safe-area-inset-left); - - height: 100%; - - @media print { - & { - height: auto; - } - } - - main { - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - - noscript { - @include square(100%); - @include center-children(); - } - - @include on-large-screen { - &::-webkit-scrollbar-track, - &::-webkit-scrollbar { - background-color: transparent; - width: 12px; - } - &::-webkit-scrollbar-thumb { - background-color: map_get($vars, $accent-color); - border-radius: map_get($vars, $border-radius); - } + &::-webkit-scrollbar-thumb { + background-color: var(--accent-color); + border-radius: var(--border-radius); } } }