From 63422d44fcb69efb3c05f28c9a8c106f54c6d4a8 Mon Sep 17 00:00:00 2001 From: Franziska Kunsmann Date: Sun, 15 Aug 2021 09:32:40 +0200 Subject: [PATCH] add some mobile css --- _layouts/default.html | 2 ++ css/style.sass | 41 +++++++++++++++++++++++++++-------------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 1c5571e..302f0c6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,6 +5,8 @@ {% feed_meta %} + + diff --git a/css/style.sass b/css/style.sass index adb5c66..ef9ee17 100644 --- a/css/style.sass +++ b/css/style.sass @@ -33,7 +33,8 @@ h1 -webkit-text-fill-color: transparent -webkit-text-stroke: 2px #FFFFFF paint-order: stroke fill - font-size: 8em + font-size: 6em + font-size: clamp(2em, 10vw, 8em) margin-bottom: 30px h2 @@ -45,7 +46,10 @@ h3 #content - margin: 20px 0 0 11em + margin: 0 0 0 11em + + @media (max-width: 800px) + margin: 5px a text-decoration: underline @@ -94,24 +98,33 @@ nav float: left width: 10em + @media (max-width: 800px) + float: none + width: auto + text-align: center + a - display: block - border: 5px outset #AAAAAA; - background-color: #CCCCCC; - margin-bottom: 10px + color: #FFFFFF padding: 2px 5px - text-decoration: none - color: #000000 - text-align: right &.current-page - border-style: inset font-weight: bolder + text-decoration: none - &:hover, - &:active, - &:focus - border-style: inset + @media (min-width: 800px) + display: block + border: 5px outset #AAAAAA; + background-color: #CCCCCC; + margin-bottom: 10px + text-decoration: none + color: #000000 + text-align: right + + &.current-page, + &:hover, + &:active, + &:focus + border-style: inset p