add some mobile css

2 years ago · 63422d44fc
parent 3005181ed4
commit 63422d44fc
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,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