Initial commit

source/_patterns/00-atoms/01-text/paragraph.mustache

+<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies, eros sit amet blandit laoreet, ipsum nisl pellentesque nunc, in tristique nulla leo vel ante. Donec vitae interdum nisl. Vestibulum tellus augue, pulvinar id cursus auctor, tincidunt et sem. Curabitur gravida dapibus ipsum. Phasellus sit amet tortor tincidunt, ultrices dolor ut, dapibus elit. Morbi fermentum pellentesque sodales. Ut ac convallis lorem, sit amet iaculis ante. Donec sed sapien neque. Aenean arcu orci, congue ut lacinia sit amet, tristique id velit. Donec tincidunt augue vel elit interdum pellentesque. Maecenas id mi ante. Curabitur ante massa, malesuada ac libero id, posuere mollis sapien. Nulla eleifend tincidunt erat fermentum dignissim. Suspendisse accumsan iaculis fringilla. Phasellus non purus quam. Vestibulum et suscipit ipsum, sed porta neque. Integer vitae dignissim elit, et ultrices eros. Morbi molestie lorem non tincidunt tincidunt. Quisque lobortis, ante nec tristique sagittis, tellus purus posuere libero, eget accumsan diam felis vel diam. Praesent mattis consectetur dapibus. Nullam aliquam sagittis ipsum et accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacinia rhoncus ultrices. Pellentesque rhoncus tellus eu purus bibendum, ac cursus massa aliquam. Donec consectetur sodales ligula nec vulputate. Pellentesque nec sapien sit amet urna ullamcorper ullamcorper at eget odio. Donec sed tristique urna. Pellentesque dictum risus quam, et consequat nulla viverra id. Vestibulum viverra ultricies orci non placerat. Etiam porta tellus quis justo faucibus scelerisque. Duis sit amet arcu ac turpis aliquet condimentum eu vel erat. Donec dui velit, varius sit amet tristique quis, convallis in orci. Vestibulum justo mauris, sagittis vitae justo et, blandit placerat libero. Mauris vel sagittis tortor. Morbi mollis mi sed ipsum tristique dignissim. Curabitur placerat augue eget lectus congue suscipit.</p>
+<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies, eros sit amet blandit laoreet, ipsum nisl pellentesque nunc, in tristique nulla leo vel ante. Donec vitae interdum nisl. Vestibulum tellus augue, pulvinar id cursus auctor, tincidunt et sem. Curabitur gravida dapibus ipsum. Phasellus sit amet tortor tincidunt, ultrices dolor ut, dapibus elit. Morbi fermentum pellentesque sodales. Ut ac convallis lorem, sit amet iaculis ante. Donec sed sapien neque. Aenean arcu orci, congue ut lacinia sit amet, tristique id velit. Donec tincidunt augue vel elit interdum pellentesque. Maecenas id mi ante. Curabitur ante massa, malesuada ac libero id, posuere mollis sapien. Nulla eleifend tincidunt erat fermentum dignissim. Suspendisse accumsan iaculis fringilla. Phasellus non purus quam. Vestibulum et suscipit ipsum, sed porta neque. Integer vitae dignissim elit, et ultrices eros. Morbi molestie lorem non tincidunt tincidunt. Quisque lobortis, ante nec tristique sagittis, tellus purus posuere libero, eget accumsan diam felis vel diam. Praesent mattis consectetur dapibus. Nullam aliquam sagittis ipsum et accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacinia rhoncus ultrices. Pellentesque rhoncus tellus eu purus bibendum, ac cursus massa aliquam. Donec consectetur sodales ligula nec vulputate. Pellentesque nec sapien sit amet urna ullamcorper ullamcorper at eget odio. Donec sed tristique urna. Pellentesque dictum risus quam, et consequat nulla viverra id. Vestibulum viverra ultricies orci non placerat. Etiam porta tellus quis justo faucibus scelerisque. Duis sit amet arcu ac turpis aliquet condimentum eu vel erat. Donec dui velit, varius sit amet tristique quis, convallis in orci. Vestibulum justo mauris, sagittis vitae justo et, blandit placerat libero. Mauris vel sagittis tortor. Morbi mollis mi sed ipsum tristique dignissim. Curabitur placerat augue eget lectus congue suscipit.</p>

source/_patterns/00-atoms/03-buttons/default.mustache

+<button class="btn">
+  <div class="btn-body">A button</div>
+</button>

source/_patterns/00-atoms/03-buttons/green.mustache

+<button class="btn is-green">
+  <div class="btn-body">
+    A green button
+  </div>
+ </button>
+<button class="btn is-green is-lg">
+  <div class="btn-body">
+    A green button
+  </div>
+ </button>

source/_patterns/00-atoms/03-buttons/inverted.mustache

+<button class="btn is-inverted">
+  <div class="btn-body">
+    An inverted button
+  </div>
+ </button>
+
+ <button class="btn is-inverted to-faded">
+  <div class="btn-body">
+    An inverted button that doesn't go fully black
+  </div>
+ </button>

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

+<div class="badge is-condensed">
+  <div class="badge-avatar">
+    <img
+      src="http://placehold.it/64x64"
+      alt=""
+    />
+  </div>
+  <div class="badge-body">
+    <span class="h-xs badge-title">Mikuláš Peksa</span>
+    <a href="mailto:example@example.com" class="badge-link">
+      <i class="fas fa-envelope"></i> example@example.com
+    </a>
+  </div>
+</div>

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

+<div class="badge">
+  <div class="badge-avatar">
+    <img
+      src="http://placehold.it/100x100"
+      alt=""
+    />
+  </div>
+  <div class="badge-body">
+    <span class="h-sm-heavy">Mikuláš Peksa</span>
+    <p class="badge-occupation">Předseda krajského sdružení Pardubického kraje</p>
+    <a href="tel:+420777123123" class="badge-link is-dimmed">
+      <i class="fas fa-phone"></i> +420 775 609 939
+    </a>
+    <a href="mailto:example@example.com" class="badge-link is-dimmed">
+      <i class="fas fa-envelope"></i> example@example.com
+    </a>
+  </div>
+</div>

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

+<footer class="footer">
+  <section class="footer-section footer-main">
+    <div class="top">
+      <div class="container">
+        <div class="grid grid-cols-12">
+          <div class="md:col-span-3 col-span-12 footer-copy">
+            <img
+              src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
+              alt=""
+              class="footer-brand w-9 md:w-10 pb-3"
+            />
+            <p class="para hidden md:block">
+              Piráti, 2020. Všechna práva vyhlazena.Sdílejte a nechte
+              ostatní sdílet za stejných podmínek.
+            </p>
+          </div>
+          <div class="md:col-span-2 col-span-12">
+            <span class="text-xl uppercase is-highlighted">Nová sekce</span>
+            <ul class="footer-links">
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+            </ul>
+          </div>
+          <div class="md:col-span-2 col-span-12">
+            <span class="text-xl uppercase is-highlighted">Nová sekce</span>
+            <ul class="footer-links">
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+            </ul>
+          </div>
+          <div class="md:col-span-2 col-span-12">
+            <span class="text-xl uppercase is-highlighted">Nová sekce</span>
+            <ul class="footer-links">
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+              <li class="footer-link">
+                <a href="#">Lorem ipsum</a>
+              </li>
+            </ul>
+          </div>
+          <div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
+            <div class="mb-2">
+              <div class="footer-social-links is-highlighted pb-2">
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fas fa-rss"></i></a>
+                <a href="#"><i class="fab fa-instagram"></i></a>
+                <a href="#"><i class="fab fa-flickr"></i></a>
+              </div>
+              <a href="#"><i class="fas fa-envelope"></i> Dejte nám vědět</a
+              >
+            </div>
+            <a href="#" class="btn has-icon is-inverted is-lg is-fullwidth md:is-auto mb-1">
+              <div class="btn-body-wrap">
+                <span class="btn-body">Přispěj</span>
+                <div class="btn-icon">
+                  <img src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/icons/money.svg" alt="" />
+                </div>
+              </div>
+            </a>
+            <a href="#" class="btn has-icon is-green is-lg is-fullwidth md:is-auto">
+              <div class="btn-body-wrap">
+                <span class="btn-body">Naloď se</span>
+                <div class="btn-icon">
+                  <img src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/icons/onboard.svg" alt="" />
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <hr class="footer-splitter" />
+  <section class="footer-section is-dense footer-sub">
+    <div class="container">
+      <div class="grid grid-cols-12 justify-content-left">
+        <div class="md:col-span-3 col-span-12">
+          <span class="text-xl uppercase is-highlighted">Otevřenost</span>
+        </div>
+        <div class="lg:col-span-2 md:col-span-3 col-span-12">
+          <ul>
+            <li>
+              <a href="#">Transparentní účet</a>
+            </li>
+          </ul>
+        </div>
+        <div class="lg:col-span-2 md:col-span-3 col-span-12">
+          <ul>
+            <li>
+              <a href="#">Registr smluv</a>
+            </li>
+          </ul>
+        </div>
+        <div class="lg:col-span-2 md:col-span-3 col-span-12">
+          <ul>
+            <li>
+              <a href="#">Otevřené účetnictví</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="footer-section footer-inv">
+    <div class="container">
+      <div class="footer-contacts">
+        <div class="footer-contact">
+          {{> 01-molecules/00-badge/condensed }}
+        </div>
+        <div class="footer-contact">
+          {{> 01-molecules/00-badge/condensed }}
+        </div>
+        <div class="footer-contact">
+          {{> 01-molecules/00-badge/condensed }}
+        </div>
+        <div class="mt-4 lg:mt-0 lg:text-right footer-contact">
+          <a href="#" class="btn is-basic is-inverted is-fullwidth md:is-auto is-lg to-faded">
+            <span class="btn-body">Kontakt</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</footer>

source/css/atoms/button.pcss

+.btn {
+  @apply inline-block text-center font-normal max-w-xs;
+
+  .btn-body,
+  .btn-icon {
+    @apply transition duration-200 bg-black text-white;
+  }
+
+  .btn-body {
+    @apply block;
+    padding: .5em 2em;
+  }
+
+  &:hover {
+    @apply no-underline;
+  }
+}
+
+.btn.has-icon {
+  .btn-body-wrap {
+    @apply flex;
+  }
+
+  .btn-icon {
+    @apply border-l border-black px-2 flex;
+
+    img {
+      @apply w-2;
+    }
+  }
+
+  &:hover .btn-icon {
+    @apply border-l border-grey-500 bg-black;
+
+    svg, i {
+      @apply text-white;
+      fill: theme('colors.white');
+    }
+  }
+}
+
+.btn.is-green {
+  .btn-body,
+  .btn-icon {
+    @apply bg-green-100 text-white;
+  }
+
+  &:hover .btn-body,
+  &:hover .btn-icon {
+    @apply bg-black text-white;
+  }
+
+  &.to-faded:hover .btn-body {
+    @apply bg-grey-500 text-white;
+  }
+
+  .btn-icon {
+    @apply border-l border-green-200 px-2 flex;
+  }
+}
+
+
+.btn.is-inverted {
+  .btn-body,
+  .btn-icon {
+    @apply bg-white text-black;
+  }
+
+  &:hover .btn-body,
+  &:hover .btn-icon {
+    @apply bg-black text-white;
+  }
+
+  &.to-faded:hover .btn-body {
+    @apply bg-grey-500 text-white;
+  }
+}
+
+.btn.is-lg .btn-body {
+  @apply text-lg;
+}
+
+@responsive {
+  .btn.is-fullwidth {
+    @apply w-full max-w-full;
+
+    .btn-body-wrap {
+      @apply w-full max-w-full;
+    }
+
+    .btn-body {
+      flex: 1;
+    }
+  }
+
+  .btn.is-auto {
+    @apply w-auto;
+  }
+}

source/css/atoms/heading.pcss

+.h-xl {
+  @apply text-7xl font-alt font-normal leading-tight;
+}
+
+.h-lg {
+  @apply text-6xl font-alt font-normal leading-tight;
+}
+
+.h-md {
+  @apply text-4xl font-alt font-normal leading-tight;
+}
+
+.h-base {
+  @apply text-3xl font-condensed font-medium leading-tight;
+}
+
+.h-base-heavy {
+  @apply text-3xl font-condensed font-bold leading-tight;
+}
+
+.h-sm {
+  @apply text-2xl font-condensed font-medium leading-tight;
+}
+
+.h-sm-heavy {
+  @apply text-2xl font-condensed font-bold leading-tight;
+}
+
+.h-xs {
+  @apply text-lg font-condensed font-medium leading-tight;
+}
+
+.h-xs-heavy {
+  @apply text-lg font-condensed font-bold leading-tight;
+}
+
+.h-xs-allcaps {
+  @apply text-lg font-condensed font-light uppercase leading-tight;
+}

source/css/atoms/paragraph.pcss

+.para {
+  @apply font-body font-normal leading-normal;
+}

source/css/molecules/badge.pcss

+.badge {
+  @apply flex items-center font-body;
+
+  .badge-avatar {
+    @apply text-center;
+
+    img {
+      @apply rounded-full w-8 block;
+    }
+  }
+
+  .badge-body {
+    @apply text-left ml-3;
+  }
+
+  .badge-title {
+    @apply block;
+  }
+
+  .badge-occupation {
+    @apply uppercase text-sm max-w-sm my-1;
+  }
+
+  .badge-link {
+    @apply text-sm font-light block w-full;
+
+    i {
+      @apply mr-1;
+    }
+
+    @media (max-width: 1200px) {
+      i {
+        display: none;
+      }
+    }
+
+    &.is-dimmed {
+      @apply text-grey-300;
+    }
+  }
+}
+
+.badge.is-condensed {
+  .badge-title {
+    @apply mb-1;
+  }
+
+  .badge-avatar img {
+    @apply w-7 block;
+  }
+
+  .badge-body {
+    @apply ml-2;
+  }
+}

source/css/organisms/footer.pcss

+.footer {
+  @apply text-grey-200;
+}
+
+.footer-splitter {
+  @apply border-t border-grey-400;
+}
+
+.footer-section {
+  @apply py-3;
+
+  @screen md {
+    @apply py-6;
+
+    &.is-dense {
+      @apply py-3;
+    }
+  }
+}
+
+.footer-inv {
+  @apply bg-black;
+}
+
+.footer-main,
+.footer-sub {
+  @apply bg-grey-500;
+}
+
+.footer .is-highlighted {
+  @apply text-white;
+}
+
+.footer-contacts {
+  @apply grid grid-cols-12;
+}
+
+.footer-contacts .footer-contact {
+  @apply col-span-12 text-white;
+
+  @screen lg {
+    @apply col-span-6;
+  }
+
+  @screen xl {
+    @apply col-span-3;
+  }
+}
+
+.footer-copy {
+  @apply pr-7;
+  order: -2;
+
+  @screen sm {
+    order: 0;
+  }
+}
+
+.footer-links {
+  @apply mt-3;
+}
+
+.footer-link {
+  @apply mb-1;
+}
+
+.footer-social {
+  order: -1;
+
+  @screen sm {
+    @apply text-right;
+    order: 1;
+  }
+}
+
+.footer-social-links a {
+  @apply text-white ml-1;
+}

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;
+}

source/css/style.css

+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap');
+
+/**
+ * This injects Tailwind's base styles and any base styles registered by
+ * plugins.
+ */
+@import "tailwindcss/base";
+
+/**
+ * This injects Tailwind's component classes and any component classes
+ * registered by plugins.
+ */
+@import "tailwindcss/components";
+
+/**
+ * Custom components
+ */
+@import "./atoms/button.pcss";
+@import "./atoms/heading.pcss";
+@import "./atoms/paragraph.pcss";
+@import "./molecules/badge.pcss";
+@import "./organisms/footer.pcss";
+
+/**
+ * This injects Tailwind's utility classes and any utility classes registered
+ * by plugins.
+ */
+@import "tailwindcss/utilities";
+
+/**
+ * Custom utilities
+ */
+@import "./utils.pcss";
+
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  @apply font-body font-normal leading-none antialiased;
+  font-size: 1rem;
+}
+
+a:hover {
+  @apply underline;
+}

source/css/utils.pcss

+.copyleft {
+  transform: matrix(-1, 0, 0, 1, 0, 0) !important;
+}

source/js/.gitkeep

+keeping this dir around
\ No newline at end of file