1 files changed, 238 insertions, 0 deletions
diff --git a/themes/flamingo/assets/scss/_mobile_view.scss b/themes/flamingo/assets/scss/_mobile_view.scss
new file mode 100644
index 0000000..0b74db2
--- /dev/null
+++ b/themes/flamingo/assets/scss/_mobile_view.scss
@@ -0,0 +1,238 @@
+html {
+    font-size: $global-font-size;
+}
+
+body {
+    line-height: 1.8em;
+    color: $primary-color;
+    background: $background-color;
+}
+
+.post-title, .date-label {
+    letter-spacing: 0.025rem;
+}
+
+p, sub, nav{
+    letter-spacing: 0.05rem;
+}
+
+.title-wrapper, .title {
+    letter-spacing: 0.075rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+.brand-icon {
+    color: $post-link-color;
+    display: inline-flex;
+}
+
+.brand-icon:hover {
+    border-bottom: 1px solid;
+}
+
+.layout {
+    .title-wrapper {
+        @include flex-column;
+        margin-bottom: 0.5rem;
+    }
+    .title {
+        color: $primary-color;
+        text-align: left;
+        display: block;
+        font-size: $title-font-size;
+        //font-weight: bold;
+        margin: 0;
+    }
+    max-width: $layout-max-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding: $vertical-layout-padding $horizontal-layout-padding;
+}
+
+nav {
+    font-size: $nav-font-size;
+    text-align: center;
+    ul {
+        display: block;
+        padding: 0;
+        //margin: 0.5rem;
+        li {
+            display: inline;
+            list-style-type: none;
+            a {
+                color: $primary-color;
+                display: inline-block;
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+                border-bottom: 1px solid $background-color;
+            }
+            a:hover {
+                color: $post-link-color;
+                border-bottom: 1px solid;
+            }
+        }
+        li:not(:last-child) {
+            padding: 0 1rem 0 0;
+        }
+    }
+}
+
+.slim-description {
+    margin-bottom: calc(#{$global-font-size} * 2);
+    color: $subscript-color;
+}
+
+
+.blog-post-content {
+    a {
+        color: $post-link-color;
+        text-decoration: none;
+        border-bottom: 1px solid;
+    }
+    a:hover {
+        border-bottom: none;
+    }
+}
+
+
+
+.blog-list {
+    .list-item {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: baseline;
+        padding: 0.5rem 0.5rem 0.5rem 0;
+    }
+    .post-title {
+        a {
+            text-decoration: none;
+            color: $post-title-color;
+            //font-weight: 600;
+            border-bottom: none;
+            //transition: border-bottom .3s;
+        }
+        a:hover {
+            //border-bottom: 1px solid $post-link-color;
+            color: $post-link-color;
+        }
+    }
+
+    .date-label {
+        font-size: 80%;
+        margin-right: 1rem;
+    }
+}
+
+.content {
+    .title {
+        font-size: $content-title-font-size;
+    }
+}
+
+.blog-post-content {
+    a {
+        color: $post-link-color;
+        text-decoration: none;
+        border-bottom: 1px solid;
+    }
+    a:hover {
+        border-bottom: none;
+    }
+
+    img {
+        width:100%;
+    }
+}
+
+.post-image {
+    @include full-width-mobile
+
+    img {
+        width:100%;
+    }
+}
+
+
+.tags {
+    font-size: .9em;
+    text-align: left;
+    ul {
+        display: block;
+        padding: 0;
+        //margin: 0.5rem;
+        li {
+            display: inline;
+            list-style-type: none;
+            text-align: center;
+            a {
+                border: 1px solid $post-link-color;
+                border-radius: 3px;
+                background: $post-link-color;
+                padding: 0.2em;
+                color: #fff;
+                // color: $primary-color;
+                margin: 10px 2px 10px 0;
+                line-height: 1em;
+            }
+            a:hover {
+                background: $background-color;
+                color: $post-link-color;
+            }
+        }
+        li:not(:last-child) {
+            padding: 0 0.1rem 0 0;
+        }
+    }
+}
+
+.highlight {
+    @include full-width-mobile
+    pre {
+        line-height: 1.2rem;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        overflow: auto;
+        padding: $horizontal-layout-padding;
+        margin: 0;
+        code[class*=language-] {
+            font-size: 0.9em;
+        }
+
+        .token.comment {
+            font-style: italic;
+        }
+    }
+}
+
+// Style blockquotes
+// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
+// Worth looking at
+// https://codepen.io/frxnz/pen/IvBCr
+blockquote {
+    background: $blockquote-background-color;
+    border-left: 5px solid $primary-color;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "\201C""\201D""\2018""\2019";
+}
+
+blockquote:before {
+    color: $primary-color;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+
+blockquote p {
+    display: inline;
+}
+
+time {
+    font-size: 80%;
+    margin-right: 1rem;
+}