From 8eba523611251e6739bd6b92c8437e929db088be Mon Sep 17 00:00:00 2001 From: sharpshark28 Date: Sun, 16 Oct 2016 15:22:56 -0500 Subject: [PATCH] Responsive corrections --- layouts/index.html | 10 +++--- package.json | 6 ++-- partials/header.html | 7 ++-- src/app.scss | 58 ++++++++++++++++++++++++++-------- src/index.md | 3 +- src/posts/patient-education.md | 6 ++-- src/posts/photography.md | 2 +- 7 files changed, 62 insertions(+), 30 deletions(-) diff --git a/layouts/index.html b/layouts/index.html index c6ece46..fca58aa 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,16 +1,16 @@ {{> header }} -
-
+
+
{{{ contents }}}
- +
-
    +
      {{#each collections.posts as |post|}} -
    • +

    • {{ post.title }}

      diff --git a/package.json b/package.json index 806fcb7..410f6b0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/partials/header.html b/partials/header.html index 36e91ee..1810899 100644 --- a/partials/header.html +++ b/partials/header.html @@ -3,15 +3,16 @@ {{ title }} - + +
      -
      +
      [ sharpshark28@joewroten.com ] (master) ~/portfolio
      ⟩ npm start @@ -22,4 +23,4 @@
      -
      +
      diff --git a/src/app.scss b/src/app.scss index df6f9c6..845c3da 100644 --- a/src/app.scss +++ b/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; -} diff --git a/src/index.md b/src/index.md index 83d47e6..8f6b765 100644 --- a/src/index.md +++ b/src/index.md @@ -2,6 +2,7 @@ layout: index.html --- -# Heyya,
      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. diff --git a/src/posts/patient-education.md b/src/posts/patient-education.md index b11f3f1..7ebae24 100644 --- a/src/posts/patient-education.md +++ b/src/posts/patient-education.md @@ -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. - - - ###### CODEIGNITER, CSS3, EMBER.JS, FOUNDATION, GIT, HTML5, ICON FONTS, JAVASCRIPT, JQUERY, PHP, SASS, VIDEO + + + diff --git a/src/posts/photography.md b/src/posts/photography.md index 1d91702..77788d6 100644 --- a/src/posts/photography.md +++ b/src/posts/photography.md @@ -1,5 +1,5 @@ --- -title: Photography +title: Photos type: bundle order: 400 preview: photography/preview.jpg