vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 03:23:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Squashed commit of the following:

Browse source 
commit 17b429555fceefc9c3500ddee4da8c6902d9674a
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date:   Tue Dec 28 01:00:11 2021 +0100

    Optimize assets and pages

commit c05e4bb5eabd9ef2b96eccb347cc0399cb6869f8
Author: Victor Westerlund <victor@victorwesterlund.com>
Date:   Tue Dec 14 18:06:52 2021 +0100

    Add noopener link type

    Prevents Spotify from accessing the window object of victorwesterlund.com.
    I think sending the referrer header is fine so noreferrer is not needed

commit cc3cca09ac02cc0bf45204bbe52dcc20ee10a2eb
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date:   Sun Dec 12 15:56:05 2021 +0100

    Add desktop style

    Added the desktop overrides as media queries for a mobile-first approach. Also added the "more" and "contact" pages.

commit de6f30a7c2525e5bb7a31a55f11a40fc33347f85
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date:   Sun Dec 12 14:46:21 2021 +0100

    New content and CSS refactor

    Content template for "more" and major CSS refactor
This commit is contained in:
Victor Westerlund 2021-12-28 01:01:26 +01:00
parent 9526e7bf52
commit 0cd5d11cd8
18 changed files with 323 additions and 315 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
public/about.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Victor Westerlund - About</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<p><a href="/">victor westerlund</a></p>
</header>
<main>
<p>...</p>
</main>
<footer>
<p><a href="about">about</a></p>
<p><a href="search">search</a></p>
<p><a class="arrow" href="more">more</a></p>
</footer>
</body>
</html>

20
public/assets/css/components.css Normal file
View file

@ -0,0 +1,20 @@
.button {
background-color: rgb(var(--color-contrast));
color: rgb(var(--color-background));
padding: var(--padding) calc(var(--padding) * 2);
}
/* -- Media Queries -- */
@media (pointer: fine) {
.button {
cursor: pointer;
}
}
@media (hover: hover) {
.button:hover {
background-color: rgba(var(--color-contrast),.11);
color: rgb(var(--color-contrast));
}
}

31
public/assets/css/index.css
View file

@ -1,31 +0,0 @@
/* Victor Westerlund - www.victorwesterlund.com */
a {
font-weight: bold;
}
a::after {
content: " →";
}
main {
display: flex;
flex-direction: column;
gap: 30px;
font-size: 20px;
transform: translateY(0);
}
/* -- Media Queries -- */
@media (max-width: 300px) {
main {
text-align: center;
align-items: center;
}
}
@media print {
a::after {
content: ": " attr(href);
}
}

250
public/assets/css/search.css
View file

@ -1,241 +1,51 @@
/* Victor Westerlund - www.victorwesterlund.com */ main {
:root { align-self: start;
--padding: 20px; width: 100%;
--max-width: 800px; max-width: 900px;
} }
html, #search {
body { width: 100%;
justify-content: flex-start; height: 80px;
color: rgb(var(--color-background));
background-color: rgb(var(--color-contrast));
} }
header { input[type="search"] {
display: flex; width: 100%;
align-items: center; height: 100%;
height: 100px; font-size: 18px;
min-height: 80px; color: inherit;
flex: none; padding: 0 calc(var(--padding) * 2);
} background-color: transparent;
header h1 {
font-size: clamp(16px,5vw,25px);
font-weight: normal;
}
/* -- Searchbox -- */
#search input {
background-color: var(--swatch-contrast);
color: var(--swatch-background);
border: none; border: none;
font-size: 16px;
width: calc(100vw - (var(--padding) * 2));
max-width: var(--max-width);
text-transform: lowercase;
padding: var(--padding);
}
#search input::placeholder {
color: rgba(var(--palette-background),.4);
}
#search input::selection {
color: var(--swatch-contrast);
background-color: var(--swatch-background);
}
#search input:focus {
outline: none; outline: none;
} }
/* -- Results -- */ input[type="search"]::selection {
color: rgb(var(--color-contrast));
background-color: rgb(var(--color-background));
}
input[type="search"]::placeholder {
color: rgba(var(--color-background),.4);
}
#results { #results {
width: calc(var(--max-width) + (var(--padding) * 4));
max-width: 100%;
box-sizing: border-box;
padding: var(--padding);
display: flex;
flex-direction: column;
overflow-y: auto;
gap: var(--padding);
}
#results > p {
text-align: center;
}
#results > p.error {
color: red;
}
#results > p.error::before {
content: "😰 ";
}
.card {
--padding-multiplier: 1.2;
flex: none;
display: flex;
flex-direction: column;
gap: calc(var(--padding) * var(--padding-multiplier));
padding: calc(var(--padding) * var(--padding-multiplier));
box-sizing: border-box;
width: 100%;
overflow: auto;
border: solid 1px var(--swatch-contrast);
}
.card > div {
--icon-size: 40px;
display: grid;
grid-template-columns: var(--icon-size) 1fr;
align-items: center;
font-weight: bold;
gap: calc(var(--padding) * var(--padding-multiplier));
}
.card > div *:not(p) {
width: var(--icon-size);
}
.card > div p {
font-size: clamp(16px,1vw,20px);
word-break: break-word;
}
/* -- Results > Types -- */
.card.error {
gap: unset;
}
.card.error p > a {
background-color: rgba(var(--palette-contrast),.1);
}
.resultsFooter {
display: flex;
justify-content: space-between;
align-items: center;
}
.resultsFooter p {
text-align: center; text-align: center;
font-size: 18px;
padding: 0 var(--padding); padding: 0 var(--padding);
} }
.resultsFooter p span:last-child {
display: none;
}
.resultsFooter svg {
width: 41px;
height: 40px;
flex: none;
}
.resultsFooter svg polygon {
fill: none;
stroke: rgba(var(--palette-contrast),.1);
stroke-width: 1px;
}
.resultsFooter svg.active polygon {
fill: var(--swatch-contrast);
stroke: var(--swatch-contrast);
}
/* ---- */
.button {
padding: var(--padding);
text-align: center;
background-color: var(--swatch-contrast);
color: var(--swatch-background);
box-shadow: inset 0 0 0 2px var(--swatch-contrast);
user-select: none;
}
/* -- Media Queries -- */ /* -- Media Queries -- */
@media (max-width: 300px) {
.card > div {
grid-template-columns: 1fr;
}
.card > div *:not(p) {
display: none;
}
}
@media (min-width: 600px) {
.resultsFooter p span:last-child {
display: initial;
}
}
@media (hover: hover) {
.button:hover {
background-color: rgba(var(--palette-contrast),0);
color: var(--swatch-contrast);
cursor: pointer;
}
.button:active {
background-color: rgba(var(--palette-contrast),.1);
color: var(--swatch-contrast);
cursor: pointer;
}
/* ---- */
.resultsFooter svg.active:hover polygon {
fill: var(--swatch-background);
cursor: pointer;
}
.resultsFooter svg.active:active polygon {
fill: rgba(var(--palette-contrast),.1);
}
}
@media (pointer: fine) {
#search input:focus {
outline: solid 5px rgba(var(--palette-contrast),.2);
}
/* ---- */
#results::-webkit-scrollbar {
width: 10px;
}
#results::-webkit-scrollbar-track {
background-color: rgba(var(--palette-contrast),.04);
}
#results::-webkit-scrollbar-thumb {
background: var(--swatch-contrast);
}
#results::-webkit-scrollbar-thumb:hover {
background: var(--swatch-background);
outline: solid 2px rgba(var(--palette-contrast),1);
}
#results::-webkit-scrollbar-thumb:active {
background: rgba(var(--palette-contrast),.1);
outline: solid 2px rgba(var(--palette-contrast),1);
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#search { #search {
--palette-background: 255,255,255; color: rgb(var(--color-contrast));
--palette-contrast: 33,33,33; background-color: rgba(var(--color-contrast),.15);
}
--swatch-background: rgb(var(--palette-background)); input[type="search"]::placeholder {
--swatch-contrast: rgb(var(--palette-contrast)); color: rgba(var(--color-contrast),.4);
} }
} }

157
public/assets/css/style.css
View file

@ -1,73 +1,142 @@
/* Victor Westerlund - www.victorwesterlund.com */
:root { :root {
--palette-background: 255,255,255; --color-background: 255,255,255;
--palette-contrast: 33,33,33; --color-contrast: 33,33,33;
--swatch-background: rgb(var(--palette-background)); --padding: 20px;
--swatch-contrast: rgb(var(--palette-contrast)); --running-height: 100px;
} --footer-denom: 1;
@font-face {
font-family: "Roboto Mono";
font-weight: normal;
font-style: normal;
src: local("Roboto Mono Regular"), local("RobotoMono-Regular"),
url("../fonts/RobotoMono-Regular.woff2") format("woff2"),
url("../fonts/RobotoMono-Regular.woff") format("woff");
}
@font-face {
font-family: "Roboto Mono";
font-weight: bold;
font-style: normal;
src: local("Roboto Mono Bold"), local("RobotoMono-Bold"),
url("../fonts/RobotoMono-Bold.woff2") format("woff2"),
url("../fonts/RobotoMono-Bold.woff") format("woff");
} }
/* -- Cornerstones -- */ /* -- Cornerstones -- */
* { * {
margin: 0; margin: 0;
font-family: "Roboto Mono","Arial",sans-serif; font-family: "Monaco","Consolas",monospace,sans-serif;
color: var(--swatch-contrast); color: rgb(var(--color-contrast));
} }
*::selection { *::selection {
background-color: var(--swatch-contrast); background-color: rgb(var(--color-contrast));
color: var(--swatch-background); color: rgb(var(--color-background));
} }
html, html,
body { body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
background-color: var(--swatch-background); }
body {
display: grid;
grid-template-rows: var(--running-height) 1fr calc(var(--running-height) / var(--footer-denom));
background-color: rgb(var(--color-background));
place-items: center;
justify-items: center;
font-size: 21px;
}
body > * {
box-sizing: border-box;
}
p,
a {
color: inherit;
text-decoration: none;
} }
a { a {
text-decoration: none; display: contents;
}
/* -- Components -- */
main {
display: flex;
flex-direction: column;
gap: var(--padding,30px);
}
.arrow {
display: inline;
font-weight: bold;
}
.arrow::after {
content: " →";
}
footer {
justify-self: end;
padding: 0 calc(var(--running-height) / (var(--footer-denom) * 2));
}
footer p:not(:last-child) {
display: none;
} }
/* -- Media Queries -- */ /* -- Media Queries -- */
@media (pointer: fine) {
a:hover {
background: rgba(var(--palette-contrast),.1);
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--palette-background: 0,0,0; --color-background: 0,0,0;
--palette-contrast: 255,255,255; --color-contrast: 255,255,255;
}
}
--swatch-background: rgb(var(--palette-background)); @media (pointer: fine) {
--swatch-contrast: rgb(var(--palette-contrast)); a:hover {
background: rgba(var(--color-contrast),.1);
}
}
@media print {
.arrow::after {
content: ": " attr(href);
}
}
@media (max-width: 300px) {
body > * {
justify-self: center;
text-align: center;
}
}
@media (min-aspect-ratio: 14/9) and (min-height: 500px) {
:root {
--footer-denom: 2;
}
footer {
width: 100%;
height: 100%;
gap: calc(var(--padding) * 1.5);
font-size: 19px;
color: rgb(var(--color-background));
background-color: rgb(var(--color-contrast));
display: flex;
align-items: center;
}
footer p:not(:last-child) {
display: initial;
}
footer p:last-child {
margin-left: auto;
}
footer p:first-child:last-child {
margin-left: auto;
margin-right: auto;
}
}
@media (min-aspect-ratio: 14/9) and (min-height: 500px) and (prefers-color-scheme: dark) {
footer {
color: rgb(var(--color-contrast));
background-color: rgba(var(--color-contrast),.15);
} }
} }

BIN
public/assets/fonts/RobotoMono-Bold.woff
View file

Binary file not shown.

BIN
public/assets/fonts/RobotoMono-Bold.woff2
View file

Binary file not shown.

BIN
public/assets/fonts/RobotoMono-Regular.woff
View file

Binary file not shown.

BIN
public/assets/fonts/RobotoMono-Regular.woff2
View file

Binary file not shown.

BIN
public/assets/img/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/assets/media/favicon-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 628 B

BIN
public/assets/media/favicon-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 638 B

26
public/contact.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Victor Westerlund - Contact</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<p><a href="/">victor westerlund</a></p>
</header>
<main>
<p>hello@&ZeroWidthSpace;victorwesterlund.com</p>
</main>
<footer>
<p><a href="about">about</a></p>
<p><a href="search">search</a></p>
<p><a class="arrow" href="more">more</a></p>
</footer>
</body>
</html>

37
public/error.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Victor Westerlund</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<style>
main { align-items: center; gap: unset; }
h1 { font-size: clamp(25px,40px,3vw); }
.button { margin-top: calc(var(--padding) * 2); }
footer { background-color: transparent; }
</style>
</head>
<body>
<header>
<p><a href="/">victor westerlund</a></p>
</header>
<main>
<h1>there is nothing here</h1>
<p>and that is all I know</p>
<a href="#">
<div class="button">
<p>take me home</p>
</div>
</a>
</main>
<footer>
<p>404 not found</p>
</footer>
</body>
</html>

18
public/index.html
View file

@ -1,20 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Victor Westerlund - www.victorwesterlund.com -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Victor Westerlund</title> <title>Victor Westerlund</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden."> <meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/img/favicon.png"> <link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.css"> <style>body { grid-template-rows: 1fr calc(var(--running-height) / var(--footer-denom)); }</style>
</head> </head>
<body> <body>
<main class="hidden"> <main>
<p>victor westerlund</p> <p>victor westerlund</p>
<p><a href="https://github.com/VictorWesterlund">github</a></p> <p><a class="arrow" href="https://github.com/VictorWesterlund">github</a></p>
<!--<p><a href="search">search</a></p>--> <p><a class="arrow" href="contact">contact</a></p>
</main> </main>
<footer>
<p><a href="about">about</a></p>
<p><a href="search">search</a></p>
<p><a class="arrow" href="more">more</a></p>
</footer>
</body> </body>
</html> </html>

36
public/more.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Victor Westerlund</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css">
<style>
.arrow[href="/"]::after { content: ""; }
.arrow[href="/"]::before { content: "← "; }
</style>
</head>
<body>
<header>
<p><a href="/">victor westerlund</a></p>
</header>
<main>
<p><a class="arrow" href="https://github.com/VictorWesterlund">github</a></p>
<p><a class="arrow" href="contact">contact</a></p>
<p><a class="arrow" href="about">about</a></p>
<p></p>
<p>random stuff <span style="white-space:nowrap;">--</span></p>
<p><a class="arrow" href="search">search</a></p>
<p><a class="arrow" rel="noopener" target="_blank" href="https://open.spotify.com/playlist/1NiR19Fg3AHg0XlqJhEKTF?si=c53d53f4c11f4971">megalodon</a></p>
</main>
<footer>
<p><a href="about">about</a></p>
<p><a href="search">search</a></p>
<p><a class="arrow" href="/">less</a></p>
</footer>
</body>
</html>

6
public/robots.txt
View file

@ -1,5 +1,5 @@
User-agent: * User-agent: *
Disallow: /.git/ Disallow: /./
Disallow: */.git/ Disallow: */./
Disallow: /*.git$ Disallow: /*.$

17
public/search.html
View file

@ -1,25 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Victor Westerlund - www.victorwesterlund.com -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Victor Westerlund - Search</title> <title>Victor Westerlund - Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden."> <meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/img/favicon.png"> <meta name="google" content="nositelinkssearchbox">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/search.css"> <link rel="stylesheet" href="assets/css/search.css">
</head> </head>
<body> <body>
<header> <header>
<h1><a href="/">victor westerlund</a></h1> <p><a href="/">victor westerlund</a></p>
</header> </header>
<main>
<div id="search"> <div id="search">
<input type="text" placeholder="start typing to search.."> <input type="search" spellcheck="false" autocomplete="false" placeholder="start typing to search..">
</div> </div>
<div id="results"> <div id="results">
<p>search results will appear here as you type</p> <p>search results will appear here as you type</p>
</div> </div>
</main>
<footer>
<p><a href="about">about</a></p>
<p><a href="search">search</a></p>
<p><a class="arrow" href="more">more</a></p>
</footer>
<script type="module" src="assets/js/search.mjs"></script> <script type="module" src="assets/js/search.mjs"></script>
<script nomodule defer src="assets/js/noscript.js"></script> <script nomodule defer src="assets/js/noscript.js"></script>
</body> </body>