Implement subnav

source/_data/data.json

@@ -58,6 +58,10 @@
   "organization": {
     "name": "Piráti Pardubického kraje"
   },
+  "event": {
+    "title": "20:00 Mumble-předsednictvo",
+    "date": "Pondělí 10. dubna"
+  },
   "date": "22. 1. 2020",
   "dateverbose": "Pondělí 10. dubna",
   "datetime": "22. 1. 2020 19:30",

source/_patterns/00-atoms/00-global/01-neutral-colors.mustache

@@ -24,7 +24,11 @@
 		<span class="sg-label">Grey 400<br>#343434</span>
 	</li>
 	<li>
-		<span class="sg-swatch bg-grey-500"></span>
+		<span class="sg-swatch bg-grey-700"></span>
 		<span class="sg-label">Grey 500<br>#202020</span>
 	</li>
+	<li>
+		<span class="sg-swatch bg-grey-800"></span>
+		<span class="sg-label">Grey 600<br>#1f1f1f</span>
+	</li>
 </ul>

source/_patterns/00-atoms/00-global/05-standard-container.mustache

+<div class="container">
+  {{ excerpt.long }}
+</div>

source/_patterns/00-atoms/00-global/05-wide-container.mustache

+<div class="container container--wide">
+  {{ excerpt.long }}
+</div>

source/_patterns/00-atoms/03-buttons/00-basic-button.mustache

 <button class="btn {{ classes }}">
-  <div class="btn__body">{{ cta }}</div>
+  <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
 </button>

source/_patterns/00-atoms/03-buttons/01-icon-button.mustache

 <button class="btn btn--icon {{ classes }}">
   <div class="btn__body-wrap">
-    <div class="btn__body">{{ cta }}</div>
-    <div class="btn__icon">
+    <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
+    <div class="btn__icon {{ iconClasses }}">
       <i class="{{ icon }}"></i>
     </div>
   </div>

source/_patterns/00-atoms/03-buttons/01-inline-icon-button.mustache

+<button class="btn btn--inline-icon {{ classes }}">
+  <div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

 <div class="space-y-2">
   <div>
     {{> atoms-basic-button(classes: "btn--black") }}
-    {{> atoms-basic-button(classes: "btn--grey-450") }}
+    {{> atoms-basic-button(classes: "btn--grey-800") }}
     {{> atoms-basic-button(classes: "btn--grey-125") }}
     {{> atoms-basic-button(classes: "btn--white") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading") }}
@@ -9,7 +9,7 @@
   </div>
   <div>
     {{> atoms-icon-button(classes: "btn--black") }}
-    {{> atoms-icon-button(classes: "btn--grey-450") }}
+    {{> atoms-icon-button(classes: "btn--grey-800") }}
     {{> atoms-icon-button(classes: "btn--grey-125") }}
     {{> atoms-icon-button(classes: "btn--white") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading") }}

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

 <div class="space-y-2">
   <div>
     {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
-    {{> atoms-basic-button(classes: "btn--grey-450 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
@@ -9,7 +9,7 @@
   </div>
   <div>
     {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
-    {{> atoms-icon-button(classes: "btn--grey-450 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache

+<button class="btn btn--inline-icon btn--overlay {{ baseColor }}{{^ baseColor }}btn--grey-800{{/ baseColor }} {{ overlayColor }}{{^ overlayColor }}btn--overlay-red-100{{/ overlayColor }} {{ classes }}">
+  <div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ cta }}</div>
+</button>

source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache

+{{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
+{{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}

source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache

@@ -18,9 +18,9 @@
     <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
 
     <div class="space-x-1 mt-2">
-      {{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
-      {{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
-      {{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
+      {{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
+      {{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
+      {{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
     </div>
   </div>
 </article>

source/_patterns/01-molecules/switch/binary-switch.mustache

+<div class="switch">
+  <a class="switch__item switch__item--active">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
+  <a class="switch__item">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
+</div>

source/_patterns/01-molecules/switch/multi-state-switch.mustache

+<div class="switch">
+  <a class="switch__item switch__item--active">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+</div>

source/_patterns/02-organisms/00-global/footer.mustache

 <footer class="footer">
-  <section class="footer-section bg-grey-500">
+  <section class="footer-section bg-grey-700">
     <div class="top">
       <div class="container">
         <div class="grid grid-cols-12">
@@ -75,7 +75,7 @@
     </div>
   </section>
   <hr class="footer-splitter" />
-  <section class="footer-section footer-section--dense bg-grey-500">
+  <section class="footer-section footer-section--dense bg-grey-700">
     <div class="container">
       <div class="grid grid-cols-12 justify-content-left">
         <div class="md:col-span-3 col-span-12">

source/_patterns/02-organisms/00-global/subnav.mustache

+<div class="subnav">
+  <div class="container container--wide">
+    <div class="flex">
+      <button class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-1">
+        <div class="btn__body">
+          <span>Pardubický kraj</span>
+          <i class="fas fa-chevron-down ml-2"></i>
+        </div>
+      </button>
+
+      {{> atoms-overlay-button(cta: "Krajský kalendář", baseColor: "btn--grey-500", overlayColor: "btn--overlay-red-100", classes: "btn--condensed text-sm", icon: "fas fa-calendar-alt") }}
+      <a href="#" class="btn text-sm max-w-full">
+        <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
+          <span class="pr-2">{{ event.title }}</span>
+          <span class="pl-2">{{ event.date }}</span>
+        </div>
+      </a>
+      {{> atoms-overlay-button(cta: "Pardubický kraj", baseColor: "btn--grey-500", overlayColor: "btn--overlay-brands-facebook", classes: "ml-1 btn--condensed text-sm", icon: "fab fa-facebook-f") }}
+    </div>
+  </div>
+</div>

source/_patterns/03-templates/elections-main.mustache

-<article class="hero hero--image py-4 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+{{> organisms-subnav() }}
+
+<article class="hero hero--image py-7 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
   <div class="container grid lg:grid-rows-3 lg:grid-cols-7 gap-1 items-center">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
       {{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-3") }}
@@ -16,7 +18,11 @@
   </div>
 </article>
 
-<div class="container pb-8">
+<div class="container pb-8 pt-8">
+  <div class="text-center">
+    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
+  </div>
+
   <h1 class="head-alt-md text-center pt-8 pb-4">Kandidátka do krajských voleb</h1>
 
   <div class="candidate-card-list grid-cols-4">
@@ -47,3 +53,6 @@
     {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
   </div>
 </div>
+
+
+{{> organisms-footer() }}

source/css/atoms/button.pcss

@@ -5,20 +5,6 @@
     @apply no-underline;
   }
 
-  .btn__body,
-  .btn__icon {
-    @apply transition duration-200 bg-black text-white;
-  }
-
-  .btn__icon {
-    @apply border-l border-grey-300;
-  }
-
-  .btn__body {
-    @apply block;
-    padding: .75em 2em;
-  }
-
   &.btn--hoveractive:hover .btn__body,
   &.btn--hoveractive:hover .btn__icon {
     @apply bg-black text-white;
@@ -29,10 +15,24 @@
 
   &.btn--hoveractive.btn--fading:hover .btn__body,
   &.btn--hoveractive.btn--fading:hover .btn__icon {
-    @apply bg-grey-500 text-white;
+    @apply bg-grey-700 text-white;
   }
 }
 
+.btn__body,
+.btn__icon {
+  @apply transition duration-200 bg-black text-white;
+}
+
+.btn__icon {
+  @apply border-l border-grey-300;
+}
+
+.btn__body {
+  @apply flex h-full items-center justify-center;
+  padding: .75em 2em;
+}
+
 .btn.btn--icon {
   .btn__body-wrap {
     @apply flex;
@@ -56,6 +56,10 @@
   }
 }
 
+.btn.btn--inline-icon .btn__inline-icon {
+  @apply mr-1;
+}
+
 .btn.btn--black {
   .btn__body,
   .btn__icon {
@@ -63,7 +67,7 @@
   }
 
   .btn__icon {
-    @apply border-l border-grey-400 bg-grey-450;
+    @apply border-l border-grey-400 bg-grey-800;
   }
 
   &.btn--hoveractive:hover .btn__body,
@@ -91,10 +95,10 @@
   }
 }
 
-.btn.btn--grey-450 {
+.btn.btn--grey-500 {
   .btn__body,
   .btn__icon {
-    @apply bg-grey-450 text-white;
+    @apply bg-grey-500 text-white;
   }
 
   .btn__icon {
@@ -102,6 +106,28 @@
   }
 }
 
+.btn.btn--grey-700 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-grey-700 text-white;
+  }
+
+  .btn__icon {
+    @apply border-grey-800;
+  }
+}
+
+.btn.btn--grey-800 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-grey-800 text-white;
+  }
+
+  .btn__icon {
+    @apply border-grey-700;
+  }
+}
+
 .btn.btn--green-100 {
   .btn__body,
   .btn__icon {
@@ -145,3 +171,58 @@
     @apply w-auto;
   }
 }
+
+
+.btn.btn--overlay {
+  .btn__inline-icon {
+    @apply transition duration-200;
+  }
+
+  &.btn--overlay-white {
+    .btn__inline-icon {
+      @apply text-white;
+    }
+
+    &:hover {
+      .btn__body {
+        @apply bg-white text-black;
+      }
+
+      .btn__inline-icon {
+        @apply text-black;
+      }
+    }
+  }
+
+  &.btn--overlay-red-100 {
+    .btn__inline-icon {
+      @apply text-red-100;
+    }
+
+    &:hover {
+      .btn__body {
+        @apply bg-red-100;
+      }
+
+      .btn__inline-icon {
+        @apply text-white;
+      }
+    }
+  }
+
+  &.btn--overlay-brands-facebook {
+    .btn__inline-icon {
+      @apply text-brands-facebook;
+    }
+
+    &:hover {
+      .btn__body {
+        @apply bg-brands-facebook;
+      }
+
+      .btn__inline-icon {
+        @apply text-white;
+      }
+    }
+  }
+}

source/css/atoms/container.pcss

+.container--wide {
+  max-width: 1430px;
+}

source/css/molecules/switch.pcss

+.switch {
+  @apply inline-flex bg-black p-sm;
+}
+
+.switch__item {
+  @apply py-2 px-4 font-alt font-normal text-xl text-white;
+
+  &:hover {
+    @apply no-underline bg-grey-700;
+  }
+
+  &.switch__item--active,
+  &.switch__item--active:hover {
+    @apply bg-green-100;
+  }
+}