Add banner & calendar

source/_data/data.json

@@ -55,6 +55,7 @@
     "name": "Piráti Pardubického kraje"
   },
   "date": "22. 1. 2020",
+  "dateverbose": "Pondělí 10. dubna",
   "datetime": "22. 1. 2020 19:30",
   "year": {
     "long": "2020",

source/_patterns/00-atoms/00-global/02-utility-colors.mustache

 <ul class="sg-colors">
 	<li>
-		<span class="sg-swatch bg-red"></span>
-		<span class="sg-label">Red<br>#d6151b</span>
+		<span class="sg-swatch bg-red-100"></span>
+		<span class="sg-label">Red 100<br>#d6151b</span>
 	</li>
 </ul>

source/_patterns/01-molecules/banner/banner.mustache

+<aside class="banner {{ color }}{{^ color }}bg-black{{/ color }} text-white {{ classes }}">
+  <i class="{{ icon }} banner__icon"></i>
+  <div class="banner__body">
+    <h1 class="{{ headClasses }}{{^ headClasses }}head-alt-lg{{/ headClasses }} banner__cta">{{ cta }}</h1>
+    {{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-4") }}
+  </div>
+</aside>

source/_patterns/01-molecules/banner/color-variants.mustache

+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-2" style="min-height: 500px;">
+  {{> molecules-banner(color: "bg-black") }}
+  {{> molecules-banner(color: "bg-red-100") }}
+  {{> molecules-banner(color: "bg-green-100") }}
+  {{> molecules-banner(color: "bg-green-200") }}
+  {{> molecules-banner(color: "bg-brands-facebook") }}
+  {{> molecules-banner(color: "bg-brands-twitter") }}
+</div>

source/_patterns/01-molecules/calendar/calendar-table-row.mustache

+<div class="grid grid-cols-12 items-center calendar-table-row">
+  <div class="col-span-2 text-red-100 head-alt-md calendar-table-row__col"><span>10.</span></div>
+  <div class="col-span-8 grid grid-cols-3 calendar-table-row__col">
+    <div class="col-span-3 md:col-span-1">
+      <strong class="block">{{ dateverbose }}</strong>
+      <p class="font-light text-sm mt-sm">Celý den</p>
+    </div>
+    <div class="col-span-3 md:col-span-2 mt-2 md:mt-0">
+      <strong class="block">{{ headline.short }}</strong>
+      <p class="font-light text-sm mt-sm">{{ excerpt.short }}</p>
+    </div>
+  </div>
+  <div class="col-span-2 text-center font-light calendar-table-row__col">
+    <a href="#">
+      <i class="fas fa-map-marker-alt text-red-100 mr-sm" aria-hidden="true"></i>
+      <span>Mapa</span>
+    </a>
+  </div>
+</div>

source/_patterns/01-molecules/calendar/calendar.mustache

+<div class="calendar grid grid-cols-4">
+  <div class="col-span-4 xl:col-span-1">
+    {{> molecules-banner(color: "bg-red-100", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
+  </div>
+  <div class="col-span-4 xl:col-span-3">
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+    {{> molecules-calendar-table-row }}
+  </div>
+</div>

source/css/atoms/heading.pcss

 .head-alt-xl {
-  @apply text-7xl font-alt font-normal leading-tight;
+  @apply text-7xl font-alt font-normal leading-negative;
 }
 
 .head-alt-lg {
-  @apply text-6xl font-alt font-normal leading-tight;
+  @apply text-6xl font-alt font-normal leading-negative;
 }
 
 .head-alt-md {
-  @apply text-4xl font-alt font-normal leading-tight;
+  @apply text-4xl font-alt font-normal leading-negative;
 }
 
 .head-alt-base {
-  @apply text-3xl font-alt font-normal leading-tight;
+  @apply text-3xl font-alt font-normal leading-negative;
 }
 
 .head-alt-sm {
-  @apply text-2xl font-alt font-normal leading-tight;
+  @apply text-2xl font-alt font-normal leading-negative;
 }
 
 .head-alt-xs {
-  @apply text-xl font-alt font-normal leading-tight;
+  @apply text-xl font-alt font-normal leading-negative;
 }
 
 .head-alt-2xs {
-  @apply text-lg font-alt font-normal leading-tight;
+  @apply text-lg font-alt font-normal leading-negative;
 }
 
 

source/css/molecules/banner.pcss

+.banner {
+  @apply p-4 flex flex-wrap flex-col;
+}
+
+.banner__icon {
+  font-size: 3rem;
+
+  @screen md {
+    font-size: 4rem;
+  }
+
+  @screen lg {
+    font-size: 9rem;
+  }
+}
+
+.banner__body {
+  @apply mt-auto;
+}
+
+.banner__cta {
+  @apply mt-4;
+}

source/css/molecules/calendar.pcss

+.calendar-table-row {
+  @apply border-b border-grey-150;
+
+  &:first-child {
+    @apply border-t;
+  }
+}
+
+.calendar-table-row__col {
+  @apply h-full border-r border-grey-150 p-1 flex justify-center items-center;
+
+  &:first-child {
+    @apply border-l;
+
+    @screen lg {
+      @apply border-l-0;
+    }
+  }
+
+}

source/css/pattern-scaffolding.css

-/**
- * This stylesheet is for styles you want to include only when displaying demo
- * styles for grids, animations, color swatches, etc.
- * These styles will not be your production CSS.
- */
-#sg-patterns {
-  -webkit-box-sizing: border-box !important;
-          box-sizing: border-box !important;
-  max-width: 100%;
-  padding: 0 0.5em;
-}
-
-.demo-animate {
-  background: #ddd;
-  padding: 1em;
-  margin-bottom: 1em;
-  text-align: center;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.sg-colors {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  list-style: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.sg-colors li {
-  -webkit-box-flex: 1;
-      -ms-flex: auto;
-          flex: auto;
-  padding: 0.3em;
-  margin: 0 0.5em 0.5em 0;
-  min-width: 5em;
-  max-width: 14em;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-}
-
-.sg-swatch {
-  display: block;
-  height: 4em;
-  margin-bottom: 0.3em;
-  border-radius: 5px;
-}
-
-.sg-label {
-  font-size: 90%;
-  line-height: 1;
-}
-
-
-.sg-pattern-example {
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-}
+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.sg-label {
+  font-size: 1rem;
+}
+
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}

source/css/style.pcss

@@ -25,6 +25,8 @@
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";
+@import "./molecules/banner.pcss";
+@import "./molecules/calendar.pcss";
 @import "./molecules/candidate-card.pcss";
 @import "./molecules/candidate-table-row.pcss";
 @import "./molecules/social-icon-group.pcss";

tailwind.config.js

@@ -9,6 +9,9 @@ module.exports = {
       },
       opacity: {
         '85': '0.85',
+      },
+      lineHeight: {
+        'negative': '0.9',
       }
     },
     fontFamily: {
@@ -50,7 +53,9 @@ module.exports = {
         '450': '#262626',
         '500': '#202020',
       },
-      'red': '#d6151b',
+      'red': {
+        '100': '#d6151b',
+      },
       'green': {
         '100': '#29bc51',
         '200': '#26b34b',