1
0
Fork 0

Various design updates

This commit is contained in:
Tommy Vedvik 2019-02-27 15:29:29 +01:00
parent 163b894ded
commit 7c7b7fb001
6 changed files with 26 additions and 11 deletions

View file

@ -1,6 +1,6 @@
--- ---
title: A post with a poster title: A post with a poster
date: 2019-02-07 date: 2019-01-07
tags: ['Markdown'] tags: ['Markdown']
poster: ./images/alexandr-podvalny-220262-unsplash.jpg poster: ./images/alexandr-podvalny-220262-unsplash.jpg
excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions." excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."

View file

@ -13,6 +13,7 @@ body {
--border-color: rgba(0,0,0,.1);; --border-color: rgba(0,0,0,.1);;
--space: 2.5rem; --space: 2.5rem;
--container-width: 800px; --container-width: 800px;
--header-height: 80px;
--radius: 5px; --radius: 5px;
} }
@ -23,6 +24,7 @@ body {
} }
body { body {
--space: 1.5rem; --space: 1.5rem;
--header-height: 60px;
} }
} }
@ -35,4 +37,5 @@ body[data-theme="dark"] {
--border-color: rgba(255,255,255,.1);; --border-color: rgba(255,255,255,.1);;
--body-color: #ced8de; --body-color: #ced8de;
--title-color: #fff; --title-color: #fff;
} }

View file

@ -8,7 +8,7 @@
</h1> </h1>
<p class="author__intro"> <p class="author__intro">
A hackable, minimalistic and simple blog starter for Gridsome that uses Markdown for content. A modern, minimalistic and simple blog starter for Gridsome that uses Markdown for content.
</p> </p>
<p class="author__links"> <p class="author__links">

View file

@ -1,5 +1,7 @@
<template> <template>
<g-link class="logo" to="/"> <g-link class="logo" to="/">
<g-image class="logo__image" src="~/assets/images/author.jpg" width="80" height="80" blur="5" />
<span class="logo__text"> <span class="logo__text">
{{ $static.metaData.siteName }} {{ $static.metaData.siteName }}
</span> </span>
@ -13,3 +15,19 @@ query {
} }
} }
</static-query> </static-query>
<style lang="scss">
.logo {
text-decoration: none;
color: var(--body-color)!important;
font-size: .9em;
&__image {
vertical-align: middle;
border-radius: 99px;
height: 40px;
width: 40px;
margin-right: .5em;
}
}
</style>

View file

@ -39,17 +39,11 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.logo {
text-decoration: none;
color: var(--body-color)!important;
font-size: .9em;
}
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
min-height: 60px; min-height: var(--header-height);
padding: 0 calc(var(--space) / 2); padding: 0 calc(var(--space) / 2);
top:0; top:0;
z-index: 10; z-index: 10;

View file

@ -45,7 +45,7 @@ query Post ($path: String!) {
timeToRead timeToRead
excerpt excerpt
content content
poster (width: 800, height: 460, blur: 10) poster (width: 780, blur: 10)
} }
} }
</page-query> </page-query>