From 09ad8a394bf7deae4e5e1b8dca15163933417c28 Mon Sep 17 00:00:00 2001 From: Franck Cuny Date: Sun, 26 Jan 2014 22:10:02 -0800 Subject: Major rewrite to get responsive design. --- Gemfile | 3 +- Gemfile.lock | 24 +- _assets/screen.scss | 425 ++++++++++++++++++++++++++++++++ _includes/cover.html | 22 ++ _includes/footer.html | 14 +- _layouts/default.html | 25 +- _layouts/post.html | 18 +- _layouts/static.html | 6 +- _plugins/jekyll_asset_pipeline.rb | 15 ++ about/index.md | 22 +- assets/pygments.css | 59 +++++ index.html | 26 +- s3_website.yml | 2 +- static/css/style.css | 28 ++- static/imgs/5876329422_32040b7f40_b.jpg | Bin 0 -> 247958 bytes 15 files changed, 625 insertions(+), 64 deletions(-) create mode 100644 _assets/screen.scss create mode 100644 _includes/cover.html create mode 100644 _plugins/jekyll_asset_pipeline.rb create mode 100644 assets/pygments.css create mode 100644 static/imgs/5876329422_32040b7f40_b.jpg diff --git a/Gemfile b/Gemfile index 5fbff27..2af9de0 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,8 @@ source 'https://rubygems.org' gem 'jekyll' -gem 'jekyll-assets' +gem 'jekyll-asset-pipeline' gem 'RedCloth' gem 'redcarpet' gem 'sass' gem 's3_website' +gem 'compass' diff --git a/Gemfile.lock b/Gemfile.lock index 5466933..ffd52d8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -6,12 +6,17 @@ GEM json (~> 1.4) nokogiri (>= 1.4.4) uuidtools (~> 2.1) + chunky_png (1.2.9) classifier (1.3.3) fast-stemmer (>= 1.0.0) colorator (0.1) colored (1.2) commander (4.1.5) highline (~> 1.6.11) + compass (0.12.2) + chunky_png (~> 1.2) + fssm (>= 0.2.7) + sass (~> 3.1) configure-s3-website (1.5.2) deep_merge (= 1.0.0) deep_merge (1.0.0) @@ -19,8 +24,8 @@ GEM erubis (2.7.0) fast-stemmer (1.0.2) filey-diff (1.4.3) + fssm (0.2.10) highline (1.6.19) - hike (1.2.3) jekyll (1.2.1) classifier (~> 1.3) colorator (~> 0.1) @@ -31,22 +36,20 @@ GEM pygments.rb (~> 0.5.0) redcarpet (~> 2.3.0) safe_yaml (~> 0.7.0) - jekyll-assets (0.7.3) - jekyll (~> 1.0) - sprockets (~> 2.10) + jekyll-asset-pipeline (0.1.2) + jekyll (>= 0.10.0) + liquid (>= 1.9.0) json (1.8.1) liquid (2.5.3) maruku (0.7.0) mime-types (1.19) mini_portile (0.5.2) - multi_json (1.8.1) nokogiri (1.6.1) mini_portile (~> 0.5.0) posix-spawn (0.3.6) pygments.rb (0.5.2) posix-spawn (~> 0.3.6) yajl-ruby (~> 1.1.0) - rack (1.5.2) redcarpet (2.3.0) s3_website (1.6.7) aws-sdk (~> 1.8.5) @@ -60,13 +63,7 @@ GEM sass (3.2.12) simple-cloudfront-invalidator (1.0.1) colored (= 1.2) - sprockets (2.10.0) - hike (~> 1.2) - multi_json (~> 1.0) - rack (~> 1.0) - tilt (~> 1.1, != 1.3.0) thor (0.18.1) - tilt (1.4.1) uuidtools (2.1.4) yajl-ruby (1.1.0) @@ -75,8 +72,9 @@ PLATFORMS DEPENDENCIES RedCloth + compass jekyll - jekyll-assets + jekyll-asset-pipeline redcarpet s3_website sass diff --git a/_assets/screen.scss b/_assets/screen.scss new file mode 100644 index 0000000..844cc5f --- /dev/null +++ b/_assets/screen.scss @@ -0,0 +1,425 @@ +@import url(http://fonts.googleapis.com/css?family=Cabin); + +$mq-mobile-portrait : 20em !default; +$mq-mobile-landscape : 30em !default; +$mq-tablet-portrait : 40em !default; +$mq-tablet-landscape : 64em !default; +$mq-desktop : 86.375em !default; + +// Both portrait and landscape +@mixin mobile-only { + @media (max-width : $mq-mobile-landscape) { + @content; + } +} + +// Everything up to and including the portrait width of the phone +// Since it's the smallest query it doesn't need a min +@mixin mobile-portrait-only { + @media (max-width : $mq-mobile-portrait) { + @content; + } +} + +// Everything up to and including the mobile portrait +@mixin mobile-portrait-and-below { + @media (max-width : $mq-mobile-portrait) { + @content; + } +} + +// Everything above and including the mobile portrait +@mixin mobile-portrait-and-up { + @media (min-width : $mq-mobile-portrait) { + @content; + } +} + +// Everthing larger than a portrait mobile up until mobile landscape +@mixin mobile-landscape-only { + @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) { + @content; + } +} + +// Everything up to and including the mobile landscape width +@mixin mobile-landscape-and-below { + @media only screen and (max-width : $mq-mobile-landscape) { + @content; + } +} + +// Everything above and including the mobile landscape width +@mixin mobile-landscape-and-up { + @media only screen and (min-width : $mq-mobile-portrait + .001) { + @content; + } +} + +// Both the portrait and landscape width of the tablet +// Larger than a landscape mobile but less than or equal to a landscape tablet +@mixin tablet-only { + @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) { + @content; + } +} + +// Everything larger than mobile landscape up until the portrait width of the tablet +@mixin tablet-portrait-only { + @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) { + @content; + } +} + +// Everything below and including the portrait width of the tablet +@mixin tablet-portrait-and-below { + @media only screen and (max-width : $mq-tablet-portrait) { + @content; + } +} + +// Everything above and including the portrait width of the tablet +@mixin tablet-portrait-and-up { + // @media only screen and (min-width : $mq-mobile-landscape + 1) { + @media only screen and (min-width : $mq-tablet-portrait + .001) { + @content; + } +} + +// Larger than portrait but less than or equal to the landscape width +@mixin tablet-landscape-only { + @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) { + @content; + } +} + +// Up to and including the tablet landscape +@mixin tablet-landscape-and-below { + @media only screen and (max-width : $mq-tablet-landscape) { + @content; + } +} + +// Everything larger than portrait tablet +@mixin tablet-landscape-and-up { + @media only screen and (min-width : $mq-tablet-portrait + .001) { + @content; + } +} + +// Everything larger than a landscape tablet +@mixin desktop-and-up { + @media only screen and (min-width : $mq-tablet-landscape + .001) { + @content; + } +} + +// Everything below and including the desktop +@mixin desktop-and-below { + @media only screen and (max-width : $mq-desktop) { + @content; + } +} + +// Everything larger than a landscape tablet but less than or equal to the desktop +@mixin desktop-only { + @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) { + @content; + } +} + +@mixin retina { + @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { + @content; + } +} + +@mixin image-2x($image, $width: auto, $height: $width) { + @media only screen and (-webkit-min-device-pixel-ratio: 1.3), + only screen and (-o-min-device-pixel-ratio: 13/10), + only screen and (min-resolution: 120dpi) { + background-image: url($image); + @if $width != auto { + background-size: $width $height; + } + } +} + +html { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + font-family: 'Cabin', sans-serif; + background-color: #fff; + font-weight:400; + text-align:left; + color:#222; + + margin: auto; + font-size: 16px; + + @include tablet-portrait-and-below { + font-size: 0.8em; + } +} + +em { + font-style: italic; +} + +a { + color:#4c6296; + text-decoration:none; + outline:0 +} + +a:hover{ + color:#173061; + text-decoration:none +} + +a:visited{ + color:#6a4c96 +} + +a:visited:hover{ + color:#463263 +} + +a img{ + border:0 +} + +#cover_wrap { + width: 623px; + margin: auto; + line-height: 1; + border-bottom: 1px solid #e8ebf2; +} + +#masthead { + + width: 620px; + + @include tablet-portrait-and-below { + width: 90%; + } + + header { + display: block; + } + + margin: 0 auto; + color: #57626b; + + .intro { + line-height: 0.8; + float: left; + h1 { + line-height: 1; + } + } + + h1 { + font-weight: 700; + font-size: 1.1em; + } + + #home { + font-size: 1.2em; + font-weight: 700; + color: #57626b; + } + + a { + text-decoration: none; + font-size: 0.8em; + font-weight: 500; + color: #669ecc; + } + + h2 { + font-weight: 500; + color: #999; + font-size: 1em; + } +} + +.clearfix:after { + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; + font-size: 0; +} + + +#footer { + width: 623px; + margin: auto; + @include tablet-portrait-and-below { + width: 90%; + } + + border-top: 1px solid #e8ebf2; + box-shadow: inset 0 1px 0 #fff; + background: #fdfdfd; + + display: block; + + .center_mod { + margin: 0 auto; + } + + +} + +.nav { + float: right; + padding: 0; + li { + line-height:1.3; + display: inline-block; + a { + margin-right: 16px; + font-weight: 700; + color: #9198ad; + font-size: 12px; + } + } +} + +img { + width: 100%; + max-width: 1000px; + text-align: center; + vertical-align: baseline; + height: auto!important; +} + +figure { +margin: 4em 0; +display: block; +text-align: center; +} + +#site{ + + section { + width: 623px; + margin: auto; + @include tablet-portrait-and-below { + width: 90%; + } + } + + margin: auto; + text-align: left; + line-height: 1.65; + font-weight: 400; + font-size: 110%; + + li { + line-height: 1.2em; + } + + .post-listing { + width: 623px; + margin: auto; + padding-left: 0px; + display: block; + list-style-image: none; + list-style-position: outside; + margin-bottom: 1em; + } + .post-listing li { + list-style-type: none; + margin: 2.5em 0; + } + .post-listing li:first-child { + margin-top: 0; + } + .post-listing li h2 { + color: #2C251D; + } + .post-listing .oneliner { + color: #4A4235; + } + + .post-listing .entry-title { + margin: 15px auto; + } + + .post-listing .entry-title h2 { + font-size: 1.7em; + font-weight: 500; + margin-bottom: 5px; + color: #2c251d; + line-height: 1.1; + } + + #entry { + padding: 0; + margin: 0 auto; + + .entry-title { + width: 623px; + margin: 15px auto; + font-size: 100%; + h1 { + color: #2c251d; + font-size: 2.2em; + font-weight: 700; + line-height: 1.1; + } + } + + section { + font-size: 100%; + } + + a { + font-weight: 600; + text-decoration: underline; + color: #4c6296; + } + + a:visited { + color: #6a4c96; + } + + blockquote { + border-left: 4px solid #eee; + margin-left: 0; + margin-right: 18px; + margin-bottom: 18px; + padding-left: 10px; + color: #666; + } + + pre{ + font-size: 13px; + font-family: Consolas,"Andale Mono",Monaco,Courier,"Courier New",Verdana,sans-serif; + -webkit-font-smoothing:subpixel-antialiased; + font-smoothing:subpixel-antialiased; + background-color: #fff; + border: 1px solid #d1d8e3; + padding: .35em; + } + + code { + font-size: 95%; + } + + .highlight { + margin: 1.5em 0; + } + + p { + margin: 0 0 1.5em; + } + } +} diff --git a/_includes/cover.html b/_includes/cover.html new file mode 100644 index 0000000..448e750 --- /dev/null +++ b/_includes/cover.html @@ -0,0 +1,22 @@ +
+ +
+
+

+ Franck Cuny + @franckcuny +

+ +

+ Software and Operation engineer. +

+
+ + + +
+ +
diff --git a/_includes/footer.html b/_includes/footer.html index ec1a493..9d4612b 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,8 +1,8 @@ -