From 3a787dde527805a8660f9d1888a131054a7185bf Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Fri, 26 Apr 2024 12:58:00 +0200
Subject: [PATCH] alternate and large layout
---
assets/sass/_theme/blocks/projects.sass | 86 +++++++++++++++++-
assets/sass/_theme/sections/projects.sass | 6 ++
.../blocks/templates/projects/alternate.html | 15 ++++
.../blocks/templates/projects/large.html | 56 ++++++++++++
.../blocks/templates/projects/list.html | 1 +
layouts/partials/projects/project.html | 88 +++++++++++--------
6 files changed, 212 insertions(+), 40 deletions(-)
diff --git a/assets/sass/_theme/blocks/projects.sass b/assets/sass/_theme/blocks/projects.sass
index 970ecabd..305c0c0b 100644
--- a/assets/sass/_theme/blocks/projects.sass
+++ b/assets/sass/_theme/blocks/projects.sass
@@ -25,4 +25,88 @@
@include in-page-without-sidebar
@include h2
.grid
- @include grid(2, md)
\ No newline at end of file
+ @include grid(2, md)
+ @include media-breakpoint-down(desktop)
+ .project + .project
+ margin-top: $spacing-4
+
+ .alternate
+ @include media-breakpoint-up(desktop)
+ article
+ width: columns(4)
+ &:not(:first-child)
+ margin-top: -5%
+ &:nth-child(even)
+ margin-left: auto
+ &.image-portrait
+ + .image-portrait
+ margin-top: -30%
+ + .image-square,
+ + .image-landscape
+ margin-top: -15%
+ @include in-page-without-sidebar
+ .top
+ .description
+ @include body-text
+ .grid
+ width: columns(10)
+ margin-left: auto
+ margin-right: auto
+ article
+ width: columns(4)
+ @include media-breakpoint-down(desktop)
+ .project + .project
+ margin-top: $spacing-4
+
+ .large
+ .project
+ .project-meta
+ line-height: $body-size
+ margin-bottom: $spacing-2
+ margin-top: $spacing-2
+ time::after
+ content: ' —'
+ margin-right: $spacing-1
+ time,
+ ul.project-categories
+ align-self: baseline
+ display: inline
+ .project-categories
+ li
+ display: inline
+ .media img
+ width: 100%
+ + .project
+ margin-top: $spacing-4
+ .more
+ @include icon(arrow-right, after)
+ margin-left: $spacing-1
+ transition: transform 0.55s $arrow-ease-transition
+ &:hover
+ .more::after
+ transform: translateX(5px)
+ @include media-breakpoint-up(desktop)
+ .project
+ align-items: flex-end
+ flex-direction: row
+ gap: var(--grid-gutter)
+ .media
+ margin-bottom: 0
+ @include in-page-with-sidebar
+ .project
+ &-title
+ @include h2
+ margin-bottom: space(4)
+ &-content
+ flex: 1
+ .media
+ flex: 1
+ @include in-page-without-sidebar
+ .project
+ &-title
+ @include lead
+ margin-bottom: space(4)
+ &-content
+ width: columns(5)
+ .media
+ width: columns(7)
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/projects.sass b/assets/sass/_theme/sections/projects.sass
index f3b7750e..553a6436 100644
--- a/assets/sass/_theme/sections/projects.sass
+++ b/assets/sass/_theme/sections/projects.sass
@@ -2,6 +2,12 @@
@include article(auto)
.project-title
@include article-title
+ @include media-breakpoint-up(desktop)
+ .project-content
+ display: flex
+ gap: $spacing-2
+ .project-description
+ flex: 1
.projects__section,
.projects_categories__term
diff --git a/layouts/partials/blocks/templates/projects/alternate.html b/layouts/partials/blocks/templates/projects/alternate.html
index e69de29b..f0572031 100644
--- a/layouts/partials/blocks/templates/projects/alternate.html
+++ b/layouts/partials/blocks/templates/projects/alternate.html
@@ -0,0 +1,15 @@
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading := printf "h%d" $heading_level }}
+
+<div class="alternate">
+ {{ range $i, $project := .projects -}}
+ {{ with site.GetPage .file }}
+ {{ partial "projects/project.html" (dict
+ "project" .
+ "heading" $heading
+ "alternate" true
+ "index" $i
+ ) }}
+ {{ end }}
+ {{ end }}
+</div>
diff --git a/layouts/partials/blocks/templates/projects/large.html b/layouts/partials/blocks/templates/projects/large.html
index e69de29b..35db5045 100644
--- a/layouts/partials/blocks/templates/projects/large.html
+++ b/layouts/partials/blocks/templates/projects/large.html
@@ -0,0 +1,56 @@
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading := printf "h%d" $heading_level }}
+
+<div class="large">
+ {{ range $project := .projects -}}
+ {{ with site.GetPage .file }}
+
+ {{ $heading_tag := (dict
+ "open" ((printf "<%s class='project-title' itemprop='name'>" $heading) | safeHTML)
+ "close" ((printf "</%s>" $heading) | safeHTML)
+ ) }}
+
+ <article class="project" itemscope itemtype="https://schema.org/CreativeWork">
+ <div class="project-content">
+ <div class="project-description">
+ {{- $title := partial "PrepareHTML" .Title -}}
+
+ {{ $heading_tag.open }}
+ <a href="{{ .Permalink }}" itemprop="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
+ {{ $heading_tag.close }}
+
+ {{ if and site.Params.projects.index.show_description (partial "GetTextFromHTML" .Params.summary) }}
+ <p itemprop="abstract">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.projects.index.truncate_description
+ ) }}
+ </p>
+ {{ end }}
+ <div class="project-meta">
+ {{ if and site.Params.projects.index.show_year .Params.year }}
+ <time itemprop="datePublished" datetime="{{ .Params.year }}">{{ .Params.year }}</time>
+ {{ end }}
+ {{ if site.Params.projects.index.show_categories }}
+ {{- partial "projects/categories" . -}}
+ {{ end }}
+ </div>
+ <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
+ </div>
+ </div>
+
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.projects.item
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" "projects" -}}
+ {{- end -}}
+ </div>
+
+ </article>
+ {{ end }}
+ {{ end }}
+</div>
diff --git a/layouts/partials/blocks/templates/projects/list.html b/layouts/partials/blocks/templates/projects/list.html
index 92fca126..7a62ade0 100644
--- a/layouts/partials/blocks/templates/projects/list.html
+++ b/layouts/partials/blocks/templates/projects/list.html
@@ -1,5 +1,6 @@
{{ $heading_level := .heading_level | default 3 }}
{{ $heading := printf "h%d" $heading_level }}
+
<div class="list">
{{ range $project := .projects -}}
{{ with site.GetPage .file }}
diff --git a/layouts/partials/projects/project.html b/layouts/partials/projects/project.html
index c6f825ad..42063450 100644
--- a/layouts/partials/projects/project.html
+++ b/layouts/partials/projects/project.html
@@ -1,50 +1,60 @@
{{ $project := .project }}
{{ $heading := .heading | default "h2" }}
+{{- $direction := "" -}}
+{{ $index := .index}}
{{ $heading_tag := (dict
"open" ((printf "<%s class='project-title' itemprop='name'>" $heading) | safeHTML)
"close" ((printf "</%s>" $heading) | safeHTML)
) }}
-{{ with $project }}
-
-<article class="project" itemscope itemtype="https://schema.org/CreativeWork">
-
- <div class="project-content">
- {{- $title := partial "PrepareHTML" .Title -}}
-
- {{ $heading_tag.open }}
- <a href="{{ .Permalink }}" itemprop="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
- {{ $heading_tag.close }}
+{{ $alternate := .alternate | default false }}
- {{ if and site.Params.projects.index.show_description (partial "GetTextFromHTML" .Params.summary) }}
- <p itemprop="abstract">{{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.projects.index.truncate_description
- ) }}</p>
- {{ end }}
-
- {{ if site.Params.projects.index.show_categories }}
- {{- partial "projects/categories" . -}}
- {{ end }}
+{{ with $project }}
- {{ if and site.Params.projects.index.show_year .Params.year }}
- <div class="project-meta">
- <time itemprop="datePublished" datetime="{{ .Params.year }}">{{ .Params.year }}</time>
+ {{ if .Params.image }}
+ {{- $direction = partial "GetImageDirection" .Params.image -}}
+ {{ end }}
+
+ <article class="project {{ if $alternate }}{{ $direction }} {{if not (modBool $index 2)}}left{{ else}}right{{end}}{{end}}" itemscope itemtype="https://schema.org/CreativeWork">
+
+ <div class="project-content">
+ <div class="project-description">
+ {{- $title := partial "PrepareHTML" .Title -}}
+
+ {{ $heading_tag.open }}
+ <a href="{{ .Permalink }}" itemprop="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
+ {{ $heading_tag.close }}
+
+ {{ if and site.Params.projects.index.show_description (partial "GetTextFromHTML" .Params.summary) }}
+ <p itemprop="abstract">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.projects.index.truncate_description
+ ) }}
+ </p>
+ {{ end }}
+
+ {{ if site.Params.projects.index.show_categories }}
+ {{- partial "projects/categories" . -}}
+ {{ end }}
</div>
- {{ end }}
- </div>
-
- <div class="media">
- {{- if .Params.image -}}
- {{- partial "commons/image.html"
- (dict
- "image" .Params.image
- "sizes" site.Params.image_sizes.sections.projects.item
- ) -}}
- {{- else -}}
- {{- partial "commons/image-default.html" "projects" -}}
- {{- end -}}
- </div>
-
-</article>
+ {{ if and site.Params.projects.index.show_year .Params.year }}
+ <div class="project-meta">
+ <time itemprop="datePublished" datetime="{{ .Params.year }}">{{ .Params.year }}</time>
+ </div>
+ {{ end }}
+ </div>
+
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.projects.item
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" "projects" -}}
+ {{- end -}}
+ </div>
+
+ </article>
{{ end }}
\ No newline at end of file
--
GitLab