diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index 7cdba45f0e4edf09225559fb0927c163e1eced91..74ec85e673490317a52fe47b3521bfc13d7811db 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -2,7 +2,7 @@
.top
a
text-decoration: none
- .grid, .cards
+ .grid, .cards, .list
article
position: relative
display: flex
@@ -128,66 +128,116 @@
&--list
ul
@include list-reset
+ &.title-only
+ li
+ line-height: 1
li
display: block
- line-height: 1
+ li
margin-top: $spacing0
- a
+ > a
@include icon(arrow, before, true)
padding-right: $spacing0
@include hover-translate-icon(before, 5)
@include link
text-decoration-color: rgba(0,0,0,0)
-
+ article
+ .page-title
+ @include h3
+ a
+ @include icon(arrow, after, true)
+ @include hover-translate-icon(after)
+ text-decoration-color: transparent
@include media-breakpoint-down(desktop)
.top
margin-bottom: $spacing0
ul
margin-top: $spacing1
-
+ @include media-breakpoint-up(desktop)
+ ul:not(.title-only)
+ li + li
+ margin-top: $grid-gutter
+ article
+ gap: $grid-gutter
+ flex-direction: row
+ .media
+ flex-shrink: 0
+ margin-bottom: 0
@include in-page-with-sidebar
.block-content
.top
margin-bottom: $spacing1
- ul
+ // .description
+ // margin-bottom: $spacing2
+ ul.title-only
@include grid(2, desktop)
grid-row-gap: $spacing0 !important
grid-column-gap: half($grid-gutter) !important
li
margin-top: 0
+ a
+ @include meta
+ article
+ gap: half($grid-gutter)
+ .media
+ width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ .page-content
+ width: col(6, 8)
@include in-page-without-sidebar
.block-title
a
@include stretched-link(before)
- .block-content
- @include grid
- .top
- align-items: initial
- grid-column: 1 / 8
- margin-bottom: 0
- display: grid
- grid-template-rows: subgrid
- grid-row: span 2
- .block-title
- width: auto
- .description
- @include body-text
- margin-top: 0
- // Default behavior (without page description)
- ul
- @include grid(4, desktop)
+ .top
+ .description
+ p
+ @include h2
+ article
+ .media
+ width: col(4)
+ .page-content
+ width: col(8)
+ &:not(.with-description)
+ ul.title-only
+ @include grid(4, desktop, space(2))
grid-column: 1 / 13
li
margin-top: 0
- // If page description
- .top + ul
- grid-column: 9 / 13
- grid-row: 2
- display: block
+ ul:not(.title-only)
+ @include grid(2, desktop)
li + li
- margin-top: $spacing0
+ margin-top: 0
+ &.with-description
+ .block-content
+ @include grid(12, desktop, $spacing2)
+ row-gap: half($grid-gutter)
+ .top
+ align-items: initial
+ grid-column: 1 / 8
+ margin-bottom: 0
+ display: grid
+ grid-template-rows: subgrid
+ grid-row: span 2
+ .block-title
+ width: auto
+ .description
+ @include body-text
+ margin-top: 0
+ // If page description
+ .top + ul
+ grid-column: 9 / 13
+ grid-row: 2
+ display: block
+ li + li
+ margin-top: $spacing0
+ article
+ margin-top: $spacing3
+ &.with-images
+ .top
+ grid-column: 1 / 7
+ .top + ul
+ grid-column: 7 / 13
+
&--alternate
.top
diff --git a/config.yaml b/config.yaml
index bdc21675650fe4c8de69bec6cb7dfbcfc9e30278..15c4c6412c7a7ebacec16b4fa3d0c16c87d05347 100644
--- a/config.yaml
+++ b/config.yaml
@@ -108,7 +108,7 @@ params:
chapter:
mobile: 350
tablet: 450
- desktop: 1280
+ desktop: 800
features:
mobile: 350
tablet: 400
@@ -126,6 +126,10 @@ params:
tablet: 100
desktop: 255
pages:
+ list:
+ mobile: 400
+ tablet: 800
+ desktop: 300
large:
mobile: 400
tablet: 800
@@ -208,8 +212,8 @@ params:
desktop: 900
item:
mobile: 350
- tablet: 400
- desktop: 900
+ tablet: 990
+ desktop: 600
papers:
hero:
mobile: 400
diff --git a/layouts/partials/GetTruncateContent b/layouts/partials/GetTruncateContent
index d1eaa91db824dbcba4b4eb5399b9f66871531558..ab6ddc1081302ae2c5e29f45ca434816abff9b60 100644
--- a/layouts/partials/GetTruncateContent
+++ b/layouts/partials/GetTruncateContent
@@ -1,5 +1,9 @@
{{ $length := .length | default 150 }}
+{{ $text := .text }}
-{{ $text := replace .text "<" " <" }}
-{{ $text = chomp (truncate $length "…" (safeHTML (plainify $text))) }}
-{{ return $text }}
+{{ if gt .length 0 }}
+ {{ $text = replace .text "<" " <" }}
+ {{ $text = chomp (truncate $length "…" (safeHTML (plainify $text))) }}
+{{ end }}
+
+{{ return (partial "PrepareText" $text) }}
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/pages.html b/layouts/partials/blocks/templates/pages.html
index 6fe502b7387969b6ec2f15b9420da0f2b5aece8d..64394a082c26a6abd62fc1415e37fdb721eeb2ce 100644
--- a/layouts/partials/blocks/templates/pages.html
+++ b/layouts/partials/blocks/templates/pages.html
@@ -4,8 +4,6 @@
{{- $layout := .block.data.layout | default "grid" -}}
{{- with .block.data -}}
-
- {{- $show_main_page := false -}}
{{- $show_main_description := .show_main_description -}}
{{- $show_descriptions := .show_descriptions -}}
{{- $show_images := .show_images -}}
@@ -19,7 +17,6 @@
{{ end }}
{{- with $page }}
- {{- $show_main_page = true -}}
{{- $page_link = $page.Permalink }}
{{ if eq $title "" }}
{{ $title = .Title }}
@@ -28,17 +25,22 @@
{{- $page_class = printf "block-page-%s" .Params.bodyclass }}
{{ end }}
{{ if $show_main_description }}
- {{ if site.Params.pages.index.truncate_description }}
- {{- $main_description = partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.pages.index.truncate_description
- ) -}}
- {{ else }}
- {{- $main_description = partial "PrepareText" .Params.summary -}}
- {{ end }}
+ {{- $main_description = partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) -}}
{{ end }}
{{ end -}}
+ {{ if $main_description }}
+ {{/* SHOULD BE FIXED WITH ORTHOTYPO */}}
+ {{ $main_description = printf "<p>%s</p>" $main_description }}
+ {{ $block_class = printf "%s %s" $block_class "with-description" }}
+ {{ end }}
+ {{ if $show_images }}
+ {{ $block_class = printf "%s %s" $block_class "with-images" }}
+ {{ end }}
+
<div class="{{ $block_class }} {{ $page_class }}">
<div class="container">
<div class="block-content">
@@ -46,8 +48,8 @@
"title" $title
"link" $page_link
"heading_level" $block.ranks.self
- "description" (printf "<p>%s</p>" $main_description)
- )}}
+ "description" $main_description
+ ) }}
{{- partial (printf "blocks/templates/pages/%s.html" $layout) (dict
"pages" .pages
diff --git a/layouts/partials/blocks/templates/pages/alternate.html b/layouts/partials/blocks/templates/pages/alternate.html
index 9b145d88ba3213421844c21a697f9157ffaf608e..90ceabd14e7f0460c2833332f891d7e72d9a1258 100644
--- a/layouts/partials/blocks/templates/pages/alternate.html
+++ b/layouts/partials/blocks/templates/pages/alternate.html
@@ -24,14 +24,10 @@
{{ $heading_tag.close }}
{{ if and $show_descriptions .Params.summary }}
- {{ if site.Params.pages.index.truncate_description }}
- <p>{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.pages.index.truncate_description
- ) }}</p>
- {{ else }}
- <p>{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
{{ end }}
{{ if $show_images }}
diff --git a/layouts/partials/blocks/templates/pages/cards.html b/layouts/partials/blocks/templates/pages/cards.html
index 125e566d1e8fa9452f83a76efd585c50900f4fb9..5689e6e3ecb5a822a976f78e5d949a9baba58be2 100644
--- a/layouts/partials/blocks/templates/pages/cards.html
+++ b/layouts/partials/blocks/templates/pages/cards.html
@@ -17,14 +17,10 @@
{{ $heading_tag.close }}
{{ if and $show_descriptions .Params.summary }}
- {{ if site.Params.pages.index.truncate_description }}
- <p>{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.pages.index.truncate_description
- ) }}</p>
- {{ else }}
- <p>{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
{{ end }}
<p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
diff --git a/layouts/partials/blocks/templates/pages/grid.html b/layouts/partials/blocks/templates/pages/grid.html
index 67a4af74dbbd9eaeaaf5c6b5c5bafd8018df2d43..68b8aa8c9674c743dbc80480504bf56b87c0bf35 100644
--- a/layouts/partials/blocks/templates/pages/grid.html
+++ b/layouts/partials/blocks/templates/pages/grid.html
@@ -26,14 +26,10 @@
{{ $heading_tag.close }}
{{ if and $show_descriptions .Params.summary }}
- {{ if site.Params.pages.index.truncate_description }}
- <p>{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.pages.index.truncate_description
- ) }}</p>
- {{ else }}
- <p>{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
{{ end }}
{{ if $show_images }}
{{- partial "pages/page-media.html" . -}}
diff --git a/layouts/partials/blocks/templates/pages/large.html b/layouts/partials/blocks/templates/pages/large.html
index 112a8bacc5fa8d84260512f1364b205747c4da08..890680f8857ac8ee798b57d33c8a448de9e7dd48 100644
--- a/layouts/partials/blocks/templates/pages/large.html
+++ b/layouts/partials/blocks/templates/pages/large.html
@@ -18,14 +18,10 @@
{{ $heading_tag.close }}
{{ if and $show_descriptions .Params.summary }}
- {{ if site.Params.pages.index.truncate_description }}
- <p>{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.pages.index.truncate_description
- ) }}</p>
- {{ else }}
- <p>{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
{{ end }}
<p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
</div>
diff --git a/layouts/partials/blocks/templates/pages/list.html b/layouts/partials/blocks/templates/pages/list.html
index 0a7945ac4540a8ef4c4da1973b2769eeb1a40dc5..879d74d67904c9ebb5b2b26a0a39b6c8b2d5f0d5 100644
--- a/layouts/partials/blocks/templates/pages/list.html
+++ b/layouts/partials/blocks/templates/pages/list.html
@@ -1,11 +1,51 @@
-<ul>
+{{ $show_descriptions := .show_descriptions }}
+{{ $show_images := .show_images }}
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading_tag := partial "GetHeadingTag" (dict
+ "level" $heading_level
+ "attributes" "class='page-title'"
+)}}
+<ul class="list {{ if and (not $show_descriptions) (not $show_images) }} title-only {{ end }}">
{{ range .pages }}
{{ $page := site.GetPage .file }}
{{ with $page }}
<li>
- <a href="{{- .Permalink -}}">
- {{- partial "PrepareHTML" .Title -}}
- </a>
+ {{ if or $show_descriptions $show_images }}
+ <article>
+ <div class="page-content">
+ {{ $heading_tag.open }}
+ <a href="{{- .Permalink -}}">
+ {{- partial "PrepareHTML" .Title -}}
+ </a>
+ {{ $heading_tag.close }}
+
+ {{ if and $show_descriptions .Params.summary }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
+ {{ end }}
+ </div>
+
+ {{ if $show_images }}
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.blocks.pages.list
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" -}}
+ {{- end -}}
+ </div>
+ {{ end }}
+ </article>
+ {{ else }}
+ <a href="{{- .Permalink -}}">
+ {{- partial "PrepareHTML" .Title -}}
+ </a>
+ {{ end }}
</li>
{{- end -}}
{{ end }}
diff --git a/layouts/partials/blocks/templates/posts/highlight.html b/layouts/partials/blocks/templates/posts/highlight.html
index cadbf215fe9ee2ce01cf13cf717a7fad30292d9c..ee6b189ed7612f824693239de569c59ff50f96e4 100644
--- a/layouts/partials/blocks/templates/posts/highlight.html
+++ b/layouts/partials/blocks/templates/posts/highlight.html
@@ -34,14 +34,10 @@
{{ end }}
{{ if site.Params.posts.index.show_description }}
{{- if (partial "GetTextFromHTML" .Params.summary) -}}
- {{ if site.Params.posts.index.truncate_description }}
- <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.posts.index.truncate_description
- ) }}</p>
- {{ else }}
- <p itemprop="articleBody">{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.posts.index.truncate_description
+ ) }}</p>
{{- end -}}
{{- end -}}
diff --git a/layouts/partials/blocks/templates/posts/large.html b/layouts/partials/blocks/templates/posts/large.html
index 00595f822ffe1a9c75fe736b28781ab3713faec4..d0b66bde8f9865518eac54800e45d78e235dfd69 100644
--- a/layouts/partials/blocks/templates/posts/large.html
+++ b/layouts/partials/blocks/templates/posts/large.html
@@ -36,14 +36,10 @@
{{ if site.Params.posts.index.show_description }}
{{- if (partial "GetTextFromHTML" .Params.summary) -}}
- {{ if site.Params.posts.index.truncate_description }}
- <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.posts.index.truncate_description
- ) }}</p>
- {{ else }}
- <p itemprop="articleBody">{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.posts.index.truncate_description
+ ) }}</p>
{{- end -}}
{{- end -}}
<p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
diff --git a/layouts/partials/events/event.html b/layouts/partials/events/event.html
index 194a1dc2d0cc2132529b5e2cfac967eafcef3a53..633b9adca87a19cbdab7b95ba0b46f477db26b7e 100644
--- a/layouts/partials/events/event.html
+++ b/layouts/partials/events/event.html
@@ -57,14 +57,10 @@
{{- if (partial "GetTextFromHTML" .Params.summary) -}}
<div class="event-description">
<p itemprop="description">
- {{ if site.Params.events.index.truncate_description }}
- {{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.events.index.truncate_description
- ) }}
- {{ else }}
- {{ partial "PrepareText" .Params.summary }}
- {{ end }}
+ {{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.events.index.truncate_description
+ ) }}
</p>
</div>
{{- end -}}
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index d1f611236aa91542caa561fc524ed9c9dbedbff0..fb2fa584fa76cbd6ef6d3f389a1d8cf826751aa5 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -145,6 +145,36 @@
}
}
+ .img-debug {
+ font-size: 1.1rem;
+ line-height: 1.2;
+ padding: 10px;
+ background-color: white;
+ color: black;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ font-family: sans-serif;
+ white-space: nowrap;
+ opacity: 0.9;
+ }
+
+ .img-debug small {
+ font-size: 0.9rem;
+ font-family: sans-serif;
+ display: none;
+ }
+
+ .img-debug:hover small {
+ display: block;
+ }
+
+ .img-debug.is-bad {
+ background: tomato;
+ color: black;
+ }
+
</style>
<script>
@@ -157,6 +187,9 @@
if (e.ctrlKey && e.key === 'w') {
document.body.classList.toggle('full-width');
}
+ if (e.ctrlKey && e.key === 'i') {
+ showImageDimension();
+ }
});
window.addEventListener('pointermove', e => {
@@ -174,23 +207,61 @@
})
})
- function responsiveImageDebugOutput(img) {
- if (!img) {
- throw new TypeError("Expected an image node. Got none.");
- }
- const listener = function () {
- const pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;
- const dimensionWidth = img.naturalWidth * pixelRatio;
- const dimensionHeight = img.naturalHeight * pixelRatio;
- console.log(`
- -------------------------
- Rendered size: ${img.width}x${img.height}
- Intrinsic size: ${dimensionWidth}x${dimensionHeight}
- Device Pixel Ratio: ${window.devicePixelRatio}
- -------------------------
- `);
- };
- if (img.complete) listener();
- //img.addEventListener('load', listener);
+ function showImageDimension() {
+ document.querySelectorAll('img').forEach(img => {
+ const listener = function () {
+ // Return if svg
+ if (img.src.split('.')[1] === 'svg') return;
+
+ const threshold = 0.2, // 20% of tolerance
+ parent = img.parentElement,
+ pixelRatio = window.devicePixelRatio,
+ dimensions = {
+ width: img.naturalWidth * pixelRatio,
+ height: img.naturalHeight * pixelRatio
+ },
+ target = {
+ width: img.width * window.devicePixelRatio,
+ height: img.height * window.devicePixelRatio
+ },
+ essential =
+`<b>Loaded</b> : ${dimensions.width}x${dimensions.height}\n
+<b>Needed</b> : ${target.width}x${target.height}`,
+ result =`
+ Rendered size: ${img.width}x${img.height}
+ Intrinsic size: ${dimensions.width}x${dimensions.height}
+ Device Pixel ratio: ${window.devicePixelRatio}`,
+ p = parent.querySelector('.img-debug') || document.createElement('p'),
+ small = document.createElement('small');
+
+ small.innerText = result;
+ p.innerHTML = essential
+ p.append(small);
+ p.classList.add('img-debug');
+ const ratio = getImageRatio(dimensions, target)
+ if (ratio > threshold) {
+ p.classList.add('is-bad');
+ } else {
+ p.classList.remove('is-bad');
+ }
+
+ const debug = img.querySelector('.img-debug');
+ if (debug) parent.removeChild();
+
+ parent.append(p);
+ parent.style.position = 'relative';
+ };
+
+ if (img.complete) listener();
+ img.addEventListener('load', listener);
+ window.addEventListener('resize', listener);
+ });
+ }
+
+ function getImageRatio(source, target) {
+ const widthRatio = Math.abs((source.width - target.width) / Math.max(source.width, target.width)),
+ heightRatio = Math.abs((source.height - target.height) / Math.max(source.height, target.height));
+
+ return (widthRatio + heightRatio) / 2;
}
</script>
\ No newline at end of file
diff --git a/layouts/partials/posts/post.html b/layouts/partials/posts/post.html
index d0b1d717ce8229c2c068846a9204df8adf75282a..0ee9eb496725a1ca2a0aad331867d77b6662ec5c 100644
--- a/layouts/partials/posts/post.html
+++ b/layouts/partials/posts/post.html
@@ -28,14 +28,10 @@
{{ if site.Params.posts.index.show_description }}
{{- if (partial "GetTextFromHTML" .Params.summary) -}}
- {{ if site.Params.posts.index.truncate_description }}
- <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.posts.index.truncate_description
- ) }}</p>
- {{ else }}
- <p itemprop="articleBody">{{ partial "PrepareText" .Params.summary }}</p>
- {{ end }}
+ <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.posts.index.truncate_description
+ ) }}</p>
{{- end -}}
{{- end -}}