From 80e32a4f0cbb5fa0a5645d05497488e5c988c098 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Fri, 11 Feb 2022 20:21:35 +0000
Subject: [PATCH] refactor: portfolio title, post thumbnail, post content given by user
---
layouts/_default/single.html | 50 +++++-----
assets/scss/partials/components/_portfolio.scss | 8 +
layouts/portfolio/list.html | 133 ++++++++++++-------------
assets/scss/partials/components/_post.scss | 47 ++++-----
layouts/index.html | 42 ++++----
5 files changed, 140 insertions(+), 140 deletions(-)
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
index 6dfff24..2f6c9d1 100644
--- a/assets/scss/partials/components/_portfolio.scss
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -23,6 +23,14 @@
border-radius: 0.5em;
}
+ &__title {
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 2.6rem;
+ line-height: 1;
+ font-weight: 600;
+ }
+
&__image {
max-width: 100%;
min-width: 100%;
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index 0e33e97..b79902a 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/assets/scss/partials/components/_post.scss
@@ -14,20 +14,36 @@
font-size: 1.4rem;
}
- .post-title {
+ &__thumbnail {
+ width: 100%;
+ height: $thumbnail-height;
+ object-fit: cover;
+ display: block;
+
+ &-wrapper {
+ border-radius: 0.5em;
+ width: 100%;
+ margin-bottom: 1em;
+ box-shadow: $shadow;
+ overflow: hidden;
+ transition: box-shadow 0.3s ease;
+ }
+ }
+
+ &__content {
h1 {
text-transform: uppercase;
font-size: 3em;
letter-spacing: 1px;
line-height: 1;
}
+
h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 2.6rem;
line-height: 1;
font-weight: 600;
- color: $primary;
}
h3 {
@@ -35,22 +51,17 @@
letter-spacing: 1px;
line-height: 1;
font-weight: 600;
- color: $primary;
font-size: 2.2rem;
margin: 0;
}
- color: $primary;
- &:hover {
- text-decoration: underline;
- }
- }
- .post-content {
+
ul,
ol {
line-height: 1.9em;
font-weight: 400;
font-size: 1.4rem;
}
+
img {
display: block;
margin-left: auto;
@@ -58,6 +69,7 @@
width: 65%;
max-width: 100%;
}
+
figure {
max-width: 100%;
height: auto;
@@ -143,23 +155,6 @@
}
}
}
-
- .post-thumbnail {
- width: 100%;
- padding-bottom: 1em;
- box-shadow: #000;
- border-radius: 0.5em;
- overflow: hidden;
- transition: box-shadow 0.3s ease;
-
- img {
- width: 100%;
- height: $thumbnail-height;
- object-fit: cover;
- border: $border;
- border-bottom: 0px;
- }
- }
}
@media screen and (max-width: 960px) {
.post {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 80932b7..ad32624 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -9,33 +9,33 @@
{{ end }}"
>
- <div class="post-content">
- {{ if .Params.thumbnail }}
- <img class="post-thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+ {{ if .Params.thumbnail }}
+ <div class="post__thumbnail-wrapper">
+ <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+ </div>
+
+ {{ end }}
+ <div class="post__content">
+ <h1>{{ .Title }}</h1>
+ {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
+ <div class="info">
+ <em class="fas fa-calendar-day info__icon"></em>
+ <span class="date info__text"
+ >{{ if isset .Site.Params "singledateformat" }}
+ {{ .Date.Format .Site.Params.singleDateFormat }}
+
+
+ {{ else }}
+ {{ .Date.Format "Mon, Jan 2, 2006" }}
+
+
+ {{ end }}</span
+ >
+ <em class="fas fa-stopwatch info__icon"></em>
+ <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
+ </div>
{{ end }}
- <div class="post-title">
- <h1>{{ .Title }}</h1>
- {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
- <div class="info">
- <em class="fas fa-calendar-day info__icon"></em>
- <span class="date info__text"
- >{{ if isset .Site.Params "singledateformat" }}
- {{ .Date.Format .Site.Params.singleDateFormat }}
-
-
- {{ else }}
- {{ .Date.Format "Mon, Jan 2, 2006" }}
-
-
- {{ end }}</span
- >
- <em class="fas fa-stopwatch info__icon"></em>
- <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
- </div>
-
- {{ end }}
- </div>
{{- partial "expirationnote.html" . -}}
diff --git a/layouts/index.html b/layouts/index.html
index d64326f..b4f0684 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,7 +9,7 @@
{{ end }}"
>
- <div class="post-title post-content">
+ <div class="post__content">
{{ .Content }}
</div>
@@ -31,7 +31,7 @@
{{ end }}"
>
- <div class="post-title post-content">
+ <div class="post__content">
<h2>{{ .Params.mainSectionsTitle }}</h2>
</div>
</div>
@@ -50,36 +50,38 @@
{{ end }}"
>
{{ if .Params.thumbnail }}
- <div class="post-thumbnail">
+ <div class="post__thumbnail-wrapper">
<a href="{{ .RelPermalink }}">
- <img src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy" />
+ <img
+ class="post__thumbnail"
+ src="{{ .Params.thumbnail | relURL }}"
+ alt="Thumbnail image"
+ loading="lazy"
+ />
</a>
</div>
{{ end }}
- <div class="post-title">
+ <div class="post__content">
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
- <div class="post-content">
- <div class="p_part">
- <p>
- {{ if .Site.Params.fullPostContent }}
- {{ .Content }}
+ <p>
+ {{ if .Site.Params.fullPostContent }}
+ {{ .Content }}
- {{ else }}
- {{ .Summary }}
+ {{ else }}
+ {{ .Summary }}
- {{ end }}
- </p>
- <!-- add read more -->
- {{- if and (.Truncated) (.Site.Params.readMore) -}}
- <a href="{{ .RelPermalink }}" class="post__more">{{ i18n "read_more" }}</a>
+ {{ end }}
+ </p>
+ <!-- add read more -->
+ {{- if and (.Truncated) (.Site.Params.readMore) -}}
+ <a href="{{ .RelPermalink }}" class="post__more">{{ i18n "read_more" }}</a>
- {{- end -}}
- </div>
- </div>
+ {{- end -}}
+
<!-- -->
<div class="post-footer">
diff --git a/layouts/portfolio/list.html b/layouts/portfolio/list.html
index b6a366b..bbd4083 100644
--- a/layouts/portfolio/list.html
+++ b/layouts/portfolio/list.html
@@ -10,90 +10,85 @@
{{ end }}"
>
- <div class="post-content">
- <div class="post-title">
- <h2>{{ .title }}</h2>
- </div>
-
- {{ range $i, $p := .portfolioitem }}
- <div class="portfolio">
- {{ if .image }}
- <div
- class="portfolio__image-wrapper {{ if (modBool $i 2) }}
- portfolio__image-wrapper--right
-
- {{ else }}
- portfolio__image-wrapper--left
-
- {{ end }}"
- >
- <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
- <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
- </a>
- </div>
-
- {{ end }}
+ <h2 class="portfolio__title">{{ .title }}</h2>
+ {{ range $i, $p := .portfolioitem }}
+ <div class="portfolio">
+ {{ if .image }}
<div
- class="portfolio__description {{ if (modBool $i 2) }}
- portfolio__description--left
+ class="portfolio__image-wrapper {{ if (modBool $i 2) }}
+ portfolio__image-wrapper--right
{{ else }}
- portfolio__description--right
+ portfolio__image-wrapper--left
{{ end }}"
>
- <h2>{{ .name | markdownify }}</h2>
+ <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
+ <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
+ </a>
+ </div>
+
+ {{ end }}
+ <div
+ class="portfolio__description {{ if (modBool $i 2) }}
+ portfolio__description--left
+
+ {{ else }}
+ portfolio__description--right
+
+ {{ end }}"
+ >
+ <h2>{{ .name | markdownify }}</h2>
+ <div class="info">
+ {{ if .status }}
+ <em class="fas fa-flag-checkered"></em>
+ <span>{{ .status }}</span>
+
+ {{ end }}
+ {{ if .venue }}
+ <em class="fas fa-map-marker-alt"></em>
+ <span>{{ .venue }}</span>
+
+ {{ end }}
+ {{ if .start }}
+ <span>Start:</span>
+ <span>{{ .start }}</span>
+
+ {{ end }}
+ {{ if .end }}
+ <span>End:</span>
+ <span>{{ .end }}</span>
+
+ {{ end }}
+ </div>
+ {{ if .authors }}
<div class="info">
- {{ if .status }}
- <em class="fas fa-flag-checkered"></em>
- <span>{{ .status }}</span>
-
- {{ end }}
- {{ if .venue }}
- <em class="fas fa-map-marker-alt"></em>
- <span>{{ .venue }}</span>
-
- {{ end }}
- {{ if .start }}
- <span>Start:</span>
- <span>{{ .start }}</span>
-
- {{ end }}
- {{ if .end }}
- <span>End:</span>
- <span>{{ .end }}</span>
+ {{ range .authors }}
+ <span>{{ . }}</span>
{{ end }}
</div>
- {{ if .authors }}
- <div class="info">
- {{ range .authors }}
- <span>{{ . }}</span>
- {{ end }}
- </div>
-
- {{ end }}
- <p>{{ .description | markdownify }}</p>
- {{ if .link }}
- <div class="portfolio__button-wrapper">
- <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener"
- >Visit Site</a
- >
- </div>
-
- {{ end }}
- <div class="seperator">
- {{ range .tags }}
- <p class="tag">{{ . }}</p>
-
- {{ end }}
+ {{ end }}
+ <p>{{ .description | markdownify }}</p>
+ {{ if .link }}
+ <div class="portfolio__button-wrapper">
+ <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener"
+ >Visit Site</a
+ >
</div>
+
+ {{ end }}
+ <div class="seperator">
+ {{ range .tags }}
+ <p class="tag">{{ . }}</p>
+
+ {{ end }}
</div>
</div>
+ </div>
- {{ end }}
- </div>
+ {{ end }}
</div>
{{ end }}
--
Gitblit v1.10.0