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

quicksave

Browse source
This commit is contained in:
Schmelczer András 2019-12-28 17:21:35 +01:00
parent f74c86f4b1
commit 98160edc72
23 changed files with 226 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.idea/dictionaries/Schme.xml generated
View file

@ -1,6 +1,7 @@
<component name="ProjectDictionaryState">
<dictionary name="Schme">
<words>
<w>ffffff</w>
<w>opacify</w>
<w>raleway</w>
<w>transparentize</w>

1
.idea/inspectionProfiles/Project_Default.xml generated
View file

@ -2,6 +2,5 @@
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="CssInvalidAtRule" enabled="false" level="ERROR" enabled_by_default="false" />
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
</profile>
</component>

44
.idea/workspace.xml generated
View file

@ -2,29 +2,27 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/static/cv/andras_schmelczer_cv_2020_01.pdf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/static/icons/at.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/dictionaries/Schme.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dictionaries/Schme.xml" 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$/custom.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/custom.d.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/page-event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-event.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.stylelintrc" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/dummy.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" 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.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" 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.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.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/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.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/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" 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/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/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/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/elements.scss" beforeDir="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/page.scss" beforeDir="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$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
@ -60,17 +58,15 @@
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="ignore_missing_gitignore" value="true" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src/static" />
<property name="node.js.detected.package.stylelint" value="true" />
<property name="node.js.path.for.package.stylelint" value="project" />
<property name="node.js.selected.package.stylelint" value="" />
<property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
@ -78,6 +74,11 @@
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\timeline" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
@ -117,6 +118,9 @@
<workItem from="1577271824791" duration="7691000" />
<workItem from="1577282613892" duration="11050000" />
<workItem from="1577348003642" duration="4876000" />
<workItem from="1577451432189" duration="11000" />
<workItem from="1577469180612" duration="18000" />
<workItem from="1577526744211" duration="14260000" />
</task>
<servers />
</component>

9
.stylelintrc
View file

@ -1,9 +0,0 @@
{
"rules": {
"at-rule-no-unknown": [
true, {
"ignoreAtRules": ["use", "mixin", "include"]
}
]
}
}

1
package.json
View file

@ -24,6 +24,7 @@
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"prettier": "^1.19.1",
"resolve-url-loader": "^3.1.1",

8
src/dummy.scss
View file

@ -1,8 +0,0 @@
@use "styles";
@use "page/about/about";
@use "page/background/background";
@use "page/content/content";
@use "page/footer/footer";
@use "page/image-viewer/image-viewer";
@use "page/timeline/timeline";
@use "page/timeline/timeline-element/timeline-element";

48
src/framework/helper.ts
View file

@ -24,3 +24,51 @@ export const randomInInterval = (
export const sum = (list: ArrayLike<number>): number =>
Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);
export const getHeight = (e: HTMLElement): number => {
const computedStyle = window.getComputedStyle(e);
return (
// ignores margin collapse
e.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
};
export const mixColors = (
hexColorA: string,
hexColorB: string,
qA: number
): string => {
const colorA = hexToRGB(normalizeHex(hexColorA));
const colorB = hexToRGB(normalizeHex(hexColorB));
const mixedColor: [number, number, number] = [
colorA[0] * qA + colorB[0] * (1 - qA),
colorA[1] * qA + colorB[1] * (1 - qA),
colorA[2] * qA + colorB[2] * (1 - qA)
];
return RGBToHex(mixedColor);
};
const normalizeHex = (hex: string): string => {
hex = hex.trim();
if (hex.startsWith("#")) {
hex = hex.substr(1);
}
return hex;
};
const hexToRGB = (hex: string): [number, number, number] => {
const [r1, r2, g1, g2, b1, b2] = hex;
return [
Number.parseInt(r1 + r2, 16),
Number.parseInt(g1 + g2, 16),
Number.parseInt(b1 + b2, 16)
];
};
const RGBToHex = (rgb: [number, number, number]): string =>
rgb.map(n => Math.round(n).toString(16)).join("");

2
src/index.html
View file

@ -13,6 +13,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#31343F" />
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Nunito&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>

8
src/page/about/about.html.ts
View file

@ -7,10 +7,6 @@ export const generate = (
aPictureOf: string
): html => `
<section id="about">
<div class="container">
<header>
<img alt="${aPictureOf} ${name}" src="${picture}"/>
<h1>${name}</h1>
</header>
</div>
<img alt="${aPictureOf} ${name}" src="${picture}"/>
<h1>${name}</h1>
</section>`;

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

@ -2,42 +2,33 @@
@import "../../style/vars";
#about {
width: 100%;
backdrop-filter: blur($blur-radius);
padding: $normal-margin;
width: $body-width;
margin-top: $normal-margin;
.container {
width: $body-width;
margin: auto;
h1,
img {
@include title-font();
}
header {
@include center-children();
img {
@include square(4ch);
border-radius: 100%;
margin-right: 1.5ex;
cursor: pointer;
float: left;
}
h1,
img {
@include title-font();
}
img {
@include square(4ch);
border-radius: 100%;
margin-right: 1.5ex;
cursor: pointer;
}
@media (max-width: $breakpoint-width) {
flex-direction: column;
img {
margin: 0 0 $small-margin 0;
}
h1 {
text-align: center;
}
}
@media (max-width: $breakpoint-width) {
flex-direction: column;
img {
margin: 0 0 $small-margin 0;
}
* {
text-align: justify;
h1 {
text-align: center;
}
}
* {
@include main-font();
}
}

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

@ -12,6 +12,6 @@ export class PageHeader extends PageElement {
super([content]);
this.setElement(root);
this.query(".container").appendChild(content.getElement());
root.appendChild(content.getElement());
}
}

20
src/page/background/background.html.ts
View file

@ -3,21 +3,26 @@ import "./background.scss";
export const generate = (
count: number,
color?: () => string,
z?: () => number,
color?: (z) => string,
height?: () => number,
isAnimated?: (index) => boolean,
transform?: () => string
): html => `
transform?: (z) => string
): html => {
return `
<section class="background">
${
count > 0
? new Array(count)
.fill(0, 0, count)
.map(_ => z())
.map(
(_, i) => `
<div class="${
isAnimated(i) ? "animated" : ""
}" style="background-color: ${color()}; height: ${height()}px; transform: ${transform()}"
(zValue, i) => `
<div class="${isAnimated(i) ? "animated" : ""}" style="
background-color: ${color(zValue)};
height: ${height()}px;
z-index: ${-zValue};
transform: ${transform(zValue)}"
></div>
`
)
@ -26,3 +31,4 @@ export const generate = (
}
</section>
`;
};

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

@ -18,6 +18,8 @@
top: 0;
width: 160px;
transition: transform $slow-transition-time;
&.animated {
animation: fade-in 1s linear forwards;
@keyframes fade-in {

101
src/page/background/background.ts
View file

@ -2,94 +2,117 @@ import { PageElement } from "../../framework/page-element";
import { generate } from "./background.html";
import {
choose,
getHeight,
createElement,
randomFactory,
randomInInterval,
sum
sum,
mixColors
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
export class PageBackground extends PageElement {
private colors = ["#fff9e077", "#ffd6d677"];
private blobSize = 150; // with margin
private colors = ["#fff9e0", "#ffd6d6"];
private blobSpacing = 200;
private perspective = 5;
private currentRealHeight = 0;
private currentRealWidth = 0;
private currentBlobCount = 0;
public constructor() {
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate(0)));
}
protected handleEvent(event: PageEvent, parent: PageElement) {
if (event.type === PageEventType.onLoad) {
window.addEventListener("resize", this.resize.bind(this, parent));
window.addEventListener("load", this.resize.bind(this, parent));
this.bindListeners(parent);
} else if (event.type === PageEventType.onBodyDimensionsChanged) {
this.resize(parent);
}
}
private bindListeners(parent: PageElement) {
window.addEventListener("resize", this.resize.bind(this, parent));
window.addEventListener("load", this.resize.bind(this, parent));
}
private resize(parent: PageElement) {
const siblings: Array<HTMLElement> = Array.prototype.slice
.call(parent.getElement().children)
.filter(e => e !== this.getElement());
const width = document.body.clientWidth;
const height = sum(
siblings.map(c => {
const computedStyle = window.getComputedStyle(c);
return (
// ignores margin collapse
c.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
})
);
const width = parent.getElement().clientWidth;
const height = sum(siblings.map(getHeight));
if (height > this.currentRealHeight || width > this.currentRealWidth) {
this.currentRealHeight = height;
this.currentRealWidth = width;
const random = randomFactory(44);
const random = randomFactory(46);
const count = Math.round((width * height) / this.blobSize ** 2);
const zMin = 20;
const zMax = 40;
const randomWithKnownZ = (z: number, bound: number): number => {
const l = (bound * (this.perspective + z)) / this.perspective;
return randomInInterval(
-(l / 2 - bound / 2),
l / 2 + bound / 2,
random
);
const count = Math.round((width * height) / this.blobSpacing ** 2);
const randomWithKnownZ = (
z: number,
viewportSize: number,
scrollSize: number,
startOffset = 0,
endOffset = 0
): number => {
const m = 1 + z / this.perspective;
const variableOffset = (offset, q) =>
offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
startOffset = variableOffset(startOffset, 0.6);
endOffset = variableOffset(endOffset, 0.2);
const lowerBound =
viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
const l =
scrollSize -
viewportSize +
(viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random);
};
this.setElement(
createElement(
generate(
count,
() => choose(this.colors, random),
() => randomInInterval(zMin, zMax, random),
z =>
"#" +
mixColors(
"#ffffff",
choose(this.colors, random),
(z - zMin) / (zMax - zMin)
),
() => randomInInterval(160, 750, random),
i => i >= this.currentBlobCount,
() => {
const z = randomInInterval(-12, -25, random);
return `
translateX(${randomWithKnownZ(-z, width)}px)
translateY(${randomWithKnownZ(-z, height)}px)
translateZ(${z}px)
z => `
translateX(${randomWithKnownZ(z, width, width)}px)
translateY(${randomWithKnownZ(
z,
parent.getElement().clientHeight,
height,
getHeight(this.start.getElement()),
getHeight(this.end.getElement())
)}px)
translateZ(${-z}px)
rotate(-20deg)
`;
}
`
)
)
);
this.currentBlobCount = count;
console.log(count);
}
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;

6
src/page/content/content.scss
View file

@ -1,10 +1,10 @@
@use "../../style/vars";
@import "../../style/vars";
.content {
margin-top: vars.$small-margin;
margin-top: $small-margin;
* {
margin-top: vars.$line-height;
margin-top: $line-height;
}
p {

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

@ -4,10 +4,10 @@
footer#page-footer {
text-align: center;
margin: $small-margin auto 0 auto;
margin: $normal-margin auto 0 auto;
padding: $normal-margin $normal-margin $line-height $normal-margin;
width: 100%;
backdrop-filter: blur($blur-radius);
// backdrop-filter: blur($blur-radius);
h2 {
@include title-font();
@ -16,7 +16,7 @@ footer#page-footer {
ul {
list-style: none;
display: inline-block;
margin-top: $normal-margin;
margin-top: calc(#{$small-margin} / 2 + #{$normal-margin} / 2);
text-align: left;
li {
@ -40,7 +40,7 @@ footer#page-footer {
aside.other {
@include center-children();
margin: $normal-margin auto 0 auto;
margin: calc(2 * #{$normal-margin}) auto 0 auto;
width: $body-width;
h6 {

2
src/page/image-viewer/image-viewer.ts
View file

@ -9,7 +9,7 @@ export class PageImageViewer extends PageElement {
super();
const root = createElement(generate());
this.setElement(root);
this.query("#cancel").onclick = () => PageImageViewer.hide(root);
root.onclick = () => PageImageViewer.hide(root);
}
protected handleEvent(event: PageEvent, parent: PageElement) {

10
src/page/index.ts
View file

@ -8,15 +8,19 @@ import { Page } from "../framework/page";
export const create = ({ config, header, timeline, footer }: Portfolio) => {
document.title = header.name;
const pageHeader = new PageHeader(header, config.aPictureOf);
const pageFooter = new PageFooter(footer);
const bg = new PageBackground(pageHeader, pageFooter);
new Page(
[
new PageImageViewer(),
new Page(
[
new PageBackground(),
new PageHeader(header, config.aPictureOf),
pageHeader,
new PageTimeline(timeline, config.showMore, config.showLess),
new PageFooter(footer)
pageFooter,
bg
],
document.body.querySelector("main"),
false

2
src/portfolio.ts
View file

@ -1,6 +1,6 @@
import { Portfolio } from "./model/portfolio";
import me from "./static/media/me-2.jpg";
import me from "./static/media/me.jpg";
import forex from "./static/media/forex.gif";
import myNotes from "./static/media/my-notes.jpg";
import processSimulator from "./static/media/process-simulator.jpg";

11
src/style/mixins.scss
View file

@ -35,19 +35,20 @@
}
@mixin title-font() {
font: 400 3.33rem "Raleway", serif;
font: 400 3.5rem "Montserrat", serif;
}
@mixin sub-title-font() {
font: 400 2rem "Raleway", serif;
font: 400 1.9rem "Montserrat", serif;
}
@mixin main-font() {
font: 400 18px "Open sans", sans-serif;
line-height: 1.5;
font: 400 1.25rem "Lato", sans-serif;
line-height: 1.6;
text-align: justify;
}
@mixin insignificant-font() {
font: 400 16px "Open sans", sans-serif;
font: 400 1rem "Lato", sans-serif;
font-style: italic;
}

5
src/style/vars.scss
View file

@ -2,6 +2,7 @@
$background-start: white;
$background-end: white;
$background: white;
$background-gradient: linear-gradient(90deg, #fff9e0 0, #ffd6d6 100%);
$normal-text-color: #31343f;
$light-text-color: #7a7d8e;
@ -21,7 +22,7 @@ $normal-margin: var(--normal-margin);
$small-margin: var(--small-margin);
$line-height: 2ch;
$blur-radius: 6px;
$blur-radius: 9px;
$icon-size: var(--icon-size);
$body-width: var(--body-width);
@ -29,7 +30,7 @@ $body-width: var(--body-width);
--line-width: 3px;
--normal-margin: 45px;
--small-margin: 25px;
--icon-size: 25px;
--icon-size: 35px;
--body-width: 765px;
@media (max-width: $breakpoint-width) {

24
src/styles.scss
View file

@ -7,6 +7,9 @@
padding: 0;
box-sizing: border-box;
color: $normal-text-color;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
@ -20,7 +23,7 @@
}
html {
background-color: $background;
background-color: white;
height: 100%;
}
@ -34,16 +37,19 @@ body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
perspective-origin: center center;
perspective: 5px;
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: $accent-color;
border-radius: $border-radius;
@media (min-width: $breakpoint-width) {
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: $accent-color;
border-radius: $border-radius;
}
}
& > * {

9
webpack.config.js
View file

@ -1,18 +1,23 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
watchOptions: {
ignored: /node_modules/
},
devServer: {
host: "0.0.0.0"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: true,
xhtml: true,
template: "./src/index.html"
})
}),
new MiniCssExtractPlugin()
],
entry: {
index: "./src/index.ts"
@ -52,7 +57,7 @@ module.exports = {
test: /\.scss$/i,
use: [
{
loader: "style-loader"
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"