fix: add missing css for page content (#41)

* add styling for links

* add styling for blockquote

* fix color for back button

* fix image width

* more stylings

* fix post card

demo/pages/_posts/my-first-post.md

@@ -6,12 +6,102 @@ tags:
   - life
 ---
 
-Consectetur nostrud elit do do do nisi quis. Cillum commodo Lorem sunt non sit velit nostrud fugiat. Et ad anim sint veniam occaecat nulla eu id irure occaecat nulla excepteur elit sint. Tempor dolor dolore aute excepteur nisi Lorem incididunt excepteur magna sint proident in voluptate dolore. Anim eiusmod ea sint velit enim irure est enim duis eiusmod. Culpa ea ea duis anim esse culpa anim laborum proident deserunt quis nisi. Laborum in irure aute consectetur enim cillum incididunt mollit.
+## Text
 
-Ullamco non incididunt adipisicing duis. Laborum consectetur occaecat veniam nisi amet consectetur laborum cupidatat culpa aute dolor id. Velit consectetur officia commodo elit. Qui officia adipisicing irure laboris non ullamco est cupidatat eu non Lorem excepteur. Ex cupidatat aliqua eu amet consequat Lorem excepteur reprehenderit consectetur.
+```markdown
+It's very easy to make some words **bold** and other words _italic_ with Markdown.
+You can even [link to Google!](http://google.com)
+```
 
-Adipisicing nulla sunt ipsum ipsum ea Lorem aliquip et incididunt cillum eiusmod aliquip Lorem culpa. Voluptate laborum id eu exercitation esse aliqua id reprehenderit enim consequat dolor eu excepteur. Qui ut est ex aute ullamco exercitation id. Commodo reprehenderit exercitation et incididunt officia aute eu nostrud nisi eiusmod ipsum.
+It's very easy to make some words **bold** and other words _italic_ with Markdown.
+You can even [link to Google!](http://google.com)
 
-Do occaecat consectetur nisi proident excepteur pariatur esse nisi. Aute magna proident consectetur mollit Lorem non est ad ea non proident. Anim reprehenderit ut adipisicing commodo veniam sit. Nostrud eu sint labore culpa proident laborum do adipisicing nostrud esse. Nostrud anim adipisicing irure aliquip incididunt ea ea.
+## Lists
 
-Cupidatat id occaecat proident officia. Laboris in incididunt ut dolor in qui amet nostrud ad exercitation minim nulla consectetur. Occaecat dolor labore eu nostrud nulla nulla ex dolore.
+```markdown
+Sometimes you want numbered lists:
+
+1. One
+2. Two
+3. Three
+
+Sometimes you want bullet points:
+
+- Start a line with a star
+- Profit!
+
+Alternatively,
+
+- Dashes work just as well
+- And if you have sub points, put two spaces before the dash or star:
+  - Like this
+  - And this
+```
+
+Sometimes you want numbered lists:
+
+1. One
+2. Two
+3. Three
+
+Sometimes you want bullet points:
+
+- Start a line with a star
+- Profit!
+
+Alternatively,
+
+- Dashes work just as well
+- And if you have sub points, put two spaces before the dash or star:
+  - Like this
+  - And this
+
+## Images
+
+If you want to embed images, this is how you do it:
+
+```markdown
+![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
+```
+
+![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
+
+## Blockquotes
+
+If you'd like to quote someone, use the > character before the line:
+
+```markdown
+> Coffee. The finest organic suspension ever devised... I beat the Borg with it. - Captain Janeway
+```
+
+> Coffee. The finest organic suspension ever devised... I beat the Borg with it. - Captain Janeway
+
+## Code
+
+And if you'd like to use syntax highlighting, optionally include the language:
+
+````markdown
+```javascript
+if (isAwesome) {
+  return true
+}
+```
+````
+
+```javascript
+if (isAwesome) {
+  return true
+}
+```
+
+## Task Lists
+
+But I have to admit, tasks lists are my favorite:
+
+```markdown
+- [x] This is a complete item
+- [ ] This is an incomplete item
+```
+
+- [x] This is a complete item
+- [ ] This is an incomplete item

packages/saber-theme-portfolio/src/components/HomeProfile.vue

@@ -136,8 +136,12 @@ export default {
 .profile-meta-items {
   margin-top: 25px;
 
+  & a {
+    color: var(--profile-link-color);
+  }
+
   & a:hover {
-    color: var(--text-color-lighter);
+    color: var(--profile-link-hover-color);
   }
 }
 
@@ -164,6 +168,7 @@ export default {
   padding: 10px 0;
   font-size: 1.2rem;
   width: 100%;
+  color: var(--profile-link-color);
 
   & svg {
     width: 1rem;

packages/saber-theme-portfolio/src/components/PostCard.vue

@@ -3,12 +3,12 @@
     <div class="post-title">
       {{ post.attributes.title }}
     </div>
-    <PostMeta :attributes="post.attributes" />
     <div
       class="post-excerpt"
       :class="{ 'fixed-height': fixedExcerptHeight }"
       v-html="getExcerpt(post.excerpt)"
     />
+    <PostMeta :attributes="post.attributes" />
   </saber-link>
 </template>
 
@@ -34,20 +34,33 @@ export default {
   methods: {
     getExcerpt(excerpt) {
       const limit = 240
+      // Strip HTML
+      excerpt = excerpt.replace(/<(?:.|\n)*?>/gm, '')
       return excerpt.length > limit ? `${excerpt.slice(0, limit)}...` : excerpt
     }
   }
 }
 </script>
 
 <style scoped>
+.post {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 .post-title {
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   font-size: 1.4rem;
   line-height: 1.4;
 }
 
+.post-excerpt {
+  margin-bottom: 10px;
+}
+
 .post-excerpt.fixed-height {
+  margin-bottom: 0;
   height: 80px;
   overflow: hidden;
   text-overflow: ellipsis;

packages/saber-theme-portfolio/src/components/PostMeta.vue

@@ -33,7 +33,6 @@ export default {
 
 <style scoped>
 .post-meta {
-  margin-bottom: 5px;
   color: var(--text-color-lighter);
 
   & > span {

packages/saber-theme-portfolio/src/css/global.css

@@ -13,7 +13,7 @@ body {
 
 a {
   text-decoration: none;
-  color: var(--text-color);
+  color: var(--link-color);
 }
 
 .container {
@@ -81,6 +81,63 @@ a {
   & h6 {
     font-weight: 400;
   }
+
+  & h2 {
+    font-size: 2.4rem;
+  }
+
+  & h3 {
+    font-size: 2.1rem;
+  }
+
+  & h4 {
+    font-size: 1.8rem;
+  }
+
+  & h5 {
+    font-size: 1.5rem;
+  }
+
+  & h6 {
+    font-size: 1.2rem;
+  }
+
+  & a:hover {
+    text-decoration: underline;
+  }
+
+  & blockquote {
+    background: var(--blockquote-bg);
+    border-left: 8px solid var(--blockquote-border-color);
+    margin: 20px 0;
+    padding: 14px 16px;
+    color: var(--blockquote-color);
+
+    &>*:first-child {
+      margin-top: 0;
+    }
+
+    &>*:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & img {
+    max-width: 100%;
+  }
+
+  & ul, & ol {
+    padding-left: 20px;
+
+    &.task-list {
+      list-style: none;
+      padding-left: 0;
+
+      & input {
+        margin-right: 5px;
+      }
+    }
+  }
 }
 
 .card {

packages/saber-theme-portfolio/src/css/variables.css

@@ -3,6 +3,7 @@
   --card-bg: rgb(20, 20, 20);
   --text-color: #fff;
   --text-color-lighter: #ccc;
+  --link-color: #0096cf;
   --profile-width: 400px;
   --border-color: #4e4e4e;
   --hover-border-color: rgb(156, 156, 156);
@@ -12,13 +13,19 @@
   --button-border-color: #4e4e4e;
   --button-hover-border-color: rgb(156, 156, 156);
   --code-language-color: rgb(94, 92, 92);
+  --profile-link-color: #fff;
+  --profile-link-hover-color: #ccc;
+  --blockquote-bg: var(--card-bg);
+  --blockquote-border-color: var(--border-color);
+  --blockquote-color: #c1c2c5;
 }
 
 .is-light-style {
   --bg: #fff;
   --card-bg: #f9f9f9;
   --text-color: #333;
   --text-color-lighter: rgb(187, 187, 187);
+  --link-color: #0096cf;
   --profile-width: 400px;
   --border-color: #e2e2e2;
   --hover-border-color: #ccc;
@@ -28,4 +35,7 @@
   --button-border-color: #e2e2e2;
   --button-hover-border-color: #ccc;
   --code-language-color: #ccc;
+  --blockquote-bg: #f1f1f1;
+  --blockquote-border-color: #ccc;
+  --blockquote-color: #6a737d;
 }

packages/saber-theme-portfolio/src/layouts/post.vue

@@ -92,6 +92,7 @@ export default {
   display: inline-flex;
   align-items: center;
   font-size: 1rem;
+  color: var(--text-color);
 
   &:hover {
     border-color: var(--button-hover-border-color);