j1-template 2023.2.1 → 2023.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc1b5b82f8d6be2d2dc76adbddacf4c09fffe79031c991a960b38b072e95e46d
-  data.tar.gz: a49049296063c8570192e46716ac9cb8187e064a51c31d88a9006de5ab055066
+  metadata.gz: 3481c1e515e538d4ff10407b707247783de76d2b265aecfeb265b199e0229e73
+  data.tar.gz: 67551c9cc6710c41a687a1dbb1aa2f0d938100dbb8e0f90a532a1a2626e629a4
 SHA512:
-  metadata.gz: c07f4f4fbe3ecf611e2112aa7282c041a2673cb1249415587c7bcc33c7da0ec950de3b687d16bcce1ff00da5e98969a4b8b011c0ddccb639562873a208148784
-  data.tar.gz: 9e5606789bc62edb2a1ca3a07d2448eec60c72cf97bf0e6d245d928e9409a7d5846ac1eece44b7cdb6e0d5d2db71b12a9e0e26b1dadcfd3368f65620ee65ee12
+  metadata.gz: a728afcb26f2ea060094660475f88925f3c48bc65d19f99fe72e4c6e62c7bc33edbde1f536fa4a0fbd6bc08cd2abde5e9086ee9ba5efb5f7e58c78d6236a8e9a
+  data.tar.gz: ddc364bb096a2875e57dff172d1bc47354b23952655cb5b6de5f88263fc9761ebab940345678241c48ef6ccf13253074ab968d41fee574f8c5f34d50e2e69177

data/_includes/themes/j1/layouts/layout_metadata_generator.html

@@ -201,7 +201,7 @@
 {% comment %} Load additional fonts from remote
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- Google fonts -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" />
+<!-- link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" / -->
 
 
 {% comment %} J1 SEO processing

data/assets/data/banner.html

@@ -259,8 +259,8 @@ exclude_from_search:                    true
                 		<img
                 			class="sticker-image"
                 			src="/assets/images/sticker/600x600/sticker-new-version.png"
-                			alt="Get new version 2023.2.1"
-                			title="Get new version 2023.2.1"
+                			alt="Get new version 2023.2.3"
+                			title="Get new version 2023.2.3"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>

data/assets/data/masonry.html

@@ -101,7 +101,6 @@ exclude_from_search:                    true
         <!-- Collect posts only if group matches -->
         {% for post in site.posts %} {% if post.group contains grid.group %}
 
-
         {% if grid.translate_links %}
           {% assign translate = "" %}
         {% else %}
@@ -114,11 +113,25 @@ exclude_from_search:                    true
           {% assign target = "" %}
         {% endif %}
 
+        {% comment %} Collect CSS image filters
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+        {% assign image_filters = 'filter:' %}
+
+        {% if css_filters.enabled %}
+          {% for filter in css_filters %}
+            {% if filter[0] contains 'enabled' %}
+              {% continue %}
+            {% endif %}
+            {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+          {% endfor %}
+        {% endif %}
+
         <!-- resposive items: 3-2-1 -->
         <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
 
           <article class="card bg-dark text-center text-white border-0 rounded-0 bottom">
-            <img class="card-img {{grid.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="card-img {{grid.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="{{image_filters}}; height: {{grid.image_height}};">
             <div class="card-content mt-5">
 
               {% if post %}
@@ -204,6 +217,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       {% for article in articles %}
       <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
         <!-- Article item -->
@@ -215,11 +242,10 @@ exclude_from_search:                    true
                 <i class="mdi mdi-plus mdi-10x"></i>
               </div>
             </div>
-            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{grid.image_height}}; width: {{grid.image_width}}">
           </a>
           {% else %}
-            <!-- img class="img-fluid img-object--w400" src="{{article.image.path}}" alt="{{article.title}}" / -->
-            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{grid.image_height}}; width: {{grid.image_width}}">
           {% endif %}
           <div class="article-caption">
             <div class="article-caption-heading">
@@ -295,6 +321,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       <!-- Card Image Grid -->
       <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
         {% for image in grid.images %}
@@ -306,7 +346,7 @@ exclude_from_search:                    true
                  data-lightbox="{{grid.id}}-image-group"
                  data-caption="{{image.caption}}"
                  data-title="{{image.caption}}">
-                <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="height: {{grid.image_height}}">
+                <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}; height: {{grid.image_height}}">
               </a>
               {% if grid.caption.enabled %}
               <div class="caption">{{image.caption}}</div>
@@ -337,6 +377,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       <!-- Image Grid -->
       <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
         {% for image in grid.images %}
@@ -346,9 +400,9 @@ exclude_from_search:                    true
             <a href="{{grid.image_base_path}}/{{image.file}}"
                data-lightbox="{{grid.id}}-image-group"
                data-caption="{{image.caption}}"
+               data-containerStyle="{{image_filters}}"
                data-title="{{image.caption}}">
-              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
-              {% if grid.caption.enabled %}
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}">              {% if grid.caption.enabled %}
                 {% if grid.gutters and grid.caption.position == 'top' %}
                   <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
                 {% elsif grid.gutters and grid.caption.position == 'center' %}
@@ -363,7 +417,7 @@ exclude_from_search:                    true
           </div>
           {% else %}
             <div class="{{grid.caption.position}}">
-              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}">
               {% if grid.caption.enabled %}
                 {% if grid.gutters and grid.caption.position == 'top' %}
                   <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>

data/assets/data/slick.html

@@ -80,7 +80,7 @@ exclude_from_search:                    true
 
   {% comment %} Set Carousel defaults
   {% assign carousel.lightbox.enabled  = false %}
-  -------------------------------------------------------------------------- {% endcomment %}
+  ------------------------------------------------------------------------------ {% endcomment %}
 
   {% comment %} Generate HTML portion for all sliders (enabled)
   ------------------------------------------------------------------------------ {% endcomment %}
@@ -120,10 +120,24 @@ exclude_from_search:                    true
             {% assign target = "" %}
           {% endif %}
 
+          {% comment %} Collect CSS image filters
+          ------------------------------------------------------------------------ {% endcomment %}
+          {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+          {% assign image_filters = 'filter:' %}
+
+          {% if css_filters.enabled %}
+            {% for filter in css_filters %}
+              {% if filter[0] contains 'enabled' %}
+                {% continue %}
+              {% endif %}
+              {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+            {% endfor %}
+          {% endif %}
+
           <!-- Article slide -->
           <div class="col-lg-3 col-sm-6 mb-2 mb-lg-0 pr-{{carousel.gutters}}">
             <div id="{{article.title | downcase | replace: ' ' ,'_'}}" class="card bottom">
-              <img class="{{carousel.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" />
+              <img class="{{carousel.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{carousel.image_height}};">
               <!-- Article link (caption) -->
               <div class="caption">
                 <a class="article-link {{translate}}"
@@ -164,10 +178,25 @@ exclude_from_search:                    true
           {% assign target = "" %}
         {% endif %}
 
+        {% comment %} Collect CSS image filters
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+        {% assign image_filters = 'filter:' %}
+
+        {% if css_filters.enabled %}
+          {% for filter in css_filters %}
+            {% if filter[0] contains 'enabled' %}
+              {% continue %}
+            {% endif %}
+            {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+          {% endfor %}
+        {% endif %}
+
         <!-- Collect data only if group matches -->
         <div class="col-lg-3 col-sm-6 mb-2 mb-lg-0 pr-{{carousel.gutters}}">
           <article class="card bg-dark text-center text-white border-0 rounded-0 bottom">
-            <img class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{carousel.image_height}}">
+            <!--  class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{carousel.image_height}}; witdth: {{carousel.image_witdth}}" -->
+            <img class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="{{image_filters}}; height: {{carousel.image_height}};">
 
             <div class="card-img-overlay">
               <div class="card-content mt-4">
@@ -248,6 +277,20 @@ exclude_from_search:                    true
     ---------------------------------------------------------------------------- {% endcomment %}
     {% if carousel.type == 'image' %}
 
+    {% comment %} Collect CSS image filters
+    ------------------------------------------------------------------------ {% endcomment %}
+    {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+    {% assign image_filters = 'filter:' %}
+
+    {% if css_filters.enabled %}
+      {% for filter in css_filters %}
+        {% if filter[0] contains 'enabled' %}
+          {% continue %}
+        {% endif %}
+        {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+      {% endfor %}
+    {% endif %}
+
       <!-- Image slider -->
       <div id="{{carousel.id}}" class="{{carousel.id | replace: '_','-' }}">
         {% for slide in carousel.slides %}
@@ -255,13 +298,13 @@ exclude_from_search:                    true
           <div class="card {{carousel.captions.position}}">
           {% if carousel.lightbox.enabled %}
             <a class="card-link" href="{{carousel.image_base_path}}/{{slide.image}}" data-caption="{{slide.caption}}" target="_blank">
-              <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="height: {{carousel.image_height}}">
+              <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="{{image_filters}}; height: {{carousel.image_height}};">
             </a>
             {% if carousel.captions.enabled %}
               <div id="{{carousel.id}}_caption"class="caption">{{slide.caption}}</div>
             {% endif %}
           {% else %}
-            <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="height: {{carousel.image_height}}">
+            <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="{{image_filters}}; height: {{carousel.image_height}};"">
             {% if carousel.captions.enabled %}
               <div id="{{carousel.id}}_caption"class="caption">{{slide.caption}}</div>
             {% endif %}

data/assets/themes/j1/adapter/js/attic.js

@@ -147,11 +147,18 @@ j1.adapter.attic = (function (j1, window) {
         if ( j1.getState() === 'finished' && pageVisible ) {
           {% if attic_options.enabled %}
           logger.info('\n' + 'create all attics configured');
+
+          // hide page while attic is being created
+          // jadams, 2023-05-12: Visible page/attic cause high number
+          // for cumulative layout shift (CLS)
+          //
+          $('#no_flicker').css('display', 'none');
+
           _this.createAllAttics();
           clearInterval(dependencies_met_page_ready);
           {% else %}
-          logger.warn('\n' + 'found module attics disabled');
-          // add additional top space
+          logger.debug('\n' + 'found module attics disabled');
+          // add additional top space if attics are disabled
           $('#content').addClass('mt-5');
           clearInterval(dependencies_met_page_ready);
           {% endif %}
@@ -379,6 +386,9 @@ j1.adapter.attic = (function (j1, window) {
                 $('.attic-caption').css('opacity', '1');
               }
 
+              // show page if attic created
+              $('#no_flicker').css('display', 'block');
+
               // jadams, 2022-08-09:
               // resize the (background-)image to make sure the 'attic'
               // container is changed in size (heigth) if title/tagline

data/assets/themes/j1/adapter/js/lightbox.js

@@ -90,7 +90,7 @@ j1.adapter.lightbox = (function (j1, window) {
   var lightboxDefaults;
   var lightboxSettings;
   var lightboxOptions;
-  var frontmatterOptions;  
+  var frontmatterOptions;
   var _this;
   var logger;
   var logText;
@@ -132,7 +132,9 @@ j1.adapter.lightbox = (function (j1, window) {
       lightboxOptions           = $.extend(true, {}, lightboxDefaults, lightboxSettings, frontmatterOptions);
 
       var dependencies_met_j1_finished = setInterval(function() {
-        if (j1.getState() == 'finished') {
+        var pageState   = $('#no_flicker').css("display");
+        var pageVisible = (pageState == 'block') ? true: false;
+        if (j1.getState() == 'finished' && pageVisible) {
 
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
@@ -153,13 +155,31 @@ j1.adapter.lightbox = (function (j1, window) {
             wrapAround:                   lightboxOptions.wrapAround
           });
 
-          _this.setState('finished');
-          logger.debug('\n' + 'state: ' + _this.getState());
-          logger.info('\n' + 'initializing module finished');
+          // _this.setState('finished');
+          // logger.debug('\n' + 'state: ' + _this.getState());
+          // logger.info('\n' + 'initializing module finished');
 
           clearInterval(dependencies_met_j1_finished);
         } // END dependencies_met_j1_finished
       }, 25);
+
+      // jadams, 2023-05-07: place CSS styles in GENERAL on a LIGHTBOX V2 doesn't help.
+      // a lightbox shoud restpect the individual IMAGE styles
+      // FixMe:
+      //
+      var dependencies_met_lb_v2_finished = setInterval(function() {
+        var lb_v2 = $('#lightbox').length;
+        if (lb_v2) {
+          _this.setState('finished');
+          logger.debug('\n' + 'state: ' + _this.getState());
+          logger.info('\n' + 'initializing module finished');
+
+          // $('#lightbox').css("filter: grayscale(0.8) contrast(0.8) brightness(0.7) sepia(1)");
+
+          clearInterval(dependencies_met_lb_v2_finished);
+        }
+      }, 25); // END dependencies_met_lb_v2_finished
+
     }, // END init lightbox
 
     // -------------------------------------------------------------------------

data/assets/themes/j1/core/css/vendor.css

@@ -2334,28 +2334,33 @@ ul.disc {
 */
 @font-face {
   font-family: "Roboto";
-  src: local(Roboto Thin), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff") format("woff");
-  font-weight: 100; }
+  font-weight: 100;
+  font-display: swap;
+  src: local(Roboto Thin), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff") format("woff"); }
 
 @font-face {
   font-family: "Roboto";
-  src: local(Roboto Light), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff") format("woff");
-  font-weight: 300; }
+  font-weight: 300;
+  font-display: swap;
+  src: local(Roboto Light), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff") format("woff"); }
 
 @font-face {
   font-family: "Roboto";
-  src: local(Roboto Regular), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff") format("woff");
-  font-weight: 400; }
+  font-weight: 400;
+  font-display: swap;
+  src: local(Roboto Regular), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff") format("woff"); }
 
 @font-face {
   font-family: "Roboto";
-  src: local(Roboto Medium), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff") format("woff");
-  font-weight: 500; }
+  font-weight: 500;
+  font-display: swap;
+  src: local(Roboto Medium), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff") format("woff"); }
 
 @font-face {
   font-family: "Roboto";
-  src: local(Roboto Bold), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff") format("woff");
-  font-weight: 700; }
+  font-weight: 700;
+  font-display: swap;
+  src: local(Roboto Bold), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff2") format("woff2"), url("/assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff") format("woff"); }
 
 /*
  # -----------------------------------------------------------------------------
@@ -2374,51 +2379,12 @@ ul.disc {
  # See: https://fonts.google.com/specimen/Roboto+Slab#license
  # -----------------------------------------------------------------------------
 */
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
-
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
-
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2) format("woff2");
-  unicode-range: U+1F00-1FFF; }
-
-/* greek */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2) format("woff2");
-  unicode-range: U+0370-03FF; }
-
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2) format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
-
 /* latin-ext */
 @font-face {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 300;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format("woff2");
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
 
@@ -2427,54 +2393,16 @@ ul.disc {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 300;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
 
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
-
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
-
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2) format("woff2");
-  unicode-range: U+1F00-1FFF; }
-
-/* greek */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2) format("woff2");
-  unicode-range: U+0370-03FF; }
-
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2) format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
-
 /* latin-ext */
 @font-face {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format("woff2");
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
 
@@ -2483,54 +2411,16 @@ ul.disc {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
 
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
-
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
-
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2) format("woff2");
-  unicode-range: U+1F00-1FFF; }
-
-/* greek */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2) format("woff2");
-  unicode-range: U+0370-03FF; }
-
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2) format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
-
 /* latin-ext */
 @font-face {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format("woff2");
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
 
@@ -2539,7 +2429,6 @@ ul.disc {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-
-/* cyrillic-ext */