diff --git a/public/assets/css/fonts.css b/public/assets/css/fonts.css new file mode 100644 index 0000000..afd0844 --- /dev/null +++ b/public/assets/css/fonts.css @@ -0,0 +1,17 @@ +@font-face { + font-family: "Roboto Mono"; + font-weight: 400; + src: local("Roboto Mono Regular"), + local("RobotoMono-Regular"), + url("../fonts/RobotoMono-Regular.woff2"), + url("../fonts/RobotoMono-Regular.ttf"); +} + +@font-face { + font-family: "Roboto Mono"; + font-weight: 700; + src: local("Roboto Mono Bold"), + local("RobotoMono-Bold"), + url("../fonts/RobotoMono-Bold.woff2"), + url("../fonts/RobotoMono-Bold.ttf"); +} \ No newline at end of file diff --git a/public/assets/css/style.css b/public/assets/css/style.css index c9f34da..2e634a1 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,27 +1,11 @@ +@import url("fonts.css"); + :root { --color: #212121; --color-accent: white; --color-highlight: #f4f2ff; } -@font-face { - font-family: "Roboto Mono"; - font-weight: 400; - src: local("Roboto Mono Regular"), - local("RobotoMono-Regular"), - url("../fonts/RobotoMono-Regular.woff2"), - url("../fonts/RobotoMono-Regular.ttf"); -} - -@font-face { - font-family: "Roboto Mono"; - font-weight: 700; - src: local("Roboto Mono Bold"), - local("RobotoMono-Bold"), - url("../fonts/RobotoMono-Bold.woff2"), - url("../fonts/RobotoMono-Bold.ttf"); -} - /* Cornerstones */ * { @@ -234,4 +218,3 @@ nav a:hover { } } -/* Victor Westerlund */ diff --git a/public/assets/css/style.min.css b/public/assets/css/style.min.css deleted file mode 100644 index 3152bb8..0000000 --- a/public/assets/css/style.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{--color: #212121;--color-accent: white;--color-highlight: #f4f2ff}@font-face{font-family:"Roboto Mono";font-weight:400;src:local("Roboto Mono Regular"),local("RobotoMono-Regular"),url(/assets/fonts/RobotoMono-Regular.woff2),url(/assets/fonts/RobotoMono-Regular.ttf)}@font-face{font-family:"Roboto Mono";font-weight:700;src:local("Roboto Mono Bold"),local("RobotoMono-Bold"),url(/assets/fonts/RobotoMono-Bold.woff2),url(/assets/fonts/RobotoMono-Bold.ttf)}*{margin:0;font-family:"Roboto Mono","Arial",sans-serif;color:var(--color)}::selection{background:var(--color-highlight);color:var(--color)}body,html,main,main>div{width:100%;height:100%}.logo,.logo::after{width:0;height:0;border-left:var(--skew) solid transparent;border-right:var(--skew) solid transparent;border-top:var(--size) solid var(--color)}.logo{--size: 5em;--skew: calc(var(--size) / 1.7)}.logo::after{content:"";opacity:.3}h1{font-size:2em}h2{font-weight:400;font-size:1.42em}h2 span{color:var(--color-accent);background:var(--color)}main{--grid-spacing: 30px;margin:auto;max-width:200vh;background:radial-gradient(circle,rgba(0,0,0,.2) 1px,transparent 1px),url(/assets/img/pattern.gif);background-size:var(--grid-spacing) var(--grid-spacing),auto 90%;background-position:100% 100%;background-repeat:repeat,no-repeat;background-blend-mode:multiply;image-rendering:pixelated;image-rendering:-moz-crisp-edges}main *{image-rendering:initial}main>div{position:absolute;width:50%}#intro{left:0;width:100vh;box-sizing:border-box;padding:5vw;display:flex;align-items:center;z-index:1}#intro .inner{display:flex;flex-wrap:wrap;height:100%}#intro .logo{--size: 7vh;margin-bottom:2em}#intro .block{width:100%;font-size:3vh}#intro .block:last-child{display:flex;align-items:flex-end}#intro .block p{font-size:.7em;margin-bottom:1.5em}#intro .block p span{background:var(--color-accent);margin-right:.9em}nav a{text-decoration:none;margin-right:2em;font-size:.9em}nav a::after{content:"→";padding-left:.5em}nav a:hover{background:var(--color-highlight);font-weight:700}#myface{right:0;width:50%;display:flex;justify-content:center}#myface img,#myface picture{position:absolute;height:80%;bottom:0;pointer-events:none;display:flex;justify-content:center}#myface img{height:100%}@media screen and (max-width:1010px){#myface{display:none}}@media screen and (max-width:800px){h1{font-size:7vw}h2{font-size:5vw}main{max-width:unset;background-size:auto 100vw}#intro{width:initial;padding:10vw;text-align:center}#intro p{text-align:justify}#intro .block p:last-of-type{text-align:initial}nav a{text-decoration:none;margin-right:5vw;font-size:5vw}} diff --git a/public/assets/img/favicon.png b/public/assets/img/favicon.png index 9b5f6b2..081d24b 100644 Binary files a/public/assets/img/favicon.png and b/public/assets/img/favicon.png differ diff --git a/public/assets/img/myface/fallback.jpg b/public/assets/img/myface/fallback.jpg deleted file mode 100644 index b0c95d8..0000000 Binary files a/public/assets/img/myface/fallback.jpg and /dev/null differ diff --git a/public/assets/img/myface/highres.avif b/public/assets/img/myface/highres.avif new file mode 100644 index 0000000..85c50e9 Binary files /dev/null and b/public/assets/img/myface/highres.avif differ diff --git a/public/assets/img/myface/highres.png b/public/assets/img/myface/highres.png deleted file mode 100644 index 57f0649..0000000 Binary files a/public/assets/img/myface/highres.png and /dev/null differ diff --git a/public/assets/img/myface/mediumres.avif b/public/assets/img/myface/mediumres.avif new file mode 100644 index 0000000..190a9b0 Binary files /dev/null and b/public/assets/img/myface/mediumres.avif differ diff --git a/public/assets/img/pattern.txt b/public/assets/img/pattern.txt deleted file mode 100644 index d30e08e..0000000 --- a/public/assets/img/pattern.txt +++ /dev/null @@ -1,29 +0,0 @@ -+--------------------------------------------------------------------------------------------+ -Size comparison for 6x6 monochrome image ranking from best to worst - -pattern.gif: 49 bytes - - Dithering level: 7 (doesn't really matter) - - Transparency threshold: 128 (doesn't really matter) - -pattern.bmp: 86 bytes - - Bit depth: 4 - - Dirthering level: 7 (doesn't really matter) - -pattern.png: 151 bytes - - Bit depth: 4 - - Dirthering level: 7 (doesn't really matter) - - Transparency threshold: 192 (doesn't really matter) - - Interlaced (saves 1 byte) - -pattern.webp: 248 bytes - - Quality: 100 - -pattern.jpg: 800 bytes - - Chroma Subsampling: 4:2:2 (saves 6 bytes from 4:4:4) -+--------------------------------------------------------------------------------------------+ - --- Here's the image used for the test -- -data:image/gif;base64,R0lGODlhBgAGAHAAACwAAAAABgAGAIH////08v8AAAAAAAACCgRiGciL9mA6ExQAOw== - - -Unfortunately after all response headers are set, the total ends up at 317 bytes. diff --git a/public/assets/js/nomodule.js b/public/assets/js/nomodule.js new file mode 100644 index 0000000..2e68d64 --- /dev/null +++ b/public/assets/js/nomodule.js @@ -0,0 +1,7 @@ +// Promote IE to Edge +if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) { + window.location = 'microsoft-edge:' + window.location; + setTimeout(function() { + window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547'; + },1); +} diff --git a/public/assets/js/script.js b/public/assets/js/script.js new file mode 100644 index 0000000..083e7f5 --- /dev/null +++ b/public/assets/js/script.js @@ -0,0 +1,6 @@ +// Register SW if supported by browser +if(navigator.serviceWorker) { + navigator.serviceWorker.register("sw.js",{ + scope: "/" + }); +} diff --git a/public/index.html b/public/index.html index e783852..5259755 100644 --- a/public/index.html +++ b/public/index.html @@ -33,29 +33,15 @@