[ADD] heading

main/ui-main/public/index.html

@@ -69,6 +69,26 @@
     </div>
   </div>
 </nav>
+<header>
+</header>
+<main class="container container--default pt-8 lg:py-16">
+  <div>
+    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
+      Co právě děláme
+    </h2>
+    <div>
+      <div></div>
+    </div>
+    <a href="#"
+       class="btn btn--hoveractive font-condensed uppercase">
+      <div class="btn__body-wrap">
+        <div class="btn__body ">Zobrazit starší</div>
+      </div>
+    </a>
+  </div>
+</main>
+<footer></footer>
+
 <footer>
 
 </footer>

main/ui-main/public/styles.css

@@ -1615,6 +1615,224 @@ video {
   max-width: 1430px;
 }
 
+@responsive {
+  /* Removes default container padding from the element. */
+
+  /* @note: needs to be kept in sync with tailwind configuration */
+
+  .container-padding--zero {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  @media (min-width: 1200px) {
+    .container-padding--zero {
+      margin-left: -2rem;
+      margin-right: -2rem
+    }
+  }
+
+  .container-padding--auto {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.h-default{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.h-alt{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 0.96;
+}
+
+.h-allcaps{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 1.25;
+}
+
+@responsive {
+  .head-alt-xl,
+  .content-block .head-alt-xl{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 5.3rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-lg,
+  .content-block .head-alt-lg{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-md,
+  .content-block .head-alt-md{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 2.45rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-base,
+  .content-block .head-alt-base{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-sm,
+  .content-block .head-alt-sm{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-xs,
+  .content-block .head-alt-xs{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-2xs,
+  .content-block .head-alt-2xs{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-base,
+  .content-block .head-base{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-sm,
+  .content-block .head-sm{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-xs,
+  .content-block .head-xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-2xs,
+  .content-block .head-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-heavy-base,
+  .content-block .head-heavy-base{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-sm,
+  .content-block .head-heavy-sm{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-xs,
+  .content-block .head-heavy-xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-2xs,
+  .content-block .head-heavy-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-2xs,
+  .content-block .head-allcaps-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-3xs,
+  .content-block .head-allcaps-3xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-4xs,
+  .content-block .head-allcaps-4xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: .875rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-heavy-2xs,
+  .content-block .head-allcaps-heavy-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-heavy-3xs,
+  .content-block .head-allcaps-heavy-3xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-heavy-4xs,
+  .content-block .head-allcaps-heavy-4xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: .875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+}
+
 .navbar-menu__link{
   cursor: pointer;
   font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
@@ -1694,6 +1912,15 @@ video {
 * by plugins.
 */
 
+.clear-both{
+  clear: both;
+}
+
+.mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -1702,10 +1929,34 @@ video {
   margin-right: 4rem;
 }
 
+.flex{
+  display: flex;
+}
+
 .w-36{
   width: 9rem;
 }
 
+.items-center{
+  align-items: center;
+}
+
+.justify-items-center{
+  justify-items: center;
+}
+
+.pt-8{
+  padding-top: 2rem;
+}
+
+.pb-4{
+  padding-bottom: 1rem;
+}
+
+.text-center{
+  text-align: center;
+}
+
 .font-condensed{
   font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
 }
@@ -1753,6 +2004,14 @@ video {
 
 /* @note: needs to be kept in sync with tailwind configuration */
 
+.head-alt-md,
+  .content-block .head-alt-md{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 2.45rem;
+  font-weight: 400;
+  line-height: 0.96;
+}
+
 ::-moz-selection {
   color: #ffffff;
   background: #3e8793;
@@ -1822,3 +2081,24 @@ a.icon-link:hover span{
   height: 100%;
   width: 100%;
 }
+
+@media (min-width: 768px){
+  .md\:head-alt-lg,
+  .content-block .md\:head-alt-lg{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+}
+
+@media (min-width: 992px){
+  .lg\:py-16{
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .lg\:pb-8{
+    padding-bottom: 2rem;
+  }
+}

main/ui-main/src/css/atoms/heading.pcss

+.h-default {
+  @apply font-condensed font-medium leading-tight;
+}
+
+.h-alt {
+  @apply font-alt font-normal;
+  line-height: 0.96;
+}
+
+.h-allcaps {
+  @apply font-condensed font-normal uppercase leading-tight;
+}
+
+
+@responsive {
+  .head-alt-xl,
+  .content-block .head-alt-xl {
+    @apply text-7xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-lg,
+  .content-block .head-alt-lg {
+    @apply text-6xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-md,
+  .content-block .head-alt-md {
+    @apply text-4xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-base,
+  .content-block .head-alt-base {
+    @apply text-3xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-sm,
+  .content-block .head-alt-sm {
+    @apply text-2xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-xs,
+  .content-block .head-alt-xs {
+    @apply text-xl font-alt font-normal;
+    line-height: 0.96;
+  }
+
+  .head-alt-2xs,
+  .content-block .head-alt-2xs {
+    @apply text-lg font-alt font-normal;
+    line-height: 0.96;
+  }
+
+
+
+  .head-base,
+  .content-block .head-base {
+    @apply text-3xl font-condensed font-medium leading-tight;
+  }
+
+  .head-sm,
+  .content-block .head-sm {
+    @apply text-2xl font-condensed font-medium leading-tight;
+  }
+
+  .head-xs,
+  .content-block .head-xs {
+    @apply text-xl font-condensed font-medium leading-tight;
+  }
+
+  .head-2xs,
+  .content-block .head-2xs {
+    @apply text-lg font-condensed font-medium leading-tight;
+  }
+
+
+
+  .head-heavy-base,
+  .content-block .head-heavy-base {
+    @apply text-3xl font-condensed font-bold leading-tight;
+  }
+
+  .head-heavy-sm,
+  .content-block .head-heavy-sm {
+    @apply text-2xl font-condensed font-bold leading-tight;
+  }
+
+  .head-heavy-xs,
+  .content-block .head-heavy-xs {
+    @apply text-xl font-condensed font-bold leading-tight;
+  }
+
+  .head-heavy-2xs,
+  .content-block .head-heavy-2xs {
+    @apply text-lg font-condensed font-bold leading-tight;
+  }
+
+
+
+  .head-allcaps-2xs,
+  .content-block .head-allcaps-2xs {
+    @apply text-lg font-condensed font-normal uppercase leading-tight;
+  }
+
+  .head-allcaps-3xs,
+  .content-block .head-allcaps-3xs {
+    @apply text-base font-condensed font-normal uppercase leading-tight;
+  }
+
+  .head-allcaps-4xs,
+  .content-block .head-allcaps-4xs {
+    @apply text-sm font-condensed font-normal uppercase leading-tight;
+  }
+
+
+
+
+  .head-allcaps-heavy-2xs,
+  .content-block .head-allcaps-heavy-2xs {
+    @apply text-lg font-condensed font-bold uppercase leading-tight;
+  }
+
+  .head-allcaps-heavy-3xs,
+  .content-block .head-allcaps-heavy-3xs {
+    @apply text-base font-condensed font-bold uppercase leading-tight;
+  }
+
+  .head-allcaps-heavy-4xs,
+  .content-block .head-allcaps-heavy-4xs {
+    @apply text-sm font-condensed font-bold uppercase leading-tight;
+  }
+}

main/ui-main/src/css/style.pcss

@@ -19,6 +19,7 @@
  * Custom components
  */
 @import "./atoms/container.pcss";
+@import "./atoms/heading.pcss";
 @import "./atoms/icons.pcss";