main: misc template updates

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

-<div class="section-clip py-32 bg-no-repeat"
-     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+<div class="newsletter-section section-clip bg-cover bg-no-repeat flex"
+     style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
   <div class="container--medium mx-auto px-4 ">
     <div class="w-6/12 flex flex-col">
       <div class="flex mb-4">
@@ -17,6 +17,5 @@
         </div>
       </div>
     </div>
-    <div></div>
   </div>
 </div>

main/styleguide/source/_patterns/templates/article-detail.mustache

@@ -88,3 +88,5 @@
   </div>
   {{> organisms-newsletter-section }}
 </main>
+
+{{> organisms-footer }}

main/styleguide/source/_patterns/templates/contact.mustache

@@ -177,4 +177,5 @@
     </div>
   </section>
 </main>
+
 {{> organisms-footer }}

main/styleguide/source/_patterns/templates/person.mustache

@@ -6,8 +6,8 @@
   <section class="container--narrow flex flex-wrap">
     <div class="leading-6 w-7/12">
       <article class="mb-24">
-        <p class="font-bold mb-5">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus.
+        <p class="font-alt mb-5">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.
         </p>
 
         <p class="mb-5">
@@ -19,8 +19,7 @@
         </p>
       </article>
     </div>
-    <!-- TODO remove this-->
-    <div class="w-1/12"></div>
+    <div class="w-1/12"><!-- TODO solve this better --></div>
     <div class="w-4/12">
       <div class="bg-grey-100 mb-1 px-7 py-9">
         <div class="flex mb-2">
@@ -87,7 +86,7 @@
       {{> molecules-person-article-preview }}
     </div>
   </section>
-  <section class="container--medium mb-40">
+  <section class="container--medium mb-20">
     <h2 class="font-alt mb-12 text-4xl">
       Další lidé z poslanecké sněmovny
     </h2>
@@ -97,5 +96,7 @@
       {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }}
     </div>
   </section>
+
+  {{> organisms-newsletter-section }}
 </main>
 {{> organisms-footer }}

main/styleguide/source/css/atoms/container.pcss

-.container {
-}
-
 .container--default {
   @apply max-w-screen-xl;
 }
@@ -21,10 +18,9 @@
 }
 
 .section-clip {
-  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
+  clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
 }
 
-
 @responsive {
   /* Removes default container padding from the element. */
   /* @note: needs to be kept in sync with tailwind configuration */

main/styleguide/source/css/atoms/extra_sizing.pcss

+.newsletter-section {
+  height: 981px;
+  margin-bottom: -3.2vw;
+}
+
+.person-box-medium {
+  max-width: 485px;
+  width: 485px;
+}
+
+.person-box {
+  width: 520px;
+}
+
+.person-box-big {
+  max-width: 576px;
+  width: 576px;
+}
+
+.photo-header {
+  height: 36rem;
+}

main/styleguide/source/css/molecules/person_box.pcss

-.person-box {
-  width: 520px;
-}

main/styleguide/source/css/molecules/person_box_big.pcss

-.person-box-big {
-  max-width: 576px;
-  width: 576px;
-}

main/styleguide/source/css/molecules/person_box_medium.pcss

-.person-box-medium {
-  max-width: 485px;
-  width: 485px;
-}

main/styleguide/source/css/molecules/photo_header.pcss

-.photo-header {
-  height: 36rem;
-}

main/styleguide/source/css/organisms/footer.pcss

 .footer-clip {
-    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(0 8.25%, 100% 0, 100% 100%, 0% 100%);
+    /* TODO responsive */
 }
 
 .footer__container {
-    /* TODO responsive (if needed...) */
-
+    /* TODO user common container from container.pcss */
     margin-left: auto;
     margin-right: auto;
     max-width: 1416px;

main/styleguide/source/css/style.pcss

@@ -19,16 +19,13 @@
  * Custom components
 */
 @import "./atoms/container.pcss";
+@import "./atoms/extra_sizing.pcss";
 @import "./atoms/flag.pcss";
 @import "./atoms/form-field.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/icons.pcss";
 
 @import "./molecules/contact_box.pcss";
-@import "./molecules/person_box.pcss";
-@import "./molecules/person_box_medium.pcss";
-@import "./molecules/person_box_big.pcss";
-@import "./molecules/photo_header.pcss";
 @import "./molecules/sliding_button.pcss";
 @import "./molecules/switch.pcss";