Major progress on general layout
This commit is contained in:
Joe Wroten
parent
6c9e96183c
commit
ce283b638f
19 changed files with 293 additions and 52 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -6,6 +6,7 @@ logs
|
|||
*.log
|
||||
npm-debug.log*
|
||||
.DS_STORE
|
||||
.tern-port
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
|
|
|
|||
10
index.js
10
index.js
|
|
@ -2,7 +2,7 @@ var Metalsmith = require('metalsmith');
|
|||
var markdown = require('metalsmith-markdown');
|
||||
var sass = require('metalsmith-sass');
|
||||
var layouts = require('metalsmith-layouts');
|
||||
var assets = require('metalsmith-assets');
|
||||
var collections = require('metalsmith-collections');
|
||||
var permalinks = require('metalsmith-permalinks');
|
||||
var serve = require('metalsmith-serve');
|
||||
var watch = require('metalsmith-watch');
|
||||
|
|
@ -18,9 +18,11 @@ Metalsmith(__dirname)
|
|||
.destination('./build')
|
||||
.clean(false)
|
||||
.use(markdown())
|
||||
.use(assets({
|
||||
source: './src/assets',
|
||||
destination: './src/assets'
|
||||
.use(collections({
|
||||
posts: {
|
||||
pattern: 'posts/*',
|
||||
sortBy: 'order'
|
||||
}
|
||||
}))
|
||||
.use(permalinks())
|
||||
.use(sass())
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
{{> header }}
|
||||
|
||||
{{{ contents }}}
|
||||
<header class="frame" id="home">
|
||||
<div class="bit-60">
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
|
||||
<img id="face" class="bit-40" src="../../assets/site/face.png" alt="" />
|
||||
</header>
|
||||
|
||||
<ul class="posts frame">
|
||||
{{#each collections.posts as |post|}}
|
||||
<li data-type="{{ post.type }}" class="bit-3">
|
||||
<figure onclick="window.location = '{{ post.path }}'">
|
||||
<div class="preview">
|
||||
<h3>{{ post.title }}</h3>
|
||||
<img src="../../assets/media/{{ post.preview }}" alt="" />
|
||||
</div>
|
||||
<figcaption>
|
||||
{{ post.description }}
|
||||
<footer>
|
||||
{{ post.client }}
|
||||
<span class="secondary">
|
||||
Continue...
|
||||
</span>
|
||||
</footer>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{> footer }}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
<div id="content">
|
||||
<h1>
|
||||
<a href="/"><</a>
|
||||
{{ title }}
|
||||
<a href="/">< </a>{{ title }}
|
||||
</h1>
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
{
|
||||
"name": "static-site-example",
|
||||
"name": "joe-wroten-portfolio",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "make build"
|
||||
"build": "npm run vendor && make build",
|
||||
"vendor": "mkdir -p build && cp ./node_modules/lemonade-grid/css/lemonade.min.css ./build"
|
||||
},
|
||||
"dependencies": {
|
||||
"handlebars": "^4.0.5",
|
||||
"lemonade-grid": "^2.1.0",
|
||||
"metalsmith": "^2.1.0",
|
||||
"metalsmith-layouts": "^1.4.1",
|
||||
"metalsmith-markdown": "^0.2.1",
|
||||
"metalsmith-permalinks": "^0.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"metalsmith-assets": "^0.1.0",
|
||||
"metalsmith-collections": "^0.7.0",
|
||||
"metalsmith-sass": "^1.3.0",
|
||||
"metalsmith-serve": "0.0.7",
|
||||
"metalsmith-watch": "^1.0.3"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<script src="http://localhost:35729/livereload.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ title }}</title>
|
||||
<link href="/lemonade.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="/app.css" type="text/css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Rokkitt|Source+Code+Pro" rel="stylesheet">
|
||||
<meta name="description" content="{{ description }}">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -21,4 +22,4 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
<main class="wrapper">
|
||||
|
|
|
|||
25
partials/header/index.html
Normal file
25
partials/header/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ title }}</title>
|
||||
<link href="/lemonade.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="/app.css" type="text/css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Rokkitt|Source+Code+Pro" rel="stylesheet">
|
||||
<meta name="description" content="{{ description }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="text-code">
|
||||
<div class="wrapper">
|
||||
[ <a href="#">sharpshark28<span class="normal">@</span><span class="secondary">joewroten.com</span></a> ] <span class="text-success">(master)</span> <span class="dim">~/portfolio</span>
|
||||
<br />
|
||||
<span class="text-success">⟩</span> npm start wow
|
||||
<br />
|
||||
Starting up server, serving <a href="/">./</a> on port: 8080 ...
|
||||
<br />
|
||||
Resume accessible @ <a href="/assets/resume.pdf">./resume.pdf</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="wrapper">
|
||||
209
src/app.scss
209
src/app.scss
|
|
@ -1,7 +1,23 @@
|
|||
$success: #28C665;
|
||||
$primary: #87D2C8;
|
||||
$secondary: #A01C69;
|
||||
$secondary: #FF0093;
|
||||
$secondary-dark: darken($secondary, 10%);
|
||||
$dark: #282A36;
|
||||
$light: #6A7380;
|
||||
$lightest: #B2BDCD;
|
||||
$max-width: 60rem;
|
||||
$spacing-md: 2rem;
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-$spacing-md);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
|
|
@ -9,48 +25,66 @@ html {
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #F2F2F2;
|
||||
> header {
|
||||
padding: 2rem 0;
|
||||
background: #282A36;
|
||||
color: white;
|
||||
box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, 0.25);
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus span,
|
||||
&:hover span {
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
a .secondary {
|
||||
color: $secondary;
|
||||
}
|
||||
a .normal {
|
||||
color: white;
|
||||
}
|
||||
.dim {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
color: $dark;
|
||||
background: #F2F2F2 url(../../assets/site/bg.png);
|
||||
font-family: Rokkitt, serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0 2rem;
|
||||
padding: 0 $spacing-md;
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $secondary;
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Poiret One', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: $spacing-md 0;
|
||||
}
|
||||
|
||||
body > header {
|
||||
font-size: .75em;
|
||||
padding: 2rem 0;
|
||||
background: $dark;
|
||||
color: white;
|
||||
box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .25);
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus span,
|
||||
&:hover span {
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
a .secondary {
|
||||
color: $secondary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a .normal {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dim {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
body > main a {
|
||||
color: $secondary-dark;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
color: lighten($secondary, 10%);
|
||||
color: $secondary;
|
||||
}
|
||||
&:active {
|
||||
background: black;
|
||||
|
|
@ -74,9 +108,12 @@ video {
|
|||
}
|
||||
|
||||
#content {
|
||||
animation: fadeInRight 500ms ease-out;
|
||||
|
||||
p {
|
||||
width: 50%;
|
||||
clear: both;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
float: left;
|
||||
|
|
@ -89,7 +126,113 @@ video {
|
|||
|
||||
img,
|
||||
video {
|
||||
margin: 0 auto;
|
||||
margin: 1em auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#home > * {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.posts {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
figure {
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 100ms, transform 100ms;
|
||||
box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .075);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-.25rem) scale(1.05);
|
||||
box-shadow: 0 .25rem 1.5rem .25rem rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(.25rem) scale(.95);
|
||||
box-shadow: 0 .25rem .5rem .25rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
opacity: .2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: .5em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: .9em;
|
||||
color: $light;
|
||||
display: inline-block;
|
||||
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
color: $lightest;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
float: right;
|
||||
color: $secondary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-type=bundle] {
|
||||
width: 100%;
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
|
||||
.preview {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.preview img {
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
float: right;
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
[data-type=article] .preview img {
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
[data-type=article] figcaption {
|
||||
padding: .5em;
|
||||
}
|
||||
|
|
|
|||
BIN
src/assets/media/navigating_employee_benefits/preview.jpg
Normal file
BIN
src/assets/media/navigating_employee_benefits/preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
src/assets/media/patient_education/preview.gif
Normal file
BIN
src/assets/media/patient_education/preview.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/media/photography/preview.jpg
Normal file
BIN
src/assets/media/photography/preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
src/assets/site/bg.png
Normal file
BIN
src/assets/site/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 B |
BIN
src/assets/site/face.png
Normal file
BIN
src/assets/site/face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
|
|
@ -1,10 +1,7 @@
|
|||
---
|
||||
layout: index.html
|
||||
---
|
||||
<h1>
|
||||
Heyya,<br />
|
||||
I'm Joe L. Wroten,
|
||||
</h1>
|
||||
<p>... an edge riding web tech architect aimed at realizing the best tools to communicate valuable informationt o the people who need it.</p>
|
||||
|
||||
<a href="/posts/patient-education/">Patient Education</a>
|
||||
# Heyya, <br />I'm Joe L. Wroten,
|
||||
|
||||
... an edge riding web tech architect aimed at realizing the best tools to communicate valuable informationt o the people who need it.
|
||||
|
|
|
|||
15
src/posts/animated-awards.md
Normal file
15
src/posts/animated-awards.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Animated Awards
|
||||
type: article
|
||||
order: 302
|
||||
preview: navigating_employee_benefits/preview.jpg
|
||||
description: Putting some pep into company values through animation.
|
||||
client: Laureate University
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan varius dui. Vestibulum ut porttitor nulla.
|
||||
|
||||
Quisque at mi eros. Curabitur tempor massa mi, at luctus neque sagittis nec. Nullam suscipit malesuada eros at accumsan.
|
||||
|
||||
Sed in justo sed ante aliquam mattis. Donec scelerisque neque sed augue sodales vestibulum. Curabitur sagittis ligula eget ex vestibulum imperdiet. Nunc orci nisi, dictum et congue sit amet, pulvinar et elit. Maecenas pellentesque non dui non lacinia. Quisque pretium nisi in velit placerat maximus. Ut rutrum feugiat interdum.
|
||||
15
src/posts/navigating-employee-benefits.md
Normal file
15
src/posts/navigating-employee-benefits.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Navigating Employee Benefits
|
||||
type: article
|
||||
order: 303
|
||||
preview: navigating_employee_benefits/preview.jpg
|
||||
description: Understanding your benefits package doesn't need to be hard.
|
||||
client: Johns Hopkins
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan varius dui. Vestibulum ut porttitor nulla.
|
||||
|
||||
Quisque at mi eros. Curabitur tempor massa mi, at luctus neque sagittis nec. Nullam suscipit malesuada eros at accumsan.
|
||||
|
||||
Sed in justo sed ante aliquam mattis. Donec scelerisque neque sed augue sodales vestibulum. Curabitur sagittis ligula eget ex vestibulum imperdiet. Nunc orci nisi, dictum et congue sit amet, pulvinar et elit. Maecenas pellentesque non dui non lacinia. Quisque pretium nisi in velit placerat maximus. Ut rutrum feugiat interdum.
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
---
|
||||
title: Patient Education
|
||||
type: article
|
||||
order: 301
|
||||
preview: patient_education/preview.gif
|
||||
description: Creating a "Street View" for anatomy and "Youtube" for doctors.
|
||||
client: Rendia
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
|
|
|
|||
9
src/posts/photography.md
Normal file
9
src/posts/photography.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Photography
|
||||
type: bundle
|
||||
order: 400
|
||||
preview: photography/preview.jpg
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
Photos here n such
|
||||
Loading…
Add table
Reference in a new issue