From 8ec41ca2e3b9790f52473230671a482180ccd5d0 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Sun, 21 Nov 2021 17:17:55 +0100 Subject: [PATCH] About me template Added about me template, now it's time to write a dazzling README about myself --- public/about.html | 28 +++++++++++++++++ public/assets/css/about.css | 59 ++++++++++++++++++++++++++++++++++++ public/assets/css/search.css | 18 ----------- public/assets/css/style.css | 24 ++++++++++++++- public/index.html | 1 + 5 files changed, 111 insertions(+), 19 deletions(-) create mode 100644 public/about.html create mode 100644 public/assets/css/about.css diff --git a/public/about.html b/public/about.html new file mode 100644 index 0000000..711b4e4 --- /dev/null +++ b/public/about.html @@ -0,0 +1,28 @@ + + + + + + Victor Westerlund - Search + + + + + + + +
+

victor westerlund

+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis condimentum mauris quis maximus. Integer pellentesque justo dignissim, posuere quam ut, mollis augue. Aliquam eget pharetra sem. Cras iaculis, arcu a fringilla consectetur, risus libero tincidunt tellus, id accumsan quam erat eget quam. Aenean odio ligula, varius ut tellus ac, dignissim imperdiet felis. Donec vel molestie orci. Mauris sodales mauris tortor, lacinia eleifend velit pharetra non.

+

Nam cursus mi dui, tempor lobortis odio finibus sit amet. Fusce congue magna in mauris ullamcorper iaculis. Ut facilisis erat nec bibendum bibendum. In feugiat,

+

Curabitur faucibus ligula eget urna ornare iaculis. Phasellus volutpat eros massa, vitae malesuada velit vulputate nec. Quisque ipsum nisi, pharetra vel egestas sit amet, faucibus eget quam.

+
+
+

stalk me

+
+
+ + diff --git a/public/assets/css/about.css b/public/assets/css/about.css new file mode 100644 index 0000000..42a4a2a --- /dev/null +++ b/public/assets/css/about.css @@ -0,0 +1,59 @@ +/* Victor Westerlund - www.victorwesterlund.com */ +html, +body { + justify-content: flex-start; +} + +.column { + display: flex; + flex-direction: column; +} + +main { + --stroke: 1px; + --max-width: 700px; + --min-width: calc(100% - ((var(--padding) + var(--stroke)) * 2)); + align-items: center; + width: var(--min-width); + max-width: var(--max-width); +} + +main > div:not(.button) { + border: solid var(--stroke) var(--swatch-contrast); + padding: var(--padding); + gap: var(--padding); +} + +main .button { + background-color: var(--swatch-contrast); + color: var(--swatch-background); + text-align: center; + padding: var(--padding); + width: var(--min-width); + max-width: calc(var(--max-width) / 2); + margin: var(--padding); + user-select: none; +} + +/* -- Media Queries -- */ + +@media (min-width: 600px) { + main { + margin-top: auto; + margin-bottom: auto; + } +} + +@media (hover: hover) { + .button:hover { + background-color: rgba(var(--palette-contrast),.1); + color: var(--swatch-contrast); + cursor: pointer; + } + + .button:active { + background-color: rgba(var(--palette-contrast),.3); + color: var(--swatch-contrast); + cursor: pointer; + } +} \ No newline at end of file diff --git a/public/assets/css/search.css b/public/assets/css/search.css index 738f287..ee51536 100644 --- a/public/assets/css/search.css +++ b/public/assets/css/search.css @@ -1,27 +1,9 @@ /* Victor Westerlund - www.victorwesterlund.com */ -:root { - --padding: 20px; - --max-width: 800px; -} - html, body { justify-content: flex-start; } -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 { diff --git a/public/assets/css/style.css b/public/assets/css/style.css index e0cc4b6..ece3515 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -5,6 +5,9 @@ --swatch-background: rgb(var(--palette-background)); --swatch-contrast: rgb(var(--palette-contrast)); + + --padding: 20px; + --max-width: 800px; } @font-face { @@ -46,7 +49,6 @@ body { flex-direction: column; width: 100%; height: 100%; - overflow: hidden; background-color: var(--swatch-background); } @@ -54,6 +56,26 @@ a { text-decoration: none; } +p { + color: inherit; +} + +/* -- Global components -- */ + +header { + display: flex; + align-items: center; + height: 100px; + min-height: 80px; + flex: none; +} + +header h1 { + font-size: clamp(16px,5vw,25px); + font-weight: normal; + text-align: center; +} + /* -- Media Queries -- */ @media (pointer: fine) { diff --git a/public/index.html b/public/index.html index 902fc24..ea4b43c 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,7 @@

victor westerlund

github

+

about