Show images on small screens for blog posts, but not for regular pages
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Luca 2023-03-30 00:34:36 +02:00
parent fbf89b79ee
commit 85a39501fb
2 changed files with 36 additions and 11 deletions

View File

@ -160,6 +160,7 @@ nav {
article {
display: flex;
flex-direction: column;
&.preview {
margin-bottom: 3rem;
@ -181,21 +182,15 @@ article {
}
}
&.page {
&.page, &.post {
& > .image {
display: none;
text-align: right;
& > img {
display: block;
height: auto;
width: 100%;
}
@media screen and (min-width: $small) {
display: block;
padding-left: 1.5em;
width: 60%;
}
}
& > .text {
@ -206,6 +201,35 @@ article {
}
}
}
&.page > .image {
display: none;
@media screen and (min-width: $small) {
display: block;
padding-left: 1.5em;
width: 60%;
}
}
&.post {
& > .image {
margin-bottom: 1em;
@media screen and (min-width: $small) {
padding-left: 1.5em;
width: 60%;
}
}
@media screen and (min-width: $small) {
flex-direction: row-reverse;
}
}
@media screen and (min-width: $small) {
flex-direction: row;
}
}
a {

View File

@ -1,9 +1,9 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ $textContent := .Content }}
{{ $pages := .Site.GetPage "/pages" }}
{{ $page := . }}
{{ with .Resources.GetMatch "image.jpg" }}
<article class="page">
<section class="text">{{ $textContent }}</section>
<article class="{{ if $pages.InSection $page }}page{{ else }}post{{ end }}">
<section class="image">
<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
{{ $params := .Params }}
@ -16,6 +16,7 @@
{{ end }}
{{ end }}
</section>
<section class="text">{{ $page.Content }}</section>
</article>
{{ else }}
{{ .Content }}