diff --git a/.idea/dictionaries/Schme.xml b/.idea/dictionaries/Schme.xml index 506ae37..03e5b5e 100644 --- a/.idea/dictionaries/Schme.xml +++ b/.idea/dictionaries/Schme.xml @@ -2,6 +2,7 @@ ffffff + lato opacify raleway transparentize diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 0ff21ba..af9b85e 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,29 +2,40 @@ + - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - + - @@ -120,7 +131,7 @@ - + diff --git a/src/framework/helper.ts b/src/framework/helper.ts index a510213..1a14187 100644 --- a/src/framework/helper.ts +++ b/src/framework/helper.ts @@ -72,3 +72,19 @@ const hexToRGB = (hex: string): [number, number, number] => { const RGBToHex = (rgb: [number, number, number]): string => rgb.map(n => Math.round(n).toString(16)).join(""); + +export const range = ({ + from = 0, + to = Infinity, + step = 1 +}: { + from?: number; + to?: number; + step?: number; +}): Iterable => { + return { + *[Symbol.iterator]() { + for (let i = from; i < to; yield i, i += step) {} + } + }; +}; diff --git a/src/index.html b/src/index.html index dd4dae9..e645d1f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,9 +11,7 @@ - - - + Portfolio diff --git a/src/page/about/about.html.ts b/src/page/about/about.html.ts index 7fe94d9..52136b0 100644 --- a/src/page/about/about.html.ts +++ b/src/page/about/about.html.ts @@ -8,5 +8,6 @@ export const generate = ( ): html => `
${aPictureOf} ${name} +

${name}

`; diff --git a/src/page/about/about.scss b/src/page/about/about.scss index 75b739a..c3623f0 100644 --- a/src/page/about/about.scss +++ b/src/page/about/about.scss @@ -2,33 +2,48 @@ @import "../../style/vars"; #about { + @include important-card(); + + $img-size: 190px; + + position: relative; width: $body-width; - margin-top: $normal-margin; + margin-top: calc(#{$normal-margin} + #{$img-size} * 1 / 3); + + h1 { + text-align: left; + } h1, - img { + img, + .placeholder, + & { @include title-font(); } - img { - @include square(4ch); - border-radius: 100%; - margin-right: 1.5ex; - cursor: pointer; + .placeholder { + @include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin})); + box-sizing: content-box; float: left; + margin: 0 0.75ex 0.75ex 0; + } + + img { + @include square($img-size); + position: absolute; + left: 0; + top: 0; + transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3); + border-radius: 100%; + cursor: pointer; } @media (max-width: $breakpoint-width) { - flex-direction: column; - img { - margin: 0 0 $small-margin 0; - } - h1 { - text-align: center; - } } - * { + p { @include main-font(); + text-align: justify; + margin-top: $small-margin; } } diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts index 549c001..2229a6d 100644 --- a/src/page/background/background.html.ts +++ b/src/page/background/background.html.ts @@ -1,34 +1,6 @@ import { html } from "../../model/misc"; import "./background.scss"; -export const generate = ( - count: number, - z?: () => number, - color?: (z) => string, - height?: () => number, - isAnimated?: (index) => boolean, - transform?: (z) => string -): html => { - return ` -
- ${ - count > 0 - ? new Array(count) - .fill(0, 0, count) - .map(_ => z()) - .map( - (zValue, i) => ` -
- ` - ) - .join("") - : "" - } -
+export const generate = (): html => ` +
`; -}; diff --git a/src/page/background/background.scss b/src/page/background/background.scss index 3669d40..d5d7073 100644 --- a/src/page/background/background.scss +++ b/src/page/background/background.scss @@ -1,7 +1,7 @@ @import "../../style/vars"; @import "../../style/mixins"; -.background { +#background { position: absolute; left: 0; top: 0; @@ -18,17 +18,15 @@ top: 0; width: 160px; - transition: transform $slow-transition-time; + transition: transform $slow-transition-time, opacity $slow-transition-time; - &.animated { - animation: fade-in 1s linear forwards; - @keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation: fade-in 1s linear; + @keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; } } } diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 6d57072..5bc1461 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -1,120 +1,82 @@ import { PageElement } from "../../framework/page-element"; -import { generate } from "./background.html"; import { - choose, getHeight, createElement, randomFactory, - randomInInterval, - sum, - mixColors + sum } from "../../framework/helper"; import { PageEvent, PageEventType } from "../../framework/page-event"; +import { Blob } from "./blob"; +import { generate } from "./background.html"; export class PageBackground extends PageElement { - private colors = ["#fff9e0", "#ffd6d6"]; - private blobSpacing = 200; - private perspective = 5; - private currentRealHeight = 0; - private currentRealWidth = 0; - private currentBlobCount = 0; + private blobs: Array = []; + private blobSpacing = 300; public constructor(private start: PageElement, private end: PageElement) { super(); - this.setElement(createElement(generate(0))); + this.setElement(createElement(generate())); + Blob.initialize(20, 40, 5); } protected handleEvent(event: PageEvent, parent: PageElement) { if (event.type === PageEventType.onLoad) { this.bindListeners(parent); - } else if (event.type === PageEventType.onBodyDimensionsChanged) { this.resize(parent); + } else if (event.type === PageEventType.onBodyDimensionsChanged) { + this.resize(parent, event.data.deltaHeight); } } private bindListeners(parent: PageElement) { - window.addEventListener("resize", this.resize.bind(this, parent)); - window.addEventListener("load", this.resize.bind(this, parent)); + window.addEventListener("resize", () => this.resize(parent)); + window.addEventListener("load", () => this.resize(parent)); } - private resize(parent: PageElement) { - const siblings: Array = Array.prototype.slice - .call(parent.getElement().children) - .filter(e => e !== this.getElement()); + private resize(parent: PageElement, heightChange?: number) { + const siblings: Array = this.getSiblings(parent); 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(46); - - const zMin = 20; - const zMax = 40; - - 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, - () => randomInInterval(zMin, zMax, random), - z => - "#" + - mixColors( - "#ffffff", - choose(this.colors, random), - (z - zMin) / (zMax - zMin) - ), - () => randomInInterval(160, 750, random), - i => i >= this.currentBlobCount, - 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); + let height = sum(siblings.map(getHeight)); + if (heightChange) { + height += heightChange; } this.getElement().style.width = `${width}px`; this.getElement().style.height = `${height}px`; + + const requiredBlobCount = + width > 900 ? Math.round((width * height) / this.blobSpacing ** 2) : 0; + + console.log(requiredBlobCount); + + while (requiredBlobCount > this.blobs.length) { + const blob = new Blob(); + this.getElement().appendChild(blob.htmlElement); + this.blobs.push(blob); + } + + const random = randomFactory(2322); + + this.blobs.forEach((b, i) => { + if (i >= requiredBlobCount) { + b.hide(); + } else { + b.transform( + random, + width, + parent.getElement().clientHeight, + height, + getHeight(this.start.getElement()), + getHeight(this.end.getElement()) + ); + b.show(); + } + }); + } + + private getSiblings(parent: PageElement): Array { + return Array.prototype.slice + .call(parent.getElement().children) + .filter(e => e !== this.getElement()); } } diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts new file mode 100644 index 0000000..f24e38b --- /dev/null +++ b/src/page/background/blob.ts @@ -0,0 +1,102 @@ +import { + choose, + createElement, + mixColors, + randomFactory, + randomInInterval +} from "../../framework/helper"; + +export class Blob { + private static readonly creatorRandom = randomFactory(42); + private static readonly colors = ["#fff9e0", "#ffd6d6"]; + private static zMin: number; + private static zMax: number; + private static perspective: number; + public static initialize(zMin: number, zMax: number, perspective: number) { + Blob.zMin = zMin; + Blob.zMax = zMax; + Blob.perspective = perspective; + } + + private readonly z = randomInInterval( + Blob.zMin, + Blob.zMax, + Blob.creatorRandom + ); + + private readonly element: HTMLElement = createElement("
"); + constructor() { + this.element.style.backgroundColor = + "#" + + mixColors( + "#ffffff", + choose(Blob.colors, Blob.creatorRandom), + (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin) + ); + this.element.style.zIndex = (-this.z).toString(); + this.element.style.height = `${randomInInterval( + 160, + 750, + Blob.creatorRandom + )}px`; + } + + get htmlElement(): HTMLElement { + return this.element; + } + + private randomWithKnownZ( + random: () => number, + viewportSize: number, + scrollSize: number, + startOffset = 0, + endOffset = 0 + ): number { + const m = 1 + this.z / Blob.perspective; + + const variableOffset = (offset, q) => + Math.max( + 0, + offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q) + ); + + startOffset = variableOffset(startOffset, 1); + 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); + } + + public show() { + this.element.style.opacity = "1"; + } + + public hide() { + this.element.style.opacity = "0"; + } + + public transform( + random: () => number, + width: number, + viewportHeight: number, + scrollHeight: number, + startOffset: number, + endOffset: number + ) { + this.element.style.transform = ` + translateX(${this.randomWithKnownZ(random, width, width)}px) + translateY(${this.randomWithKnownZ( + random, + viewportHeight, + scrollHeight, + startOffset, + endOffset + )}px) + translateZ(${-this.z}px) + rotate(-20deg) + `; + } +} diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/image-viewer/image-viewer.scss index 80b54c5..eb5524b 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/src/page/image-viewer/image-viewer.scss @@ -14,7 +14,7 @@ background-color: rgba(0, 0, 0, 0.75); #photo { - max-width: 90vw; + max-width: 80vw; max-height: 80vh; } diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts index 016aae4..865729b 100644 --- a/src/page/timeline/timeline-element/timeline-element.html.ts +++ b/src/page/timeline/timeline-element/timeline-element.html.ts @@ -14,7 +14,9 @@ export const generate = (

${title}

${date}

- ${picture} +
+ ${picture} +

${description}

${ more diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss index ce08625..86057ab 100644 --- a/src/page/timeline/timeline-element/timeline-element.scss +++ b/src/page/timeline/timeline-element/timeline-element.scss @@ -9,6 +9,10 @@ @include insignificant-font(); } + .date-wide-screen { + color: $accent-color; + } + .line { @media (max-width: $breakpoint-width) { display: none; @@ -16,7 +20,7 @@ position: relative; margin: 0 $small-margin 0 $icon-size / 2; - border-left: $line-width solid $normal-text-color; + border-left: $line-width solid $accent-color; &:before { content: ""; @@ -24,7 +28,7 @@ position: absolute; top: 33%; left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width})); - border: $line-width solid $normal-text-color; + border: $line-width solid $accent-color; border-radius: 100%; background: $background; } @@ -63,8 +67,16 @@ color: $light-text-color; } - img { - cursor: pointer; + .image-container { + font-size: 0; + box-shadow: inset $shadow; + pointer-events: none; + img { + pointer-events: all; + cursor: pointer; + position: relative; + z-index: -2; + } } .description { diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts index ee03938..5d45998 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/src/page/timeline/timeline-element/timeline-element.ts @@ -34,27 +34,23 @@ export class PageTimelineElement extends PageElement { const showMore = this.query("#show-more") as HTMLElement; const showLess = this.query("#show-less") as HTMLElement; if (this.isOpen) { - this.more.style.height = "0"; PageTimelineElement.show(showMore); PageTimelineElement.hide(showLess); - this.notifyOfHeightChange(); + this.closeMore(); } else { PageTimelineElement.hide(showMore); PageTimelineElement.show(showLess); - this.openMoreToFullHeight(); + this.openMore(); } this.isOpen = !this.isOpen; } - private notifyOfHeightChange(change: number = null) { - const notify = () => - this.eventBroadcaster?.broadcastEvent({ - type: PageEventType.onBodyDimensionsChanged, - data: change - }); - notify(); - setTimeout(notify, 350); + private notifyOfHeightChange(deltaHeight: number = undefined) { + this.eventBroadcaster?.broadcastEvent({ + type: PageEventType.onBodyDimensionsChanged, + data: { deltaHeight } + }); } private static hide(element: HTMLElement) { @@ -69,15 +65,22 @@ export class PageTimelineElement extends PageElement { element.style.opacity = "1"; } - private openMoreToFullHeight() { - this.more.style.height = `${this.more.scrollHeight.toString()}px`; - this.notifyOfHeightChange(); + private openMore() { + const deltaHeight = this.more.scrollHeight; + this.more.style.height = `${deltaHeight.toString()}px`; + this.notifyOfHeightChange(deltaHeight); + } + + private closeMore() { + const deltaHeight = this.more.scrollHeight; + this.more.style.height = "0"; + this.notifyOfHeightChange(-deltaHeight); } private handleResize() { if (this.isOpen) { this.more.style.height = "auto"; - setTimeout(this.openMoreToFullHeight.bind(this), 200); + setTimeout(this.openMore.bind(this), 200); } } } diff --git a/src/static/fonts/lato/lato-v16-latin-italic.eot b/src/static/fonts/lato/lato-v16-latin-italic.eot new file mode 100644 index 0000000..8e32803 Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-italic.eot differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.svg b/src/static/fonts/lato/lato-v16-latin-italic.svg new file mode 100644 index 0000000..e288645 --- /dev/null +++ b/src/static/fonts/lato/lato-v16-latin-italic.svg @@ -0,0 +1,450 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/fonts/lato/lato-v16-latin-italic.ttf b/src/static/fonts/lato/lato-v16-latin-italic.ttf new file mode 100644 index 0000000..cf3da8b Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-italic.ttf differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.woff b/src/static/fonts/lato/lato-v16-latin-italic.woff new file mode 100644 index 0000000..95251da Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-italic.woff differ diff --git a/src/static/fonts/lato/lato-v16-latin-italic.woff2 b/src/static/fonts/lato/lato-v16-latin-italic.woff2 new file mode 100644 index 0000000..3246c12 Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-italic.woff2 differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.eot b/src/static/fonts/lato/lato-v16-latin-regular.eot new file mode 100644 index 0000000..c641306 Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-regular.eot differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.svg b/src/static/fonts/lato/lato-v16-latin-regular.svg new file mode 100644 index 0000000..55b43fb --- /dev/null +++ b/src/static/fonts/lato/lato-v16-latin-regular.svg @@ -0,0 +1,435 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/fonts/lato/lato-v16-latin-regular.ttf b/src/static/fonts/lato/lato-v16-latin-regular.ttf new file mode 100644 index 0000000..3c2d417 Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-regular.ttf differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.woff b/src/static/fonts/lato/lato-v16-latin-regular.woff new file mode 100644 index 0000000..189a0fe Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-regular.woff differ diff --git a/src/static/fonts/lato/lato-v16-latin-regular.woff2 b/src/static/fonts/lato/lato-v16-latin-regular.woff2 new file mode 100644 index 0000000..6904b66 Binary files /dev/null and b/src/static/fonts/lato/lato-v16-latin-regular.woff2 differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot b/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot new file mode 100644 index 0000000..2184652 Binary files /dev/null and b/src/static/fonts/montserrat/montserrat-v14-latin-regular.eot differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg b/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg new file mode 100644 index 0000000..6cc39cd --- /dev/null +++ b/src/static/fonts/montserrat/montserrat-v14-latin-regular.svg @@ -0,0 +1,327 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf b/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf new file mode 100644 index 0000000..5da852a Binary files /dev/null and b/src/static/fonts/montserrat/montserrat-v14-latin-regular.ttf differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff new file mode 100644 index 0000000..676a065 Binary files /dev/null and b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff differ diff --git a/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 new file mode 100644 index 0000000..70788c2 Binary files /dev/null and b/src/static/fonts/montserrat/montserrat-v14-latin-regular.woff2 differ diff --git a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot b/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot deleted file mode 100644 index b411f2e..0000000 Binary files a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot and /dev/null differ diff --git a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.svg b/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.svg deleted file mode 100644 index 78eb653..0000000 --- a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.svg +++ /dev/null @@ -1,336 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.ttf b/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.ttf deleted file mode 100644 index 0a0d483..0000000 Binary files a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.ttf and /dev/null differ diff --git a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff b/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff deleted file mode 100644 index efb8f0d..0000000 Binary files a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff and /dev/null differ diff --git a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff2 b/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff2 deleted file mode 100644 index 9b58220..0000000 Binary files a/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff2 and /dev/null differ diff --git a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.eot b/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.eot deleted file mode 100644 index 0cf3006..0000000 Binary files a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.eot and /dev/null differ diff --git a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.svg b/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.svg deleted file mode 100644 index e6a951f..0000000 --- a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.svg +++ /dev/null @@ -1,349 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.ttf b/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.ttf deleted file mode 100644 index 4228eaf..0000000 Binary files a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.ttf and /dev/null differ diff --git a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff b/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff deleted file mode 100644 index edac093..0000000 Binary files a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff and /dev/null differ diff --git a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff2 b/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff2 deleted file mode 100644 index 7584008..0000000 Binary files a/src/static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff2 and /dev/null differ diff --git a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot b/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot deleted file mode 100644 index 136154b..0000000 Binary files a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot and /dev/null differ diff --git a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.svg b/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.svg deleted file mode 100644 index 3587070..0000000 --- a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.svg +++ /dev/null @@ -1,347 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.ttf b/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.ttf deleted file mode 100644 index 876c111..0000000 Binary files a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.ttf and /dev/null differ diff --git a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff b/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff deleted file mode 100644 index df3c546..0000000 Binary files a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff and /dev/null differ diff --git a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff2 b/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff2 deleted file mode 100644 index d8c9a25..0000000 Binary files a/src/static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff2 and /dev/null differ diff --git a/src/style/a.scss b/src/style/a.scss index 683a6e0..c5391df 100644 --- a/src/style/a.scss +++ b/src/style/a.scss @@ -13,13 +13,14 @@ a { $border-shift: 10px; transition: transform $slow-transition-time; + $dot-size: 4px; &:before { content: ""; display: block; position: absolute; width: 100%; - height: $line-width; + height: $dot-size; bottom: 0; z-index: 1; background: linear-gradient( @@ -36,7 +37,7 @@ a { display: block; width: calc(100% + #{$border-shift}); z-index: 0; - border-bottom: $line-width dotted $accent-color; + border-bottom: $dot-size dotted $accent-color; transition: transform $slow-transition-time; } diff --git a/src/style/fonts.scss b/src/style/fonts.scss index 55a3677..ab7966a 100644 --- a/src/style/fonts.scss +++ b/src/style/fonts.scss @@ -1,68 +1,59 @@ -/* raleway-regular - latin_latin-ext */ +/* lato-regular - latin */ @font-face { - font-family: "Raleway"; + font-family: "Lato"; font-style: normal; font-weight: 400; - src: url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot"); /* IE9 Compat Modes */ - src: local("Raleway"), local("Raleway-Regular"), - url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot?#iefix") + 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/raleway/raleway-v14-latin_latin-ext-regular.woff2") + /* IE6-IE8 */ url("../static/fonts/lato/lato-v16-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ - url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff") - format("woff"), - /* Modern Browsers */ - url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.ttf") + 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/raleway/raleway-v14-latin_latin-ext-regular.svg#Raleway") - format("svg"); /* Legacy iOS */ + url("../static/fonts/lato/lato-v16-latin-regular.svg#Lato") format("svg"); /* Legacy iOS */ } - -/* open-sans-italic - latin-ext_latin */ +/* lato-italic - latin */ @font-face { - font-family: "Open Sans"; + font-family: "Lato"; font-style: italic; font-weight: 400; - src: url("../static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.eot"); /* IE9 Compat Modes */ - src: local("Open Sans Italic"), local("OpenSans-Italic"), - url("../static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.eot?#iefix") + 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/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff2") + /* IE6-IE8 */ url("../static/fonts/lato/lato-v16-latin-italic.woff2") format("woff2"), /* Super Modern Browsers */ - url("../static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.woff") - format("woff"), - /* Modern Browsers */ - url("../static/fonts/open_sans_italic/open-sans-v17-latin-ext_latin-italic.ttf") + 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/open_sans_italic/open-sans-v17-latin-ext_latin-italic.svg#OpenSans") - format("svg"); /* Legacy iOS */ + url("../static/fonts/lato/lato-v16-latin-italic.svg#Lato") format("svg"); /* Legacy iOS */ } -/* open-sans-regular - latin_latin-ext */ +/* montserrat-regular - latin */ @font-face { - font-family: "Open Sans"; + font-family: "Montserrat"; font-style: normal; font-weight: 400; - src: url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot"); /* IE9 Compat Modes */ - src: local("Open Sans Regular"), local("OpenSans-Regular"), - url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot?#iefix") + 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/open_sans/open-sans-v17-latin_latin-ext-regular.woff2") + url("../static/fonts/montserrat/montserrat-v14-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ - url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff") + url("../static/fonts/montserrat/montserrat-v14-latin-regular.woff") format("woff"), /* Modern Browsers */ - url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.ttf") + url("../static/fonts/montserrat/montserrat-v14-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ - url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.svg#OpenSans") + url("../static/fonts/montserrat/montserrat-v14-latin-regular.svg#Montserrat") format("svg"); /* Legacy iOS */ } diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 2805bb0..a59e5e5 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -6,12 +6,12 @@ justify-content: center; } -@mixin card() { +%card { text-align: center; border-radius: $border-radius; padding: $normal-margin; - background-color: $card-color; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.125); + box-shadow: $shadow; + z-index: 1; @media (max-width: $breakpoint-width) { & { @@ -24,6 +24,21 @@ } } +@mixin card() { + @extend %card; + background-color: $card-color; +} + +@mixin important-card() { + @extend %card; + + background-color: $accent-color; + + * { + color: white; + } +} + @mixin square($size) { width: $size; height: $size; @@ -36,19 +51,21 @@ @mixin title-font() { font: 400 3.5rem "Montserrat", serif; + font-style: normal; + line-height: 1; } @mixin sub-title-font() { - font: 400 1.9rem "Montserrat", serif; + font: 400 2rem "Montserrat", serif; + font-style: normal; } @mixin main-font() { font: 400 1.25rem "Lato", sans-serif; line-height: 1.6; - text-align: justify; } @mixin insignificant-font() { - font: 400 1rem "Lato", sans-serif; + font: 400 1.1rem "Lato", sans-serif; font-style: italic; } diff --git a/src/style/vars.scss b/src/style/vars.scss index 1cedf77..7edbd9f 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -14,27 +14,27 @@ $scrollbar-color: #ffd6d6; $fast-transition-time: 220ms; $slow-transition-time: 350ms; -$line-width: var(--line-width); -$border-radius: 5px; +$line-width: 3px; +$border-radius: 25px; $breakpoint-width: 900px; $normal-margin: var(--normal-margin); $small-margin: var(--small-margin); -$line-height: 2ch; +$line-height: 18px; + +$shadow: 0 0 5px rgba(0, 0, 0, 0.125); $blur-radius: 9px; $icon-size: var(--icon-size); $body-width: var(--body-width); :root { - --line-width: 3px; --normal-margin: 45px; --small-margin: 25px; --icon-size: 35px; --body-width: 765px; @media (max-width: $breakpoint-width) { - --line-width: 2px; --normal-margin: 35px; --small-margin: 15px; --icon-size: 20px; diff --git a/src/styles.scss b/src/styles.scss index 88bf30c..109a1ac 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,9 +7,6 @@ padding: 0; box-sizing: border-box; color: $normal-text-color; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; hyphens: auto; } @@ -64,5 +61,4 @@ video { width: 100%; height: auto; object-fit: contain; - border-radius: $border-radius; }