add some mobile css

2021-08-15 09:32:40 +02:00 · 2021-08-15 09:32:40 +02:00 · 63422d44fc
commit 63422d44fc
parent 3005181ed4
2 changed files with 29 additions and 14 deletions
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -5,6 +5,8 @@

        <link rel="stylesheet" href="/css/style.css" type="text/css">
        {% feed_meta %}
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    </head>
    <body>
        <a href="#content" id="skip-to-content">Skip to content</a>
--- 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,20 +98,29 @@ nav
    float: left
    width: 10em

+    @media (max-width: 800px)
+        float: none
+        width: auto
+        text-align: center
+
    a
+        color: #FFFFFF
+        padding: 2px 5px
+
+        &.current-page
+            font-weight: bolder
+            text-decoration: none
+
+        @media (min-width: 800px)
            display: block
            border: 5px outset #AAAAAA;
            background-color: #CCCCCC;
            margin-bottom: 10px
-        padding: 2px 5px
            text-decoration: none
            color: #000000
            text-align: right

-        &.current-page
-            border-style: inset
-            font-weight: bolder
-
+            &.current-page,
            &:hover,
            &:active,
            &:focus