hugo site

2019-03-06 00:31:57 -08:00
parent 748b3c1b30
commit 4386102543
174 changed files with 1843 additions and 522 deletions
--- a/assets/css/_media.scss
+++ b/assets/css/_media.scss
@ -0,0 +1,169 @@
+/* Small Devices, Tablets */
+@media only screen and (max-width: 768px) {
+    .main-header {
+        .logo {
+            a {
+                font-size: 24px;
+            }
+        }
+    }
+
+    .post-card-box {
+        li {
+            width: 100%;
+            margin-bottom: 20px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .recent-box {
+        .recent-list {
+            .recent-item {
+                position: relative;
+                display: inline-block;
+                width: 49%;
+                height: 150px;
+                margin-left: 0.5%;
+                margin-bottom: 0.5%;
+                span {
+                    position: absolute;
+                    font-size: 12px;
+                    left: 2.5%;
+                    bottom: 10%;
+                    color: $white;
+                }
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+    .wrapper {
+        max-width: 95%;
+    }
+
+    .page-content {
+        margin-top: -50px;
+        padding: 15px;
+    }
+
+    .header-page {
+        margin-bottom: 20px;
+        h1 {
+            font-size: 27px;
+            margin: 0 0 10px;
+        }
+        .page-date {
+            font-size: 14px;
+        }
+    }
+
+    .main-header {
+        .logo {
+            a {
+                font-size: 21px;
+            }
+        }
+    }
+    .menu-icon,
+    .menu-icon-close,
+    .search-icon,
+    .search-icon-close {
+        font-size: 16px;
+    }
+
+    .page-image {
+        height: 380px;
+    }
+
+    .recent-box {
+        .recent-list {
+            .recent-item {
+                position: relative;
+                display: inline-block;
+                width: 99%;
+                height: 150px;
+                margin-left: 0.5%;
+                margin-bottom: 0.5%;
+                span {
+                    position: absolute;
+                    font-size: 12px;
+                    left: 2.5%;
+                    bottom: 10%;
+                    color: $white;
+                }
+            }
+        }
+    }
+
+    .newsletter {
+        .newsletter-box {
+            .subscribe-btn {
+                width: 80px;
+                height: 40px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .about-body {
+        .contact-list {
+            li {
+                display: inline-block;
+                margin-left: 5px;
+                &:first-child {
+                    margin-left: 0;
+                }
+                a {
+                    display: block;
+                    color: $light-gray;
+                    font-size: 16px;
+                    text-decoration: none;
+                    padding: 5px;
+                    transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
+                    &:hover {
+                        color: $dark-pink;
+                        transform: scale(1.3);
+                    }
+                }
+            }
+        }
+    }
+
+    .author-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        .author-img {
+            height: 100px;
+            width: 100px;
+            margin: 0 0 10px;
+        }
+        .author-desc {
+            h2 {
+                margin: 0 0 10px;
+            }
+            p {
+                margin: 0 0 15px;
+            }
+        }
+    }
+}
+
+@media print {
+    .main-nav {
+        display: none;
+    }
+
+    html, body {
+        height: auto;
+    }
+
+    .page-content {
+        box-shadow: none;
+    }
+}