jekyll-theme-pirati 2.0.0 → 3.0.0

data/_layouts/komunalni-volby.html

@@ -5,7 +5,7 @@ layout: page
 <div class="row">
 
     <div class="c-program-intro">
-        <p> {{content}} </p>
+        <p> {{ content }} </p>
     </div>
 
     <div class="o-section">

data/_layouts/page.html

@@ -2,12 +2,12 @@
 layout: default
 ---
 
-{%unless page.nomenu%}
+{% unless page.nomenu %}
 {% include submenu.html %}
-{% endunless%}
+{% endunless %}
 
 <div class="row">
-  <div class="medium-12 
+  <div class="medium-12
       {% if page.rbar == empty or page.rbar == blank or page.rbar == nil %}
         large-12
       {% else%}
@@ -17,13 +17,13 @@ layout: default
       <div class="o-section-inner">
         <main class="o-section-block">
           <!-- Article -->
-          <article itemtype="http://schema.org/BlogPosting" class="c-BasicPage" itemscope="">
-            <link itemprop="mainEntityOfPage" href="http://insertshownpagelinkhere.com">
-            <h1 itemprop="headline" class="c-BasicPage__title">
-                {%if page.fullname%}{{page.fullname}}{%else%}{{page.title}}{%endif%}
+          <article itemtype="http://schema.org/BlogPosting" itemscope="">
+            <link itemprop="mainEntityOfPage" href="{{ page.url }}">
+            <h1 itemprop="headline" class="c-page-title">
+                {% if page.fullname %}{{ page.fullname }}{% else %}{{ page.title }}{% endif %}
             </h1>
-            <div itemprop="description" class="c-BasicPage-content">
-              {{content}}
+            <div itemprop="description">
+              {{ content }}
             </div>
           </article>
           <!-- /Article -->

data/_layouts/person.html

@@ -0,0 +1,5 @@
+---
+layout: page
+---
+
+<div class="c-emphasized-text">{{ content }}</div>

data/_layouts/post.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<article itemtype="http://schema.org/BlogPosting" class="c-BasicPage" itemscope="">
+<article itemtype="http://schema.org/BlogPosting" itemscope="">
   <div class="row">
     <div class="medium-12 columns">
       <div class="o-section o-section--noSpaceBottom">
@@ -12,34 +12,35 @@ layout: default
               <div class="medium-12 columns">
                 <!-- Article -->
                 <link itemprop="mainEntityOfPage" href="{{ page.url | absolute_url }}">
-                <header class="c-BasicPage-header">
-                  <h1 itemprop="headline" class="c-BasicPage__title"> {{ page.title }} </h1>
-                  <div class="c-BasicPage__meta">
-                    <span itemprop="description" class="c-BasicPage__datePublished">
-                      <i class="fa fa-calendar-o" aria-hidden="true"></i> {{ page.date | date: "%d. %m. %Y" }}
-                      <meta itemprop="datePublished" content="{{page.date | date_to_xmlschema }}">
-                      <meta itemprop="dateModified" content=""> </span>
-                    <br class="hide-for-medium">
-                    <!-- Authors -->
-                    <span itemprop="author" itemtype="http://schema.org/Person" class="c-BasicPage__authors" itemscope="">
-                      <i class="fa fa-user" aria-hidden="true"></i>
-                      <span itemprop="name" class="c-BlogPosting-excerpt__author">
-                          {% if page.authorId %}
-                            {% assign author = site.people | where_exp:"item","item.uid contains page.authorId" | first %}
-                            <a href={{author.url}}>
-                                {{author.name}}
-                            </a>
-                          {% else %}
-                            {{ page.author }}
-                          {% endif %}
+                <header class="c-page-header">
+                  <h1 itemprop="headline" class="c-page-title"> {{ page.title }} </h1>
+                  <div class="c-metadata-block">
+                    <div class="c-metadata-block-section">
+                      <span itemprop="description" class="c-metadata-block-section__item">
+                        <i class="fa fa-calendar-o" aria-hidden="true"></i> {{ page.date | date: "%d. %m. %Y" }}
+                        <meta itemprop="datePublished" content="{{page.date | date_to_xmlschema }}">
+                        <meta itemprop="dateModified" content="">
                       </span>
-                    </span>
+                      <!-- Authors -->
+                      <span itemprop="author" itemtype="http://schema.org/Person" class="c-metadata-block-section__item" itemscope="">
+                        <i class="fa fa-user" aria-hidden="true"></i>
+                        <span itemprop="name" class="c-BlogPosting-excerpt__author">
+                            {% if page.authorId %}
+                              {% assign author = site.people | where_exp:"item","item.uid contains page.authorId" | first %}
+                              <a href={{author.url}}>
+                                  {{author.name}}
+                              </a>
+                            {% else %}
+                              {{ page.author }}
+                            {% endif %}
+                        </span>
+                      </span>
+                    </div>
                     {% if page.tags %}
-                    <div class="c-BasicPage-tags">
-                      <span class="c-BasicPage-tags__headline">Tagy</span>
+                    <div class="c-metadata-block-section">
                       <ul class="c-tag-list">
                         {% for tag in page.tags %}
-                        <li>
+                        <li class="c-tag-list__item">
                           <a href="{{ tag | prepend: '/tags/#' | relative_url }}" class="c-tag">{{ tag }}</a>
                         </li>
                         {% endfor %}
@@ -55,20 +56,11 @@ layout: default
       </div>
     </div>
   </div>
+
   {% if page.image %}
-  <div class="o-section-block o-section-block-fill">
-    <div class="c-BasicPage-headline-img">
-      <div class="c-BasicPage-headline-bg">
-        <img src="{{ page.image | relative_url }}" alt="{{page.title}}"> </div>
-      <div class="row small-collapse medium-uncollapse">
-        <div class="small-12 columns">
-          <div class="o-section-inner--medium">
-            <img src="{{ page.image | relative_url }}" alt="{{page.title}}"> </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    {% include headline-image.html image=page.image title=page.title %}
   {% endif %}
+
   <div class="row o-section-block">
     <div class="small-12 columns">
       <div class="o-section o-section--noSpaceBottom">
@@ -76,7 +68,7 @@ layout: default
           <div class="o-section-block o-section-block--fill">
             <div class="o-section-inner">
               <div class="medium-12 large-8 columns">
-                <div itemprop="description" class="c-BasicPage-content">
+                <div itemprop="description" class="c-content-block c-emphasized-text">
                   {{ content }}
                 </div>
               </div>

data/_layouts/team.html

@@ -12,7 +12,7 @@ layout: default
       <div class="o-section-inner">
         <main class="o-section-block">
           <!-- Article -->
-          <article itemtype="http://schema.org/BlogPosting" class="c-BasicPage" itemscope="">
+          <article itemtype="http://schema.org/BlogPosting" itemscope="">
             <link itemprop="mainEntityOfPage" href="http://insertshownpagelinkhere.com">
             {% if page['nadřízený tým'] %}
 
@@ -25,7 +25,7 @@ layout: default
             </ul>
 
             {% endif %}
-            <h1 itemprop="headline" class="c-BasicPage__title">
+            <h1 itemprop="headline" class="c-page-title">
                 {{page.name | capitalize }}
             </h1>
             <div itemprop="description" class="c-BasicPage-content">

data/_sass/_base.scss

@@ -1,5 +1,6 @@
 html, body {
-  font-size: 14px;
+  // Base font size, everyting else scales relative to this.
+  font-size: 16px;
 }
 
 .fa {

data/_sass/_fonts.scss

@@ -0,0 +1,42 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+
+@font-face {
+  font-family: 'Bebas Neue Book';
+  src: url('/assets/fonts/BebasNeueBook.woff') format('woff'),
+      url('/assets/fonts/BebasNeueBook.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Bebas Neue';
+  src: url('/assets/fonts/BebasNeue-Thin.woff') format('woff'),
+      url('/assets/fonts/BebasNeue-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Bebas Neue';
+  src: url('/assets/fonts/BebasNeueLight.woff') format('woff'),
+      url('/assets/fonts/BebasNeueLight.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Bebas Neue';
+  src: url('/assets/fonts/BebasNeueRegular.woff') format('woff'),
+      url('/assets/fonts/BebasNeueRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Bebas Neue';
+  src: url('/assets/fonts/BebasNeueBold.woff') format('woff'),
+      url('/assets/fonts/BebasNeueBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+

data/_sass/_settings.scss

@@ -49,8 +49,8 @@ $global-font-size: 100%;
 $global-width: 1170px;
 $global-lineheight: 1.3;
 $foundation-palette: (
-  primary: #2785ce,
-  secondary: #777,
+  primary: #000,
+  secondary: #fff,
   success: #3adb76,
   warning: #ffae00,
   alert: #cc0303,
@@ -63,7 +63,7 @@ $black: #0a0a0a;
 $white: #fefefe;
 $body-background: $white;
 $body-font-color: $black;
-$body-font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
@@ -105,8 +105,9 @@ $block-grid-max: 8;
 // 4. Base Typography
 // ------------------
 
-$header-font-family: 'Fira Sans', Helvetica, Roboto, Arial, sans-serif;
-$header-font-weight: $global-weight-normal;
+$header-font-family: 'Bebas Neue', Helvetica, Arial, sans-serif;
+$header-font-family-sub: 'Bebas Neue Book', Helvetica, Arial, sans-serif;
+$header-font-weight: bold;
 $header-font-style: normal;
 $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
 $header-sizes: (

data/_sass/components/BlogPosting.scss

@@ -109,11 +109,8 @@ $bp-ns: '';
   position: absolute;
   left: 0;
   bottom: 0;
-  text-decoration: underline;
 
-  &:hover {
-    text-decoration: none;
-  }
+  @include emphasizedAnchor();
 
   @include breakpoint(medium down) {
     bottom: 8px;
@@ -124,6 +121,11 @@ $bp-ns: '';
   }
 }
 
+.c-BlogPosting__title a,
+.c-BlogPosting-excerpt__title a {
+  @include headlineAnchor();
+}
+
 .#{$bp-ns}c-BlogPosting-excerpt-nextBox {
   max-width: 263px;
 

data/_sass/components/contact-bar.scss

@@ -1,12 +1,12 @@
 $cb-ns: '';
 
 .#{$cb-ns}c-contact-bar {
-  background: #343434;
+  background: $primary-color;
 }
 
 .#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar-header {
   float: left;
-  background: #343434;
+  background: $primary-color;
 
   @include breakpoint(medium down) {
     float: none;

data/_sass/components/content-block.scss

@@ -0,0 +1,11 @@
+/**
+ * Represents a content block with default visual style. This comes handy when
+ * we cannot attach proper classes, like when HTML is automatically created
+ * from Markdown writeup.
+ */
+
+.c-content-block {
+  a {
+    @include emphasizedAnchor();
+  }
+}

data/_sass/components/footer.scss

@@ -0,0 +1,5 @@
+footer {
+  .logo {
+      max-width: 170px;
+  }
+}

data/_sass/components/header-bar.scss

@@ -1,14 +1,14 @@
 $hb-ns: '';
 
 .#{$hb-ns}c-header-bar {
-  background: #343434;
+  background: $primary-color;
 }
 
 .#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar-divider {
   width: 100%;
   height: 1px;
   margin: 10px auto;
-  background: #adadad;
+  background: $secondary-color;
 
   @include breakpoint(860px) {
     display: inline-block;

data/_sass/components/headline-image.scss

@@ -0,0 +1,44 @@
+/**
+ * This component implements a headline image. that fills whole page width
+ * with a stretched image. Over that the image in normal dimensions is shown.
+ */
+
+.c-headline-image {
+  position: relative;
+  min-height: 420px;
+  background: $secondary-color;
+
+  @include breakpoint(medium down) {
+    min-height: 250px;
+  }
+
+  @include breakpoint(mobile down) {
+    min-height: auto;
+    min-height: fit-content;
+  }
+}
+
+.c-headline-image__background {
+  margin: 0;
+  cursor: pointer;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  img {
+    min-width: 100%;
+    min-height: 100%;
+    position: absolute;
+    top: -100%;
+    right: -100%;
+    bottom: -100%;
+    left: -100%;
+    margin: auto;
+    opacity: 0.1;
+    user-select: none;
+    cursor: default;
+  }
+}

data/_sass/components/metadata-block.scss

@@ -0,0 +1,29 @@
+/**
+ * This component represents a metadata block. It's usually used with blog
+ * postings to show author/date of publication etc.
+ */
+
+// meta split in multiple lines on medium down
+.c-metadata-block-section {
+  display: inline-block;
+
+  @include breakpoint(medium down) {
+    display: block;
+    line-height: 2;
+  }
+
+  &:not(:first-child) {
+    margin-left: 3rem;
+
+    @include breakpoint(medium down) {
+      margin-left: 0;
+      margin-top: 1rem;
+    }
+  }
+}
+
+.c-metadata-block-section__item + .c-metadata-block-section__item {
+  @include breakpoint(medium) {
+    margin-left: 0.5rem;
+  }
+}

data/_sass/components/program.scss

@@ -60,9 +60,10 @@ $program-item-ns: '';
 
     .#{$program-item-ns}c-program-items__item-title {
         color: $primary-color;
-        text-decoration: underline;
         font-weight: 600;
         font-size: 1.5rem;
+
+        @include headlineAnchor();
     }
 
     a:not(.button) {
@@ -108,6 +109,8 @@ $program-item-ns: '';
             font-size: 1.5rem;
             font-weight: 600;
 
+            @include headlineAnchor();
+
             @include breakpoint(medium down) {
                 font-size: 1.25rem;
             }
@@ -132,7 +135,6 @@ $program-item-ns: '';
     .#{$program-item-ns}c-program-candidate-badge__avatar {
         position: relative;
         flex-shrink: 0;
-
     }
 
     .#{$program-item-ns}c-program-candidate-badge__rank {

data/_sass/components/tag.scss

@@ -2,29 +2,28 @@
   font-size: 0.85rem;
   color: $primary-color;
   border: 1px solid $primary-color;
-  border-radius: 2px;
   display: inline-block;
   text-decoration: none;
-  padding: 0px 4px;
-  transition: 0.25s background;
-  background: #fff;
+  padding: 0 .3rem;
+  background: $secondary-color;
 }
 
 .c-tag:hover,
 .c-tag.is-active {
-  background: #e5f4ff;
+  background: $primary-color;
+  color: $secondary-color;
 }
 
 .c-tag-list {
   display: inline-block;
-  margin-left: 0.5rem;
-  list-stype-type: none;
+  list-style-type: none;
+  margin: 0;
 
-  li {
+  .c-tag-list__item {
     display: inline-block;
   }
 
-  li + li {
-    margin-left: 0.45rem;
+  .c-tag-list__item + .c-tag-list__item {
+    margin-left: 0.5rem;
   }
-}
+}