about summary refs log tree commit diff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app.html1
-rw-r--r--components/CampMap.vue36
-rw-r--r--components/DayCountdown.vue47
-rw-r--r--components/JoinUs.vue6
-rw-r--r--components/ObozWidget.vue50
-rw-r--r--components/Posts/EmptyCampStory.vue19
-rw-r--r--components/Posts/PostList/PurePostList.vue9
-rw-r--r--components/TheHeader.vue18
-rw-r--r--modernizr.config.json9
-rw-r--r--netlify.toml7
-rw-r--r--nuxt.config.js3
-rw-r--r--pages/index.vue4
-rw-r--r--pages/oboz/2020.vue203
-rw-r--r--static/_headers1
-rw-r--r--static/assets/2020.svg62
-rw-r--r--static/assets/bg.jpgbin0 -> 669154 bytes
-rw-r--r--static/assets/feather.svg18
-rw-r--r--static/assets/oboz.jpgbin0 -> 606264 bytes
-rw-r--r--static/assets/oboz.svg4
-rw-r--r--static/assets/oboz.webpbin0 -> 268906 bytes
-rw-r--r--static/assets/tomahawk.svg31
-rw-r--r--static/modernizr.js3
-rw-r--r--tests/unit/__snapshots__/storybook.test.js.snap2
23 files changed, 518 insertions, 15 deletions
diff --git a/app.html b/app.html
index 90f5368..e1236b9 100644
--- a/app.html
+++ b/app.html
@@ -3,6 +3,7 @@
   <head {{ HEAD_ATTRS }}>
     {{ HEAD }}
     <meta property="fb:pages" content="496021544115239" />
+		<script src="/modernizr.js"></script>
   </head>
   <body {{ BODY_ATTRS }}>
     {{ APP }}
diff --git a/components/CampMap.vue b/components/CampMap.vue
new file mode 100644
index 0000000..eae1fc0
--- /dev/null
+++ b/components/CampMap.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="mapouter">
+    <div class="gmap_canvas">
+      <iframe
+        id="gmap_canvas"
+        :src="src"
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CampMap',
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style>
+.mapouter,
+.gmap_canvas,
+#gmap_canvas {
+  width: 100%;
+  height: 50vh;
+  max-height: 300px;
+}
+</style>
diff --git a/components/DayCountdown.vue b/components/DayCountdown.vue
new file mode 100644
index 0000000..9415917
--- /dev/null
+++ b/components/DayCountdown.vue
@@ -0,0 +1,47 @@
+<template>
+  <client-only>
+    <div class="countdown">
+      {{ text }} <span>{{ days }} dni</span>
+    </div>
+  </client-only>
+</template>
+
+<script>
+export default {
+  name: 'DayCountdown',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    endDate: {
+      type: Date,
+      required: true,
+    },
+    startDate: {
+      type: Date,
+      default: () => new Date(Date.now()),
+    },
+  },
+  computed: {
+    days() {
+      return Math.round(
+        (this.endDate.getTime() - this.startDate.getTime()) / 86400000
+      )
+    },
+  },
+}
+</script>
+
+<style>
+.countdown {
+  background: #ffffff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  margin: 50px 10px;
+}
+
+.countdown span {
+  font-weight: 600;
+}
+</style>
diff --git a/components/JoinUs.vue b/components/JoinUs.vue
index a219d16..65431fa 100644
--- a/components/JoinUs.vue
+++ b/components/JoinUs.vue
@@ -21,12 +21,16 @@ export default {
 </script>
 
 <style scoped>
+.webp .joinus {
+  background-image: url('/assets/bg.webp');
+}
+
 .joinus {
   width: 100%;
 
   padding: 80px 20%;
 
-  background-image: url('/assets/bg.webp');
+  background-image: url('/assets/bg.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/components/ObozWidget.vue b/components/ObozWidget.vue
new file mode 100644
index 0000000..084feab
--- /dev/null
+++ b/components/ObozWidget.vue
@@ -0,0 +1,50 @@
+<template>
+  <section class="oboz-widget">
+    <nuxt-link to="/oboz/2020">
+      <img src="/assets/oboz.svg" />
+    </nuxt-link>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'ObozWidget'
+}
+</script>
+
+<style scoped>
+.webp .oboz-widget {
+  background-image: url('/assets/oboz.webp');
+}
+
+.oboz-widget {
+  width: 100%;
+
+  margin-top: 50px;
+  padding: 80px 20%;
+
+  background-image: url('/assets/oboz.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+img {
+  max-width: 60vmin;
+  transition: all 1s ease-in-out;
+}
+
+img:hover {
+  transform: scale(1.1);
+}
+
+@media (max-width: 500px) {
+  .oboz-widget {
+    padding: 80px 20px;
+  }
+}
+</style>
diff --git a/components/Posts/EmptyCampStory.vue b/components/Posts/EmptyCampStory.vue
new file mode 100644
index 0000000..b9ecd12
--- /dev/null
+++ b/components/Posts/EmptyCampStory.vue
@@ -0,0 +1,19 @@
+<template>
+  <div style="width: 100%">
+    <h3 style="margin: 10vh 10vmin 0 10vmin">
+      Tutaj niedługo znajdziesz relację z obozu
+    </h3>
+    <pure-post-list loading :posts="[]" style="margin-bottom: 30px" />
+  </div>
+</template>
+
+<script>
+import PurePostList from '~/components/Posts/PostList/PurePostList'
+
+export default {
+  name: 'EmptyCampStory',
+  components: {
+    PurePostList,
+  },
+}
+</script>
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index c87b9dc..210973e 100644
--- a/components/Posts/PostList/PurePostList.vue
+++ b/components/Posts/PostList/PurePostList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="post-list">
-    <div v-if="loading" class="post-list-container">
+    <div v-if="loading" class="post-list-container loading">
       <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
     </div>
     <div v-else-if="!posts" class="no-posts">Brak wpisów</div>
@@ -53,6 +53,13 @@ export default {
   justify-content: center;
 }
 
+@media (max-width: 920px) {
+  .post-list-container.loading div:nth-child(1),
+  .post-list-container.loading div:nth-child(2) {
+    display: none;
+  }
+}
+
 @keyframes loading {
   0%,
   100% {
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 4d17616..8724fa7 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -26,33 +26,33 @@ import NavLink from './NavLink'
 export default {
   name: 'TheHeader',
   components: {
-    NavLink
+    NavLink,
   },
   props: {
     routes: {
       type: Array,
-      required: true
+      required: true,
     },
     title: {
       type: String,
-      required: true
+      required: true,
     },
     logo: {
       type: String,
       required: false,
-      default: () => ''
-    }
+      default: () => '',
+    },
   },
   data: function() {
     return {
-      showMenu: false
+      showMenu: false,
     }
   },
   methods: {
     toggleMenu() {
       this.showMenu = !this.showMenu
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -83,6 +83,7 @@ export default {
 }
 
 .title {
+  z-index: 99;
   font-size: 30px;
   flex-shrink: 0;
 
@@ -100,6 +101,7 @@ export default {
 }
 
 .links {
+  z-index: 98;
   display: flex;
   flex-direction: row;
   padding: 0;
diff --git a/modernizr.config.json b/modernizr.config.json
new file mode 100644
index 0000000..69deea9
--- /dev/null
+++ b/modernizr.config.json
@@ -0,0 +1,9 @@
+{
+  "minify": true,
+  "options": [
+    "setClasses"
+  ],
+  "feature-detects": [
+    "test/img/webp"
+  ]
+}
diff --git a/netlify.toml b/netlify.toml
index 5c94b41..49b3af9 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,6 +4,7 @@ publish = "dist/"
 command = "npm run build"
 
 [[redirects]]
-    from = "/api/posts"
-    to = "/api/posts.json"
-    status = 200
\ No newline at end of file
+ from = "/api/*"
+ to = "https://api-puszcza.netlify.com/api/:splat"
+ status = 200
+ force = true
diff --git a/nuxt.config.js b/nuxt.config.js
index e5b3d4d..f454cac 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -4,6 +4,9 @@ const BASE_URL = process.env.DEPLOY_PRIME_URL || 'http://localhost:3000'
 
 export default {
   mode: 'universal',
+  server: {
+    host: '0.0.0.0'
+  },
   /*
    ** Headers of the page
    */
diff --git a/pages/index.vue b/pages/index.vue
index 045025d..8cf6327 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,6 +5,7 @@
       <h1>Ostatnie wpisy z kroniki</h1>
       <post-list :posts="posts" :max="4" />
     </div>
+    <oboz-widget />
     <facebook-feed />
   </div>
 </template>
@@ -13,11 +14,12 @@
 import JoinUs from '~/components/JoinUs.vue'
 import FacebookFeed from '~/components/Facebook/FacebookFeed.vue'
 import PostList from '~/components/Posts/PostList'
+import ObozWidget from '~/components/ObozWidget'
 import postListParentMixin from '~/components/Posts/PostList/parentMixin'
 
 export default {
   name: 'HomeView',
-  components: { JoinUs, FacebookFeed, PostList },
+  components: { JoinUs, FacebookFeed, PostList, ObozWidget },
   mixins: [postListParentMixin]
 }
 </script>
diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue
new file mode 100644
index 0000000..119220d
--- /dev/null
+++ b/pages/oboz/2020.vue
@@ -0,0 +1,203 @@
+<template>
+  <section class="oboz">
+    <div class="header">
+      <div class="logo">
+        <img style="z-index: 1" src="/assets/2020.svg" alt="" />
+        <h1 style="z-index: 9">Obóz 2020</h1>
+      </div>
+      <div class="troops">
+        <h3>19 PDH Puszcza</h3>
+        <h3>7 PDH Binduga</h3>
+        <h3>7 PDH Watra</h3>
+      </div>
+    </div>
+    <day-countdown
+      v-if="awaiting"
+      text="Do obozu zostało:"
+      :end-date="endDate"
+    />
+    <google-drive-link
+      v-else-if="photos"
+      text="Zobacz zdjęcia z obozu"
+      :link="photos"
+    />
+    <camp-map
+      src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed"
+    />
+    <div v-if="posts" style="width: 100%">
+      <h3 class="story" style="margin: 10vh 10vmin">
+        To się działo na obozie
+      </h3>
+      <pure-post-list :posts="posts" style="margin-bottom: 30px" />
+    </div>
+    <empty-camp-story v-else />
+  </section>
+</template>
+
+<script>
+import axios from 'axios'
+
+import PurePostList from '~/components/Posts/PostList/PurePostList'
+import DayCountdown from '~/components/DayCountdown'
+import CampMap from '~/components/CampMap'
+import EmptyCampStory from '~/components/Posts/EmptyCampStory'
+import GoogleDriveLink from '~/components/GoogleDriveLink'
+
+import { parsePosts } from '~/components/Posts/PostList'
+
+export default {
+  components: {
+    PurePostList,
+    DayCountdown,
+    CampMap,
+    GoogleDriveLink,
+    EmptyCampStory,
+    PurePostList,
+  },
+  head() {
+    return {
+      meta: [
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: 'Obóz 2020',
+        },
+      ],
+    }
+  },
+  async asyncData() {
+    try {
+      let posts = await axios.get(
+        `https://puszcza.netlify.com/api/category/oboz2020.json`
+      )
+      console.log(posts)
+      return {
+        posts: parsePosts(posts.data),
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+  data() {
+    return {
+      posts: null,
+      endDate: new Date(2020, 6, 7),
+    }
+  },
+  computed: {
+    days() {
+      let now = new Date(Date.now())
+      return Math.round((this.endDate.getTime() - now.getTime()) / 86400000)
+    },
+    awaiting() {
+      return this.days > 0
+    },
+  },
+}
+</script>
+
+<style scoped>
+.oboz {
+  position: relative;
+}
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 10vmax 0 5vmax 0;
+}
+
+h1 {
+  font-size: 3em;
+  background: black;
+  color: white;
+  padding: 0.25em 0.75em;
+  width: max-content;
+  margin-top: -4px;
+}
+
+.troops {
+  display: flex;
+  flex-direction: row;
+}
+
+.troops h3 {
+  margin: 10px;
+}
+
+@media (max-width: 480px) {
+  .troops {
+    flex-direction: column;
+  }
+
+  .logo img {
+    width: 100px;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+}
+
+.oboz::after {
+  width: 100px;
+  height: 200px;
+  background: url('/assets/feather.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  bottom: 0;
+  right: 5%;
+}
+
+@media (min-width: 750px) {
+  .oboz::after {
+    content: '';
+  }
+}
+
+@media (min-width: 910px) {
+  .oboz::after {
+    content: none;
+  }
+}
+
+@media (min-width: 1210px) {
+  .oboz::after {
+    content: '';
+  }
+}
+
+.story::before,
+.story::after {
+  content: '';
+  background-image: url('/assets/tomahawk.svg');
+  background-size: contain;
+  width: 70px;
+  height: 70px;
+  display: block;
+  top: 30px;
+  margin: auto;
+  margin-bottom: 20px;
+}
+
+.story::after {
+  display: none;
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  filter: FlipX;
+  -ms-filter: 'FlipX';
+}
+
+@media (min-width: 510px) {
+  .story::before,
+  .story::after {
+    display: inline-block;
+    position: relative;
+    margin: 0 10px;
+  }
+}
+</style>
diff --git a/static/_headers b/static/_headers
new file mode 100644
index 0000000..cb762ef
--- /dev/null
+++ b/static/_headers
@@ -0,0 +1 @@
+Access-Control-Allow-Origin: *
diff --git a/static/assets/2020.svg b/static/assets/2020.svg
new file mode 100644
index 0000000..4fd38c3
--- /dev/null
+++ b/static/assets/2020.svg
@@ -0,0 +1,62 @@
+<svg width="140" height="110" viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="140" height="110">
+<rect width="139.635" height="109.654" transform="matrix(1 0 0 -1 0.182617 110)" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M127.988 41.3429L111.024 47.2181L108.592 54.0467L115.623 59.5185L107.986 55.7504L86.7069 115.505L91.1919 122.084L99.0997 121.152L121.67 81.0958L116.835 77.7585L122.28 80.0132L116.87 76.1874L122.89 78.9306L134.683 58.0001L127.988 41.3429Z" fill="#F7F7F7"/>
+<path d="M134.683 58.0001L125.331 74.6006L104.631 65.1672L107.979 55.7402L115.623 59.5185L108.592 54.0467L111.024 47.2181L127.988 41.3429L134.683 58.0001Z" fill="#6C6C6C"/>
+<path d="M113.333 95.8916L118.02 87.5965L99.6189 79.2104L96.4337 88.1901L113.333 95.8916Z" fill="#F85A5A"/>
+<path d="M82.4637 141.236C84.5292 142.178 120.695 59.3356 119.944 58.9933C119.193 58.651 80.3982 140.295 82.4637 141.236Z" fill="#464646"/>
+<path d="M12.6991 41.3429L6.00393 58.0001L9.56224 64.3153L18.3043 62.599L10.45 65.8909L41.5871 121.152L49.4949 122.084L53.9799 115.505L38.556 72.1914L32.8652 73.651L38.1391 71.0208L31.7029 72.5933L37.7223 69.8502L29.6629 47.218L12.6991 41.3429Z" fill="#F7F7F7"/>
+<path d="M29.6629 47.218L36.0559 65.1672L15.3561 74.6006L10.4382 65.889L18.3043 62.599L9.56224 64.3153L6.00393 58.0001L12.6991 41.3429L29.6629 47.218Z" fill="#6C6C6C"/>
+<path d="M44.2532 88.1899L41.0679 79.2102L22.6665 87.5962L27.3539 95.8913L44.2532 88.1899Z" fill="#F85A5A"/>
+<path d="M58.2233 141.236C60.2887 140.295 21.494 58.651 20.7429 58.9933C19.9918 59.3356 56.1578 142.178 58.2233 141.236Z" fill="#464646"/>
+<g filter="url(#filter0_d)">
+<path d="M38.4018 12.6901L24.9386 31.2907L27.4005 40.2292L38.7808 40.8042L28.0147 42.4593L49.5578 120.676L59.0835 124.279L66.6853 117.501L60.9459 58.9753L53.4317 59.0258L60.7908 57.3935L52.3165 57.3536L60.6356 55.8117L57.6366 25.2305L38.4018 12.6901Z" fill="#F7F7F7"/>
+<path d="M57.6366 25.2305L60.0166 49.4843L31.4084 54.7865L28.0006 42.4533L38.7808 40.8042L27.4005 40.2292L24.9386 31.2907L38.4018 12.6901L57.6366 25.2305Z" fill="#6C6C6C"/>
+<path d="M63.0657 80.593L61.8913 68.4632L36.4595 73.1768L39.71 84.9218L63.0657 80.593Z" fill="#F85A5A"/>
+<path d="M63.9895 150.749C66.8442 150.22 43.9611 36.8916 42.9231 37.0839C41.8851 37.2763 61.1349 151.278 63.9895 150.749Z" fill="#464646"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M104.634 12.69L85.3993 25.2304L84.4945 34.4575L94.9128 39.0727L84.2687 36.7595L76.3506 117.501L83.9525 124.279L93.4782 120.676L109.094 63.9801L102.061 61.3344L109.516 62.4477L101.619 59.3736L109.938 60.9154L118.097 31.2907L104.634 12.69Z" fill="#F7F7F7"/>
+<path d="M118.097 31.2907L111.628 54.7864L83.0193 49.4842L84.2577 36.7489L94.9128 39.0727L84.4945 34.4575L85.3993 25.2304L104.634 12.69L118.097 31.2907Z" fill="#6C6C6C"/>
+<path d="M103.326 84.9216L106.576 73.1766L81.1445 68.4631L79.9701 80.5929L103.326 84.9216Z" fill="#F85A5A"/>
+<path d="M79.0467 150.749C81.9013 151.278 101.151 37.2762 100.113 37.0838C99.0752 36.8914 76.1921 150.219 79.0467 150.749Z" fill="#464646"/>
+</g>
+<g filter="url(#filter2_d)">
+<path d="M73.1402 3.21777L56.5127 19.0535L57.3045 28.2909L68.3895 30.9302L57.502 30.5955L64.4305 111.428L73.1402 116.707L81.8498 111.428L86.872 52.8362L79.4744 51.5166L87.0077 51.2527L78.6827 49.6691H87.1434L89.7676 19.0535L73.1402 3.21777Z" fill="#F7F7F7"/>
+<path d="M89.7676 19.0535L87.6879 43.3348H58.5924L57.4892 30.5871L68.3895 30.9302L57.3045 28.2909L56.5127 19.0535L73.1402 3.21777L89.7676 19.0535Z" fill="#6C6C6C"/>
+<path d="M85.017 74.4783L86.0727 62.3376H60.2078L61.2635 74.4783H85.017Z" fill="#F85A5A"/>
+<path d="M73.14 143.627C76.0433 143.627 74.1958 28.0269 73.1401 28.0269C72.0844 28.0269 70.2368 143.627 73.14 143.627Z" fill="#464646"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="18.0527" y="9.65991" width="66.2857" height="152.119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="58.6975" y="9.65991" width="66.2858" height="152.119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="52.5127" y="3.21777" width="41.2549" height="148.41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/static/assets/bg.jpg b/static/assets/bg.jpg
new file mode 100644
index 0000000..4e1456e
--- /dev/null
+++ b/static/assets/bg.jpg
Binary files differdiff --git a/static/assets/feather.svg b/static/assets/feather.svg
new file mode 100644
index 0000000..d7b90a1
--- /dev/null
+++ b/static/assets/feather.svg
@@ -0,0 +1,18 @@
+<svg width="208" height="255" viewBox="0 0 208 255" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M176.624 17.8418L133.672 24.7238L124.996 39.9956L139.471 56.0108L122.831 43.8057L46.9127 177.442L54.8467 195.029L74.1088 196.133L144.821 110.044L134.687 100.046L146.732 107.718L135.434 96.3122L148.643 105.391L185.592 60.4074L176.624 17.8418Z" fill="#F7F7F7"/>
+<path d="M185.592 60.4074L156.29 96.0855L110.864 64.8652L122.821 43.7788L139.471 56.0108L124.996 39.9956L133.672 24.7238L176.624 17.8418L185.592 60.4074Z" fill="#6C6C6C"/>
+<path d="M25.96 237.059C30.4927 240.175 151.651 57.7087 150.003 56.5759C148.355 55.4431 21.4272 233.944 25.96 237.059Z" fill="#464646"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="207.584" height="259.901" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/static/assets/oboz.jpg b/static/assets/oboz.jpg
new file mode 100644
index 0000000..e2cf1df
--- /dev/null
+++ b/static/assets/oboz.jpg
Binary files differdiff --git a/static/assets/oboz.svg b/static/assets/oboz.svg
new file mode 100644
index 0000000..39b4e00
--- /dev/null
+++ b/static/assets/oboz.svg
@@ -0,0 +1,4 @@
+<svg width="294" height="78" viewBox="0 0 294 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M294 0H0V78H294V0ZM58.7578 53.5938C61.6172 50.3281 63.0469 46.1953 63.0469 41.1953V40.6797C63.0469 35.7109 61.6094 31.5859 58.7344 28.3047C55.875 25.0234 52.1328 23.3828 47.5078 23.3828C42.8984 23.3828 39.1797 25.0234 36.3516 28.3047C33.5234 31.5859 32.1094 35.7109 32.1094 40.6797V41.1953C32.1094 46.1953 33.5234 50.3281 36.3516 53.5938C39.1953 56.8594 42.9219 58.4922 47.5312 58.4922C52.1562 58.4922 55.8984 56.8594 58.7578 53.5938ZM54.0234 32.0312C55.4922 34.2344 56.2266 37.1016 56.2266 40.6328V41.1953C56.2266 44.7891 55.5 47.6875 54.0469 49.8906C52.5938 52.0781 50.4219 53.1719 47.5312 53.1719C44.6719 53.1719 42.5234 52.0781 41.0859 49.8906C39.6641 47.6875 38.9531 44.7891 38.9531 41.1953V40.6328C38.9531 37.0703 39.6562 34.1953 41.0625 32.0078C42.4844 29.8203 44.6328 28.7266 47.5078 28.7266C50.3828 28.7266 52.5547 29.8281 54.0234 32.0312ZM87.9375 55.0938C89.625 52.8281 90.4688 49.8047 90.4688 46.0234V45.5312C90.4688 41.4844 89.625 38.25 87.9375 35.8281C86.25 33.3906 83.7969 32.1719 80.5781 32.1719C79.25 32.1719 78.0703 32.4453 77.0391 32.9922C76.0234 33.5391 75.1484 34.3203 74.4141 35.3359V21.4375H63.9609V25.5625L67.5938 26.2656V58H73.5L73.9922 54.8828C74.7422 56.0547 75.6641 56.9531 76.7578 57.5781C77.8516 58.1875 79.1406 58.4922 80.625 58.4922C83.8125 58.4922 86.25 57.3594 87.9375 55.0938ZM82.5469 39.6719C83.2812 41.1094 83.6484 43.0625 83.6484 45.5312V46.0234C83.6484 48.3047 83.2969 50.0703 82.5938 51.3203C81.8906 52.5547 80.6562 53.1719 78.8906 53.1719C77.8125 53.1719 76.8984 52.9688 76.1484 52.5625C75.4141 52.1562 74.8359 51.5625 74.4141 50.7812V40.0703C74.8359 39.2422 75.4141 38.6094 76.1484 38.1719C76.8828 37.7188 77.7812 37.4922 78.8438 37.4922C80.5938 37.4922 81.8281 38.2188 82.5469 39.6719ZM96.8203 35.8047C94.7109 38.2109 93.6562 41.3047 93.6562 45.0859V45.5781C93.6562 49.3906 94.7109 52.5 96.8203 54.9062C98.9453 57.2969 101.891 58.4922 105.656 58.4922C109.375 58.4922 112.289 57.2969 114.398 54.9062C116.523 52.5 117.586 49.3906 117.586 45.5781V45.0859C117.586 41.2891 116.523 38.1875 114.398 35.7812C112.289 33.375 109.359 32.1719 105.609 32.1719C101.875 32.1719 98.9453 33.3828 96.8203 35.8047ZM101.719 51.1562C100.906 49.75 100.5 47.8906 100.5 45.5781V45.0859C100.5 42.8359 100.906 41 101.719 39.5781C102.531 38.1562 103.828 37.4453 105.609 37.4453C107.391 37.4453 108.695 38.1562 109.523 39.5781C110.352 41 110.766 42.8359 110.766 45.0859V45.5781C110.766 47.875 110.352 49.7266 109.523 51.1328C108.711 52.5391 107.422 53.2422 105.656 53.2422C103.844 53.2422 102.531 52.5469 101.719 51.1562ZM113.414 22.75H106.172L101.508 28.9844H106.992L113.461 22.8906L113.414 22.75ZM136.336 52.75H129.258L141.422 36.5547V32.6406H121.125V41.2891H126.375L126.633 37.9375H132.844L120.773 53.9688V58H141.844V49.375H136.617L136.336 52.75ZM157.266 53.5234V58H180.562V49.375H175.359L175.078 52.75H166.219L166.172 52.6328L172.242 46C174.867 43.1875 176.742 40.9062 177.867 39.1562C179.008 37.4062 179.578 35.5 179.578 33.4375C179.578 30.3906 178.57 27.9531 176.555 26.125C174.539 24.2969 171.773 23.3828 168.258 23.3828C164.695 23.3828 161.859 24.4531 159.75 26.5938C157.656 28.7188 156.648 31.3203 156.727 34.3984L156.773 34.5391H163.43C163.43 32.7578 163.836 31.3359 164.648 30.2734C165.477 29.1953 166.68 28.6562 168.258 28.6562C169.68 28.6562 170.773 29.1172 171.539 30.0391C172.32 30.9453 172.711 32.1172 172.711 33.5547C172.711 34.6328 172.375 35.8047 171.703 37.0703C171.031 38.3203 169.898 39.8594 168.305 41.6875L157.266 53.5234ZM204.328 55C206.406 52.6562 207.445 49.2266 207.445 44.7109V37.1875C207.445 32.6875 206.398 29.2656 204.305 26.9219C202.227 24.5625 199.422 23.3828 195.891 23.3828C192.344 23.3828 189.531 24.5625 187.453 26.9219C185.391 29.2656 184.359 32.6875 184.359 37.1875V44.7109C184.359 49.2266 185.398 52.6562 187.477 55C189.555 57.3281 192.375 58.4922 195.938 58.4922C199.469 58.4922 202.266 57.3281 204.328 55ZM199.406 30.5547C200.219 31.8047 200.625 33.7812 200.625 36.4844V45.3672C200.625 48.1172 200.227 50.1172 199.43 51.3672C198.633 52.6172 197.469 53.2422 195.938 53.2422C194.375 53.2422 193.188 52.6172 192.375 51.3672C191.578 50.1172 191.18 48.1172 191.18 45.3672V36.4844C191.18 33.7656 191.578 31.7812 192.375 30.5312C193.172 29.2812 194.344 28.6562 195.891 28.6562C197.422 28.6562 198.594 29.2891 199.406 30.5547ZM211.219 53.5234V58H234.516V49.375H229.312L229.031 52.75H220.172L220.125 52.6328L226.195 46C228.82 43.1875 230.695 40.9062 231.82 39.1562C232.961 37.4062 233.531 35.5 233.531 33.4375C233.531 30.3906 232.523 27.9531 230.508 26.125C228.492 24.2969 225.727 23.3828 222.211 23.3828C218.648 23.3828 215.812 24.4531 213.703 26.5938C211.609 28.7188 210.602 31.3203 210.68 34.3984L210.727 34.5391H217.383C217.383 32.7578 217.789 31.3359 218.602 30.2734C219.43 29.1953 220.633 28.6562 222.211 28.6562C223.633 28.6562 224.727 29.1172 225.492 30.0391C226.273 30.9453 226.664 32.1172 226.664 33.5547C226.664 34.6328 226.328 35.8047 225.656 37.0703C224.984 38.3203 223.852 39.8594 222.258 41.6875L211.219 53.5234ZM258.281 55C260.359 52.6562 261.398 49.2266 261.398 44.7109V37.1875C261.398 32.6875 260.352 29.2656 258.258 26.9219C256.18 24.5625 253.375 23.3828 249.844 23.3828C246.297 23.3828 243.484 24.5625 241.406 26.9219C239.344 29.2656 238.312 32.6875 238.312 37.1875V44.7109C238.312 49.2266 239.352 52.6562 241.43 55C243.508 57.3281 246.328 58.4922 249.891 58.4922C253.422 58.4922 256.219 57.3281 258.281 55ZM253.359 30.5547C254.172 31.8047 254.578 33.7812 254.578 36.4844V45.3672C254.578 48.1172 254.18 50.1172 253.383 51.3672C252.586 52.6172 251.422 53.2422 249.891 53.2422C248.328 53.2422 247.141 52.6172 246.328 51.3672C245.531 50.1172 245.133 48.1172 245.133 45.3672V36.4844C245.133 33.7656 245.531 31.7812 246.328 30.5312C247.125 29.2812 248.297 28.6562 249.844 28.6562C251.375 28.6562 252.547 29.2891 253.359 30.5547Z" fill="white"/>
+</svg>
+
diff --git a/static/assets/oboz.webp b/static/assets/oboz.webp
new file mode 100644
index 0000000..4379a95
--- /dev/null
+++ b/static/assets/oboz.webp
Binary files differdiff --git a/static/assets/tomahawk.svg b/static/assets/tomahawk.svg
new file mode 100644
index 0000000..7e49c2c
--- /dev/null
+++ b/static/assets/tomahawk.svg
@@ -0,0 +1,31 @@
+<svg width="79" height="78" viewBox="0 0 79 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<g clip-path="url(#clip0)">
+<path d="M37.9704 13.992C35.399 14.6342 33.8356 17.2408 34.4778 19.8122C35.1225 22.3836 37.7267 23.9471 40.2993 23.3049C42.8709 22.6602 56.8507 16.9502 56.2072 14.3788C55.5648 11.8074 40.5419 13.3497 37.9704 13.992Z" fill="#C44141"/>
+<path d="M40.3028 15.1008C37.7442 14.4047 35.1086 15.9142 34.4099 18.4715C33.7136 21.0288 35.2211 23.6659 37.7796 24.362C40.3381 25.0606 55.3247 26.9147 56.021 24.3574C56.7183 21.8001 42.8603 15.797 40.3028 15.1008Z" fill="#F85A5A"/>
+<path d="M20.8144 10.5863C22.72 8.74385 25.7603 8.79306 27.6026 10.6988L76.6506 61.3935C78.4931 63.297 78.4426 66.3372 76.5369 68.1793C74.6325 70.0218 71.5933 69.9703 69.751 68.0668H69.7498C69.7498 68.0647 69.7498 68.0647 69.7498 68.0647H69.7485L20.7018 17.3723C18.8594 15.4667 18.9109 12.4289 20.8144 10.5863Z" fill="#764242"/>
+<path d="M33.2378 11.9249C33.8518 12.5601 34.8645 12.5766 35.5021 11.9624C36.135 11.3482 36.1538 10.3357 35.5396 9.70039C34.9256 9.06519 33.9129 9.04868 33.2753 9.66288C32.6422 10.2771 32.6236 11.2897 33.2378 11.9249Z" fill="#94A1B1"/>
+<path d="M39.9161 18.8283C40.5303 19.4635 41.5441 19.4798 42.1781 18.8658C42.8133 18.2516 42.831 17.2389 42.2169 16.6037C41.6015 15.9685 40.5888 15.952 39.9548 16.5662C39.3193 17.1804 39.3019 18.1931 39.9161 18.8283Z" fill="#94A1B1"/>
+<path d="M1.19 34.0177L30.9383 14.1496L35.5397 9.70068L42.2122 16.5992L37.612 21.0482L39.8364 23.3477L30.636 32.2458L18.9863 52.4186C5.07186 47.2358 1.19 34.0177 1.19 34.0177Z" fill="#94A1B1"/>
+<path d="M20.458 49.8698L18.9858 52.4175C5.07158 47.2349 1.18987 34.0168 1.18987 34.0168L3.67936 32.355C4.57711 34.8679 8.88308 45.1606 20.458 49.8698Z" fill="#D0D5DB"/>
+<path d="M32.9378 30.0231L39.8362 23.3472L28.7462 11.8794L21.8452 18.5529L32.9378 30.0231Z" fill="#D0D5DB"/>
+<path d="M29.6749 22.0486C30.2893 22.6838 31.3019 22.7001 31.9394 22.0861C32.5723 21.4719 32.5911 20.457 31.9769 19.8216C31.3627 19.1887 30.35 19.1699 29.7124 19.7841C29.0796 20.4006 29.0607 21.4132 29.6749 22.0486Z" fill="#424953"/>
+<path d="M50.9928 39.4672L71.0134 60.1673L73.314 57.9431L53.2923 37.2427L50.9928 39.4672Z" fill="#E8563F"/>
+<path d="M46.3927 43.9159L66.4144 64.6162L73.3113 57.9425L53.2908 37.2422L46.3927 43.9159Z" fill="#B36053"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="0.893968" y="0.965332" width="77.402" height="78.2899" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.18389"/>
+<feGaussianBlur stdDeviation="0.147987"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<clipPath id="clip0">
+<path d="M78 0.965332H1.18999V77.7753H78V0.965332Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/modernizr.js b/static/modernizr.js
new file mode 100644
index 0000000..30fc39e
--- /dev/null
+++ b/static/modernizr.js
@@ -0,0 +1,3 @@
+/*! modernizr 3.8.0 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-webp-setclasses !*/
+!function(n,e,A){function o(n,e){return typeof n===e}function t(n){var e=f.className,A=Modernizr._config.classPrefix||"";if(u&&(e=e.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+A+"no-js(\\s|$)");e=e.replace(o,"$1"+A+"js$2")}Modernizr._config.enableClasses&&(n.length>0&&(e+=" "+A+n.join(" "+A)),u?f.className.baseVal=e:f.className=e)}function a(n,e){if("object"==typeof n)for(var A in n)r(n,A)&&a(A,n[A]);else{n=n.toLowerCase();var o=n.split("."),i=Modernizr[o[0]];if(2===o.length&&(i=i[o[1]]),void 0!==i)return Modernizr;e="function"==typeof e?e():e,1===o.length?Modernizr[o[0]]=e:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=e),t([(e&&!1!==e?"":"no-")+o.join("-")]),Modernizr._trigger(n,e)}return Modernizr}var i=[],s={_version:"3.8.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var A=this;setTimeout(function(){e(A[n])},0)},addTest:function(n,e,A){i.push({name:n,fn:e,options:A})},addAsyncTest:function(n){i.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=s,Modernizr=new Modernizr;var r,l=[],f=e.documentElement,u="svg"===f.nodeName.toLowerCase();!function(){var n={}.hasOwnProperty;r=o(n,"undefined")||o(n.call,"undefined")?function(n,e){return e in n&&o(n.constructor.prototype[e],"undefined")}:function(e,A){return n.call(e,A)}}(),s._l={},s.on=function(n,e){this._l[n]||(this._l[n]=[]),this._l[n].push(e),Modernizr.hasOwnProperty(n)&&setTimeout(function(){Modernizr._trigger(n,Modernizr[n])},0)},s._trigger=function(n,e){if(this._l[n]){var A=this._l[n];setTimeout(function(){var n;for(n=0;n<A.length;n++)(0,A[n])(e)},0),delete this._l[n]}},Modernizr._q.push(function(){s.addTest=a}),Modernizr.addAsyncTest(function(){function n(n,e,A){function o(e){var o=!(!e||"load"!==e.type)&&1===t.width;a(n,"webp"===n&&o?new Boolean(o):o),A&&A(e)}var t=new Image;t.onerror=o,t.onload=o,t.src=e}var e=[{uri:"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=",name:"webp"},{uri:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==",name:"webp.alpha"},{uri:"data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",name:"webp.animation"},{uri:"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=",name:"webp.lossless"}],A=e.shift();n(A.name,A.uri,function(A){if(A&&"load"===A.type)for(var o=0;o<e.length;o++)n(e[o].name,e[o].uri)})}),function(){var n,e,A,t,a,s,r;for(var f in i)if(i.hasOwnProperty(f)){if(n=[],e=i[f],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(A=0;A<e.options.aliases.length;A++)n.push(e.options.aliases[A].toLowerCase());for(t=o(e.fn,"function")?e.fn():e.fn,a=0;a<n.length;a++)s=n[a],r=s.split("."),1===r.length?Modernizr[r[0]]=t:(Modernizr[r[0]]&&(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean)||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=t),l.push((t?"":"no-")+r.join("-"))}}(),t(l),delete s.addTest,delete s.addAsyncTest;for(var c=0;c<Modernizr._q.length;c++)Modernizr._q[c]();n.Modernizr=Modernizr}(window,document);
\ No newline at end of file
diff --git a/tests/unit/__snapshots__/storybook.test.js.snap b/tests/unit/__snapshots__/storybook.test.js.snap
index 54d6473..537d045 100644
--- a/tests/unit/__snapshots__/storybook.test.js.snap
+++ b/tests/unit/__snapshots__/storybook.test.js.snap
@@ -484,7 +484,7 @@ exports[`Storyshots Posts/PurePostList loading 1`] = `
   class="post-list"
 >
   <div
-    class="post-list-container"
+    class="post-list-container loading"
   >
     <div
       class="loading-post"
generated by cgit-pink 1.4.1 (git 2.36.1) at 2024-11-21 19:06:26 +0000