Skip to content
Snippets Groups Projects
Commit 3a787dde authored by Olivia206's avatar Olivia206
Browse files

alternate and large layout

parent a3336326
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 212 additions and 40 deletions
assets/sass/_theme/blocks/projects.sass
+ 85
− 1
View file @ 3a787dde
......@@ -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
assets/sass/_theme/sections/projects.sass
+ 6
− 0
View file @ 3a787dde
......@@ -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
......
layouts/partials/blocks/templates/projects/alternate.html
+ 15
− 0
View file @ 3a787dde
{{ $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>
layouts/partials/blocks/templates/projects/large.html
+ 56
− 0
View file @ 3a787dde
{{ $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>
layouts/partials/blocks/templates/projects/list.html
+ 1
− 0
View file @ 3a787dde
{{ $heading_level := .heading_level | default 3 }}
{{ $heading := printf "h%d" $heading_level }}
<div class="list">
{{ range $project := .projects -}}
{{ with site.GetPage .file }}
......
layouts/partials/projects/project.html
+ 49
− 39
View file @ 3a787dde
{{ $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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment