Add pirate center page

package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
     "autoprefixer": "^9.5.1",
+    "color": "^3.1.2",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "postcss-assets": "^5.0.0",

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

@@ -6,4 +6,11 @@
       <p>#d6151b</p>
     </div>
   </div>
+  <div class="card flex flex-col">
+    <div class="h-32 bg-red-200"></div>
+    <div class="card__body p-2 flex">
+      <p class="font-bold flex-grow">Red 200</p>
+      <p>#d6151b</p>
+    </div>
+  </div>
 </div>

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

@@ -6,6 +6,7 @@
     {{> atoms-basic-button(classes: "btn--white") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading") }}
     {{> atoms-basic-button(classes: "btn--green-100") }}
+    {{> atoms-basic-button(classes: "btn--red-100") }}
   </div>
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black") }}
@@ -14,5 +15,6 @@
     {{> atoms-icon-button(classes: "btn--white") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading") }}
     {{> atoms-icon-button(classes: "btn--green-100") }}
+    {{> atoms-icon-button(classes: "btn--red-100") }}
   </div>
 </div>

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

@@ -6,6 +6,7 @@
     {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }}
   </div>
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
@@ -14,5 +15,6 @@
     {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }}
   </div>
 </div>

source/_patterns/01-molecules/00-badge/condensed-badge-no-occupation.mustache

+{{> molecules-condensed-badge(hideOccupation: true) }}

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

 <div class="badge badge--condensed {{ classes }}">
   {{> atoms-basic-avatar(classes: "avatar--sm") }}
   <div class="badge__body">
-    <span class="head-xs badge__title">Mikuláš Peksa</span>
+    <span class="head-heavy-xs badge__title">{{ person.first }} {{ person.last }}</span>
+    {{^ hideOccupation }}
+    <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
+    {{/ hideOccupation }}
+    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
     {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
   </div>
 </div>

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

-<div class="grid grid-cols-12 items-center calendar-table-row">
+<div class="grid grid-cols-12 items-center calendar-table-row {{ classes }}">
   <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">

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

@@ -102,9 +102,9 @@
   <section class="footer-section bg-black">
     <div class="container container--default">
       <div class="footer-contacts">
-        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
-        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
-        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
+        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
+        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
+        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
         <div class="mt-8 lg:mt-0 lg:text-right footer-contacts__item">
           {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }}
         </div>

source/_patterns/03-templates/pirate-center.mustache

+{{> organisms-header }}
+
+<aside
+  class="hero hero--image py-16 {{ classes }}"
+  style="--image-url: url({{ img.landscape-16x9-fullhd.src }})"
+>
+  <div class="container container--default">
+    <h1 class="head-alt-md md:head-alt-lg max-w-2xl">
+      Zbrusu nové krajské<br />pirátské centrum!
+    </h1>
+    <h2 class="head-xs mt-2">
+      V Pardubicích jsme otevřeli nové pirátské centrum pod zkratkou ParduPiCe
+    </h2>
+  </div>
+</aside>
+
+<div class="container container--default py-16">
+  <article>
+    <div class="lg:flex lg:space-x-8 xl:space-x-16">
+      <div class="lg:w-3/5 xl:w-2/3 content-block">
+        <h2>Cowork</h2>
+        <p>
+          Pirátské centrum nabízí bezplatný prostor pro coworking, tedy sdílenou
+          kancelář. K dispozici jsou 4 pracovní místa a sdílená konferenční
+          místnost s projektorem. Samozřejmostí je připojení k internetu a
+          možnost tisku. Není problém domluvit i dlouhodobé využívání sdílené
+          kanceláře, v takovém případě velmi oceníme účelový dar na provoz
+          centra.
+        </p>
+        {{> atoms-icon-button(cta: "Provozní řád", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+        <h2>Chci podpořit provoz</h2>
+        <p>
+          Pokud chcete ParduPiCe podpořit, můžete nám poslat účelový dar na jeho provoz převodem na účet. Pro platbu použijte následující údaje:
+        </p>
+        <table class="w-full">
+          <tbody>
+            <tr>
+              <td class="font-bold">Číslo transparentního účtu</td>
+              <td>2100048174/2010</td>
+            </tr>
+            <tr>
+              <td class="font-bold">Specifický symbol</td>
+              <td>400802</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h2>Dětský koutek</h2>
+        <p>Pro rodiče nabízíme vybavený dětský koutek s pracovním místem. Dětský koutek je vybaven hračkami pro děti všech věkových kategorií.</p>
+
+        <h2>Pořádání akcí</h2>
+        <p>V rámci pirátského centra probíhají akce všeho druhu:</p>
+
+        <ul>
+          <li>Přednášky</li>
+          <li>Vzdělávací akce</li>
+          <li>Workshopy</li>
+          <li>Přednášky</li>
+          <li>Kulturní akce</li>
+        </ul>
+
+        <p>Máte námět na vlastní akci? Dejte nám vědět. ParduPiCe je zdarma k dispozici pro akce nekomerční povahy.</p>
+
+        <h2>Kalendář akcí</h2>
+        <p>
+          {{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
+          {{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
+          {{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
+          {{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
+        </p>
+
+        {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--red-100 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+      </div>
+      <div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
+        <div class="card elevation-10">
+          <div class="card__body content-block">
+            <h2>Kde to najdu?</h2>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
+            <p>
+              Pardubické pirátské centrum<br>
+              Budova T-STRING<br>
+              Masarykovo náměstí 1484<br>
+              530 02 Pardubice I
+            </p>
+            <p><small>Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.</small></p>
+            <hr>
+            <h2>Kontakt</h2>
+            {{> molecules-condensed-badge(occupation: "Správce coworku")}}
+            {{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4")}}
+
+          </div>
+        </div>
+
+        <div class="flex flex-col pt-16 space-y-8">
+          {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white w-full") }}
+          {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white w-full") }}
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+
+{{> organisms-footer }}

source/css/atoms/button.pcss

@@ -139,6 +139,17 @@
   }
 }
 
+.btn.btn--red-100 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-red-100 text-white;
+  }
+
+  .btn__icon {
+    @apply border-red-200;
+  }
+}
+
 .btn.btn--white {
   .btn__body,
   .btn__icon {

source/css/atoms/figure.pcss

-.figure {
+.figure,
+.content-block figure {
   @apply relative;
 
   img {

source/css/atoms/list.pcss

-.ordered-list {
+.ordered-list,
+.content-block ol {
   @apply pl-4;
 }
 
-.unordered-list {
+.unordered-list,
+.content-block ul {
   li {
     @apply relative flex items-center;
 
@@ -36,6 +38,7 @@
   }
 }
 
-.ordered-list {
+.ordered-list,
+.content-block ol {
   @apply list-decimal;
 }

source/css/atoms/paragraph.pcss

-.para {
+.para,
+.content-block p {
   @apply font-body font-normal leading-normal;
 }

source/css/atoms/quotation.pcss

-.quote {
+.quote,
+.content-block blockquote {
   @apply italic leading-relaxed border-l-2 border-black pl-4 py-2 ml-6;
 
   width: 80%;

source/css/atoms/table.pcss

-.table {
+.table,
+.content-block table {
   th,
   thead td,
   td {
@@ -11,13 +12,15 @@
   }
 }
 
-.table--striped {
+.table--striped,
+.content-block table {
   tr:nth-child(even) td {
     @apply bg-grey-100;
   }
 }
 
-.table--bordered {
+.table--bordered,
+.content-block table {
   th,
   thead td {
     @apply border border-grey-500;

source/css/molecules/badge.pcss

@@ -15,15 +15,19 @@
 
   .badge__link {
     @apply text-sm font-light block w-full;
+
+    &:not(:first-child) {
+      @apply pt-1;
     }
   }
-
-.badge.badge--condensed {
-  .badge__title {
-    @apply mb-2;
 }
 
+.badge.badge--condensed {
   .badge__body {
     @apply ml-4;
   }
+
+  .badge__occupation {
+    @apply uppercase text-sm max-w-sm my-0;
+  }
 }

source/css/molecules/calendar.pcss

 .calendar-table-row {
   @apply border-b border-grey-150;
 
-  &:first-child {
+  &:first-of-type {
     @apply border-t;
   }
 }
 
+.calendar-table-row--standalone {
+  @apply border-l;
+}
+
 .calendar-table-row__col {
   @apply h-full border-r border-grey-150 p-2 flex justify-center items-center;
 

source/css/molecules/content-block.pcss

@@ -50,11 +50,16 @@
     @apply font-bold;
   }
 
+  small {
+    @apply text-sm;
+  }
+
   ul,
   ol,
   table,
   blockquote,
-  figure {
+  figure,
+  iframe {
     &:not(:first-child) {
       margin-top: 1em;
     }