aemi 1.0.20 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec7ccefb05f6059ece635b2cd9817e395cc0b02c8c92dfd0472358a2c8c9429b
-  data.tar.gz: ecddeccddf858cf15efc3b6e02856b5b934975aff05177fa4db9ee5323b4cf9d
+  metadata.gz: 6e27c4e7657e8d0ec2e5cfdcd33c70a835cb5b5d623a90ac1244d4c429826548
+  data.tar.gz: e8c0778184ea5aa058646af2579adee518224d2117bb7899ba978ce82fa6b400
 SHA512:
-  metadata.gz: 39ab7d0f48532eba97afa866652a6e9c456fdfa22378a7e6a320f585aa19d84bed03bd382b6b4a08eee9412a0a6d7ba98768c144066fa3ac290d7cd614d64802
-  data.tar.gz: 94113eefedcb3271314e768185631ca95a3ad0125e173caf4c91d0b8665789ab8676787e471156e9e55c1247200319fbba0530d2a0046f355c7a597b7629c7b8
+  metadata.gz: 20d1a6090e86bc25a839a811bb06b5c0a89cd657016a9c3bdf9f6d3a6acf999303e811d622d16575d73b6042d8f597d0fb06f6954e96c8bb0638d02730653117
+  data.tar.gz: a3668748422ed9fab515a3ebc689fc1916d8a6bb00c87093df665a89d4cb43746745872c9acf5d55ef38181dc1d8fe43d85112808251407d643f76e7cd78400f

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,7 +3,7 @@
     <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="{{ site.logo | relative_url }}" alt="{{ site.title | escape }}" height="2rem">

data/_includes/header.html

@@ -3,7 +3,7 @@
     <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="{{ site.logo | relative_url }}" alt="{{ site.title | escape }}" height="2rem">
             {%- else -%}

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,7 +63,9 @@ layout: default
                     <header class="entry-header">
 
                         {% if post.thumbnail %}
-                        <div class="entry-thumbnail" style="background-image:url(/assets/images/thumbnails/{{ post.thumbnail | relative_url }})"></div>
+                        <div class="entry-thumbnail">
+                            <img src="{{ post.thumbnail | prepend: '/assets/images/thumbnails/' | relative_url }}" alt="{{ post.title | escape }}" width="100%" height="100%">
+                        </div>
                         {% endif %}
 
                         <a class="entry-info {% if post.thumbnail %}with-thumbnail{% endif %}" href="{{ post.url | relative_url }}">

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.20
+  version: 1.1.2
 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