[ADD] setup vite with django-pattern-lib

.gitignore

@@ -48,3 +48,7 @@ db.sqlite3-journal
 .idea/
 .vscode/
 
+# Vite settings
+node_modules
+
+

majak_uistyleguide/settings/base.py

@@ -11,7 +11,7 @@ environ.Env.read_env(str(ROOT_DIR / ".env"))
 
 # GENERAL
 # ------------------------------------------------------------------------------
-DEBUG = env.bool("DJANGO_DEBUG", False)
+DEBUG = env.bool("DJANGO_DEBUG", True)
 ROOT_URLCONF = "majak_uistyleguide.urls"
 WSGI_APPLICATION = "majak_uistyleguide.wsgi.application"
 
@@ -42,6 +42,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
+    'django_vite',
     'pattern_library',
 ]
 
@@ -84,9 +85,7 @@ TEMPLATES = [
 
 # STATIC
 # ------------------------------------------------------------------------------
-STATIC_ROOT = str(ROOT_DIR / "static_files")
 STATIC_URL = "/static/"
-STATICFILES_DIRS = [str(PROJECT_DIR / "static")]
 STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
@@ -99,6 +98,17 @@ MEDIA_URL = "/media/"
 MEDIA_ROOT = str(ROOT_DIR / "media_files")
 
 
+# VITE SETTINGS
+# ------------------------------------------------------------------------------
+# Where ViteJS assets are built.
+DJANGO_VITE_ASSETS_PATH = PROJECT_DIR / "static" / "dist"
+# If you use HMR or not.
+DJANGO_VITE_DEV_MODE = DEBUG
+# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
+# when run command python manage.py collectstatic
+STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]
+STATIC_ROOT = PROJECT_DIR / "collectedstatic"
+
 # PATTERN LIBRARY SETTINGS
 # ------------------------------------------------------------------------------
 if DEBUG:

majak_uistyleguide/static/src/css/atoms/container.pcss

+.container--default {
+  @apply max-w-screen-xl;
+}
+
+.container--narrow {
+  margin: auto;
+  width: 882px;
+}
+
+.container--medium {
+  @apply px-5;
+  margin: auto;
+  max-width: 1350px;
+}
+
+.container--wide {
+  @apply px-5;
+  margin: auto;
+  max-width: 1400px;
+}
+
+.section-clip {
+  clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
+  margin-bottom: -3.2vw;
+
+  @screen xl {
+    clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
+    margin-bottom: -4.2vw;
+  }
+}
+
+.header-max-width {
+  max-width: 1340px !important;
+}
+
+.container {
+  @apply mx-auto px-4;
+  max-width: 1150px;
+}
+
+.grid-container {
+  @apply grid mx-5;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "left-side"
+  "content"
+  "right-side";
+  gap: 1rem;
+  max-width: 1150px;
+
+  &.article-section {
+    max-width: 1400px;
+  }
+
+  &.person-grid-container {
+    max-width: 1400px;
+  }
+
+  &.person-twitter-section {
+    grid-template-columns: minmax(0, 1200px);
+    @screen xl {
+      grid-template-columns: 240px 1fr 102px;
+    }
+  }
+
+  &.no-max {
+    max-width: none;
+  }
+}
+@responsive {
+  .grid-container {
+    @screen xl {
+      grid-template-columns: 240px 1fr 102px;
+      grid-template-areas:
+      "left-side content right-side";
+      margin-left: 10%;
+    }
+     @screen 3xl {
+      margin-left: 20%;
+    }
+    &.person-grid-container {
+      @screen xl {
+        grid-template-columns: 240px 1fr 339px;
+      }
+    }
+  }
+}
+
+
+.grid-content {
+  grid-area: content;
+}
+
+.grid-full {
+  grid-column: left-side / right-side;
+  grid-row: left-side / right-side;
+}
+
+.grid-left-side {
+  grid-area: left-side;
+}
+
+.grid-left-side-with-content {
+  grid-column: left-side / content;
+  grid-row: left-side / content;
+}
+
+.grid-right-side {
+  grid-area: right-side;
+}
+
+.grid-content-with-right-side {
+  grid-column: content / right-side;
+  grid-row: content / right-side;
+}
+
+@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;
+
+    @screen xl {
+      margin-left: -2rem;
+      margin-right: -2rem;
+    }
+  }
+
+  .container-padding--auto {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

majak_uistyleguide/static/src/css/atoms/extra_sizing.pcss

+.footer-section {
+  height: 450px;
+}
+
+.person-box-medium {
+  max-width: 485px;
+  width: 100%;
+}
+
+.person-box-big {
+  max-width: 575px;
+  width: 100%;
+}
+
+.photo-header {
+  height: 414px;
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.4;
+    z-index: 1;
+  }
+
+  > div {
+    z-index: 10;
+  }
+  @screen md {
+    height: 40vw;
+  }
+
+}
+
+.simple-header-height {
+  height: 13rem;
+
+  @screen xl {
+    height: 26rem;
+  }
+}
+
+@screen xl {
+  .footer-section {
+    height: 981px;
+  }
+}

majak_uistyleguide/static/src/css/atoms/flag.pcss

+.flag {
+  /* right margin makes space for flag stripe */
+  @apply inline-block py-3 relative pl-8 pr-6 mr-10 bg-black text-white;
+
+  &:after {
+    @apply absolute w-10 h-full;
+    content: "";
+    left: 100%;
+    top: 0;
+    background: inherit;
+    clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%);
+  }
+}
+

majak_uistyleguide/static/src/css/atoms/form-field.pcss

+.text-input-addon {
+  @apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
+}
+
+.text-input {
+  @apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;
+
+  /* Fix FF text-input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
+  &:hover:not([disabled]):not([readonly]) {
+    @apply border-grey-300;
+  }
+
+  &:active,
+  &:focus {
+    &:not([disabled]):not([readonly]) {
+      @apply border-blue-300;
+    }
+  }
+
+  &::placeholder {
+    @apply text-grey-200 font-normal;
+  }
+
+  &[readonly],
+  &[disabled] {
+    @apply bg-grey-125 cursor-not-allowed;
+
+    &::placeholder {
+      @apply text-grey-200;
+    }
+  }
+}
+
+.text-input-addon--l {
+  @apply border-r-0;
+}
+
+.text-input-addon--r {
+  @apply border-l-0;
+}
+
+.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon {
+  @apply border-grey-300;
+}
+
+.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
+.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon {
+  @apply border-blue-300;
+}
+
+.text-input[readonly] ~ .text-input-addon,
+.text-input[disabled] ~ .text-input-addon {
+  @apply bg-grey-125 text-grey-200;
+}
+
+.text-input--has-addon-l.text-input {
+  @apply border-l-0;
+}
+
+.text-input--has-addon-r.text-input {
+  @apply border-r-0;
+}
+
+.select {
+  @apply relative flex items-center w-full py-2 xl:py-4;
+
+  &:after {
+    @apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
+    font-family: 'pirati-ui';
+    /* chevron down */
+    content: "\e925";
+  }
+}
+
+.select__control {
+  @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5;
+
+  /* Fix FF input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
+  &:hover:not([disabled]):not([readonly]) {
+    @apply border-grey-300;
+  }
+
+  &:active,
+  &:focus {
+    &:not([disabled]):not([readonly]) {
+      @apply border-blue-300;
+    }
+  }
+
+  &::placeholder {
+    @apply text-grey-200 font-normal;
+  }
+
+  &[readonly],
+  &[disabled] {
+    @apply bg-grey-125 cursor-not-allowed;
+
+    &::placeholder {
+      @apply text-grey-200;
+    }
+  }
+}
+
+
+.checkbox {
+  @apply relative flex;
+
+  input {
+    @apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
+
+    &:hover:not([disabled]):not([readonly]) {
+      @apply border-grey-300;
+    }
+
+    &:active,
+    &:focus {
+      @apply border-blue-300;
+    }
+
+    &:checked {
+      @apply bg-blue-300 border-transparent;
+
+    }
+
+    &[disabled] {
+      @apply cursor-not-allowed;
+    }
+  }
+
+  label {
+    @apply max-w-lg leading-tight uppercase font-medium text-sm xl:text-base;
+  }
+
+  &:after {
+    @apply inline absolute pointer-events-none;
+
+    content: "";
+    height: 5px;
+    width: 12px;
+    top: 6px;
+    left: 4px;
+
+    border-left: 2px solid theme("colors.white");
+    border-bottom: 2px solid theme("colors.white");
+    transform: rotate(-45deg);
+  }
+}
+
+
+.radio {
+  @apply relative;
+
+  input {
+    @apply w-5 h-5 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 border border-grey-200 transition duration-200 rounded-full;
+
+    &:hover:not([disabled]):not([readonly]) {
+      @apply border-grey-300;
+    }
+
+    &:active,
+    &:focus {
+      @apply border-blue-300;
+    }
+
+    &:checked {
+      @apply bg-blue-300 border-transparent;
+    }
+
+    &[disabled] {
+      @apply cursor-not-allowed;
+    }
+  }
+
+  label {
+    @apply flex items-center leading-tight;
+  }
+
+  &:after {
+    @apply w-2 h-2 inline absolute pointer-events-none bg-white;
+
+    content: "";
+    /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
+    border-radius: 50%;
+    top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
+    left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
+  }
+}
+
+
+.form-field--error {
+  .text-input,
+  .select__control,
+  .text-input ~ .text-input-addon {
+    @apply border-red-600;
+  }
+}

majak_uistyleguide/static/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;
+  }
+}
+
+
+
+
+
+.header-clip {
+  clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
+}
+
+
+
+.head-xl {
+  @apply font-alt text-base lg:text-xl font-medium leading-7 uppercase;
+}
+
+.head-2xl {
+  @apply font-alt text-2xl font-medium leading-8 uppercase;
+  letter-spacing: -0.01em;
+}
+
+.head-3xl {
+  @apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
+}
+
+.head-4xl {
+  @apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
+}
+
+.head-6xl {
+  @apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl;
+}
+
+.head-7xl {
+  @apply font-alt text-3xl font-medium tracking-tight uppercase xl:text-7xl;
+}
+
+.head-8xl {
+  @apply font-alt text-4xl font-medium tracking-tight uppercase xl:text-8xl;
+}
+
+.head-9xl {
+  @apply font-alt text-5xl font-medium tracking-tight uppercase xl:text-8xl;
+}
+
+p {
+  @apply text-sm leading-6 lg:text-base;
+}
+
+
+.vertical-time-line {
+  border-left: 1px solid green;
+}
+
+.program-perex .content-block p {
+  font-size: 1.3rem;
+  line-height: 1.75rem;
+}
+
+.content-block {
+  h2 {
+    @apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
+  }
+  h3 {
+    @apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
+  }
+  h4 {
+    @apply font-alt xl:text-2xl font-medium leading-8 uppercase;
+    letter-spacing: -0.01em;
+  }
+  a {
+    @apply text-blue-300 underline;
+  }
+}

majak_uistyleguide/static/src/css/atoms/icons.pcss

+
+@font-face {
+  font-family: 'pirati-ui';
+  src:  url('../../fonts/pirati-ui.eot');
+  src:  url('../../fonts/pirati-ui.eot') format('embedded-opentype'),
+    url('../../fonts/pirati-ui.ttf') format('truetype'),
+    url('../../fonts/pirati-ui.woff') format('woff'),
+    url('../../fonts/pirati-ui.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'pirati-ui' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ico--dots-three-vertical:before { content: "\e940"; }
+.ico--dots-three-horizontal:before { content: "\e941"; }
+.ico--log-out:before { content: "\e942"; }
+.ico--envelope:before { content: "\e908"; }
+.ico--pin:before { content: "\e943"; }
+.ico--at:before { content: "\e905"; }
+.ico--strategy:before { content: "\e932"; }
+.ico--pig:before { content: "\e928"; }
+.ico--thermometer:before { content: "\e90a"; }
+.ico--menu:before { content: "\e933"; }
+.ico--chevron-right:before { content: "\e923"; }
+.ico--chevron-left:before { content: "\e924"; }
+.ico--chevron-down:before { content: "\e925"; }
+.ico--chevron-up:before { content: "\e926"; }
+.ico--link-horizontal:before { content: "\e910"; }
+.ico--beer:before { content: "\e909"; }
+.ico--pirati:before { content: "\e90d"; }
+.ico--jitsi:before { content: "\e90f"; }
+.ico--open-source:before { content: "\e90e"; }
+.ico--thumbs-down:before { content: "\e93d"; }
+.ico--thumbs-up:before { content: "\e93e"; }
+.ico--anchor:before { content: "\e92d"; }
+.ico--paw:before { content: "\e90b"; }
+.ico--checkmark:before { content: "\e965"; }
+.ico--info:before { content: "\e901"; }
+.ico--question:before { content: "\e904"; }
+.ico--warning:before { content: "\e93f"; }
+.ico--code:before { content: "\e94a"; }
+.ico--checkbox-unchecked:before { content: "\e94e"; }
+.ico--star-full:before { content: "\e94f"; }
+.ico--star-empty:before { content: "\e950"; }
+.ico--bookmark:before { content: "\e951"; }
+.ico--cog:before { content: "\e952"; }
+.ico--key:before { content: "\e953"; }
+.ico--zoom-in:before { content: "\e954"; }
+.ico--zoom-out:before { content: "\e955"; }
+.ico--shrink:before { content: "\e956"; }
+.ico--printer:before { content: "\e957"; }
+.ico--file-openoffice:before { content: "\e958"; }
+.ico--user:before { content: "\e959"; }
+.ico--file-excel:before { content: "\e95a"; }
+.ico--file-word:before { content: "\e95b"; }
+.ico--file-pdf:before { content: "\e95c"; }
+.ico--file-picture:before { content: "\e95d"; }
+.ico--file-blank:before { content: "\e95e"; }
+.ico--folder-upload:before { content: "\e95f"; }
+.ico--upload:before { content: "\e960"; }
+.ico--cloud-upload:before { content: "\e961"; }
+.ico--folder-download:before { content: "\e962"; }
+.ico--download:before { content: "\e963"; }
+.ico--cloud-download:before { content: "\e964"; }
+.ico--alarm:before { content: "\e900"; }
+.ico--calculator:before { content: "\e911"; }
+.ico--facebook-full:before { content: "\e913"; }
+.ico--feed:before { content: "\e927"; }
+.ico--library:before { content: "\e929"; }
+.ico--office:before { content: "\e92a"; }
+.ico--attachment:before { content: "\e92b"; }
+.ico--enlarge:before { content: "\e92c"; }
+.ico--eye-off:before { content: "\e92e"; }
+.ico--eye:before { content: "\e92f"; }
+.ico--share:before { content: "\e931"; }
+.ico--search:before { content: "\e939"; }
+.ico--pencil:before { content: "\e93c"; }
+.ico--lock-open:before { content: "\e947"; }
+.ico--lock:before { content: "\e948"; }
+.ico--equalizer:before { content: "\e949"; }
+.ico--switch:before { content: "\e94b"; }
+.ico--loop:before { content: "\e94c"; }
+.ico--refresh:before { content: "\e94d"; }
+.ico--bullhorn:before { content: "\e944"; }
+.ico--bin:before { content: "\e945"; }
+.ico--cross:before { content: "\e937"; }
+.ico--checkbox-checked:before { content: "\e938"; }
+.ico--globe:before { content: "\e93a"; }
+.ico--wikipedia:before { content: "\e93b"; }
+.ico--youtube:before { content: "\e936"; }
+.ico--users:before { content: "\e934"; }
+.ico--book:before { content: "\e935"; }
+.ico--bubbles:before { content: "\e930"; }
+.ico--map:before { content: "\e914"; }
+.ico--compass:before { content: "\e915"; }
+.ico--folder-open:before { content: "\e916"; }
+.ico--folder:before { content: "\e917"; }
+.ico--drawer:before { content: "\e918"; }
+.ico--stop:before { content: "\e919"; }
+.ico--github:before { content: "\e91a"; }
+.ico--clock:before { content: "\e91b"; }
+.ico--calendar:before { content: "\e91c"; }
+.ico--flickr:before { content: "\e91d"; }
+.ico--instagram:before { content: "\e91e"; }
+.ico--twitter:before { content: "\e91f"; }
+.ico--newspaper:before { content: "\e920"; }
+.ico--cart:before { content: "\e921"; }
+.ico--home:before { content: "\e922"; }
+.ico--link:before { content: "\e912"; }
+.ico--power:before { content: "\e90c"; }
+.ico--rocket:before { content: "\e946"; }
+.ico--location:before { content: "\e906"; }
+.ico--phone:before { content: "\e907"; }
+.ico--linkedin:before { content: "\e903"; }
+.ico--facebook:before { content: "\e902"; }

majak_uistyleguide/static/src/css/molecules/articles.pcss

+.article-box {
+  &.dark-theme {
+    background-color: #4C4C4C;
+    color: white;
+  }
+}

majak_uistyleguide/static/src/css/molecules/block-quote.pcss

+.quote-icon {
+  font-size: 7rem;
+  height: 1rem;
+
+  @screen xl {
+    font-size: 15rem;
+  }
+}

majak_uistyleguide/static/src/css/molecules/carousels.pcss

+.slick-slider .slick-arrow {
+  font-size: 0;
+  position: absolute;
+  top: -.7rem;
+  z-index: 10;
+  &:before, &:after {
+    border-right: 2px solid white;
+    border-bottom: 2px solid white;
+    content: '';
+    height: .8rem;
+    position: absolute;
+    width: .8rem;
+    @screen lg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+  &.slick-next {
+    transform: rotate(-45deg);
+  }
+
+  &.slick-prev {
+    transform: rotate(135deg);
+  }
+}
+
+.header-carousel {
+  display: block;
+  margin: 0 auto;
+  position: relative;
+
+  img {
+    filter: brightness(60%);
+  }
+
+  .header-carousel--text {
+    @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
+    max-width: 1200px;
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    margin-left: 10%;
+    @screen sm {
+      margin-left: 10%;
+      top: 35%;
+    }
+    @screen lg {
+      top: 25%;
+    }
+    @screen xl {
+      top: 30%;
+    }
+    @screen 2xl {
+      top: 40%;
+    }
+  }
+
+
+  img {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    transition: all 800ms ease-in-out;
+    transform: scale(1.15, 1.15);
+    width: 100%;
+    height: 458px;
+    object-fit: cover;
+    margin-bottom: -3px;
+
+    @screen md {
+      height: auto;
+    }
+  }
+
+  .slick-slide {
+    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+  }
+
+  .slick-active {
+    z-index: 1000;
+    img {
+      transform: scale(1, 1);
+    }
+
+    .header-carousel--text {
+      animation: right_to_left 1s ease;
+    }
+  }
+
+  @keyframes right_to_left {
+    from {
+      margin-left: 20%;
+    }
+    to {
+      margin-left: 10%;
+    }
+  }
+
+  .slick-arrow {
+    font-size: 0;
+    position: absolute;
+    right: 20%;
+    top: 80%;
+    z-index: 10;
+
+    @screen sm {
+    right: 10%;
+    }
+    @screen lg {
+      top: 60%;
+    }
+
+    &:before, &:after {
+    border-right: 3px solid white;
+    border-bottom: 3px solid white;
+    color: white;
+    content: '';
+    height: 1.3rem;
+    position: absolute;
+    width: 1.3rem;
+      @screen sm {
+      border-right: 2px solid white;
+      border-bottom: 2px solid white;
+      height: .8rem;
+      width: .8rem;
+        }
+      @screen lg {
+        height: 1rem;
+        width: 1rem;
+      }
+    }
+
+    &.slick-next {
+      transform: rotate(-45deg);
+    }
+
+    &.slick-prev {
+      transform: rotate(135deg);
+    }
+  }
+
+  .slick-dots {
+    color: white;
+    left: 10%;
+    position: absolute;
+    top: 90%;
+    z-index: 10;
+
+    @screen sm {
+      left: 5%;
+      top: 60%;
+    }
+    li {
+    display:inline-block;
+    border: 1px solid white;
+    border-radius: 50%;
+    height: 6px;
+    width: 6px;
+    margin: 3px;
+
+      @screen sm {
+        display: block;
+        margin-bottom: 6px;
+      }
+      &.slick-active {
+        background-color: white;
+      }
+
+      button {
+        font-size: 0;
+      }
+    }
+  }
+}
+
+.btn-carousel{
+  @apply h-11;
+  top: 28%;
+}
+
+.article-carousel {
+  .slick-arrow {
+    right: 10%;
+    @screen lg {
+      right: 5%;
+    }
+
+    &:before, &:after {
+      border-color: black;
+    }
+
+    &.slick-disabled {
+      &:before, &:after {
+        border-color: #B3B3B3;
+      }
+    }
+  }
+}
+
+div.twitter-carousel {
+  div.slick-track {
+    display: flex;
+  }
+
+  div.slick-slide {
+    display: flex;
+    height: auto;
+    margin-right: 1rem;
+
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .slick-arrow {
+    right: 10%;
+    @screen lg {
+      right: 5%;
+    }
+
+    &:before, &:after {
+      border-color: black;
+    }
+
+    &.slick-disabled {
+      &:before, &:after {
+        border-color: #B3B3B3;
+      }
+    }
+  }
+}
+
+.twitter-carousel {
+  position: relative;
+
+  .slick-arrow {
+    top: -2.6rem;
+  }
+  &:before {
+    @screen lg {
+      background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+    }
+    content: '';
+    height: 100%;
+    right: 0;
+    position: absolute;
+    width: 10%;
+    z-index: 100;
+  }
+}

majak_uistyleguide/static/src/css/molecules/contact_box.pcss

+.contact-box {
+  @apply border border-grey-100 flex flex-col h-auto items-center justify-between px-16 py-8 text-center;
+  min-height: 20rem;
+  width: 280px;
+}

majak_uistyleguide/static/src/css/molecules/representative_box.pcss

+.background-hover-zoom  {
+    background-position: center;
+    background-size: 100%;
+    transition: background-size 0.3s ease-in;
+}
+
+.background-hover-zoom:hover {background-size: 110%}

majak_uistyleguide/static/src/css/molecules/sliding_button.pcss

+.btn {
+  @apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11;
+  min-width: 8rem;
+}
+
+.btn__slide__wrap {
+  overflow: hidden;
+  position: relative;
+
+  :first-child {
+    position: relative;
+    transition: all linear 0.25s;
+  }
+
+  :last-child {
+    left: -100%;
+    position: absolute;
+    transition: all linear 0.25s;
+  }
+
+  &:hover {
+    :first-child {
+      transform: translateX(100%);
+    }
+
+    :last-child {
+      left: 0
+    }
+  }
+}

majak_uistyleguide/static/src/css/molecules/switch.pcss

+.switch {
+  @apply py-5;
+}
+
+.switch__item {
+  @apply bg-grey-150 cursor-pointer px-5 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;
+
+  &:hover {
+    @apply no-underline bg-grey-200;
+  }
+
+  &.switch__item--active,
+  &.switch__item--active:hover {
+    @apply bg-turquoise-200;
+  }
+}
+
+@responsive {
+
+  @screen xl {
+    .switch__item {
+      @apply px-8 py-4 text-xl;
+    }
+  }
+
+}
+/* HORIZONTAL SCROLLABLE */
+.horizontal-scrolling {
+  display: block;
+  margin-left: -15px;
+  margin-right: -15px;
+  max-width: calc(100% + 30px);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 0 15px;
+  text-align: center;
+  white-space: nowrap;
+}
+.horizontal-scrolling.draggable {
+  cursor: grab;
+}
+.horizontal-scrolling.draggable.active, .horizontal-scrolling.draggable.active a {
+  cursor: grabbing;
+}
+
+.no-scrollbars {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: none;
+}
+.no-scrollbars::-webkit-scrollbar {
+  display: none;
+}

majak_uistyleguide/static/src/css/organisms/article-timeline.pcss

+.article-timeline-grid {
+  @apply grid gap-2;
+
+  margin-top: -20px;
+
+  grid-template-areas:
+    "left-article"
+    "right-article";
+
+  @screen xl {
+    grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
+    grid-template-areas: "left-article timeline right-article";
+  }
+}
+
+.article-timeline-grid__left-article {
+  grid-area: left-article;
+}
+
+.article-timeline-grid__right-article {
+  grid-area: right-article;
+}
+
+.article-timeline-grid__timeline {
+  grid-area: timeline;
+
+  &:before {
+    content: '';
+    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+    position: absolute;
+    bottom: -1px;
+    height: 20px;
+    z-index: 10;
+    width: 2px;
+    left: -1px;
+  }
+
+  .article-timeline--month {
+    transform: translateX(-50%);
+    top: -1rem;
+    z-index: 100;
+  }
+}

majak_uistyleguide/static/src/css/organisms/footer.pcss

+.footer-clip {
+    clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
+    /* TODO responsive */
+@screen md {
+    clip-path: polygon(0 20px, 100% 0, 100% 100%, 0% 100%);
+  }
+}
+
+.footer__main {
+  @apply grid;
+  grid-template-areas:
+    "social"
+    "main-links";
+}
+
+.footer__social {
+  grid-area: social;
+}
+
+.footer__main-links {
+  grid-area: main-links;
+
+  ul {
+    display: flex;
+    flex-flow: row wrap;
+    max-height: 540px;
+    writing-mode: vertical-lr; /* workaround for long-living bug https://stackoverflow.com/a/39102894/7113416 */
+
+    @screen md {
+      max-height: 320px;
+    }
+
+    li {
+      display: block;
+      height: 40px;
+      line-height: 40px;
+      min-width: 150px;
+      writing-mode: initial; /* workaround revert from above */
+    }
+  }
+}
+
+.footer-collapsible__toggle {
+  @apply flex items-center cursor-pointer;
+
+  &:after {
+    content: "\e925";
+    font-family: "pirati-ui";
+
+    @apply ml-auto font-light text-2xl transition duration-200;
+  }
+
+  &.footer-collapsible__toggle--open:after {
+    transform: rotate(-180deg);
+  }
+
+  @screen lg {
+    &:after {
+      @apply hidden;
+      @apply cursor-auto;
+    }
+  }
+}