begin styling
This commit is contained in:
parent
2e6a91b804
commit
28fd65323c
@ -4,6 +4,7 @@
|
||||
<div class="hidden">
|
||||
{% include "./partials/sprite.svg" %}
|
||||
</div>
|
||||
<div class="gridwrap">
|
||||
<header>
|
||||
<h1>SSR Rendering in Nunjucks proof of concept</h1>
|
||||
</header>
|
||||
@ -11,10 +12,11 @@
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
<footer class="sitefooter">
|
||||
<footer class="sitefooter col col--1">
|
||||
{% include 'partials/footer.njk' %}
|
||||
</footer>
|
||||
<script async="true" src="/assets/{{manifest.main.js}}"></script>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,17 +1,25 @@
|
||||
{% extends "./base.njk" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="col col--1-3">
|
||||
<h2>Simple Vue Component (Why would you do this?)</h2>
|
||||
{% vue { component:"HelloWorld" } %}
|
||||
{% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
|
||||
{% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
|
||||
</div>
|
||||
<div class="col col--1-3">
|
||||
<h2>Todo List</h2>
|
||||
{% vue { component:"ListComp"} %}
|
||||
{% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
|
||||
</div>
|
||||
<div class="col col--1-3">
|
||||
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
|
||||
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
|
||||
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
|
||||
</div>
|
||||
<div class="col col--1">
|
||||
<section id="content" role="main" class="content-wrapper">
|
||||
{{content|safe}}
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{meta.title}}</title>
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700&display=swap" as="style" />
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,800&display=swap" as="style" />
|
||||
<link rel="preload" href="/assets/{{manifest.main.css}}" as="style" />
|
||||
<link rel="preload" href="/assets/{{manifest.main.js}}" as="script"/>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"build": "webpack --env production && eleventy",
|
||||
"compile": "npx eleventy",
|
||||
"start": "npm run devserve",
|
||||
"devserve": "NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js",
|
||||
"devserve": "webpack --env development && NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js",
|
||||
"spritesheet": "node ./svgsprite.js"
|
||||
},
|
||||
"author": "Matthew Gaffen",
|
||||
|
||||
5
serve.js
5
serve.js
@ -78,7 +78,7 @@ function startServer() {
|
||||
],
|
||||
fn: (event, file) => {
|
||||
debug(`File changed: ${file}`);
|
||||
// build_site(false);
|
||||
build_site(false);
|
||||
}
|
||||
}
|
||||
// {
|
||||
@ -177,6 +177,7 @@ compiler.hooks.afterCompile.tap("eleventy", params => {
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
build_site();
|
||||
sync.reload();
|
||||
});
|
||||
|
||||
build_site();
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
<div class="ListComp" v-bind:data-startlist="startlist">
|
||||
<ol>
|
||||
<li v-for="(item, index) in list">
|
||||
<div class="itemtext">
|
||||
<p>{{ item.message }}</p>
|
||||
<button v-on:click="removeItem(index)">×</button>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<form v-on:submit.prevent>
|
||||
@ -42,5 +44,27 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
ol {
|
||||
border: 1px solid grey;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
li {
|
||||
text-align: left;
|
||||
button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 2px 0 0 0px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.itemtext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
p {
|
||||
flex: 1;
|
||||
}
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
html {
|
||||
font-size: $bodysize;
|
||||
font-family: $body;
|
||||
color: $dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -11,6 +11,11 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.4em;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.site {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
||||
@ -2,36 +2,34 @@
|
||||
Colours
|
||||
========================================================================== */
|
||||
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
$black: #1c1c1e;
|
||||
$white: #e9eade;
|
||||
$link-active: #7393a7;
|
||||
$dark: #4b4b4b;
|
||||
$dark: #67696e;
|
||||
|
||||
$dark: #575656;
|
||||
$med-dark-grey: #b3b2b2;
|
||||
$med-grey: #464646;
|
||||
$med-grey-1: #d2d2d2;
|
||||
$light-grey-1: #adadad;
|
||||
$med-grey: #adadad;
|
||||
$light-grey: #ebebeb;
|
||||
$white-grey-1: #f1f1f1;
|
||||
$white-grey: #f8f8f8;
|
||||
$white-grey: #f5f5f5;
|
||||
|
||||
$pipa-navy: #030f1f;
|
||||
$pipa-teal: #00aab7;
|
||||
$red: #d63939;
|
||||
$orange: #ed8d44;
|
||||
$blue: #545eea;
|
||||
|
||||
$bg: $white-grey;
|
||||
$bg: $black;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
$small: 12px;
|
||||
$medium: 18px;
|
||||
$small: 16px;
|
||||
$medium: 14px;
|
||||
|
||||
$bodysize: $medium;
|
||||
$bodyline: 1.222;
|
||||
$bodysize: $small;
|
||||
$bodyline: 1.5em;
|
||||
|
||||
$body: "Roboto", sans-serif;
|
||||
$title: "Roboto Slab", serif;
|
||||
$body: "Work Sans", "Arial", sans-serif;
|
||||
|
||||
/* ==========================================================================
|
||||
Media Queries
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M5,3L1,6V0L5,3z"/>
|
||||
<path class="st0" d="M6,3L2,6V0L6,3z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 478 B After Width: | Height: | Size: 478 B |
Loading…
x
Reference in New Issue
Block a user