Skip to content

Style blog pages #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dgorodnichy merged 2 commits into from
May 20, 2024
Merged

Style blog pages #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a10073
Style blog pages
andriyParashchuk May 17, 2024
15d550b
Format date
andriyParashchuk May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 46 additions & 42 deletions themes/beaver/layouts/blog/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,50 @@
{{ partial "page/header.html" . }}
<div id="fl-main-content" class="fl-page-content" itemprop="mainContentOfPage" role="main">
<div class="fl-content-full container">
<div class="row">
<div class="fl-content col-md-12">
<article class="fl-post post-3059 page type-page status-publish hentry" id="fl-post-3059"
itemscope="itemscope" itemtype="https://schema.org/CreativeWork">

<div class="fl-post-content clearfix" itemprop="text">
<div class="fl-builder-content fl-builder-content-3059 fl-builder-content-primary fl-builder-global-templates-locked"
data-post-id="3059">
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-ypvs1kmu8ifb fl-row-default-height fl-row-align-center"
data-node="ypvs1kmu8ifb">
<div class="fl-row-content-wrap">
<div class="fl-row-content fl-row-fixed-width fl-node-content">
<div id="fl-main-content" class="blog" itemprop="mainContentOfPage" role="main">
<div class="fl-content-full container">
<div class="row">
<div class="fl-content col-md-12">
<article class="fl-post post-3059 page type-page status-publish hentry" id="fl-post-3059"
itemscope="itemscope" itemtype="https://schema.org/CreativeWork">

<div class="fl-col-group fl-node-zs5jmu8ew4ri" data-node="zs5jmu8ew4ri">
<div class="fl-col fl-node-n35mvjhird21" data-node="n35mvjhird21">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-v25au8ix6cf1"
data-node="v25au8ix6cf1">
<div class="fl-module-content fl-node-content">
<h1 class="fl-heading">
<span class="fl-heading-text">{{ .Title }}</span>
</h1>
</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-wdsg6r2ykhb1 single-content"
data-node="wdsg6r2ykhb1">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
{{ .Content }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .fl-post-content -->
<div class="fl-post-content clearfix" itemprop="text">
<div class="fl-builder-content fl-builder-content-3059 fl-builder-content-primary fl-builder-global-templates-locked"
data-post-id="3059">
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-ypvs1kmu8ifb fl-row-default-height fl-row-align-center"
data-node="ypvs1kmu8ifb">
<div class="fl-row-content-wrap">
<div class="fl-row-content fl-row-fixed-width fl-node-content">

</article>
{{ partial "page/footer.html" . }}
<div class="fl-col-group fl-node-zs5jmu8ew4ri" data-node="zs5jmu8ew4ri">
<div class="fl-col fl-node-n35mvjhird21" data-node="n35mvjhird21">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-v25au8ix6cf1"
data-node="v25au8ix6cf1">
<div class="fl-module-content fl-node-content">
<h1 class="heading">{{ .Title }}</h1>
</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-wdsg6r2ykhb1 single-content"
data-node="wdsg6r2ykhb1">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
{{ .Content }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .fl-post-content -->

</article>
</div>
</div>
</div>
</div>

{{ partial "page/footer.html" . }}
52 changes: 15 additions & 37 deletions themes/beaver/layouts/page/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="fl-builder-content fl-builder-content-741 fl-builder-global-templates-locked" data-post-id="741">
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-efmcw3bh18k5 fl-row-default-height fl-row-align-center fl-row-has-layers"
data-node="efmcw3bh18k5">
<div class="fl-row-content-wrap">
<div>
<div class="fl-builder-layer fl-builder-shape-layer fl-builder-bottom-edge-layer fl-builder-shape-rect">
<svg class="fl-builder-layer-align-bottom-center" viewBox="0 0 800 450" preserveAspectRatio="none">

Expand All @@ -20,52 +20,30 @@
<div class="fl-col-group fl-node-pr4hl12zykvn" data-node="pr4hl12zykvn">
<div class="fl-col fl-node-sfuljidq5a2h" data-node="sfuljidq5a2h">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-bh5ja2c6xuro" data-node="bh5ja2c6xuro">
<div class="fl-module-content fl-node-content">
<h1 class="fl-heading">
<span class="fl-heading-text">Blog</span>
</h1>
</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-mrsav8gcfhel"
data-node="mrsav8gcfhel">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Browse through our blog page filled with updated information and the
latest tips to help you achieve your goals.</p>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-content-grid fl-node-o6rwlh2bvzie"

<div class="blog fl-module fl-module-pp-content-grid fl-node-o6rwlh2bvzie"
data-node="o6rwlh2bvzie">
<div class="fl-module-content fl-node-content">
<div class="container fl-module-content fl-node-content">
<h1 class="heading">Blog</h1>
<p>Browse through our blog page filled with updated information and the latest tips to help you achieve your goals.</p>
<div class="pp-posts-wrapper">

{{ range where site.RegularPages "Type" "blog" }}
<article>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<time> {{ .Params.created_at }} </time><br />
{{ .Summary }}
</article>
<a class="link" href="{{ .Permalink }}">
<article>
<h2>{{ .Title }}</h2>
{{ .Summary }}
</article>
{{ $t := time.AsTime .Params.created_at }}
{{ $t.Format "Jan 2, 2006" }}
</a>
{{ end }}

<div class="pp-content-grid-empty">
<p>Sorry, we couldn't find any posts. Please try a different search.</p>
<form aria-label="Search" method="get" role="search"
action="{{ absURL "" }}"
title="Type and press Enter to search." data-hs-cf-bound="true">
<input aria-label="Search" type="search"
class="fl-search-input form-control" name="s"
placeholder="Search" value=""
onfocus="if (this.value === 'Search') { this.value = ''; }"
onblur="if (this.value === '') this.value='Search';">
</form>
</div>

</div>

</div>
</div>

<div class="fl-module fl-module-heading fl-node-g39fdkhsc8je" data-node="g39fdkhsc8je">
<div class="fl-module-content fl-node-content">
<h2 class="fl-heading">
Expand Down
99 changes: 99 additions & 0 deletions themes/beaver/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,102 @@ Appearance > Theme Settings > Code or create a child theme.
.g-recaptcha {
float: left;
}

/*Blog*/
.blog {
padding: 135px 0 50px;
}

.blog img {
width: auto;
max-width: 100%;
height: auto;
max-height: 75vh;
margin: 0 auto;
display: block;
}

.blog .container {
max-width: 700px !important;
margin: 0 auto !important;
}

.blog h1,
.blog .heading {
font-size: 42px;
line-height: 52px;
font-weight: 700;
margin: 0 0 32px !important;
}

.blog h2 {
font-size: 24px;
line-height: 30px;
font-weight: 600;
margin: 42px 0 0 !important;
}

.blog h3 {
font-size: 20px;
line-height: 24px;
font-weight: 600;
margin: 26px 0 0 !important;
}

.blog blockquote {
margin: 42px 0 42px -20px;
padding: 0 0 0 23px;
box-shadow: inset 3px 0 0 0 #242424;
position: relative;
}

.blog blockquote p {
margin-top: 22px;
}

.blog blockquote h1,
.blog blockquote h2,
.blog blockquote h3 {
margin-top: 30px;
font-weight: 300;
font-size: 28px;
line-height: 40px;
color: #6B6B6B;
}

.blog blockquote h1 a,
.blog blockquote h2 a,
.blog blockquote h3 a {
color: #6B6B6B;
}

.blog blockquote h1:before,
.blog blockquote h2:before,
.blog blockquote h3:before {
content: '';
position: absolute;
width: 5px;
top: 0;
bottom: 0;
left: 0;
background: #fff;
}

.blog blockquote strong {
font-style: italic;
}

.blog p {
font-size: 20px;
line-height: 32px;
margin-bottom: 42px;
}

.blog p a {
color: inherit;
}

.blog .link {
color: #6B6B6B;
text-decoration: none;
}