Added footer and fixed some typography styling

Nichlas W. Andersen committed Aug 10, 2018

commit 7bd38f2da881bf118c0f067823d6c5263f064766

README.md +7 -1

@@	@@ -4,6 +4,12 @@
	<p align="center">Vuepress site with portfolio and blogging pages<br>ready to deloy, and configured for Forestry (CMS)<p>
	</p>

+	## Todo
+	- [] Unwrap images from p tag
+	- [] Style typography
+	- [] Style layout for journal list
+	- [] Remove tags/categories from journal
+
	## Development

	```bash
@@	@@ -34,7 +40,7 @@ Import your site in Netlify

	That's it, now your site gets deployed automatically on `git push`

-	## Forestry CMS
+	## Forestry (Content Management)

	This project has been pre-configured to work with Forestry, just import your repository ✨
	Any changes you make will be commited back to the repo, and deployed if you're using Netlify.

portfolio/.vuepress/components/Footer.vue +12 -0

@@	@@ -0,0 +1,12 @@
+	<template>
+	<span class="text">{{ $site.themeConfig.footer }}</span>
+	</template>
+
+	<style scoped>
+	.text {
+	display: block;
+	font-size: 0.8rem;
+	text-align: left;
+	padding: 4rem 5vw;
+	}
+	</style>

portfolio/.vuepress/components/SingleProjectHeader.vue +1 -0

portfolio/.vuepress/components/WorksList.vue +2 -1

@@	@@ -12,7 +12,7 @@

	<div class="info">
	<h2>{{ post.frontmatter.title }}</h2>
-	<p>{{ post.frontmatter.description }}</p>
+	<p v-if="post.frontmatter.description">{{ post.frontmatter.description }}</p>
	</div>

	</router-link>
@@	@@ -64,6 +64,7 @@
	.info p {
	display: inline-block;
	margin: 0;
+	margin-left: 0.5rem;
	font-size: 0.8rem;
	}

portfolio/.vuepress/config.js +1 -0

@@	@@ -4,6 +4,7 @@ module.exports = {
	base: "/",
	themeConfig: {
	logo: "/upload/logo.svg",
+	footer: "Ⓒ Acme",
	nav: [
	{ text: "Works", link: "/", position: "left", external: false },
	{ text: "Instagram", link: "https://www.instagram.com/its.nwa/", position: "left", external: true },

portfolio/.vuepress/theme/Layout.vue +30 -3

@@	@@ -12,7 +12,6 @@
	:year="$page.frontmatter.year.toString()"
	:categories="$page.frontmatter.categories"
	/>
-	<img :src="$page.frontmatter.thumbnail" :alt="$page.frontmatter.title">
	<Content/>
	</div>

@@	@@ -28,6 +27,8 @@

	</div>

+	<Footer />
+
	</div>
	</template>

@@	@@ -42,6 +43,16 @@
	}
	},
	},
+	created() {
+	// unwrap all images from paragraph tags so we can have
+	// different widths inside the content.
+	document.querySelectorAll('img').forEach(image => {
+	var parent = image.parentNode
+	while (image.firstChild) parent.insertBefore(image.firstChild, image)
+	parent.removeChild(image)
+	})
+
+	}
	}
	</script>

@@	@@ -77,6 +88,7 @@

	img {
	max-width: 100%;
+	line-height: 0;
	}

	.container {
@@	@@ -84,13 +96,28 @@
	}

	h1 {
-	margin-bottom: 2rem;
+	font-size: 3rem;
	line-height: 1.15;
+	font-weight: 300;
+	margin: 0 0 2rem 0;
+	}
+
+	h2 {
+	font-size: 2rem;
+	font-weight: 300;
+	margin: 1rem 0 2rem 0;
+	}
+
+	h3 {
+	font-size: 1rem;
+	font-weight: 700;
+	margin: 1rem 0 1rem 0;
	}

	p {
-	margin: 1.5rem 0;
+	font-size: 1rem;
	line-height: 1.5;
+	margin: 1rem 0 2rem 0;
	}

	</style>

portfolio/works/project-1.md +9 -1

@@	@@ -10,4 +10,12 @@ description: subtitle

	---

-	Project content
+	# The new beginning for yatta yatta
+	### Let's look at this typography
+	How we managed to do this? Well, this is a short description on that.
+
+	## Exploration
+	![Test](/upload/photo-1511548774318-563182fe8d03.jpeg)
+	![Test](/upload/photo-1511548774318-563182fe8d03.jpeg)
+
+	And now some more text

portfolio/works/project-2.md +1 -0