diff --git a/public/about.html b/public/about.html new file mode 100644 index 0000000..23ac67b --- /dev/null +++ b/public/about.html @@ -0,0 +1,26 @@ + + + + + Victor Westerlund - About + + + + + + + + +
+

victor westerlund

+
+
+

...

+
+ + + diff --git a/public/assets/css/components.css b/public/assets/css/components.css new file mode 100644 index 0000000..51dd575 --- /dev/null +++ b/public/assets/css/components.css @@ -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)); + } +} \ No newline at end of file diff --git a/public/assets/css/index.css b/public/assets/css/index.css deleted file mode 100644 index eed3603..0000000 --- a/public/assets/css/index.css +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/public/assets/css/search.css b/public/assets/css/search.css index 738f287..ee79755 100644 --- a/public/assets/css/search.css +++ b/public/assets/css/search.css @@ -1,241 +1,51 @@ -/* Victor Westerlund - www.victorwesterlund.com */ -:root { - --padding: 20px; - --max-width: 800px; +main { + align-self: start; + width: 100%; + max-width: 900px; } -html, -body { - justify-content: flex-start; +#search { + width: 100%; + height: 80px; + color: rgb(var(--color-background)); + background-color: rgb(var(--color-contrast)); } -header { - display: flex; - align-items: center; - height: 100px; - min-height: 80px; - flex: none; -} - -header h1 { - font-size: clamp(16px,5vw,25px); - font-weight: normal; -} - -/* -- Searchbox -- */ - -#search input { - background-color: var(--swatch-contrast); - color: var(--swatch-background); +input[type="search"] { + width: 100%; + height: 100%; + font-size: 18px; + color: inherit; + padding: 0 calc(var(--padding) * 2); + background-color: transparent; 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; } -/* -- 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 { - 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; + font-size: 18px; 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 (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) { #search { - --palette-background: 255,255,255; - --palette-contrast: 33,33,33; - - --swatch-background: rgb(var(--palette-background)); - --swatch-contrast: rgb(var(--palette-contrast)); + color: rgb(var(--color-contrast)); + background-color: rgba(var(--color-contrast),.15); + } + + input[type="search"]::placeholder { + color: rgba(var(--color-contrast),.4); } } \ No newline at end of file diff --git a/public/assets/css/style.css b/public/assets/css/style.css index e0cc4b6..6978cd7 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,73 +1,142 @@ -/* Victor Westerlund - www.victorwesterlund.com */ :root { - --palette-background: 255,255,255; - --palette-contrast: 33,33,33; + --color-background: 255,255,255; + --color-contrast: 33,33,33; - --swatch-background: rgb(var(--palette-background)); - --swatch-contrast: rgb(var(--palette-contrast)); -} - -@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"); + --padding: 20px; + --running-height: 100px; + --footer-denom: 1; } /* -- Cornerstones -- */ * { margin: 0; - font-family: "Roboto Mono","Arial",sans-serif; - color: var(--swatch-contrast); + font-family: "Monaco","Consolas",monospace,sans-serif; + color: rgb(var(--color-contrast)); } *::selection { - background-color: var(--swatch-contrast); - color: var(--swatch-background); + background-color: rgb(var(--color-contrast)); + color: rgb(var(--color-background)); } html, body { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; width: 100%; height: 100%; - overflow: hidden; - background-color: var(--swatch-background); + overflow-x: hidden; +} + +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 { - 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 (pointer: fine) { - a:hover { - background: rgba(var(--palette-contrast),.1); - } -} - @media (prefers-color-scheme: dark) { :root { - --palette-background: 0,0,0; - --palette-contrast: 255,255,255; - - --swatch-background: rgb(var(--palette-background)); - --swatch-contrast: rgb(var(--palette-contrast)); + --color-background: 0,0,0; + --color-contrast: 255,255,255; + } +} + +@media (pointer: fine) { + 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); } } diff --git a/public/assets/fonts/RobotoMono-Bold.woff b/public/assets/fonts/RobotoMono-Bold.woff deleted file mode 100644 index 53e78b7..0000000 Binary files a/public/assets/fonts/RobotoMono-Bold.woff and /dev/null differ diff --git a/public/assets/fonts/RobotoMono-Bold.woff2 b/public/assets/fonts/RobotoMono-Bold.woff2 deleted file mode 100644 index ec497dc..0000000 Binary files a/public/assets/fonts/RobotoMono-Bold.woff2 and /dev/null differ diff --git a/public/assets/fonts/RobotoMono-Regular.woff b/public/assets/fonts/RobotoMono-Regular.woff deleted file mode 100644 index 17a5ab4..0000000 Binary files a/public/assets/fonts/RobotoMono-Regular.woff and /dev/null differ diff --git a/public/assets/fonts/RobotoMono-Regular.woff2 b/public/assets/fonts/RobotoMono-Regular.woff2 deleted file mode 100644 index 224ba98..0000000 Binary files a/public/assets/fonts/RobotoMono-Regular.woff2 and /dev/null differ diff --git a/public/assets/img/favicon.png b/public/assets/img/favicon.png deleted file mode 100644 index 081d24b..0000000 Binary files a/public/assets/img/favicon.png and /dev/null differ diff --git a/public/assets/media/favicon-dark.png b/public/assets/media/favicon-dark.png new file mode 100644 index 0000000..6c30dc7 Binary files /dev/null and b/public/assets/media/favicon-dark.png differ diff --git a/public/assets/media/favicon-light.png b/public/assets/media/favicon-light.png new file mode 100644 index 0000000..64ebd05 Binary files /dev/null and b/public/assets/media/favicon-light.png differ diff --git a/public/contact.html b/public/contact.html new file mode 100644 index 0000000..7013afe --- /dev/null +++ b/public/contact.html @@ -0,0 +1,26 @@ + + + + + Victor Westerlund - Contact + + + + + + + + +
+

victor westerlund

+
+
+

hello@​victorwesterlund.com

+
+ + + diff --git a/public/error.html b/public/error.html new file mode 100644 index 0000000..68184dc --- /dev/null +++ b/public/error.html @@ -0,0 +1,37 @@ + + + + + Victor Westerlund + + + + + + + + + + +
+

victor westerlund

+
+
+

there is nothing here

+

and that is all I know

+ +
+

take me home

+
+ +
+ + + diff --git a/public/index.html b/public/index.html index 902fc24..f179109 100644 --- a/public/index.html +++ b/public/index.html @@ -1,20 +1,26 @@ - Victor Westerlund - + + + - + -
+

victor westerlund

-

github

- +

github

+

contact

+ diff --git a/public/more.html b/public/more.html new file mode 100644 index 0000000..baa16ba --- /dev/null +++ b/public/more.html @@ -0,0 +1,36 @@ + + + + + Victor Westerlund + + + + + + + + + +
+

victor westerlund

+
+
+

github

+

contact

+

about

+

+

random stuff --

+

search

+

megalodon

+
+ + + diff --git a/public/robots.txt b/public/robots.txt index 161c27a..2bbeb91 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,5 +1,5 @@ User-agent: * -Disallow: /.git/ -Disallow: */.git/ -Disallow: /*.git$ +Disallow: /./ +Disallow: */./ +Disallow: /*.$ diff --git a/public/search.html b/public/search.html index f888da6..9fa0a43 100644 --- a/public/search.html +++ b/public/search.html @@ -1,25 +1,34 @@ - Victor Westerlund - Search - + + + +
-

victor westerlund

+

victor westerlund

- -
-

search results will appear here as you type

-
+
+ +
+

search results will appear here as you type

+
+
+