update TailwindCSS, add image sized from Maják to safelist

package.json

@@ -63,7 +63,7 @@
     "color": "^3.1.2",
     "gulp-add-src": "^1.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "lodash": "^4.17.15",
     "postcss-assets": "^5.0.0",
@@ -76,8 +76,8 @@
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-vue": "^5.1.9",
     "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/typography": "^0.5.10",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "vue-template-compiler": "^2.7.14"

source/_data/data.json

@@ -4,27 +4,27 @@
   "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
   "img": {
     "avatar": {
-      "src": "http://placeimg.com/100/100/people",
+      "src": "https://picsum.photos/100",
       "alt": "Avatar"
     },
     "square": {
-      "src": "http://placeimg.com/300/300/nature",
+      "src": "https://picsum.photos/300",
       "alt": "Square"
     },
     "rectangle": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
       "alt": "Rectangle"
     },
     "landscape-4x3": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
       "alt": "4x3 Image"
     },
     "landscape-16x9": {
-      "src": "http://placeimg.com/640/360/tech",
+      "src": "https://picsum.photos/640/360",
       "alt": "16x9 Image"
     },
     "landscape-16x9-fullhd": {
-      "src": "https://loremflickr.com/1920/1080",
+      "src": "https://picsum.photos/1920/1080",
       "alt": "16x9 Image Full HD"
     }
   },

source/css/atoms/avatar.pcss

@@ -6,7 +6,6 @@
   }
 }
 
-@responsive {
 .avatar--2xs {
   @apply w-8;
 }
@@ -31,7 +30,6 @@
 .avatar--3xl {
   @apply w-56;
 }
-}
 
 .avatar--bordered {
   img {

source/css/atoms/card.pcss

-@responsive {
 .card {
   @apply elevation-2;
 }
@@ -6,7 +5,6 @@
 .card__body {
   @apply p-8;
 }
-}
 
 .card--hoveractive {
   @apply transition duration-200;

source/css/atoms/contact-line.pcss

@@ -9,11 +9,7 @@
 
   &.contact-line--responsive {
     i {
-      @apply hidden;
-
-      @screen lg {
-        @apply inline-block;
-      }
+      @apply hidden lg:inline-block;
     }
   }
 }

source/css/atoms/container.pcss

@@ -10,7 +10,6 @@
 }
 
 
-@responsive {
 /* Removes default container padding from the element. */
 /* @note: needs to be kept in sync with tailwind configuration */
 .container-padding--zero {
@@ -27,4 +26,3 @@
   margin-left: 0;
   margin-right: 0;
 }
-}

source/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 whitespace-no-wrap border border-grey-200 transition duration-200;
+  @apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-nowrap border border-grey-200 transition duration-200;
 }
 
 .text-input {

source/css/atoms/heading.pcss

@@ -12,7 +12,6 @@
 }
 
 
-@responsive {
 .head-alt-xl,
 .content-block .head-alt-xl {
   @apply text-7xl font-alt font-normal;
@@ -133,5 +132,3 @@
 .content-block .head-allcaps-heavy-4xs {
   @apply text-sm font-condensed font-bold uppercase leading-tight;
 }
-}
-

source/css/atoms/horizontal-rule.pcss

 hr:not(.hr--unstyled) {
-  @apply border-t border-grey-100 my-4;
-
-  @screen md {
-    @apply my-8;
-  }
+  @apply border-t border-grey-100 my-4 md:my-8;
 
   &.hr--big {
-    @apply my-8;
-
-    @screen md {
-      @apply my-16;
-    }
+    @apply my-8 md:my-16;
   }
 
   &.hr--condensed {
-    @apply my-2;
-
-    @screen md {
-      @apply my-4;
-    }
+    @apply my-2 md:my-4;
   }
 }

source/css/atoms/list.pcss

@@ -46,7 +46,7 @@
 
 .unordered-list--dense,
 .content-block ul {
-  @apply row-gap-0;
+  @apply gap-y-0;
 }
 
 .unordered-list--linked,

source/css/atoms/super-button.pcss

 .super-button {
-  @apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200;
+  @apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200 md:px-6;
 
   &:hover {
     @apply no-underline;
   }
-
-  @screen md {
-    @apply px-6;
-  }
 }
 
 .super-button__body {

source/css/atoms/text-shadow.pcss

-@responsive {
 .text-shadow-xs {
   text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
 }
@@ -14,4 +13,3 @@
 .text-shadow-lg {
   text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.8);
 }
-}

source/css/molecules/article-card.pcss

@@ -25,18 +25,11 @@
 }
 
 .article-card-sharing {
-  @apply mb-4 ;
-
-  @screen lg {
-    /* Turn on pointer events to make sharer clickable */
-    @apply transition duration-200 opacity-0 pointer-events-auto;
-  }
+  @apply mb-4 lg:transition lg:duration-200 lg:opacity-0 lg:pointer-events-auto;
 }
 
 .article-card:hover .article-card-sharing {
-  @screen lg {
-    @apply opacity-100;
-  }
+  @apply lg:opacity-100;
 }
 
 .article-card-meta {

source/css/molecules/banner.pcss

 .banner {
-  @apply px-4 py-8 flex flex-wrap flex-col;
-
-  @screen lg {
-    @apply px-8;
-  }
+  @apply px-4 py-8 flex flex-wrap flex-col lg:px-8;
 }
 
 .banner__icon {

source/css/molecules/calendar.pcss

@@ -14,11 +14,7 @@
   @apply h-full border-r border-grey-125 p-2 flex justify-center items-start;
 
   &:first-child {
-    @apply border-l;
-
-    @screen xl {
-      @apply border-l-0;
-    }
+    @apply border-l xl:border-l-0;
   }
 
   &.calendar-table-row__col--norborder {

source/css/molecules/candidate-card.pcss

@@ -33,7 +33,7 @@
   @apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;
 
   > div {
-    @apply px-4 flex items-center;
+    @apply px-4 flex items-center md:justify-center;
 
     &:not(:first-child) {
       @apply border-l border-grey-125;
@@ -48,8 +48,6 @@
     }
 
     @screen md {
-      @apply justify-center;
-
       &:first-child {
         @apply w-auto text-left;
       }
@@ -66,12 +64,9 @@
 }
 
 .candidate-card__social {
-  @apply p-4;
-  grid-area: social;
+  @apply p-4 md:text-center;
 
-  @screen md {
-    @apply text-center;
-  }
+  grid-area: social;
 }
 
 @screen sm {

source/css/molecules/candidate-table-row.pcss

@@ -44,7 +44,7 @@
 }
 
 .candidate-table-row__affiliation {
-  @apply flex items-center justify-start whitespace-no-wrap py-1 pl-6 pr-4;
+  @apply flex items-center justify-start whitespace-nowrap py-1 pl-6 pr-4;
   grid-area: affiliation;
 }
 

source/css/molecules/chips.pcss

@@ -4,7 +4,7 @@
     py-2 px-3
     text-xs
     font-bold leading-none tracking-normal
-    whitespace-no-wrap;
+    whitespace-nowrap;
 }
 
 .chip--condensed {

source/css/molecules/form-field.pcss

@@ -26,7 +26,6 @@
 
 }
 
-@responsive {
 .form-field__wrapper--row-items {
   @apply flex-row;
 
@@ -42,7 +41,6 @@
     @apply ml-0 mt-4;
   }
 }
-}
 
 .form-field__error,
 .form-field__help-text {