From eac53f66f73ced5c1320fc0862102ae88c925007 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Sat, 12 Feb 2022 17:01:34 +0000
Subject: [PATCH] refactor: extract and unify wrapper to baseof
---
assets/scss/partials/components/_sidebar.scss | 8
layouts/_default/baseof.html | 8
layouts/_default/single.html | 176 ++++++++--------
layouts/partials/sidebar.html | 52 ++--
layouts/portfolio/list.html | 149 +++++++-------
assets/scss/partials/components/_post.scss | 8
layouts/index.html | 159 +++++++--------
assets/scss/partials/components/_wrapper.scss | 16 +
8 files changed, 283 insertions(+), 293 deletions(-)
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index f50f1cd..c247435 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/assets/scss/partials/components/_post.scss
@@ -2,14 +2,6 @@
background-color: $accent;
margin: 30px;
- &-wrapper {
- width: 100%;
-
- @include desktop_and_print {
- width: $content-width;
- }
- }
-
&__more {
font-size: 1.4rem;
}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index 63ec0fb..abaf0df 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -19,14 +19,6 @@
width: calc(var(--sidebar-width) - 20%);
}
- &-wrapper {
- width: 100%;
-
- @include desktop_and_print {
- width: $sidebar-width;
- }
- }
-
&__content {
@include desktop_and_print {
display: flex;
diff --git a/assets/scss/partials/components/_wrapper.scss b/assets/scss/partials/components/_wrapper.scss
index 67bc4e2..0fd1484 100644
--- a/assets/scss/partials/components/_wrapper.scss
+++ b/assets/scss/partials/components/_wrapper.scss
@@ -5,4 +5,20 @@
@include desktop {
flex-direction: row;
}
+
+ &__main {
+ width: 100%;
+
+ @include desktop_and_print {
+ width: $content-width;
+ }
+ }
+
+ &__sidebar {
+ width: 100%;
+
+ @include desktop_and_print {
+ width: $sidebar-width;
+ }
+ }
}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4b52f77..418e6c2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -9,8 +9,12 @@
<body class="body">
<header class="header">{{ partial "navbar.html" . }}</header>
<div class="wrapper">
- {{- partial "sidebar.html" . -}}
- {{- block "main" . }}{{- end }}
+ <aside class="wrapper__sidebar">
+ {{- partial "sidebar.html" . -}}
+ </aside>
+ <main class="wrapper__main">
+ {{- block "main" . }}{{- end }}
+ </main>
</div>
{{- partial "footer.html" (dict "context" . "footerClassModifier" "base") -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 93b697c..7c1aefe 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,112 +1,110 @@
{{ define "main" }}
- <div class="post-wrapper">
- <div
- class="post {{ with .Site.Params.doNotLoadAnimations }}
- .
+ <div
+ class="post {{ with .Site.Params.doNotLoadAnimations }}
+ .
- {{ else }}
- animated fadeInDown
+ {{ else }}
+ animated fadeInDown
- {{ end }}"
- >
- {{ if .Params.thumbnail }}
- <div class="post__thumbnail-wrapper">
- <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+ {{ end }}"
+ >
+ {{ 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__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 }}
+
+ {{- partial "expirationnote.html" . -}}
+
+ {{- if (eq .Params.toc true) -}}
+ <h3>Table of Contents</h3>
+ {{ .TableOfContents }}
- {{ else }}
- {{ .Date.Format "Mon, Jan 2, 2006" }}
+ {{- end -}}
+
+ {{ .Content }}
+
+ {{- if isset .Params "series" -}}
+ {{- partial "series.html" . -}}
- {{ end }}</span
- >
- <em class="fas fa-stopwatch info__icon"></em>
- <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
- </div>
+ {{- end -}}
- {{ end }}
-
- {{- partial "expirationnote.html" . -}}
-
- {{- if (eq .Params.toc true) -}}
- <h3>Table of Contents</h3>
- {{ .TableOfContents }}
+ {{- if (eq .Params.contact true) -}}
+ {{- partial "contact.html" . -}}
- {{- end -}}
-
- {{ .Content }}
-
- {{- if isset .Params "series" -}}
- {{- partial "series.html" . -}}
+ {{- end -}}
+ </div>
+ <div class="post__footer">
+ {{ with .Page.Params.Categories }}
+ {{ partial "taxonomy/categories.html" . }}
- {{- end -}}
+ {{ end }}
- {{- if (eq .Params.contact true) -}}
- {{- partial "contact.html" . -}}
-
-
- {{- end -}}
- </div>
- <div class="post__footer">
- {{ with .Page.Params.Categories }}
- {{ partial "taxonomy/categories.html" . }}
-
-
- {{ end }}
-
- {{ with .Page.Params.Tags }}
- {{ partial "taxonomy/tags.html" . }}
-
-
- {{ end }}
- </div>
-
- {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
- {{- if .Site.DisqusShortname -}}
- <div id="comment">
- <h2>{{ i18n "comments" }}</h2>
- {{ template "_internal/disqus.html" . }}
- </div>
-
- {{- end -}}
- {{- if .Site.Params.utterances.repo -}}
- <div id="comment">
- <h2>{{ i18n "comments" }}</h2>
- {{ partial "comments/utterances.html" . }}
- </div>
-
- {{- end -}}
- {{- if .Site.Params.CommentoURL -}}
- <div id="comment">
- <h2>{{ i18n "comments" }}</h2>
- {{ partial "comments/commento.html" . }}
- </div>
-
- {{- end -}}
- {{- if .Site.Params.gitalk.repo -}}
- <div id="comment">
- <h2>{{ i18n "comments" }}</h2>
- {{ partial "comments/gitalk.html" . }}
- </div>
-
- {{- end -}}
+ {{ with .Page.Params.Tags }}
+ {{ partial "taxonomy/tags.html" . }}
{{ end }}
</div>
+
+ {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
+ {{- if .Site.DisqusShortname -}}
+ <div id="comment">
+ <h2>{{ i18n "comments" }}</h2>
+ {{ template "_internal/disqus.html" . }}
+ </div>
+
+ {{- end -}}
+ {{- if .Site.Params.utterances.repo -}}
+ <div id="comment">
+ <h2>{{ i18n "comments" }}</h2>
+ {{ partial "comments/utterances.html" . }}
+ </div>
+
+ {{- end -}}
+ {{- if .Site.Params.CommentoURL -}}
+ <div id="comment">
+ <h2>{{ i18n "comments" }}</h2>
+ {{ partial "comments/commento.html" . }}
+ </div>
+
+ {{- end -}}
+ {{- if .Site.Params.gitalk.repo -}}
+ <div id="comment">
+ <h2>{{ i18n "comments" }}</h2>
+ {{ partial "comments/gitalk.html" . }}
+ </div>
+
+ {{- end -}}
+
+
+ {{ end }}
</div>
{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 997effd..06e822f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,26 @@
{{ define "main" }}
- <main class="post-wrapper">
+ <div
+ class="post {{ with .Site.Params.doNotLoadAnimations }}
+ .
+
+ {{ else }}
+ animated fadeInDown
+
+ {{ end }}"
+ >
+ <div class="post__content">
+ {{ .Content }}
+ </div>
+
+ <!-- (Optional) Home
+ -- on top of `mainSections` content (aka posts) ;
+ -- as declared in content/_index.md
+
+ One can set `mainSections = [""]` and have the content/_index.md specified here
+ -->
+ </div>
+
+ {{ if .Params.mainSectionsTitle }}
<div
class="post {{ with .Site.Params.doNotLoadAnimations }}
.
@@ -10,111 +31,83 @@
{{ end }}"
>
<div class="post__content">
- {{ .Content }}
+ <h2>{{ .Params.mainSectionsTitle }}</h2>
</div>
-
- <!-- (Optional) Home
- -- on top of `mainSections` content (aka posts) ;
- -- as declared in content/_index.md
-
- One can set `mainSections = [""]` and have the content/_index.md specified here
- -->
</div>
- {{ if .Params.mainSectionsTitle }}
- <div
- class="post {{ with .Site.Params.doNotLoadAnimations }}
- .
+ {{ end }}
- {{ else }}
- animated fadeInDown
+ {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+ {{ range $paginator.Pages }}
+ <div
+ class="post {{ with .Site.Params.doNotLoadAnimations }}
+ .
- {{ end }}"
- >
- <div class="post__content">
- <h2>{{ .Params.mainSectionsTitle }}</h2>
+ {{ else }}
+ animated fadeInDown
+
+ {{ end }}"
+ >
+ {{ if .Params.thumbnail }}
+ <div class="post__thumbnail-wrapper">
+ <a href="{{ .RelPermalink }}">
+ <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy" />
+ </a>
</div>
+
+ {{ end }}
+ <div class="post__content">
+ <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
+ <p>
+ {{ if .Site.Params.fullPostContent }}
+ {{ .Content }}
- {{ end }}
-
- {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
- {{ range $paginator.Pages }}
- <div
- class="post {{ with .Site.Params.doNotLoadAnimations }}
- .
{{ else }}
- animated fadeInDown
+ {{ .Summary }}
- {{ end }}"
- >
- {{ if .Params.thumbnail }}
- <div class="post__thumbnail-wrapper">
- <a href="{{ .RelPermalink }}">
- <img
- class="post__thumbnail"
- src="{{ .Params.thumbnail | relURL }}"
- alt="Thumbnail image"
- loading="lazy"
- />
- </a>
- </div>
{{ end }}
- <div class="post__content">
- <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
- </div>
- <p>
- {{ if .Site.Params.fullPostContent }}
- {{ .Content }}
+ </p>
+ <!-- add read more -->
+ {{- if and (.Truncated) (.Site.Params.readMore) -}}
+ <a href="{{ .RelPermalink }}" class="post__more">{{ i18n "read_more" }}</a>
+
+ {{- end -}}
+
+
+ <!-- -->
+ <div class="post__footer">
+ <em class="fas fa-calendar-day"></em>
+ <span class="post__footer-date"
+ >{{ if isset .Site.Params "indexdateformat" }}
+ {{ .Date.Format .Site.Params.indexDateFormat }}
{{ else }}
- {{ .Summary }}
+ {{ .Date.Format "Mon, Jan 2, 2006" }}
- {{ end }}
- </p>
- <!-- add read more -->
- {{- if and (.Truncated) (.Site.Params.readMore) -}}
- <a href="{{ .RelPermalink }}" class="post__more">{{ i18n "read_more" }}</a>
-
- {{- end -}}
+ {{ end }}</span
+ >
+ {{ with .Page.Params.Categories }}
+ {{ partial "taxonomy/categories.html" . }}
- <!-- -->
- <div class="post__footer">
- <em class="fas fa-calendar-day"></em>
- <span class="post__footer-date"
- >{{ if isset .Site.Params "indexdateformat" }}
- {{ .Date.Format .Site.Params.indexDateFormat }}
+ {{ end }}
+
+ {{ with .Page.Params.Tags }}
+ {{ partial "taxonomy/tags.html" . }}
- {{ else }}
- {{ .Date.Format "Mon, Jan 2, 2006" }}
-
-
- {{ end }}</span
- >
- {{ with .Page.Params.Categories }}
- {{ partial "taxonomy/categories.html" . }}
-
-
- {{ end }}
-
- {{ with .Page.Params.Tags }}
- {{ partial "taxonomy/tags.html" . }}
-
-
- {{ end }}
- </div>
+ {{ end }}
</div>
-
- {{ end }}
- <div class="pagination">
- {{ template "partials/pagination.html" . }}
</div>
- </main>
+
+ {{ end }}
+ <div class="pagination">
+ {{ template "partials/pagination.html" . }}
+ </div>
{{ end }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 4c3271a..b5769de 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,32 +1,30 @@
-<aside class="sidebar-wrapper">
- <div
- class="sidebar{{ with .Site.Params.doNotLoadAnimations }}
- .
+<div
+ class="sidebar{{ with .Site.Params.doNotLoadAnimations }}
+ .
- {{ else }}
- animated fadeInDown
+ {{ else }}
+ animated fadeInDown
- {{ end }}"
- >
- <div class="sidebar__content">
- <div class="sidebar__title">
- <img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
- <h3 title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h3>
- <div class="sidebar__title-description">
- <p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
- </div>
+ {{ end }}"
+>
+ <div class="sidebar__content">
+ <div class="sidebar__title">
+ <img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
+ <h3 title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h3>
+ <div class="sidebar__title-description">
+ <p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
</div>
- <ul class="sidebar__list">
- {{ range $item := .Site.Params.socialIcons }}
- <li class="sidebar__list-item">
- <a href="{{ $item.url }}" rel="me" aria-label="{{ $item.title }}" title="{{ $item.title }}">
- <i class="{{ $item.icon }} fa-2x" aria-hidden="true"></i>
- </a>
- </li>
-
- {{ end }}
- </ul>
</div>
- {{- partial "footer.html" (dict "context" . "footerClassModifier" "sidebar") -}}
+ <ul class="sidebar__list">
+ {{ range $item := .Site.Params.socialIcons }}
+ <li class="sidebar__list-item">
+ <a href="{{ $item.url }}" rel="me" aria-label="{{ $item.title }}" title="{{ $item.title }}">
+ <i class="{{ $item.icon }} fa-2x" aria-hidden="true"></i>
+ </a>
+ </li>
+
+ {{ end }}
+ </ul>
</div>
-</aside>
+ {{- partial "footer.html" (dict "context" . "footerClassModifier" "sidebar") -}}
+</div>
diff --git a/layouts/portfolio/list.html b/layouts/portfolio/list.html
index bbd4083..12fede9 100644
--- a/layouts/portfolio/list.html
+++ b/layouts/portfolio/list.html
@@ -1,97 +1,94 @@
{{ define "main" }}
- <div class="post-wrapper">
- {{ range $index, $elemen:= .Site.Data.portfolio.portfolioitems }}
- <div
- class="post {{ with .Site.Params.doNotLoadAnimations }}
- .
+ {{ range $index, $elemen:= .Site.Data.portfolio.portfolioitems }}
+ <div
+ class="post {{ with .Site.Params.doNotLoadAnimations }}
+ .
- {{ else }}
- animated fadeInDown
+ {{ else }}
+ animated fadeInDown
- {{ end }}"
- >
- <h2 class="portfolio__title">{{ .title }}</h2>
- {{ 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 }}
+ {{ 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 }}
- </div>
+ {{ end }}
+
{{ end }}
--
Gitblit v1.10.0