feat: home and blog layouts; initial BEM
This commit is contained in:
Ayo Ayco
parent
6ea362643f
commit
587e294218
6 changed files with 635 additions and 496 deletions
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe",
|
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe",
|
||||||
|
"editor.formatOnSave": true,
|
||||||
}
|
}
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<div id="mc_embed_signup" class="float-left">
|
<div id="mc_embed_signup" class="float-left">
|
||||||
<form action="https://github.us17.list-manage.com/subscribe/post?u=85102052c447ce8a8bba06f24&id=2366f7f35a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
<form action="https://github.us17.list-manage.com/subscribe/post?u=85102052c447ce8a8bba06f24&id=2366f7f35a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||||
<div id="mc_embed_signup_scroll">
|
<div id="mc_embed_signup_scroll">
|
||||||
<label for="mce-EMAIL">Sign up for Exclusive Web & Productivity Tips</label>
|
<label for="mce-EMAIL">Exclusive Web & Productivity Tips</label>
|
||||||
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required>
|
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required>
|
||||||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div>
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div>
|
||||||
<div class="clear"><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
<div class="clear"><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
|
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
|
||||||
</div>
|
</div>
|
||||||
<div class="subscription-message-text float-left">
|
<div class="subscription-message-text float-left">
|
||||||
<p>Get my technology and productivity letters.</p>
|
<p>Get newsletters on life and personal growth.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear-both"></div>
|
<div class="clear-both"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,37 +2,52 @@
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="home">
|
<div class="blog-home">
|
||||||
|
|
||||||
{% if site.posts.size > 0 %}
|
{% if site.posts.size > 0 %}
|
||||||
<h2 class="post-list-heading">{{ page.list_title }}</h2>
|
<h2 class="blog-home__list-title">{{ page.list_title }}</h2>
|
||||||
<ul class="post-list">
|
<ul class="blog-home__list-items">
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
<li>
|
<li class="blog-home__list-items__item">
|
||||||
<span class="post-meta">
|
<div class="blog-home__list-items__item__header">
|
||||||
{% if post.author %}
|
<div>
|
||||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ post.author }}</span></span> •
|
<h3 class="blog-home__list-items__item__header__title">
|
||||||
{% endif %}
|
<a href="{{ post.url | relative_url }}"
|
||||||
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
|
>{{ post.title | escape }}</a
|
||||||
{{ post.date | date: date_format }}
|
>
|
||||||
</span>
|
|
||||||
<h3>
|
|
||||||
<a class="post-link post-title" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
|
|
||||||
</h3>
|
</h3>
|
||||||
<div class="float-left post-excerpt">
|
|
||||||
{% if post.image != '' %}
|
|
||||||
<a href="{{post.url}}"><img class="float-right post-thumb" alt="{{ post.description | escape }}" src="../assets/images/{{ post.image }}.jpg" /></a>
|
|
||||||
{% endif %}
|
|
||||||
{{ post.excerpt }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clear-both"></div>
|
<div class="blog-home__list-items__item__header__description">
|
||||||
<div class="post-readmore">
|
<span>{{post.description}}</span>
|
||||||
<a href="{{ post.url | relative_url }}" class="button">Continue Reading</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-home__list-items__item__excerpt">
|
||||||
|
{% if post.image %}
|
||||||
|
<a href="{{post.url | relative_url}}"
|
||||||
|
><img
|
||||||
|
class="blog-home__list-items__item__excerpt__thumb"
|
||||||
|
alt="{{ post.description | escape }}"
|
||||||
|
title="{{ post.description | escape }}"
|
||||||
|
src="../assets/images/{{ post.image }}.jpg"
|
||||||
|
/></a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{post.url | relative_url}}"
|
||||||
|
><img
|
||||||
|
class="blog-home__list-items__item__excerpt__thumb"
|
||||||
|
alt="{{ post.description | escape }}"
|
||||||
|
title="{{ post.description | escape }}"
|
||||||
|
src="../assets/images/hello-world.jpg"
|
||||||
|
/></a>
|
||||||
|
|
||||||
|
{% endif %} {{ post.excerpt }}
|
||||||
|
</div>
|
||||||
|
<div class="blog-home__list-items__item__readmore">
|
||||||
|
<a href="{{ post.url | relative_url }}" class="button"
|
||||||
|
>Continue Reading</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,110 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
|
||||||
|
|
||||||
<header class="post-header">
|
<article
|
||||||
<p class="post-meta">
|
class="blog-post h-entry"
|
||||||
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
itemscope
|
||||||
{% if page.author %}
|
itemtype="http://schema.org/BlogPosting"
|
||||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span> •
|
>
|
||||||
{% endif %}
|
<header class="blog-post__header">
|
||||||
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
|
<div>
|
||||||
{{ page.date | date: date_format }}
|
<h3 class="blog-post__header__title" itemprop="name headline">
|
||||||
|
{{ page.title | escape }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="blog-post__header__description">
|
||||||
|
<span>{{page.description}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="blog-post__header__meta">
|
||||||
|
<span>
|
||||||
|
<time
|
||||||
|
datetime="{{ page.date | date_to_xmlschema }}"
|
||||||
|
itemprop="datePublished"
|
||||||
|
>
|
||||||
|
{% if page.author %} By
|
||||||
|
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||||
|
<span class="blog-post__header__meta__author h-card" itemprop="name"
|
||||||
|
>{{ page.author }}</span
|
||||||
|
></span
|
||||||
|
>
|
||||||
|
| {% endif %} {% assign date_format = site.minima.date_format |
|
||||||
|
default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
|
||||||
</time>
|
</time>
|
||||||
</p>
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h3>
|
|
||||||
{% if page.image %}
|
{% if page.image %}
|
||||||
<img alt="{{ page.description }} | Developer Blog How To" title="{{page.description}}" src="../assets/images/{{page.image}}.jpg" />
|
<img
|
||||||
<p class="image-caption">{{page.description}}</p>
|
class="blog-post__header__image"
|
||||||
{% if page.image-attrib %}
|
alt="{{ page.description | escape }} | Developer Blog How To"
|
||||||
{% if page.image-attrib-url %}
|
title="{{page.description | escape}}"
|
||||||
<p class="image-caption"><a href="{{ page.image-attrib-url }}" targe="_blank">Photo © {{ page.image-attrib }}</a></p>
|
src="../assets/images/{{page.image}}.jpg"
|
||||||
|
/>
|
||||||
|
{% if page.image-attrib %} {% if page.image-attrib-url %}
|
||||||
|
<p class="blog-post__header__image-caption">
|
||||||
|
<a href="{{ page.image-attrib-url }}" targe="_blank"
|
||||||
|
>Photo © {{ page.image-attrib }}</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="image-caption">Image © {{ page.image-attrib }}</p>
|
<p class="blog-post__header__image-caption">
|
||||||
{% endif %}
|
Image © {{ page.image-attrib }}
|
||||||
{% endif %}
|
</p>
|
||||||
{% endif %}
|
{% endif %} {% endif %} {% endif %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="post-content e-content" itemprop="articleBody">
|
<div class="blog-post__content e-content" itemprop="articleBody">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
<div class="after-post">
|
|
||||||
<div class="after-post-content">
|
<div class="blog-post__after-content">
|
||||||
<div id="mc_embed_signup" class="float-left">
|
<div id="mc_embed_signup" class="float-left">
|
||||||
<form action="https://github.us17.list-manage.com/subscribe/post?u=85102052c447ce8a8bba06f24&id=2366f7f35a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
<form
|
||||||
|
action="https://github.us17.list-manage.com/subscribe/post?u=85102052c447ce8a8bba06f24&id=2366f7f35a"
|
||||||
|
method="post"
|
||||||
|
id="mc-embedded-subscribe-form"
|
||||||
|
name="mc-embedded-subscribe-form"
|
||||||
|
class="validate"
|
||||||
|
target="_blank"
|
||||||
|
novalidate
|
||||||
|
>
|
||||||
<div id="mc_embed_signup_scroll">
|
<div id="mc_embed_signup_scroll">
|
||||||
<label for="mce-EMAIL">Sign up to get useful posts like this periodically and more.</label>
|
<label for="mce-EMAIL"
|
||||||
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required>
|
>Sign up to get useful posts like this periodically and more.</label
|
||||||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div>
|
>
|
||||||
<div class="clear"><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
<input
|
||||||
|
type="email"
|
||||||
|
value=""
|
||||||
|
name="EMAIL"
|
||||||
|
class="email"
|
||||||
|
id="mce-EMAIL"
|
||||||
|
placeholder="Enter your email address..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div style="position: absolute; left: -5000px" aria-hidden="true">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="b_85102052c447ce8a8bba06f24_2366f7f35a"
|
||||||
|
tabindex="-1"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="clear">
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
value="Sign Up"
|
||||||
|
name="subscribe"
|
||||||
|
id="mc-embedded-subscribe"
|
||||||
|
class="button"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="subscription-message-div">
|
<div class="subscription-message-div">
|
||||||
<div class="subscription-message-thumb float-left">
|
<div class="subscription-message-thumb float-left">
|
||||||
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
|
<img
|
||||||
|
src="../assets/images/ayo.jpg"
|
||||||
|
alt="Free exclusive web development tips!"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="subscription-message-text float-left">
|
<div class="subscription-message-text float-left">
|
||||||
<p>Cutting-edge productivity hacks for my subscribers.</p>
|
<p>Cutting-edge productivity hacks for my subscribers.</p>
|
||||||
|
|
@ -53,16 +115,18 @@ layout: default
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!--div class="blog-post__comment-section">
|
||||||
|
<h2>Thoughts? Post your comments here:</h2>
|
||||||
|
<div
|
||||||
|
class="fb-comments"
|
||||||
|
data-mobile="true"
|
||||||
|
data-href="{{site.url}}{{page.url}}"
|
||||||
|
data-numposts="5"
|
||||||
|
></div>
|
||||||
|
</div-->
|
||||||
|
|
||||||
<!--h1>Thoughts? Post your comments here:</h1>
|
{% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
|
||||||
|
|
||||||
<div class="fb-comments" data-mobile="true" data-href="{{site.url}}{{page.url}}" data-numposts="5"></div-->
|
|
||||||
|
|
||||||
{% if site.disqus.shortname %}
|
|
||||||
{% include disqus_comments.html %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,10 @@ image: "reading"
|
||||||
image-attrib: Daria Shevtsova
|
image-attrib: Daria Shevtsova
|
||||||
image-attrib-url: https://www.pexels.com/@daria
|
image-attrib-url: https://www.pexels.com/@daria
|
||||||
---
|
---
|
||||||
There has been a problem arising that everybody seems to see lately, but still no one seems to understand it completely.
|
|
||||||
|
|
||||||
The constant stream of fragmented information on the Internet (i.e., Facebook, Twitter, Netflix, etc.) has seemingly rewired our appetite for all forms of information consumption--and it is tiresome.<!--more-->
|
There has been a problem arising that everybody seems to see lately, but still no one seems to understand it completely.<!--more-->
|
||||||
|
|
||||||
|
The constant stream of fragmented information on the Internet (i.e., Facebook, Twitter, Netflix, etc.) has seemingly rewired our appetite for all forms of information consumption--and it is tiresome.
|
||||||
|
|
||||||
As a result of this, I have been constantly skimming texts quickly without giving myself the chance to ponder much as I used to.
|
As a result of this, I have been constantly skimming texts quickly without giving myself the chance to ponder much as I used to.
|
||||||
|
|
||||||
|
|
|
||||||
328
assets/main.scss
328
assets/main.scss
|
|
@ -5,7 +5,7 @@
|
||||||
@import "minima";
|
@import "minima";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .004)!important;
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
|
||||||
-webkit-font-smoothing: antialiased !important;
|
-webkit-font-smoothing: antialiased !important;
|
||||||
-moz-osx-font-smoothing: grayscale !important;
|
-moz-osx-font-smoothing: grayscale !important;
|
||||||
text-rendering: optimizelegibility !important;
|
text-rendering: optimizelegibility !important;
|
||||||
|
|
@ -20,10 +20,12 @@ body {
|
||||||
font-feature-settings: "kern" 1;
|
font-feature-settings: "kern" 1;
|
||||||
font-kerning: normal;
|
font-kerning: normal;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgba(0, 0, 0, .84);
|
color: rgba(0, 0, 0, 0.84);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
|
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
||||||
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||||
|
sans-serif !important;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -31,15 +33,8 @@ body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content h1,
|
|
||||||
.post-content h2,
|
|
||||||
.post-content h3 {
|
|
||||||
padding-top: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
header.site-header {
|
header.site-header {
|
||||||
background: rgba(141, 191, 66, .97)!important;
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,45 +43,29 @@ footer.site-footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-site-title a {
|
.footer-site-title a {
|
||||||
color: rgba(141, 191, 66, .97)!important;
|
color: rgba(141, 191, 66, 0.97) !important;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
border: 0px !important;
|
border: 0px !important;
|
||||||
border-bottom: 1px solid hsla(0, 0%, 100%, .3) !important;
|
border-bottom: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table,
|
||||||
article .post-content p,
|
table.image,
|
||||||
.home .post-excerpt p {
|
table td,
|
||||||
margin-top: 21px;
|
table th,
|
||||||
}
|
table.image td,
|
||||||
|
table.image th {
|
||||||
article .post-content p,
|
|
||||||
article .post-content ul li,
|
|
||||||
article .post-content ol li,
|
|
||||||
.home .post-excerpt p {
|
|
||||||
--x-height-multiplier: 0.375;
|
|
||||||
--baseline-multiplier: 0.17;
|
|
||||||
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
||||||
letter-spacing: .01rem;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 21px;
|
|
||||||
line-height: 1.58;
|
|
||||||
letter-spacing: -.003em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table, table.image,
|
|
||||||
table td, table th,
|
|
||||||
table.image td, table.image th {
|
|
||||||
border: 0px !important;
|
border: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table td, table th,
|
table td,
|
||||||
table.image td, table.image th {
|
table th,
|
||||||
|
table.image td,
|
||||||
|
table.image th {
|
||||||
padding: 10px 0 !important;
|
padding: 10px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -111,21 +90,6 @@ caption {
|
||||||
max-width: calc(100% - 60px);
|
max-width: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-title {
|
|
||||||
--x-height-multiplier: 0.342;
|
|
||||||
--baseline-multiplier: 0.22;
|
|
||||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
|
|
||||||
letter-spacing: -.02em;
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: 0;
|
|
||||||
font-size: 36px;
|
|
||||||
margin-left: -2.63px;
|
|
||||||
line-height: 1.04;
|
|
||||||
letter-spacing: -.015em;
|
|
||||||
padding-top: 5px!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-list {
|
.desc-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -153,34 +117,6 @@ caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-list {
|
|
||||||
li {
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
div.post-excerpt::first-letter {
|
|
||||||
font-size: 75px;
|
|
||||||
line-height: 60px;
|
|
||||||
float: left;
|
|
||||||
padding: 0px 8px 0 3px;
|
|
||||||
color: #8A2BE2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
a {
|
|
||||||
color: #222 !important;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #bb4a03 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.categories {
|
.categories {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*
|
/*
|
||||||
|
|
@ -198,7 +134,7 @@ caption {
|
||||||
}
|
}
|
||||||
|
|
||||||
span.categories-title {
|
span.categories-title {
|
||||||
color: rgba(141, 191, 66, .97);
|
color: rgba(141, 191, 66, 0.97);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -222,7 +158,7 @@ caption {
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background-color: rgba(141, 191, 66, .97)!important;
|
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||||
/*
|
/*
|
||||||
background-image: url('/assets/background/people_devices.jpg');
|
background-image: url('/assets/background/people_devices.jpg');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -234,11 +170,7 @@ caption {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.after-post #mc_embed_signup label {
|
.blog-post__after-content,
|
||||||
color: rgba(141, 191, 66, 0.97) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.after-post,
|
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
#mc_embed_signup label {
|
#mc_embed_signup label {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -286,7 +218,6 @@ caption {
|
||||||
border-left: 8px inset transparent;
|
border-left: 8px inset transparent;
|
||||||
border-right: 8px inset transparent;
|
border-right: 8px inset transparent;
|
||||||
border-top: 8px solid #8dbf42;
|
border-top: 8px solid #8dbf42;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#donate-form {
|
#donate-form {
|
||||||
|
|
@ -324,23 +255,15 @@ caption {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-excerpt {}
|
|
||||||
|
|
||||||
.post-thumb {
|
.post-thumb {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
margin: 29px 0 25px 25px;
|
margin: 29px 0 25px 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-readmore {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-readmore a:hover,
|
|
||||||
.up-next:hover {
|
.up-next:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-readmore a,
|
|
||||||
.up-next {
|
.up-next {
|
||||||
background-color: #ee4a03;
|
background-color: #ee4a03;
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
|
|
@ -349,7 +272,9 @@ caption {
|
||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
|
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
||||||
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||||
|
sans-serif !important;
|
||||||
border-radius: 3.2px;
|
border-radius: 3.2px;
|
||||||
border: 1px solid #ee4a03;
|
border: 1px solid #ee4a03;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -403,7 +328,7 @@ caption {
|
||||||
.subscription-message-thumb img,
|
.subscription-message-thumb img,
|
||||||
.ayo-thumb img {
|
.ayo-thumb img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid hsla(0, 0%, 100%, .3) !important;
|
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -419,27 +344,15 @@ caption {
|
||||||
|
|
||||||
main.page-content {
|
main.page-content {
|
||||||
width: calc(70% - 20px);
|
width: calc(70% - 20px);
|
||||||
|
|
||||||
div.wrapper {
|
|
||||||
article {
|
|
||||||
div.post-content p:first-of-type::first-letter {
|
|
||||||
font-size: 75px;
|
|
||||||
line-height: 60px;
|
|
||||||
float: left;
|
|
||||||
padding: 0px 8px 0 3px;
|
|
||||||
color: #8A2BE2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav#side-nav {
|
nav#side-nav {
|
||||||
width: calc(30% - 10px);
|
width: calc(30% - 10px);
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, .25);
|
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
top: 30px
|
top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-panel {
|
.side-panel {
|
||||||
|
|
@ -462,28 +375,26 @@ nav#side-nav {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first-letter {
|
|
||||||
font-size: 75px;
|
|
||||||
line-height: 60px;
|
|
||||||
float: left;
|
|
||||||
padding: 0px 8px 0 3px;
|
|
||||||
color: #8A2BE2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 0px) and (max-width: 350px) {
|
@media only screen and (min-width: 0px) and (max-width: 350px) {
|
||||||
div.subscription-message-div {
|
div.subscription-message-div {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blog-home {
|
||||||
|
&__list-items {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 0px) and (max-width: 767px) {
|
@media only screen and (min-width: 0px) and (max-width: 767px) {
|
||||||
|
|
||||||
article .post-content p,
|
article .post-content p,
|
||||||
article .post-content ul li,
|
article .post-content ul li,
|
||||||
article .post-content ol li,
|
article .post-content ol li,
|
||||||
.home .post-excerpt p
|
.blog-home {
|
||||||
{
|
&__list-items {
|
||||||
font-size: 18px;
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
|
|
@ -491,7 +402,7 @@ nav#side-nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background: rgba(141, 191, 66, .97)!important;
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#mc_embed_signup input {
|
#mc_embed_signup input {
|
||||||
|
|
@ -513,7 +424,7 @@ nav#side-nav {
|
||||||
nav#side-nav {
|
nav#side-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 0 30px;
|
margin: 0 0 30px;
|
||||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, .25);
|
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||||
}
|
}
|
||||||
.side-panel {
|
.side-panel {
|
||||||
width: calc(100%-30px) !important;
|
width: calc(100%-30px) !important;
|
||||||
|
|
@ -524,15 +435,14 @@ nav#side-nav {
|
||||||
margin: 0 0 25px 25px;
|
margin: 0 0 25px 25px;
|
||||||
}
|
}
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background: rgba(141, 191, 66, .97)!important;
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||||
}
|
}
|
||||||
.jumbotron-content {
|
.jumbotron-content {
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
}
|
}
|
||||||
.post-list li h3 a,
|
.post-list li h3 a {
|
||||||
.post-title {
|
|
||||||
font-size: 31px;
|
font-size: 31px;
|
||||||
}
|
}
|
||||||
#mc_embed_signup input {
|
#mc_embed_signup input {
|
||||||
|
|
@ -551,8 +461,8 @@ nav#side-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.site-nav {
|
.site-nav {
|
||||||
background-color: rgba(141, 191, 66, .97)!important;
|
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||||
border: 1px solid hsla(0, 0%, 100%, .3) !important;
|
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||||
}
|
}
|
||||||
.site-nav .menu-icon > svg path {
|
.site-nav .menu-icon > svg path {
|
||||||
fill: #ffffff;
|
fill: #ffffff;
|
||||||
|
|
@ -571,7 +481,7 @@ nav#side-nav {
|
||||||
padding: 60px 50px;
|
padding: 60px 50px;
|
||||||
}
|
}
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background: rgba(141, 191, 66, .97)!important;
|
background: rgba(141, 191, 66, 0.97) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -603,8 +513,156 @@ table.image caption {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-caption {
|
.blog-post {
|
||||||
|
&__header {
|
||||||
|
&__title {
|
||||||
|
--x-height-multiplier: 0.342;
|
||||||
|
--baseline-multiplier: 0.22;
|
||||||
|
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||||
|
Arial, sans-serif;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-size: 36px;
|
||||||
|
margin: 10px 0 10px -2.63px;
|
||||||
|
line-height: 1.04;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
padding-top: 5px !important;
|
||||||
|
}
|
||||||
|
&__description {
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
&__meta {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #828282;
|
||||||
|
margin: 10px 0 10px;
|
||||||
|
|
||||||
|
&__author {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__image-caption {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
&__content {
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
padding-top: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
p:first-of-type::first-letter {
|
||||||
|
font-size: 75px;
|
||||||
|
line-height: 60px;
|
||||||
|
float: left;
|
||||||
|
padding: 0px 3px;
|
||||||
|
color: #8a2be2;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
ul li,
|
||||||
|
ol li {
|
||||||
|
--x-height-multiplier: 0.375;
|
||||||
|
--baseline-multiplier: 0.17;
|
||||||
|
font-family: medium-content-serif-font, Georgia, Cambria,
|
||||||
|
"Times New Roman", Times, serif;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1.58;
|
||||||
|
letter-spacing: -0.003em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__after-content {
|
||||||
|
#mc_embed_signup label {
|
||||||
|
color: rgba(141, 191, 66, 0.97) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-home {
|
||||||
|
&__list-items {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
&__header {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
&__title {
|
||||||
|
margin: 10px 0;
|
||||||
|
a {
|
||||||
|
color: #222 !important;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #bb4a03 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__description {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__excerpt {
|
||||||
|
p {
|
||||||
|
margin-top: 21px;
|
||||||
|
--x-height-multiplier: 0.375;
|
||||||
|
--baseline-multiplier: 0.17;
|
||||||
|
font-family: medium-content-serif-font, Georgia, Cambria,
|
||||||
|
"Times New Roman", Times, serif;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1.58;
|
||||||
|
letter-spacing: -0.003em;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
p:first-of-type::first-letter {
|
||||||
|
font-size: 75px;
|
||||||
|
line-height: 60px;
|
||||||
|
float: left;
|
||||||
|
padding: 0px 3px;
|
||||||
|
color: #8a2be2;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
&__readmore {
|
||||||
|
margin: 10px 0;
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
background-color: #ee4a03;
|
||||||
|
color: #ffffff !important;
|
||||||
|
padding: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: medium-content-sans-serif-font, -apple-system,
|
||||||
|
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||||
|
"Open Sans", "Helvetica Neue", sans-serif !important;
|
||||||
|
border-radius: 3.2px;
|
||||||
|
border: 1px solid #ee4a03;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue