refactor: portfolio title, post thumbnail, post content given by user

alexanderdavide

11.21.2022 80e32a4f0cbb5fa0a5645d05497488e5c988c098

refactor: portfolio title, post thumbnail, post content given by user

 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%;

 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 {

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


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

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