Update design
This commit is contained in:
Tommy Vedvik
parent
a787a4b91b
commit
fa6eaae94f
10 changed files with 86 additions and 45 deletions
|
|
@ -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:
|
|||
<Layout>
|
||||
<h2>Latest blog posts</h2>
|
||||
<ul>
|
||||
<li v-for="edge in $page.allWordPressPost.edges" :key="edge.node._id">
|
||||
<li v-for="edge in $page.allWordPressPost.edges">
|
||||
{{ edge.node.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// Default
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
small {font-size: 0.889em;}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="author">
|
||||
<g-image class="author__image" src="~/assets/images/author.jpg" width="240" height="240" blur="5" />
|
||||
<h1 class="author__siteTitle">{{ siteTitle }}</h1>
|
||||
<h1 v-if="siteTitle" class="author__siteTitle">{{ siteTitle }}</h1>
|
||||
<p class="author__intro">A minimalistic and simple blog starter for Gridsome that uses Markdown for content.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="post-card bg-highlight">
|
||||
<h2>Why speed matters</h2>
|
||||
<h2 v-html="post.title" />
|
||||
{{ post }}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.post-card {
|
||||
margin-top: var(--space);
|
||||
margin-bottom: var(--space);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.toggle-theme {
|
||||
padding: .8rem 1rem;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: var(--body-color);
|
||||
|
|
|
|||
|
|
@ -3,22 +3,21 @@
|
|||
|
||||
<header class="header">
|
||||
<div class="header__left">
|
||||
<!-- add anything here -->
|
||||
<g-link v-if="$route.params.slug" class="logo" to="/">
|
||||
<span class="logo__text">← Gridsome Blog Starter</span>
|
||||
</g-link>
|
||||
</div>
|
||||
<div class="header__right">
|
||||
<!-- add anything here -->
|
||||
<ToggleTheme />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<transition name="slide-up" appear>
|
||||
<main class="main">
|
||||
<slot/>
|
||||
</main>
|
||||
</transition>
|
||||
<main class="main">
|
||||
<slot/>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
Copyright © {{ new Date().getFullYear() }}
|
||||
Copyright © {{ new Date().getFullYear() }}. Powered by Gridsome
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
|
@ -35,35 +34,39 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.logo {
|
||||
text-decoration: none;
|
||||
color: var(--body-color)!important;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
min-height: 60px;
|
||||
padding: 0 calc(var(--space) / 2);
|
||||
top:0;
|
||||
z-index: 10;
|
||||
&__left,
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 760px;
|
||||
max-width: var(--container-width);
|
||||
margin: 0 auto;
|
||||
padding: 5vw 15px 0;
|
||||
padding: 2vw 15px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space);
|
||||
padding: calc(var(--space) / 2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-up-enter-active {
|
||||
transition: opacity .3s, transform .5s;
|
||||
}
|
||||
|
||||
.slide-up-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
font-size: .8em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<template>
|
||||
<Layout>
|
||||
<div style="text-align: center">
|
||||
<g-link to="/">Gridsome Blog Starter</g-link>
|
||||
<h1> {{ $page.post.title }} </h1>
|
||||
<div class="post-title">
|
||||
<h1 class="post-title__text"> {{ $page.post.title }} </h1>
|
||||
<p class="post-title__meta">Posted 19. February 2019. <strong>3 min</strong> read</p>
|
||||
</div>
|
||||
|
||||
<div class="post bg-highlight">
|
||||
<div v-html="$page.post.content" />
|
||||
<div class="post__header">
|
||||
<!-- Add anything here -->
|
||||
</div>
|
||||
<div class="post__content" v-html="$page.post.content" />
|
||||
<div class="post__footer">
|
||||
<!-- Add anything here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-comments">
|
||||
<!-- Add comment widgets here -->
|
||||
</div>
|
||||
|
||||
<Author />
|
||||
|
|
@ -32,12 +42,33 @@ query Post ($path: String!) {
|
|||
</page-query>
|
||||
|
||||
<style lang="scss">
|
||||
.post-title {
|
||||
padding: calc(var(--space) / 2) 0;
|
||||
text-align: center;
|
||||
&__meta {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
.post {
|
||||
|
||||
&__header {
|
||||
width: calc(100% + var(--space) * 2);
|
||||
margin-left: calc(var(--space) * -1);
|
||||
margin-top: calc(var(--space) * -1);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: calc(100% + var(--space) * 2);
|
||||
margin-left: calc(var(--space) * -1);
|
||||
}
|
||||
pre {
|
||||
width: calc(100% + var(--space) * 2);
|
||||
margin-left: calc(var(--space) * -1);
|
||||
padding: calc(var(--space) / 2);
|
||||
font-size: .85em;
|
||||
background-color: var(--bg-code);
|
||||
color: var(--body-color);
|
||||
|
|
@ -50,4 +81,11 @@ query Post ($path: String!) {
|
|||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-comments {
|
||||
padding: calc(var(--space) / 2);
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue