From aa3189be89fb64c9a9396671e7ed51087716d5a0 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Mon, 20 Sep 2021 16:49:53 +0200 Subject: [PATCH] Fixed content offset - Added offset calculator - Added some media queries --- public/assets/css/style.css | 32 +++++++++++++++++++++++++++----- public/index.html | 16 ++++++++++++++-- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 89c6317..4aca975 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,4 +1,4 @@ -/* Victor Westerlund */ +/* Victor Westerlund - www.victorwesterlund.com */ :root { --palette-background: 255,255,255; --palette-contrast: 33,33,33; @@ -35,7 +35,7 @@ *::selection { background-color: var(--swatch-contrast); - color: var(--swatch-accent); + color: var(--swatch-background); } html, @@ -55,17 +55,39 @@ a { font-weight: bold; } +a::after { + content: " →"; +} + main { display: flex; flex-direction: column; gap: 30px; - font-size: clamp(18px,5vw,3vh); + font-size: 20px; + transform: translateY(0); } -/* -- Content -- */ - /* -- Media Queries -- */ +@media (max-width: 300px) { + main { + text-align: center; + align-items: center; + } +} + +@media print { + a::after { + content: ": " attr(href); + } +} + +@media (pointer: fine) { + a:hover { + background: rgba(var(--palette-contrast),.1); + } +} + @media (prefers-color-scheme: dark) { :root { --palette-background: 0,0,0; diff --git a/public/index.html b/public/index.html index 830d27b..5759bed 100644 --- a/public/index.html +++ b/public/index.html @@ -10,9 +10,21 @@ -
+

victor westerlund

-

github →

 +

github

+