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,12 +9,13 @@

      {{ end }}"
    >
      <div class="post-content">
        {{ if .Params.thumbnail }}
          <img class="post-thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
        <div class="post__thumbnail-wrapper">
          <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
        </div>

        {{ end }}
        <div class="post-title">
      <div class="post__content">
          <h1>{{ .Title }}</h1>
          {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
            <div class="info">
@@ -35,7 +36,6 @@
            </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,18 +50,21 @@
        {{ 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 }}
@@ -78,8 +81,7 @@
              <a href="{{ .RelPermalink }}" class="post__more">{{ i18n "read_more" }}</a>

            {{- end -}}
          </div>
        </div>


        <!--  -->
        <div class="post-footer">

 layouts/portfolio/list.html

@@ -10,11 +10,7 @@

        {{ end }}"
      >
        <div class="post-content">
          <div class="post-title">
            <h2>{{ .title }}</h2>
          </div>

        <h2 class="portfolio__title">{{ .title }}</h2>
          {{ range $i, $p := .portfolioitem }}
            <div class="portfolio">
              {{ if .image }}
@@ -94,7 +90,6 @@

          {{ end }}
        </div>
      </div>

    {{ end }}
  </div>