From fa6eaae94ff9cd729d115780e62b3e0d7443c9fb Mon Sep 17 00:00:00 2001 From: Tommy Vedvik Date: Tue, 26 Feb 2019 22:37:46 +0100 Subject: [PATCH] Update design --- content/posts/say-hello-to-gridsome-kopi.md | 4 +- content/posts/say-hello-to-gridsome.md | 2 - src/assets/style/_base.scss | 2 + src/assets/style/_typography.scss | 9 ++-- src/assets/style/_variables.scss | 13 +++--- src/components/Author.vue | 5 ++- src/components/PostCard.vue | 4 +- src/components/ToggleTheme.vue | 1 - src/layouts/Default.vue | 45 ++++++++++---------- src/templates/Post.vue | 46 +++++++++++++++++++-- 10 files changed, 86 insertions(+), 45 deletions(-) diff --git a/content/posts/say-hello-to-gridsome-kopi.md b/content/posts/say-hello-to-gridsome-kopi.md index 01e269d..65a4ddb 100644 --- a/content/posts/say-hello-to-gridsome-kopi.md +++ b/content/posts/say-hello-to-gridsome-kopi.md @@ -5,8 +5,6 @@ date: 2018-10-10 excerpt: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!" --- -#### There are so many Static Site Generators. Why another one? - We think **Gridsome** is a missing piece to the Vue.js ecosystem. What Gatsby.js does for React.js is a game changer in how we build websites. React.js is excellent, but we think Vue.js is more approachable for most web designers and devs getting started with JAMstack. Gridsome is the Vue.js alternative to Gatsby. With **Gridsome** you get a **universal GraphQL layer** for all your connected data sources. It's like a single source of truth for your website data ready to be used in any page or components. Connect to any CMS or APIs like Google Spreadsheet, Airtable, Instagram Feed, local markdown files, etc. @@ -19,7 +17,7 @@ Here is an example on how to query posts from the GraphQL layer in a page:

Latest blog posts

diff --git a/content/posts/say-hello-to-gridsome.md b/content/posts/say-hello-to-gridsome.md index ea0e9dc..3d3640d 100644 --- a/content/posts/say-hello-to-gridsome.md +++ b/content/posts/say-hello-to-gridsome.md @@ -5,8 +5,6 @@ date: 2018-10-10 excerpt: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!" --- -#### There are so many Static Site Generators. Why another one? - We think **Gridsome** is a missing piece to the Vue.js ecosystem. What Gatsby.js does for React.js is a game changer in how we build websites. React.js is excellent, but we think Vue.js is more approachable for most web designers and devs getting started with JAMstack. Gridsome is the Vue.js alternative to Gatsby. With **Gridsome** you get a **universal GraphQL layer** for all your connected data sources. It's like a single source of truth for your website data ready to be used in any page or components. Connect to any CMS or APIs like Google Spreadsheet, Airtable, Instagram Feed, local markdown files, etc. diff --git a/src/assets/style/_base.scss b/src/assets/style/_base.scss index b8cbad2..2677b57 100644 --- a/src/assets/style/_base.scss +++ b/src/assets/style/_base.scss @@ -1,6 +1,8 @@ // Default * { box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { diff --git a/src/assets/style/_typography.scss b/src/assets/style/_typography.scss index 8f285f0..c36fc06 100644 --- a/src/assets/style/_typography.scss +++ b/src/assets/style/_typography.scss @@ -12,9 +12,6 @@ body { p { margin-bottom: 1.25em; - &:last-child { - margin-bottom: 0; - } } h1, h2, h3, h4, h5 { @@ -41,4 +38,8 @@ h4 {font-size: 1.266em;} h5 {font-size: 1.125em;} -small {font-size: 0.889em;} \ No newline at end of file +small {font-size: 0.889em;} + +strong { + font-weight: 600; +} \ No newline at end of file diff --git a/src/assets/style/_variables.scss b/src/assets/style/_variables.scss index fbcd022..db511ab 100644 --- a/src/assets/style/_variables.scss +++ b/src/assets/style/_variables.scss @@ -3,10 +3,11 @@ body { --bg-color: #F3F7F9; --bg-highlight-color: #FFF; --bg-code: rgba(0,0,0,.025); - --body-color: #606060; + --body-color: #444; --title-color: #111; - --link-color: #222; - --space: 3rem; + --link-color: #2cb2f5; + --space: 2.5rem; + --container-width: 800px; } @media screen and (max-width: 650px) { @@ -17,11 +18,11 @@ body { // Dark styles +.is-dark, body[data-theme="dark"] { --bg-color: #0D2538; - --bg-highlight-color: rgba(255, 255, 255,.05); + --bg-highlight-color: #0f2d44; --bg-code: rgba(0,0,0,.3); - --body-color: #A7B0B6; + --body-color: #ced8de; --title-color: #fff; - --link-color: #fff; } \ No newline at end of file diff --git a/src/components/Author.vue b/src/components/Author.vue index fb0543c..56f0856 100644 --- a/src/components/Author.vue +++ b/src/components/Author.vue @@ -1,7 +1,7 @@ @@ -17,7 +17,8 @@ export default { margin: 0 auto; max-width: 400px; text-align: center; - + padding: calc(var(--space) / 2) 0; + &__image { border-radius: 100%; width: 120px; diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue index 591b998..263f27e 100644 --- a/src/components/PostCard.vue +++ b/src/components/PostCard.vue @@ -1,6 +1,6 @@