<div class="post">
    <div class="rich-blog-image">
        <a href="#">
            <img class="" src="../../images/950x250.png" alt="Blog Post" />
        </a>
    </div>
    <div class="post-head">
        <a href="#" class="post-title">Mollit laborum sit dolore do nisi.</a>
        <span class="post-date">19 Oct 2022</span>
    </div>
    <div class="post-body">Excepteur elit et esse excepteur. Velit enim tempor eu esse ex esse sit ad magna dolore occaecat esse. Aliquip amet ipsum incididunt quis nulla esse fugiat. Aliquip ex tempor labore consectetur fugiat reprehenderit voluptate ut duis qui eiusmod amet.</div>
    <div class="tags">
        <label>Tags:</label>
        <ul>

            <li>
                <a href="#">[object Object]</a>
            </li>
            <li class="separator">,</li>

            <li>
                <a href="#">[object Object]</a>
            </li>
            <li class="separator">,</li>

            <li>
                <a href="#">[object Object]</a>
            </li>
            <li class="separator">,</li>

            <li>
                <a href="#">[object Object]</a>
            </li>
            <li class="separator">,</li>

            <li>
                <a href="#">[object Object]</a>
            </li>
            <li class="separator">,</li>

        </ul>
    </div>
    <a href="#" class="read-comments">Comments (0)</a>
    <div class="buttons">
        <a href="" class="read-more">details</a>
    </div>
    <div class="post-footer">
        <div class="post-relations">
            <div class="category-list">
                <label>Categories:</label>
                <ul>
                    <li>
                        <a href="/blog/category/decorating-tips-3">Decorating Tips</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="post-actions">
            <a href="/what-is-hygge-and-how-do-you-get-it" class="read-more">Read More</a>
            <ul class="share-post" id="share-buttons">
                <li class="facebook">
                    <a href="javascript:openShareWindow('https://www.facebook.com/sharer.php?u=https://www.afw.com/what-is-hygge-and-how-do-you-get-it')"></a>
                </li>
                <li class="pinterest">
                    <a data-pin-do="buttonPin" data-pin-custom="true" data-pin-description="What is Hygge, and How Do You Get It?" data-pin-media="" data-pin-log="button_pinit" data-pin-href="#"></a>
                </li>
            </ul>
            <script type="text/javascript">
                function openShareWindow(url) {
                    var winWidth = 520;
                    var winHeight = 400;
                    var winTop = (screen.height / 2) - (winHeight / 2);
                    var winLeft = (screen.width / 2) - (winWidth / 2);
                    window.open(url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
                }! function(a, b, c) {
                    var d, e, f;
                    d = "PIN_" + ~~((new Date).getTime() / 864e5), a[d] ? a[d] += 1 : (a[d] = 1, a.setTimeout(function() {
                        e = b.getElementsByTagName("SCRIPT")[0], f = b.createElement("SCRIPT"), f.type = "text/javascript", f.async = !0, f.src = c.mainUrl + "?" + Math.random(), e.parentNode.insertBefore(f, e)
                    }, 10))
                }(window, document, {
                    mainUrl: "//assets.pinterest.com/js/pinit_main.js"
                });
            </script>
        </div>
    </div>
</div>
<div class="post">
    <div class="rich-blog-image">
        <a href="#">
            {% render '@image--19x5' %}
        </a>
    </div>
    <div class="post-head">
        <a href="#" class="post-title">{{title}}</a>
        <span class="post-date">{{date}}</span>
    </div>
    <div class="post-body">{{body|safe}}</div>
    <div class="tags">
        <label>Tags:</label>
        <ul>
            {% for tag in tags %}
            <li>
                <a href="#">{{tag}}</a>
            </li>
            <li class="separator">,</li>
            {% endfor %}
        </ul>
    </div>
    <a href="#" class="read-comments">Comments ({{comments}})</a>
    <div class="buttons">
        <a href="" class="read-more">details</a>
    </div>
    <div class="post-footer">
        <div class="post-relations">
            <div class="category-list">
                <label>Categories:</label>
                <ul>
                    <li>
                        <a href="/blog/category/decorating-tips-3">Decorating Tips</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="post-actions">
            <a href="/what-is-hygge-and-how-do-you-get-it" class="read-more">Read More</a>
            <ul class="share-post" id="share-buttons">
                <li class="facebook">
                    <a href="javascript:openShareWindow('https://www.facebook.com/sharer.php?u=https://www.afw.com/what-is-hygge-and-how-do-you-get-it')"></a>
                </li>
                <li class="pinterest">
                    <a data-pin-do="buttonPin" data-pin-custom="true" data-pin-description="What is Hygge, and How Do You Get It?" data-pin-media="" data-pin-log="button_pinit" data-pin-href="#"></a>
                </li>
            </ul>
            <script type="text/javascript">
                function openShareWindow(url) {
                    var winWidth = 520;
                    var winHeight = 400;
                    var winTop = (screen.height / 2) - (winHeight / 2);
                    var winLeft = (screen.width / 2) - (winWidth / 2);

                    window.open(url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
                }

                !function (a, b, c) { var d, e, f; d = "PIN_" + ~~((new Date).getTime() / 864e5), a[d] ? a[d] += 1 : (a[d] = 1, a.setTimeout(function () { e = b.getElementsByTagName("SCRIPT")[0], f = b.createElement("SCRIPT"), f.type = "text/javascript", f.async = !0, f.src = c.mainUrl + "?" + Math.random(), e.parentNode.insertBefore(f, e) }, 10)) }(window, document, { mainUrl: "//assets.pinterest.com/js/pinit_main.js" });
            </script>
        </div>
    </div>
</div>
{
  "title": "Mollit laborum sit dolore do nisi.",
  "date": "19 Oct 2022",
  "body": "Excepteur elit et esse excepteur. Velit enim tempor eu esse ex esse sit ad magna dolore occaecat esse. Aliquip amet ipsum incididunt quis nulla esse fugiat. Aliquip ex tempor labore consectetur fugiat reprehenderit voluptate ut duis qui eiusmod amet.",
  "comments": 0,
  "tags": [
    {
      "tag": "non esse"
    },
    {
      "tag": "est do et"
    },
    {
      "tag": "nisi ea nostrud"
    },
    {
      "tag": "ut consectetur"
    },
    {
      "tag": "proident sit"
    }
  ]
}
  • Content:
    .post {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-bottom: rem(50px);
    
        .rich-blog-image {
            order: -1;
            flex: 0 0 100%;
            margin-bottom: 20px;
    
            a {
                display: block;
            }
    
            img {
                display: block;
                border-radius: rem(4px);
                object-fit: cover;
                width: 100%;
                height: auto;
            }
        }
    
        &-head {
            background-color: $color-gray-light;
            flex: 0 0 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            order: 1;
            overflow: hidden;
            padding: rem(10px) rem(12px);
        }
    
        &-title {
            color: $color-gray-darker;
            font-weight: bold;
            line-height: rem(20px);
            text-decoration: none;
        }
    
        &-date {
            color: $color-gray-darker;
            font-style: italic;
        }
    
        &-body {
            order: 2;
            font-size: rem(17px);
            line-height: rem(26px);
            padding: 0;
            margin-bottom: rem(20px);
        }
    
        &-footer {
            border-top: 1px solid #DDDDDD;
            order: 999;
            flex: 0 0 100%;
            padding: rem(20px) rem(10px) 0;
        }
    
        &-relations {
            margin-bottom: rem(20px);
    
            .category-list {
                label {
                    display: inline-block;
                    font-size: rem(17px);
                    font-weight: 700;
                }
    
                ul {
                    display: inline-block;
                    list-style: none;
                    li {
                        a {
                            font-size: rem(14px);
                        }
                    }
                }
            }
        }
    
        .buttons {
            order: 3;
            .read-more {
                display: none;
            }
        }
    
        .read-more {
            background: $color-blue;
            border-radius: rem(4px);
            color: $color-white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: rem(12px);
            padding: rem(10px) rem(20px);
            text-transform: uppercase;
            text-decoration: none;
    
            &:hover,
            &:focus {
                background: $color-primary-red;
            }
        }
    
    
        .read-comments {
            color: $color-black;
            font-size: rem(17px);
            margin-bottom: rem(15px);
            order: 4;
            text-decoration: none;
        }
    
        .tags {
            display: inline-flex;
            order: 5;
            margin-left: auto;
            margin-bottom: rem(15px);
    
            label {
                font-size: rem(17px);
                font-weight: 700;
                margin-right: rem(3px);
            }
    
            ul {
                display: inline-flex;
                list-style: none;
                margin-left: rem(3px);
            }
    
            li {
                font-size: rem(14px);
    
                &:last-child {
                    display: none;
                }
    
                &.separator {
                    margin-right: rem(8px);
                }
            }
        }
    }
  • URL: /components/raw/blog-post/blog-post.scss
  • Filesystem Path: source/patterns/organisms/blog-post/blog-post.scss
  • Size: 3 KB

No notes defined.