Login
Sections

Content block

20 Sep 2022

Container where people can add any content from admin panel
HTML
SCSS
PostCSS
JS 
                            <div class="content-block">
  <h1>Test</h1>
  <h2>Test</h2>
  <h3>Test</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis
    consequatur illo laborum. Doloribus eaque eligendi excepturi fuga hic
    incidunt, maiores maxime repellendus temporibus. Animi dolorum, laborum
    laudantium obcaecati quidem sapiente.
  </p>
  <blockquote>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam nisi
    similique voluptas voluptatem. Aliquid aperiam cumque, debitis dicta
    dolorem, ducimus ea, eos et eum nemo perferendis similique veritatis
    voluptatibus.
  </blockquote>
  <ul>
    <li>Test li 1</li>
    <li>Test li 2</li>
    <li>Test li 3</li>
    <li>Test li 4</li>
  </ul>
  <ol>
    <li>Test ol 1</li>
    <li>Test ol 2</li>
    <li>Test ol 3</li>
    <li>Test ol 4</li>
  </ol>
</div>

                        
                            /* Variables */
:root {
  --text: #ff8c00;
  --pink: #ed145b;
  --blue: #0089c6;
  --orange: #ff8c00;

  --font-main: "Montserrat", sans-serif;
}

.content-block {
  margin: ac(70px, 35px) 0;

  * {
    &:last-child {
      margin-bottom: 0;
    }
  }

  h1,
  h2,
  h3 {
    font-weight: 400;
    margin-bottom: 19px;

    &:not(:first-child) {
      margin-top: ac(50px, 30px);
    }
  }

  h1 {
    font-size: ac(42px, 36px);
    font-weight: 700;
    color: var(--pink);
  }

  h2 {
    font-size: ac(36px, 30px);
    color: var(--blue);
    font-weight: 600;
  }

  h3 {
    font-size: ac(30px, 26px);
    font-weight: 500;
    color: var(--orange);
  }

  p {
    padding: 0;
    margin-bottom: ac(60px, 40px);
  }

  ul,
  ol,
  li {
    margin-bottom: 35px;
  }

  ul {
    list-style: none;

    li {
      position: relative;
      display: flex;

      &::before {
        content: "";
        background: url("../images/triangle-li-style.svg") no-repeat center center / contain;
        width: ac(20px, 16px);
        height: ac(20px, 16px);
        display: block;
        flex-shrink: 0;
        margin-right: 5px;
        margin-top: ac(12px, 3px);
      }
    }
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  li,
  blockquote {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: ac(24px, 14px);
    line-height: 200%;

    margin-bottom: 0;

    @include media(650) {
      line-height: 175%;
    }
  }

  blockquote {
    font-style: italic;
    position: relative;
    padding-left: ac(25px, 14px);
    margin-bottom: 40px;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: ac(4px, 2px);
      border-radius: 10px;
      background: var(--text);
    }
  }

  img {
    border-radius: ac(40px, 20px);
    margin-top: ac(20px, 10px);
    margin-bottom: ac(76px, 35px);
  }
}
                        
                            /* Mixin */

@define-mixin min-media $width {
  @media only screen and (min-width: $(width)px) {
    @mixin-content;
  }
}

/* Variables */

:root {
  --text: #ff8c00;
  --pink: #ed145b;
  --blue: #0089c6;
  --orange: #ff8c00;

  --font-main: "Montserrat", sans-serif;
}

.content-block {
  margin: ac(70px, 35px) 0;

  * {
    &:last-child {
      margin-bottom: 0;
    }
  }

  h1,
  h2,
  h3 {
    font-weight: 400;
    margin-bottom: 19px;

    &:not(:first-child) {
      margin-top: ac(50px, 30px);
    }
  }

  h1 {
    font-size: ac(42px, 36px);
    font-weight: 700;
    color: var(--pink);
  }

  h2 {
    font-size: ac(36px, 30px);
    color: var(--blue);
    font-weight: 600;
  }

  h3 {
    font-size: ac(30px, 26px);
    font-weight: 500;
    color: var(--orange);
  }

  p {
    padding: 0;
    margin-bottom: ac(60px, 40px);
  }

  ul,
  ol,
  li {
    margin-bottom: 35px;
  }

  ul {
    list-style: none;

    li {
      position: relative;
      display: flex;

      &::before {
        content: "";
        background: url("../images/triangle-li-style.svg") no-repeat center
        center / contain;
        width: ac(20px, 16px);
        height: ac(20px, 16px);
        display: block;
        flex-shrink: 0;
        margin-right: 5px;
        margin-top: ac(12px, 3px);
      }
    }
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  li,
  blockquote {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: ac(24px, 14px);
    line-height: 200%;

    margin-bottom: 0;

    @mixin media 650 {
      line-height: 175%;
    }
  }

  blockquote {
    font-style: italic;
    position: relative;
    padding-left: ac(25px, 14px);
    margin-bottom: 40px;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: ac(4px, 2px);
      border-radius: 10px;
      background: var(--text);
    }
  }

  img {
    border-radius: ac(40px, 20px);
    margin-top: ac(20px, 10px);
    margin-bottom: ac(76px, 35px);
  }
}

                        
                            // Adaptive calculation for pcss
const maxWidth = 1440;
const minWidth = 768;

export function ac( startSize, endSize, minBreakpoint = minWidth, maxBreakpoint = maxWidth) {

const startSizeFormatted = startSize.replace("px", "");
const endSizeFormatted = endSize.replace("px", "");

const difference = startSizeFormatted - endSizeFormatted;

    if (difference > 0) {
         return `min(max(calc(${endSize} + ${difference} * ((100vw - ${minBreakpoint}px) / ${maxBreakpoint - 
         minBreakpoint})),${endSize}),${startSize})`;
    } else {
         return `min(max(calc(${endSize} + ${difference} * ((100vw - ${minBreakpoint}px) / ${maxBreakpoint - 
         minBreakpoint})),${startSize}),${endSize})`;
    }
}

triangle-li-style.svg

0