mirror of https://github.com/lxndrblz/anatole.git
parent: 13383f64 | patch | commit | ignore whitespace
alexanderdavide
12.01.2022 eac53f66f73ced5c1320fc0862102ae88c925007 
refactor: extract and unify wrapper to baseof
8 files modified
576 ■■■■■ changed files
assets/scss/partials/components/_post.scss 8 ●●●●● patch | view | raw | blame | history
assets/scss/partials/components/_sidebar.scss 8 ●●●●● patch | view | raw | blame | history
assets/scss/partials/components/_wrapper.scss 16 ●●●●● patch | view | raw | blame | history
layouts/_default/baseof.html 8 ●●●●● patch | view | raw | blame | history
layouts/_default/single.html 176 ●●●●● patch | view | raw | blame | history
layouts/index.html 159 ●●●●● patch | view | raw | blame | history
layouts/partials/sidebar.html 52 ●●●●● patch | view | raw | blame | history
layouts/portfolio/list.html 149 ●●●●● patch | view | raw | blame | history 
 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;


  }




 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;




 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;


    }


  }


}




 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") -}}




 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 }}




 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 }}




 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>




 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 }}