Fixes custom pages and improved styling

stefanbc · Mar 24, 2019 · 3797570 · 3797570
1 parent 0940214
commit 3797570
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 82 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
@@ -1,4 +1,8 @@
 //globals
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     font-family: $font-1;
     font-weight: 400;
@@ -106,6 +110,15 @@ dt {
     margin-bottom: 1.4rem;
 }
 
+blockquote {
+    position: relative;
+    margin: 0 0 2.5rem;
+    padding: 0 0 1rem;
+    color: $color-3;
+    font-family: $font-0;
+    font-style: italic;
+}
+
 .text-left {
     text-align: left;
 }

diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
@@ -131,7 +131,7 @@ main {
             }
 
             ul {
-                list-style-type: initial;
+                list-style-type: square;
             }
 
             ul,
@@ -145,12 +145,6 @@ main {
             code {
                 overflow: auto;
             }
-
-            blockquote {
-                border-left: 4px solid $color-1;
-                margin-left: 2rem;
-                padding-left: 2rem;
-            }
         }
 
         .post-extra {

diff --git a/assets/scss/_media.scss b/assets/scss/_media.scss
@@ -43,6 +43,37 @@
     }
 }
 
+@media screen and (min-width: 480px) {
+    blockquote {
+        padding-left: 6rem;
+
+        &::before {
+            content: '“';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            color: $color-0;
+            font-family: $font-0;
+            font-size: 6rem;
+            font-style: normal;
+            font-weight: 700;
+            line-height: .8;
+        }
+    }
+}
+
+@media screen and (min-width: 800px) {
+    blockquote {
+        padding-right: 2rem;
+        padding-left: 8.6rem;
+
+        &::before {
+            font-size: 8rem;
+        }
+    }
+}
+
 @media (min-width: 40rem) {
     h1 {
         font-size: 5rem;
@@ -67,4 +98,4 @@
     h6 {
         font-size: 2rem;
     }
-  }
+}
diff --git a/page-projects.hbs b/page-projects.hbs
@@ -17,29 +17,39 @@
                 <table class="u-full-width">
                     <tbody>
                         <tr>
-                            <td>asgar</td>
-                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
-                            <td><a href="" title="Fork asgar"><i class="fas fa-code-branch"></i></a></td>
+                            <td>Project 1</td>
+                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
+                                lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
+                            <td class="text-center"><a href="" title="Fork Project 1"><i
+                                        class="fas fa-code-branch"></i></a></td>
                         </tr>
                         <tr>
-                            <td>asgar</td>
-                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
-                            <td><a href="" title="Fork asgar"><i class="fas fa-code-branch"></i></a></td>
+                            <td>Project 2</td>
+                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
+                                lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
+                            <td class="text-center"><a href="" title="Fork Project 2"><i
+                                        class="fas fa-code-branch"></i></a></td>
                         </tr>
                         <tr>
-                            <td>asgar</td>
-                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
-                            <td><a href="" title="Fork asgar"><i class="fas fa-code-branch"></i></a></td>
+                            <td>Project 3</td>
+                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
+                                lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
+                            <td class="text-center"><a href="" title="Fork Project 3"><i
+                                        class="fas fa-code-branch"></i></a></td>
                         </tr>
                         <tr>
-                            <td>asgar</td>
-                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
-                            <td><a href="" title="Fork asgar"><i class="fas fa-code-branch"></i></a></td>
+                            <td>Project 4</td>
+                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
+                                lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
+                            <td class="text-center"><a href="" title="Fork Project 4"><i
+                                        class="fas fa-code-branch"></i></a></td>
                         </tr>
                         <tr>
-                            <td>asgar</td>
-                            <td>A simple aspect ratio calculator</td>
-                            <td><a href="" title="Fork asgar"><i class="fas fa-code-branch"></i></a></td>
+                            <td>Project 5</td>
+                            <td>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
+                                lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</td>
+                            <td class="text-center"><a href="" title="Fork Project 5"><i
+                                        class="fas fa-code-branch"></i></a></td>
                         </tr>
                     </tbody>
                 </table>