aemi 1.0.19 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 127f13ec42aecde29791dedcdd04f22a6a591297cb81289947ebc2e6c83f7371
-  data.tar.gz: 70ae1d875411c766bc36d361c82413d3ad9f8a3fb4d85428e297d812929d32ac
+  metadata.gz: 2e175581a2edf55001c3a100c02878fa4458f6963b66a1710540341b22e94887
+  data.tar.gz: d413280c443fef0026572dc1c9e6f55ca7eed95536a2a107a43aa3a0d6661dac
 SHA512:
-  metadata.gz: 5408ff51d3442e1ca0286450f2e55f3f3422f64013358f4448a65dfe40a1cffcc9c2e2f22fb72d45fe153746bc0d6329c9bdb340673985e3a53ddab04be9d20f
-  data.tar.gz: 5a9177e9d5ea61f00cca47b7279536d883625f59d9775f7a39856bf9c89a32aa14048978d1ad5202bc403b751ce7c7d51cef4ddd3ea0696a6824af25b1b0f220
+  metadata.gz: e1434b70131c7e130314ff29d0e0d30513998b21ecc7c069b1229f291eee06868319fc0022256f96aec457fa871d2178b3d09705f07a2154686f71f2f29fd076
+  data.tar.gz: 57a08f4c86320b26982ae3aa1b755a940fbae97b0191afe8b8feb886ee755775a6cfb4b465df6d20d1cfe7112d729fa1916f0a496cc1e7107e058ad3530d33ed

data/_data/mime.yml

@@ -0,0 +1,28 @@
+types:
+  images:
+    -
+      ext: avif
+      type: avif
+    -
+      ext: webp
+      type: webp
+    -
+      ext: jpg
+      type: jpeg
+    -
+      ext: png
+      type: png
+  video:
+    -
+      ext: avif.webm
+      type: av1
+    -
+      ext: mov
+      type: H265
+    -
+      ext: webm
+      type: webm
+    -
+      ext: mp4
+      type: mp4
+

data/_data/sizes.yml

@@ -0,0 +1,38 @@
+landscape:
+  -
+    width: 1920
+    height: 1080
+  -
+    width: 1280
+    height: 720
+  -
+    width: 853
+    height: 480
+  -
+    width: 640
+    height: 480
+  -
+    width: 427
+    height: 240
+  -
+    width: 256
+    height: 144
+portrait:
+  -
+    width: 1080
+    height: 1920
+  -
+    width: 720
+    height: 1280
+  -
+    width: 480
+    height: 853
+  -
+    width: 360
+    height: 640
+  -
+    width: 240
+    height: 427
+  -
+    width: 144
+    height: 256

data/_includes/footer.html

@@ -3,11 +3,10 @@
     <div class="contained">
 
         <div class="footer-header">
-            <a class="footer-heading" rel="author" href="{{ '/' | relative_url }}">
+            <a class="footer-title brand" rel="author" href="{{ '/' | relative_url }}">
                 {%- if site.logo -%}
                 <strong class="screen-reader-text">{{ site.title | escape }}</strong>
-                <img src="{{ '/assets/images/logo/' | append: site.logo | relative_url }}"
-                    alt="{{ site.title | escape }}" height="2rem">
+                <img src="{{ site.logo | relative_url }}" alt="{{ site.title | escape }}" height="2rem">
                 {%- else -%}
                 <strong class="h2">{{ site.title | escape }}</strong>
                 {%- endif -%}

data/_includes/header.html

@@ -3,9 +3,9 @@
     <div class="site-header-wrapper contained">
       {%- assign default_paths = site.pages | map: "path" -%}
       {%- assign page_paths = site.header_pages | default: default_paths -%}
-        <a class="site-title" rel="author" href="{{ '/' | relative_url }}">
+        <a class="site-title brand" rel="author" href="{{ '/' | relative_url }}">
             {%- if site.logo -%}
-                <img src="{{ '/assets/images/logo/' | append: site.logo | relative_url }}" alt="{{ site.title | escape }}" height="2rem">
+                <img src="{{ site.logo | relative_url }}" alt="{{ site.title | escape }}" height="2rem">
             {%- else -%}
                 {{ site.title | escape }}
             {%- endif -%}

data/_includes/image-caption.html

@@ -0,0 +1,13 @@
+<figure class="image with-caption">
+    <picture>
+        {% for format in site.data.mime.types.images %}
+        <source srcset="{{ include.name | relative_url }}.{{ format.ext }}" type="image/{{ format.type }}">
+        {% endfor %}
+        <img src="{{ include.name | relative_url }}.png" {% if include.alt != nil %}alt="{{ include.alt | escape }}"{% endif %} loading="lazy">
+    </picture>
+    {% if include.caption != nil %}
+    <figcaption>{{ include.caption | escape }}</figcaption>
+    {% else if include.alt != nil %}
+    <figcaption>{{ include.alt | escape }}</figcaption>
+    {% endif %}
+</figure>

data/_includes/image.html

@@ -0,0 +1,11 @@
+<figure class="image no-caption">
+    <picture>
+        {% for format in site.data.mime.types.images %}
+        <source srcset="{{ include.name | relative_url }}.{{ format.ext }}" type="image/{{ format.type }}">
+        {% endfor %}
+        <img src="{{ include.name | relative_url }}.png" {% if include.alt != nil %}alt="{{ include.alt | escape }}"{% endif %} loading="lazy">
+    </picture>
+    {% if include.alt != nil %}
+    <figcaption class="screen-reader-text">{{ include.alt | escape }}</figcaption>
+    {% endif %}
+</figure>

data/_includes/video-caption.html

@@ -0,0 +1,27 @@
+<figure class="video with-caption">
+    <video {% if include.autoplay == true %}autoplay{% endif %}
+        {% if include.loop == true %}loop{% endif %}
+        {% if include.muted == true %}muted{% endif %}
+        {% if include.controls == true %}controls{% endif %}
+        {% if include.alt != nil %}alt="{{ include.alt | escape }}"{% endif %}
+        width="100%">
+        {% for format in site.data.mime.types.video %}
+        {% if include.portrait == true %}
+        <source src="{{ include.name }}.full.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-height: 2560px)">
+        {% for size in site.data.sizes.portrait %}
+        <source src="{{ include.name }}.{{ size.height }}p.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-height: {{ size.height }}px)">
+        {% endfor %}
+        {% else %}
+        <source src="{{ include.name }}.full.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-width: 2560px)">
+        {% for size in site.data.sizes.landscape %}
+        <source src="{{ include.name }}.{{ size.height }}p.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-width: {{ size.width }}px)">
+        {% endfor %}
+        {% endif %}
+        {% endfor %}
+    </video>
+    {% if include.caption != nil %}
+    <figcaption>{{ include.caption | escape }}</figcaption>
+    {% else if include.alt != nil %}
+    <figcaption>{{ include.alt | escape }}</figcaption>
+    {% endif %}
+</figure>

data/_includes/video.html

@@ -0,0 +1,24 @@
+<figure class="video no-caption">
+    <video {% if include.autoplay == true %}autoplay{% endif %}
+        {% if include.loop == true %}loop{% endif %}
+        {% if include.muted == true %}muted{% endif %}
+        {% if include.controls == true %}controls{% endif %}
+        {% if include.alt != nil %}alt="{{ include.alt | escape }}"{% endif %} width="100%">
+        {% for format in site.data.mime.types.video %}
+        {% if include.portrait == true %}
+        <source src="{{ include.name }}.full.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-height: 2560px)">
+        {% for size in site.data.sizes.portrait %}
+        <source src="{{ include.name }}.{{ size.height }}p.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-height: {{ size.height }}px)">
+        {% endfor %}
+        {% else %}
+        <source src="{{ include.name }}.full.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-width: 2560px)">
+        {% for size in site.data.sizes.landscape %}
+        <source src="{{ include.name }}.{{ size.height }}p.{{ format.ext }}" type="video/{{ format.type }}" media="all and (min-width: {{ size.width }}px)">
+        {% endfor %}
+        {% endif %}
+        {% endfor %}
+    </video>
+    {% if include.alt != nil %}
+    <figcaption class="screen-reader-text">{{ include.alt | escape }}</figcaption>
+    {% endif %}
+</figure>

data/_layouts/home.html

@@ -63,8 +63,8 @@ layout: default
                     <header class="entry-header">
 
                         {% if post.thumbnail %}
-                        <div class="entry-thumbnail"
-                            style="background-image:url(/assets/images/thumbnails{{ post.thumbnail | relative_url }}.svg)">
+                        <div class="entry-thumbnail">
+                            <img src="{{ post.thumbnail | prepend: '/assets/images/thumbnails/' | relative_url }}" alt="{{ post.title | escape }}" loading="lazy" width="100%" height="100%">
                         </div>
                         {% endif %}
 

data/_layouts/post.html

@@ -8,7 +8,7 @@ layout: default
 
         {% if page.thumbnail %}
         <div class="entry-thumbnail">
-            <img src="/assets/images/thumbnails{{ page.thumbnail | relative_url }}.svg" alt="{{ page.title }}" />
+            <img src="/assets/images/thumbnails/{{ page.thumbnail | relative_url }}" alt="{{ page.title }}" />
         </div>
         {% endif %}
         

data/_sass/aemi/_base.scss

@@ -135,7 +135,7 @@ video {
     vertical-align: middle;
 }
 
-:not(figure, a)  {
+:not(figure, figure>picture, a) {
     > img,
     > video {
         margin-top: var(--half-spacing-unit);
@@ -148,14 +148,25 @@ video {
  * Figures
  */
 figure {
+
+    background-color: var(--background-color-lighten);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: var(--quarter-spacing-unit);
+
     > img,
     > video {
+        border-radius: calc(var(--border-radius) / 2);
         display: block;
     }
 }
 
 figcaption {
+    display: block;
     font-size: .875rem;
+    font-style: italic;
+    margin-top: var(--quarter-spacing-unit);
+    text-align: center;
 }
 
 

data/_sass/aemi/_layout.scss

@@ -89,30 +89,41 @@
     position: relative;
 }
 
-.site-title {
-    display: block;
-    font: var(--head-font-weight) 2rem/1 var(--head-font-family);
-    line-height: 1.25;
-    margin-bottom: 0;
-    float: left;
-    z-index: 1000;
+.brand {
+
+    font-weight: var(--head-font-weight);
+    font-family: var(--head-font-family);
+
+    &,
+    &:visited {
+        color: var(--text-color);
+    }
+
+    &,
+    &:hover {
+        text-decoration: none;
+    }
 
     > img {
         height: 2rem;
+        line-height: 1;
         border-radius: 0;
-
         @media (prefers-color-scheme: dark) {
             & {
+                color: var(--text-color-i);
                 filter: invert(100%);
             }
         }
-
     }
+}
 
-    &,
-    &:visited {
-        color: var(--text-color);
-    }
+.site-title {
+    display: block;
+    font-size: 2rem;
+    line-height: 1;
+    margin-bottom: 0;
+    float: left;
+    z-index: 1000;
 }
 
 .site-nav {
@@ -262,26 +273,11 @@
 }
 
 .footer-header {
-
     display: block;
     margin-bottom: var(--half-spacing-unit);
-
-    .footer-heading {
-
-        &,
-        &:visited {
-            color: var(--text-color);
-        }
-
-        > img {
-            height: 2rem;
-            border-radius: 0;
-            @media (prefers-color-scheme: dark) {
-                & {
-                    filter: invert(100%);
-                }
-            }
-        }
+    > .footer-title {
+        font-size: 1.5rem;
+        line-height: 1.25;
     }
 }
 
@@ -402,26 +398,36 @@
                 transform: translate3d(0, 0, 0);
 
                 >.entry-thumbnail {
-                    background-color: var(--item-background-color);
-                    background-position: center center;
-                    background-size: cover;
-                    filter: blur(0);
+                    > img {
+                        border-radius: 0;
+                        filter: blur(0);
+                        object-fit: cover;
+                        object-position: center center;
+                        transform: scale(1);
+                        transition-property: filter, transform;
+                        transition-duration: var(--transition-timing-std);
+                        transition-timing-function: var(--transition-function-std);
+                    }
                     position: absolute;
-                    transform: translate(-50%, -50%) scale(1);
                     height: 100%;
                     width: 100%;
-                    top: 50%;
-                    left: 50%;
-                    transition-property: filter, opacity, transform;
+                    top: 0;
+                    left: 0;
+                    transition-property: opacity;
                     transition-duration: var(--transition-timing-std);
                     transition-timing-function: var(--transition-function-std);
                 }
 
                 &:not(:hover) {
                     >.entry-thumbnail {
-                        filter: blur(10px);
-                        transform: translate(-50%, -50%) scale(1.05);
-                        transition-property: filter, opacity, transform;
+                        > img {
+                            filter: blur(10px);
+                            transform: scale(1.05);
+                            transition-property: filter, transform;
+                            transition-duration: var(--transition-timing-std);
+                            transition-timing-function: var(--transition-function-std);
+                        }
+                        transition-property: opacity;
                         transition-duration: var(--transition-timing-std);
                         transition-timing-function: var(--transition-function-std);
                     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: aemi
 version: !ruby/object:Gem::Version
-  version: 1.0.19
+  version: 1.1.1
 platform: ruby
 authors:
 - Guillaume C
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-06-24 00:00:00.000000000 Z
+date: 2022-06-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -87,12 +87,18 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- _data/mime.yml
+- _data/sizes.yml
 - _data/social.yml
 - _includes/content.html
 - _includes/footer.html
 - _includes/head.html
 - _includes/header.html
+- _includes/image-caption.html
+- _includes/image.html
 - _includes/social.html
+- _includes/video-caption.html
+- _includes/video.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/page.html
@@ -103,6 +109,98 @@ files:
 - _sass/aemi/_layout.scss
 - _sass/aemi/_syntax-highlighting.scss
 - _sass/aemi/_vars.scss
+- assets/font-files/Inter-Black.woff
+- assets/font-files/Inter-Black.woff2
+- assets/font-files/Inter-BlackItalic.woff
+- assets/font-files/Inter-BlackItalic.woff2
+- assets/font-files/Inter-Bold.woff
+- assets/font-files/Inter-Bold.woff2
+- assets/font-files/Inter-BoldItalic.woff
+- assets/font-files/Inter-BoldItalic.woff2
+- assets/font-files/Inter-ExtraBold.woff
+- assets/font-files/Inter-ExtraBold.woff2
+- assets/font-files/Inter-ExtraBoldItalic.woff
+- assets/font-files/Inter-ExtraBoldItalic.woff2
+- assets/font-files/Inter-ExtraLight.woff
+- assets/font-files/Inter-ExtraLight.woff2
+- assets/font-files/Inter-ExtraLightItalic.woff
+- assets/font-files/Inter-ExtraLightItalic.woff2
+- assets/font-files/Inter-Italic.woff
+- assets/font-files/Inter-Italic.woff2
+- assets/font-files/Inter-Light.woff
+- assets/font-files/Inter-Light.woff2
+- assets/font-files/Inter-LightItalic.woff
+- assets/font-files/Inter-LightItalic.woff2
+- assets/font-files/Inter-Medium.woff
+- assets/font-files/Inter-Medium.woff2
+- assets/font-files/Inter-MediumItalic.woff
+- assets/font-files/Inter-MediumItalic.woff2
+- assets/font-files/Inter-Regular.woff
+- assets/font-files/Inter-Regular.woff2
+- assets/font-files/Inter-SemiBold.woff
+- assets/font-files/Inter-SemiBold.woff2
+- assets/font-files/Inter-SemiBoldItalic.woff
+- assets/font-files/Inter-SemiBoldItalic.woff2
+- assets/font-files/Inter-Thin.woff
+- assets/font-files/Inter-Thin.woff2
+- assets/font-files/Inter-ThinItalic.woff
+- assets/font-files/Inter-ThinItalic.woff2
+- assets/font-files/Inter-italic.var.woff2
+- assets/font-files/Inter-roman.var.woff2
+- assets/font-files/Inter.var.woff2
+- assets/font-files/InterDisplay-Black.woff
+- assets/font-files/InterDisplay-Black.woff2
+- assets/font-files/InterDisplay-BlackItalic.woff
+- assets/font-files/InterDisplay-BlackItalic.woff2
+- assets/font-files/InterDisplay-Bold.woff
+- assets/font-files/InterDisplay-Bold.woff2
+- assets/font-files/InterDisplay-BoldItalic.woff
+- assets/font-files/InterDisplay-BoldItalic.woff2
+- assets/font-files/InterDisplay-ExtraBold.woff
+- assets/font-files/InterDisplay-ExtraBold.woff2
+- assets/font-files/InterDisplay-ExtraBoldItalic.woff
+- assets/font-files/InterDisplay-ExtraBoldItalic.woff2
+- assets/font-files/InterDisplay-ExtraLight.woff
+- assets/font-files/InterDisplay-ExtraLight.woff2
+- assets/font-files/InterDisplay-ExtraLightItalic.woff
+- assets/font-files/InterDisplay-ExtraLightItalic.woff2
+- assets/font-files/InterDisplay-Italic.woff
+- assets/font-files/InterDisplay-Italic.woff2
+- assets/font-files/InterDisplay-Light.woff
+- assets/font-files/InterDisplay-Light.woff2
+- assets/font-files/InterDisplay-LightItalic.woff
+- assets/font-files/InterDisplay-LightItalic.woff2
+- assets/font-files/InterDisplay-Medium.woff
+- assets/font-files/InterDisplay-Medium.woff2
+- assets/font-files/InterDisplay-MediumItalic.woff
+- assets/font-files/InterDisplay-MediumItalic.woff2
+- assets/font-files/InterDisplay-Regular.woff
+- assets/font-files/InterDisplay-Regular.woff2
+- assets/font-files/InterDisplay-SemiBold.woff
+- assets/font-files/InterDisplay-SemiBold.woff2
+- assets/font-files/InterDisplay-SemiBoldItalic.woff
+- assets/font-files/InterDisplay-SemiBoldItalic.woff2
+- assets/font-files/InterDisplay-Thin.woff
+- assets/font-files/InterDisplay-Thin.woff2
+- assets/font-files/InterDisplay-ThinItalic.woff
+- assets/font-files/InterDisplay-ThinItalic.woff2
+- assets/font-files/InterDisplay-italic.var.woff2
+- assets/font-files/InterDisplay-roman.var.woff2
+- assets/font-files/InterDisplay.var.woff2
+- assets/font-files/JetBrainsMono-Bold.woff2
+- assets/font-files/JetBrainsMono-BoldItalic.woff2
+- assets/font-files/JetBrainsMono-ExtraBold.woff2
+- assets/font-files/JetBrainsMono-ExtraBoldItalic.woff2
+- assets/font-files/JetBrainsMono-ExtraLight.woff2
+- assets/font-files/JetBrainsMono-ExtraLightItalic.woff2
+- assets/font-files/JetBrainsMono-Italic.woff2
+- assets/font-files/JetBrainsMono-Light.woff2
+- assets/font-files/JetBrainsMono-LightItalic.woff2
+- assets/font-files/JetBrainsMono-Medium.woff2
+- assets/font-files/JetBrainsMono-MediumItalic.woff2
+- assets/font-files/JetBrainsMono-Regular.woff2
+- assets/font-files/JetBrainsMono-Thin.woff2
+- assets/font-files/JetBrainsMono-ThinItalic.woff2
 - assets/images/logo/favicon.svg
 - assets/images/thumbnails/thumbnail.svg
 - assets/main.scss