Published redesign

KittyGiraudel · Jul 28, 2016 · d2901ae · d2901ae
1 parent 9cec2be
commit d2901ae
Show file tree

Hide file tree

Showing 40 changed files with 421 additions and 473 deletions.
diff --git a/_config.yml b/_config.yml
@@ -50,11 +50,19 @@ exclude:
 nav:
   - label: Writing
     url: /blog/
+    theme: t-teal
   - label: Coding
     url: /projects/
+    theme: t-green
   - label: Speaking
     url: /speaking/
-  - label: About
+    theme: t-yellow
+  - label: About me
     url: /about/
+    theme: t-orange
+  - label: Guests posts
+    url: /guest/
+    theme: t-red
   - label: Search
     url: /search/
+    theme: t-pink
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,3 +1,5 @@
 <footer class="footer" role="contentinfo">
-  <p>&copy;&nbsp;2012-{{ 'now' | date: '%Y' }} Hugo Giraudel{% if content %}, {{ content | number_of_words }} words, {% include reading-time.html %}{% endif %}</p>
+  <div class="container">
+    <p>&copy;&nbsp;2012-{{ 'now' | date: '%Y' }} Hugo Giraudel</p>
+  </div>
 </footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,11 +1,11 @@
 <header class="header" role="banner">
-  <span class="header__title{% if page.url == '/' %}  is-active{% endif %}">
-    <a class="header__link" href="/">hugogiraudel.com</a>
+  <span class="header__title{% if page.url == '/' %}  is-active{% endif %} t-dark-grey nav__item nav__item--logo">
+    <a class="nav__link nav__link--logo" href="/">hugogiraudel.com</a>
   </span>
   <nav role="navigation" class="nav">
     <ul class="nav__list">
       {% for item in site.nav %}
-      <li class="nav__item{% if page.url == item.url %}  is-active{% endif %}">
+      <li class="nav__item{% if page.url == item.url %}  is-active{% endif %} {{ item.theme }}">
         <a class="nav__link" href="{{ item.url }}">{{ item.label }}</a>
       </li>
       {% endfor %}
@@ -24,4 +24,6 @@
       </li>
     </ul>
   </div>
+
+  {% include ad.html %}
 </header>
diff --git a/_includes/post-list.html b/_includes/post-list.html
@@ -1,9 +1,9 @@
 <li class="list__item">
-  <span class="list__secondary-content">{{ include.post.date | date: "%B %d, %Y" }}{% if include.post.guest %} by {{ include.post.guest }}{% endif %}{% if include.post.external %} at {{ include.post.external.host }}{% else %}{% endif %}</span>
+  <div class="list__item-inner">
+    <span class="list__secondary-content">{{ include.post.date | date: "%B %d, %Y" }}{% if include.post.guest %} by {{ include.post.guest }}{% endif %}{% if include.post.external %} at {{ include.post.external.host }}{% else %}{% endif %}</span>
 
-  <span class="list__primary-content">
-      {% if include.post.external %}
-        <a {% if include.post.lang %}hreflang="{{ include.post.lang|downcase }}"{% endif %} href="{{ include.post.external.url }}">{% else %}
-        <a {% if include.post.lang %}hreflang="{{ include.post.lang|downcase }}"{% endif %} href="{{ include.post.url }}">{% endif %}{% if include.post.lang %}[{{ include.post.lang|upcase }}] {% endif %}{{ include.post.title }}</a>
-  </span>
+    {% if include.post.external %}
+    <a class="list__primary-content" {% if include.post.lang %}hreflang="{{ include.post.lang|downcase }}"{% endif %} href="{{ include.post.external.url }}">{% else %}
+    <a class="list__primary-content" {% if include.post.lang %}hreflang="{{ include.post.lang|downcase }}"{% endif %} href="{{ include.post.url }}">{% endif %}{% if include.post.lang %}[{{ include.post.lang|upcase }}] {% endif %}{{ include.post.title }}</a>
+  </div>
 </li>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,9 +3,8 @@
 
   {% include head.html %}
 
-  <body>
+  <body class="{{ page.theme | default: layout.theme }}">
     {% include header.html %}
-    {% include fake-tab-bar.html %}
 
     <main class="main" role="main">
       <div class="container">

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div class="title-wrapper title-wrapper--{{ page.title | slugify }}">
+  <div>
+  {% if page.title %} 
+    <h1 class="title" itemprop="title">{{ page.title }}</h1> 
+  {% endif %}
+  </div>
+</div>
+
+{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,14 +1,18 @@
 ---
 layout: default
+theme: t-blue
 ---
 
 <article itemscope itemtype="http://schema.org/Article" class="article">
   {% capture reading_time %}{% include reading-time.html %}{% endcapture %}
-  {% include ad.html %}
 
-  {% if page.title %} 
-    <h1 itemprop="title">{{ page.title }}</h1> 
-  {% endif %}
+  <div class="title-wrapper">
+    <div>
+    {% if page.title %} 
+      <h1 class="title" itemprop="title">{{ page.title }}</h1> 
+    {% endif %}
+    </div>
+  </div>
 
   {% if page.date %}
     <p itemprop="datePublished" class="post-date">{{ page.date | date: "%B %d, %Y" }}

diff --git a/about/index.md b/about/index.md
@@ -1,16 +1,13 @@
 ---
-layout: default
-title: "About"
+layout: page
+theme: t-orange
+title: About me
 excerpt: "Everything about me related to the tech-industry, as well as a couple of hints about this site and how it was built."
 tags:
   - Hugo Giraudel
   - about
 ---
 
-{% include ad.html %}
-
-# About me
-
 I am a French front-end developer based in Berlin. After a couple of years working as a developer in the banking industry, I had the great opportunity to join [Edenspiekermann](http://edenspiekermann.com) in Berlin to work on client projects.
 
 I dare call myself an active open-source community member as I have contributed to many projects, as well as initiated a few of my own as well. Among them, let's mention [Browserhacks](http://browserhacks.com), [SassDoc](http://sassdoc.com), [Sass Guidelines](http://sass-guidelin.es) and [Sass Compatibility](http://sass-compatibility.github.io) and the [SitePoint Sass Reference](http://www.sitepoint.com/sass-reference/).

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -19,17 +19,17 @@
 @import "components/ads";
 @import "components/blockquote";
 @import "components/code";
-@import "components/emphasis";
-@import "components/fake-tab-bar";
-@import "components/heading";
-@import "components/hr";
 @import "components/image";
 @import "components/link";
 @import "components/list";
 @import "components/pagination";
 @import "components/post-date";
 @import "components/table";
+@import "components/title";
 
 @import "pages/search";
+@import "pages/article";
+
+@import "themes/themes";
 
 @import "base/shame";
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -159,7 +159,6 @@
 
     shouldLoadComments && loadComments(disqusOptions)
     shouldCreateToC && createToC()
-    shouldGridifyImages && window.addEventListener('resize', gridifyImages)
   }
 
   global.App = App;

diff --git a/assets/js/main.min.js b/assets/js/main.min.js
diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss
@@ -1,16 +1,17 @@
 $black: rgb(28, 31, 38);
 $very-dark-grey: rgb(35, 40, 48);
-$dark-grey: rgb(43, 48, 59);
+$dark-grey: #2c3e50;
 $medium-grey: rgb(101, 115, 128);
 $almost-white: rgb(192, 197, 206);
-$red: rgb(195, 97, 107);
-$pink: rgb(181, 141, 174);
-$yellow: rgb(236, 204, 135);
-$green: rgb(162, 191, 138);
-$teal: rgb(144, 164, 184);
-$orange: rgb(210, 135, 109);
+$red: #e74c3c;
+$pink: #9b59b6;
+$yellow: #f39c12;
+$green: #27ae60;
+$teal: #16a085;
+$blue: #3498db;
+$orange: #d35400;
 
-$sidebar-width: 225px;
+$sidebar-width: (100% - (100% / 1.618));
 
 $breakpoints: ( 'medium': (min-width: 750px) );
 

diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss
@@ -17,19 +17,15 @@ html {
 
 /**
  * 1. Leave room for sidebar
- * 2. Leave room for footer
- * 3. Leave room for header
  */
 body {
-  background: $dark-grey;
-  font: 1em / 2 $code-font-stack;
-  color: $almost-white;
+  background: rgb(255, 255, 255);
+  font: 1em / 1.5 $text-font-stack;
+  color: #444;
 
   @include respond-to('medium') {
     font-size: 1.25em;
     padding-left: $sidebar-width; /* 1 */
-    padding-bottom: line(1); /* 2 */
-    padding-top: line(1); /* 3 */
   }
 }
 
@@ -38,5 +34,5 @@ body {
 }
 
 p {
-  margin-bottom: line(1);
+  margin-bottom: 1.5em;
 }
diff --git a/assets/sass/components/_ads.scss b/assets/sass/components/_ads.scss
@@ -3,10 +3,11 @@
  * Floated on medium screens
  */
 .site-ad {
+  margin-top: 1.5em;
+
   @include respond-to('medium') {
     float: right;
-    margin-right: -1em;
-    margin-left: 1em;
+    margin-right: 2em;
   }
 }
 
@@ -20,6 +21,7 @@
   border: 0 !important;
   color: $almost-white !important;
   max-width: 100% !important;
+  margin: 0 auto;
 }
 
 .carbonad a {
@@ -32,8 +34,3 @@
 #azcarbon > img {
   display: inline !important;
 }
-
-.carbonad a::before,
-.carbonad a::after {
-  content: none !important;
-}
diff --git a/assets/sass/components/_blockquote.scss b/assets/sass/components/_blockquote.scss
@@ -2,12 +2,10 @@
  * Blockquotes
  */
 blockquote {
-  margin: 0 0 line(1);
-  color: $orange;
-}
-
-blockquote > ::before {
-  content: '> ';
+  margin: 0 0 1.5em;
+  border-left: 0.5em solid;
+  padding: 1em 0 1em 2em;
+  color: #777;
 }
 
 /**

diff --git a/assets/sass/components/_code.scss b/assets/sass/components/_code.scss
@@ -5,24 +5,14 @@ code {
 }
 
 :not(pre) > code {
-  color: $green;
-}
-
-:not(pre) > code::before,
-:not(pre) > code::after {
-  content: '`';
 }
 
 pre {
-  margin-bottom: line(1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 1.5em;
+  padding: 1em;
 }
 
 pre code {
   display: block;
 }
-
-pre::before,
-pre::after {
-  content: '```';
-  display: block;
-}
diff --git a/assets/sass/components/_emphasis.scss b/assets/sass/components/_emphasis.scss
diff --git a/assets/sass/components/_fake-tab-bar.scss b/assets/sass/components/_fake-tab-bar.scss
diff --git a/assets/sass/components/_heading.scss b/assets/sass/components/_heading.scss
diff --git a/assets/sass/components/_hr.scss b/assets/sass/components/_hr.scss