An entire site layout for any post. It is helpful for a news or blog page.
- As you see, this whole page component has just a few styles; most of them come from another element.
Post Page
Open in New Window@use 'sprucecss/scss/spruce' as *;
.l-post {
display: flex;
flex-direction: column;
gap: spacer-clamp('l', 'xl');
margin-block: spacer-clamp('l', 'xl') 0;
}
<header class="site-header">
<div class="container">
<div class="site-header__inner">
<div class="site-header__column">
<a class="site-header__logo" href="#">
<img src="https://ui.sprucecss.com/img/cone-logo.svg" alt="Cone" width="48" height="48" />
</a>
<nav class="site-navigation site-header__navigation" aria-label="Site">
<button class="btn btn--primary btn--icon site-navigation__btn" data-action="navigation-toggle" aria-controls="primary-menu" aria-expanded="false" aria-label="Menu">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M24,19.6c0,-0.331 -0.269,-0.6 -0.6,-0.6l-20.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l20.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-22.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l22.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-15.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l15.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Z'></path>
</svg>
</button>
<ul class="navigation-menu">
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="site-header__actions">
<a class="site-header__email" href="mailto:hello@conedevelopment.com">hello@conedevelopment.com</a>
<a class="btn btn--primary" href="#">
<svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path>
<circle cx='12' cy='7' r='4'></circle>
</svg>
Log in
</a>
</div>
</div>
</div>
</header>
<div class="l-post">
<div class="post-heading">
<div class="container">
<div class="post-heading__inner">
<h1 class="post-heading__title">Why Mountains Is No Friend to Small Business</h1>
<ol class="breadcrumb-list">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<span aria-current="page">Why Mountains Is No Friend to Small Business</span>
</li>
</ol>
<div class="post-heading__meta">
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
<span>Posted in <a href="#">Business</a>, <a href="#">Notes</a></span>
<span>
<span class="sr-only">Posted on</span>
<time datetime="2022-03-17T11:47:25+01:00">Mar 17, 2022</time>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="post-content">
<img src="https://ui.sprucecss.com/img/post/cover/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="snow mountain under stars" lazyload="lazyload" />
<p class="lead">Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman’s call?</p>
<h2>Tad Survive Ensnare Joy Mistake Courtesy Bagshot Row</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble’ll sleeping during jump Narsil.</p>
<h3>North Valor Overflowing Sort</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<iframe src="https://www.youtube.com/embed/umbiR1sbap8" frameborder="0" allowfullscreen="allowfullscreen" lazyload="lazyload"></iframe>
<ul>
<li>Adamant.</li>
<li>Southfarthing!</li>
<li>Witch-king.</li>
<li>Precious.</li>
<li>Gaffer’s!</li>
</ul>
<ul>
<li>Excuse tightening yet survives two cover Undomiel city ablaze.</li>
<li>Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.</li>
<li>Women rippling cold steps rules Thengel finer.</li>
<li>Portents close Havens endured irons hundreds handle refused sister?</li>
<li>Harbor Grubbs fellas riddles afar!</li>
</ul>
<h3>Narsil Enjoying Shattered Bigger Leaderless Retrieve Dreamed Dwarf</h3>
<p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
<ol>
<li>Narsil.</li>
<li>Elros.</li>
<li>Arwen Evenstar.</li>
<li>Maggot’s?</li>
<li>Bagginses?</li>
</ol>
<ol>
<li>Concerning Hobbits l golf air fifth bell prolonging camp.</li>
<li>Grond humble rods nearest mangler.</li>
<li>Enormity Lorien merry gravy stayed move.</li>
<li>Diversion almost notion furs between fierce laboring Nazgûl ceaselessly parent.</li>
<li>Agree ruling um wasteland Bagshot Row expect sleep.</li>
</ol>
<h3>Ere Answering Track Forests Shards Roof!</h3>
<p>Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught éored musing three-day? Disease rune repel source fire Goblinses already?</p>
<div class="gallery gallery--uneven">
<figure class="gallery-item gallery-item--1">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="snow mountain under stars" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--2">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/boris-baldinger-eUFfY6cwjSU-unsplash.jpg" alt="aerial view of mountain" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--3">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/fabrice-villard-QrRSm-QbjW0-unsplash.jpg" alt="mountain coated with snow" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--4">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/guillaume-briard-lSXpV8bDeMA-unsplash.jpg" alt="closeup photo of rocky mountain under blue and white sky" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--5">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/kyle-johnson-Aq7id0ZjEW4-unsplash.jpg" alt="man standing on grass field overlooking mountain" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--6">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/lucas-clara-hvPB-UCAmmU-unsplash.jpg" alt="man with red backpack standing on cliff facing mountains under white sky during daytime" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--7">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/marco-pregnolato-ahYX46whD8s-unsplash.jpg" alt="snow covered mountain under blue sky during daytime" lazyload>
</a>
</figure>
<figure class="gallery-item gallery-item--8">
<a href="#">
<img src="https://ui.sprucecss.com/img/post/gallery/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg" alt="three brown wooden boat on blue lake water taken at daytime" lazyload>
</a>
</figure>
</div>
<div class="table-responsive">
<table class="table table--striped table--rounded table--clear-border">
<thead>
<tr>
<th></th>
<th>Dangers</th>
<th>Playing</th>
<th>Window</th>
<th>Meaning</th>
<th>Pace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Current</td>
<td>living</td>
<td>odds</td>
<td>charged</td>
<td>heads</td>
<td>felt</td>
</tr>
<tr>
<td>Inn</td>
<td>climbing</td>
<td>destroying</td>
<td>overhead</td>
<td>roll</td>
<td>mud</td>
</tr>
<tr>
<td>Breath</td>
<td>relevant</td>
<td>eored</td>
<td>hinges</td>
<td>year</td>
<td>signed</td>
</tr>
<tr>
<td>Accept</td>
<td>threads</td>
<td>name</td>
<td>fitted</td>
<td>precious</td>
<td>attacked</td>
</tr>
<tr>
<td>Chief</td>
<td>sails</td>
<td>first-born</td>
<td>pottery</td>
<td>lever</td>
<td>antagonize</td>
</tr>
<tr>
<td>Unoccupied</td>
<td>victorious</td>
<td>means</td>
<td>lovely</td>
<td>humble</td>
<td>force</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>kinsmen</td>
<td>give</td>
<td>walking</td>
<td>thousand</td>
<td>manners</td>
<td>burning</td>
</tr>
</tfoot>
</table>
</div>
<h4>Afraid Smithy Fellowship Debt Carven Hooks</h4>
<p>What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.</p>
<blockquote>
<p>You shall be the Fellowship of the Ring.</p>
<footer>Númenor,
<cite>sweeter burned verse</cite>
</footer>
</blockquote>
<h5>Should Shirelings Extraordinary Spends Poison’s Willing Enchantment</h5>
<p>I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?</p>
<h6>Improve Drops Absolutely Tight Deceit Potent Treebeard Startled</h6>
<p>J.R.R. Tolkien 3000 uttered veins roaring winds moaning flaming. Meddle <ins>measure pure Samwise Gamgee business!</ins> <sub>Lied mistake Proudfoots pon. Instance 80</sub> morbid ceremonial plunge Anor mad. Questions shells hangs noble Proudfoots throws. <mark>Rampart damage questions Chubbs 3000 conjurer? Single tempt peasants</mark> <strong>Bolg Athelas Mordor Wraiths Azog Undomiel mangler?</strong> Nori Giants Undomiel Rivendell spike posts took. Fool’s Underhill boarded <cite>vanishing twilight unheard-of.</cite> <abbr>Presence Dunland lamb lair</abbr>. Barricade <sup>didn’t feelings purring vine Morgoth. Distract Giants nearing champion</sup> T. Clothing titles quick bother <em>Arod Gloin Beren troop? Balls crashing bastards</em> <small>arrives precisely rascal stubbornness Snowbourn. Hobbitses rose barren</small> <a>strengths tested mirrors moonlight</a> password center? Remade free filthy breaking respect amuse Arod? Vengeance <del>Elessar Wolves posts remain doorway</del> said! Suspects fight Merry hungers locked yelp.</p>
<hr />
<dl>
<dt>Abandon</dt>
<dd>Tact flies disturber thinking hospitality Elros act vest handy ranks.</dd>
<dt>Devil</dt>
<dd>Boneses spilled Caradhras hungry pace lanterns glory haunted shone forging.</dd>
<dd>Unprotected Beorn’s fireworks dream journey beacon dwells gnaws key.</dd>
<dt>Happened</dt>
<dd>Known wanna fifth Bill hell knew she scale.</dd>
<dd>Missing vanish taken colleague sway voice tricks 13 Grimbold.</dd>
<dd>Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.</dd>
</dl>
<figure class="figure">
<img src="https://ui.sprucecss.com/img/post/cover/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg" alt="three brown wooden boat on blue lake water taken at daytime" lazyload="lazyload" />
<figcaption class="figure-caption">Donec at arcu ac diam sodales elementum ac sit amet tortor.</figcaption>
</figure>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="site-footer__top">
<div class="site-footer__column">
<a class="site-footer__logo" href="#">
<img src="https://ui.sprucecss.com/img/cone-logo.svg" alt="Cone" height="48" width="48" />
</a>
</div>
<div class="site-footer__column">
<h3 class="site-footer__title" id="site-footer-title-01">Getting Started</h3>
<ul class="site-footer__navigation" aria-labelledby="site-footer-title-01">
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">Installation</a>
</li>
<li>
<a href="#">Structure and Code</a>
</li>
<li>
<a href="#">Sass</a>
</li>
</ul>
</div>
<div class="site-footer__column">
<h3 class="site-footer__title" id="site-footer-title-02">Elements</h3>
<ul class="site-footer__navigation" aria-labelledby="site-footer-title-02">
<li>
<a href="#">Typography</a>
</li>
<li>
<a href="#">Tables</a>
</li>
<li>
<a href="#">Buttons</a>
</li>
<li>
<a href="#">Forms</a>
</li>
</ul>
</div>
<div class="site-footer__column">
<h3 class="site-footer__title" id="site-footer-title-03">More From Us</h3>
<ul class="site-footer__navigation" aria-labelledby="site-footer-title-03">
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Pine - A web development blog</a>
</li>
<li>
<a href="#">Root - An admin package for Laravel</a>
</li>
<li>
<a href="#">Bite-Sized Accessibility</a>
</li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<div class="theme-switcher" id="theme-switcher">
<button class="btn btn--outline-primary btn--sm btn--icon theme-switcher__system-mode" aria-label="Switch to light mode" data-action="light">
<svg aria-hidden='true' focusable='false' height='24' role='img' style='fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M21,12c0,-4.969 -4.031,-9 -9,-9l0,18c4.969,0 9,-4.031 9,-9Zm3,0c0,6.628 -5.372,12 -12,12c-6.628,0 -12,-5.372 -12,-12c0,-6.628 5.372,-12 12,-12c6.628,0 12,5.372 12,12Z'></path>
</svg>
</button>
<button class="btn btn--outline-primary btn--sm btn--icon theme-switcher__light-mode" aria-label="Switch to dark mode" data-action="dark">
<svg aria-hidden='true' focusable='false' height='24' role='img' style='fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M5.509,3.917l-0.425,-0.426c-0.426,-0.425 -1.113,-0.415 -1.528,0l-0.01,0.011c-0.426,0.425 -0.426,1.113 -0,1.527l0.425,0.426c0.426,0.425 1.102,0.425 1.527,-0l0.011,-0.011c0.426,-0.415 0.426,-1.113 0,-1.527Zm-3.316,6.938l-1.113,-0c-0.6,-0 -1.08,0.48 -1.08,1.08l-0,0.011c-0,0.6 0.48,1.08 1.08,1.08l1.102,-0c0.611,0.011 1.091,-0.469 1.091,-1.069l-0,-0.011c-0,-0.611 -0.48,-1.091 -1.08,-1.091Zm9.818,-10.855l-0.011,-0c-0.61,-0 -1.09,0.48 -1.09,1.08l-0,1.047c-0,0.6 0.48,1.08 1.08,1.08l0.01,0c0.611,0.011 1.091,-0.469 1.091,-1.069l0,-1.058c0,-0.6 -0.48,-1.08 -1.08,-1.08Zm8.444,3.502c-0.425,-0.426 -1.112,-0.426 -1.538,-0.011l-0.425,0.426c-0.426,0.425 -0.426,1.112 -0,1.527l0.011,0.011c0.425,0.425 1.112,0.425 1.527,-0l0.425,-0.426c0.426,-0.425 0.426,-1.102 0,-1.527Zm-1.974,16.473l0.425,0.426c0.426,0.425 1.113,0.425 1.538,-0c0.426,-0.426 0.426,-1.113 0,-1.538l-0.425,-0.426c-0.426,-0.425 -1.113,-0.414 -1.527,0c-0.437,0.436 -0.437,1.113 -0.011,1.538Zm2.247,-8.04l0,0.011c0,0.6 0.48,1.08 1.08,1.08l1.102,-0c0.6,-0 1.08,-0.48 1.08,-1.08l-0,-0.011c-0,-0.6 -0.48,-1.08 -1.08,-1.08l-1.102,-0c-0.6,-0 -1.08,0.48 -1.08,1.08Zm-8.728,-6.535c-3.611,0 -6.545,2.935 -6.545,6.546c-0,3.611 2.934,6.546 6.545,6.546c3.612,-0 6.546,-2.935 6.546,-6.546c0,-3.611 -2.934,-6.546 -6.546,-6.546Zm-0.01,18.492l0.01,-0c0.6,-0 1.08,-0.48 1.08,-1.08l0,-1.048c0,-0.6 -0.48,-1.08 -1.08,-1.08l-0.01,0c-0.6,0 -1.08,0.48 -1.08,1.08l-0,1.048c-0,0.6 0.48,1.08 1.08,1.08Zm-8.444,-3.502c0.425,0.425 1.112,0.425 1.538,-0l0.425,-0.426c0.426,-0.425 0.415,-1.112 0,-1.527l-0.011,-0.011c-0.425,-0.425 -1.112,-0.425 -1.538,0l-0.425,0.426c-0.415,0.436 -0.415,1.112 0.011,1.538Z'></path>
</svg>
</button>
<button class="btn btn--outline-primary btn--sm btn--icon theme-switcher__dark-mode" aria-label="Switch to system mode" data-action="system">
<svg aria-hidden='true' focusable='false' height='24' role='img' style='fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
<path d='M13.684,-0c-6.616,-0 -11.974,5.373 -11.974,12c0,6.627 5.358,12 11.974,12c3.246,0 6.187,-1.296 8.346,-3.396c0.268,-0.263 0.338,-0.67 0.166,-1.002c-0.171,-0.332 -0.541,-0.52 -0.911,-0.456c-0.525,0.092 -1.06,0.14 -1.612,0.14c-5.191,-0 -9.402,-4.222 -9.402,-9.429c0,-3.525 1.929,-6.595 4.784,-8.212c0.327,-0.188 0.493,-0.563 0.413,-0.927c-0.081,-0.364 -0.392,-0.638 -0.767,-0.67c-0.337,-0.027 -0.675,-0.043 -1.017,-0.043l-0,-0.005Z'></path>
</svg>
</button>
</div>
<p class="site-footer__copyright">© 2024 - Some rights are reserved.</p>
<div class="site-footer__social">
<a href="#">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
<path d='M5.373,24l-4.977,0l0,-16.023l4.977,-0l0,16.023Zm-2.491,-18.209c-1.591,0 -2.882,-1.318 -2.882,-2.909c-0,-1.581 1.301,-2.882 2.882,-2.882c1.581,-0 2.882,1.301 2.882,2.882c0,1.591 -1.291,2.909 -2.882,2.909Zm21.118,18.209l-4.971,0l-0,-7.8c-0,-1.859 -0.038,-4.243 -2.588,-4.243c-2.587,0 -2.984,2.02 -2.984,4.109l0,7.934l-4.971,0l-0,-16.023l4.773,-0l-0,2.185l0.07,0c0.664,-1.258 2.287,-2.587 4.708,-2.587c5.036,-0 5.963,3.316 5.963,7.623l-0,8.802Z'></path>
</svg>
</a>
<a href="#">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
<path d='M18.901,1.153l3.681,0l-8.04,9.189l9.458,12.505l-7.406,-0l-5.801,-7.584l-6.637,7.584l-3.682,-0l8.6,-9.829l-9.074,-11.865l7.594,0l5.243,6.932l6.064,-6.932Zm-1.291,19.491l2.039,0l-13.163,-17.404l-2.188,0l13.312,17.404Z'></path>
</svg>
</a>
<a href="#">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
<path d='m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z'></path>
</svg>
</a>
<a href="#">
<svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
<path d='M12.008,5.843c-3.407,-0 -6.155,2.747 -6.155,6.154c0,3.407 2.748,6.155 6.155,6.155c3.407,-0 6.155,-2.748 6.155,-6.155c-0,-3.407 -2.748,-6.154 -6.155,-6.154Zm0,10.156c-2.201,-0 -4.001,-1.795 -4.001,-4.002c-0,-2.207 1.794,-4.001 4.001,-4.001c2.207,-0 4.001,1.794 4.001,4.001c0,2.207 -1.799,4.002 -4.001,4.002Zm7.842,-10.408c0,0.798 -0.643,1.435 -1.435,1.435c-0.799,0 -1.436,-0.642 -1.436,-1.435c-0,-0.793 0.643,-1.436 1.436,-1.436c0.792,0 1.435,0.643 1.435,1.436Zm4.076,1.457c-0.091,-1.923 -0.53,-3.627 -1.939,-5.03c-1.403,-1.403 -3.106,-1.843 -5.029,-1.939c-1.982,-0.113 -7.923,-0.113 -9.905,-0c-1.917,0.091 -3.621,0.53 -5.03,1.934c-1.408,1.403 -1.842,3.106 -1.939,5.029c-0.112,1.982 -0.112,7.923 0,9.905c0.091,1.923 0.531,3.626 1.939,5.03c1.409,1.403 3.107,1.842 5.03,1.939c1.982,0.112 7.923,0.112 9.905,-0c1.923,-0.091 3.626,-0.531 5.029,-1.939c1.404,-1.404 1.843,-3.107 1.939,-5.03c0.113,-1.982 0.113,-7.917 0,-9.899Zm-2.56,12.025c-0.418,1.05 -1.227,1.859 -2.282,2.282c-1.58,0.627 -5.33,0.482 -7.076,0.482c-1.746,0 -5.501,0.14 -7.076,-0.482c-1.05,-0.418 -1.859,-1.226 -2.282,-2.282c-0.627,-1.58 -0.482,-5.329 -0.482,-7.076c0,-1.746 -0.139,-5.501 0.482,-7.076c0.418,-1.05 1.227,-1.858 2.282,-2.282c1.58,-0.626 5.33,-0.482 7.076,-0.482c1.746,0 5.501,-0.139 7.076,0.482c1.05,0.418 1.859,1.227 2.282,2.282c0.627,1.58 0.482,5.33 0.482,7.076c0,1.747 0.145,5.501 -0.482,7.076Z'></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
An entire site layout for any post. It is helpful for a news or blog page.