Responsive corrections
This commit is contained in:
sharpshark28
parent
c59c050a14
commit
8eba523611
7 changed files with 62 additions and 30 deletions
|
|
@ -1,16 +1,16 @@
|
|||
{{> header }}
|
||||
|
||||
<header class="frame" id="home">
|
||||
<div class="bit-60">
|
||||
<header class="grid" id="home">
|
||||
<div class="grid__col grid__col--1-of-2">
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
|
||||
<img id="face" class="bit-40" src="../../assets/site/face.png" alt="" />
|
||||
<img id="face" class="grid__col grid__col--1-of-2" src="../../assets/site/face.png" alt="" />
|
||||
</header>
|
||||
|
||||
<ul class="posts frame">
|
||||
<ul class="posts grid">
|
||||
{{#each collections.posts as |post|}}
|
||||
<li data-type="{{ post.type }}" class="bit-3">
|
||||
<li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1">
|
||||
<figure onclick="window.location = '{{ post.path }}'">
|
||||
<div class="preview">
|
||||
<h3>{{ post.title }}</h3>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"build": "npm run vendor && make build",
|
||||
"vendor": "mkdir -p build && cp ./node_modules/lemonade-grid/css/lemonade.min.css ./build",
|
||||
"vendor": "mkdir -p build && cp ./node_modules/toast-grid/css/grid.css ./build",
|
||||
"deploy": "aws s3 sync . s3://www.joewroten.com"
|
||||
},
|
||||
"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"
|
||||
"metalsmith-permalinks": "^0.5.0",
|
||||
"toast-grid": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"metalsmith-collections": "^0.7.0",
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ title }}</title>
|
||||
<link href="/lemonade.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="/grid.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 }}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="text-code">
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
[ <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
|
||||
|
|
@ -22,4 +23,4 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="wrapper">
|
||||
<main class="container">
|
||||
|
|
|
|||
58
src/app.scss
58
src/app.scss
|
|
@ -7,6 +7,8 @@ $light: #6A7380;
|
|||
$lightest: #B2BDCD;
|
||||
$max-width: 60rem;
|
||||
$spacing-md: 2rem;
|
||||
$qry-s: 480px;
|
||||
$qry-m: 700px;
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
|
|
@ -31,7 +33,7 @@ body {
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
.container {
|
||||
padding: 0 $spacing-md;
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
|
|
@ -46,8 +48,22 @@ h1 {
|
|||
margin: $spacing-md 0;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
@media (max-width: $qry-m) {
|
||||
#face {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
body > header {
|
||||
font-size: .75em;
|
||||
font-size: .7em;
|
||||
padding: 2rem 0;
|
||||
background: $dark;
|
||||
color: white;
|
||||
|
|
@ -111,16 +127,27 @@ video {
|
|||
animation: fadeInRight 500ms ease-out;
|
||||
|
||||
p {
|
||||
width: 50%;
|
||||
clear: both;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
float: left;
|
||||
@media (min-width: $qry-s) {
|
||||
p {
|
||||
width: 50%;
|
||||
clear: both;
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
float: right;
|
||||
@media (min-width: $qry-s) and (max-width: $qry-m) {
|
||||
p {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,6 +172,7 @@ video {
|
|||
padding: 0;
|
||||
|
||||
figure {
|
||||
margin: 0 0 $spacing-md 0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
|
@ -212,8 +240,14 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
[data-type] figcaption {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
[data-type=bundle] {
|
||||
width: 100%;
|
||||
@media (min-width: $qry-s) {
|
||||
width: 98.5%;
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
|
|
@ -229,7 +263,7 @@ video {
|
|||
|
||||
figcaption {
|
||||
float: right;
|
||||
padding-right: .5em;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -237,7 +271,3 @@ video {
|
|||
width: 100%;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
[data-type=article] figcaption {
|
||||
padding: .5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
layout: index.html
|
||||
---
|
||||
|
||||
# Heyya, <br />I'm Joe L. Wroten,
|
||||
# Heyya,
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Formerly known as **Eyemaginations**, the company **Rendia** offers high quality
|
|||
|
||||
Doctors can build playlists of content, upload their own images/videos, and then share their creations with patients via email and by embedding them directly on their practice website. Or they can play this content right in their practice while taking advantage of onscreen drawing features with a mouse or touch device. The media player offers content protection, and patients may choose between multiple languages, closed captions, fullscreen, and more.
|
||||
|
||||
<var data-presentation="5276fa67-49cb-48f8-40da-45b94cd34364"></var>
|
||||
<script type="text/javascript" src="//rendia.com/whitelabel/embed_js"></script>
|
||||
|
||||
###### CODEIGNITER, CSS3, EMBER.JS, FOUNDATION, GIT, HTML5, ICON FONTS, JAVASCRIPT, JQUERY, PHP, SASS, VIDEO
|
||||
|
||||
<var data-presentation="5276fa67-49cb-48f8-40da-45b94cd34364" style="width:100%; padding-bottom:56.25%; display:block;"></var>
|
||||
<script type="text/javascript" src="//rendia.com/whitelabel/embed_js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Photography
|
||||
title: Photos
|
||||
type: bundle
|
||||
order: 400
|
||||
preview: photography/preview.jpg
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue