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",
|
||||
"editor.formatOnSave": true,
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
|
||||
</div>
|
||||
<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 class="clear-both"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,37 +2,52 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div class="home">
|
||||
|
||||
<div class="blog-home">
|
||||
{% if site.posts.size > 0 %}
|
||||
<h2 class="post-list-heading">{{ page.list_title }}</h2>
|
||||
<ul class="post-list">
|
||||
<h2 class="blog-home__list-title">{{ page.list_title }}</h2>
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.posts %}
|
||||
<li>
|
||||
<span class="post-meta">
|
||||
{% if post.author %}
|
||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ post.author }}</span></span> •
|
||||
{% endif %}
|
||||
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
|
||||
{{ post.date | date: date_format }}
|
||||
</span>
|
||||
<h3>
|
||||
<a class="post-link post-title" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</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 class="clear-both"></div>
|
||||
<div class="post-readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button">Continue Reading</a>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,110 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
|
||||
<header class="post-header">
|
||||
<p class="post-meta">
|
||||
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
||||
{% if page.author %}
|
||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-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 }}
|
||||
<article
|
||||
class="blog-post h-entry"
|
||||
itemscope
|
||||
itemtype="http://schema.org/BlogPosting"
|
||||
>
|
||||
<header class="blog-post__header">
|
||||
<div>
|
||||
<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>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h3>
|
||||
{% if page.image %}
|
||||
<img alt="{{ page.description }} | Developer Blog How To" title="{{page.description}}" src="../assets/images/{{page.image}}.jpg" />
|
||||
<p class="image-caption">{{page.description}}</p>
|
||||
{% if page.image-attrib %}
|
||||
{% if page.image-attrib-url %}
|
||||
<p class="image-caption"><a href="{{ page.image-attrib-url }}" targe="_blank">Photo © {{ page.image-attrib }}</a></p>
|
||||
<img
|
||||
class="blog-post__header__image"
|
||||
alt="{{ page.description | escape }} | Developer Blog How To"
|
||||
title="{{page.description | escape}}"
|
||||
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 %}
|
||||
<p class="image-caption">Image © {{ page.image-attrib }}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<p class="blog-post__header__image-caption">
|
||||
Image © {{ page.image-attrib }}
|
||||
</p>
|
||||
{% endif %} {% endif %} {% endif %}
|
||||
</header>
|
||||
|
||||
<div class="post-content e-content" itemprop="articleBody">
|
||||
<div class="blog-post__content e-content" itemprop="articleBody">
|
||||
{{ content }}
|
||||
</div>
|
||||
<div class="after-post">
|
||||
<div class="after-post-content">
|
||||
|
||||
<div class="blog-post__after-content">
|
||||
<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">
|
||||
<label for="mce-EMAIL">Sign up to get useful posts like this periodically and more.</label>
|
||||
<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>
|
||||
<label for="mce-EMAIL"
|
||||
>Sign up to get useful posts like this periodically and more.</label
|
||||
>
|
||||
<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-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 class="subscription-message-text float-left">
|
||||
<p>Cutting-edge productivity hacks for my subscribers.</p>
|
||||
|
|
@ -53,16 +115,18 @@ layout: default
|
|||
</form>
|
||||
</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>
|
||||
|
||||
<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 %}
|
||||
{% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
|
||||
|
||||
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ image: "reading"
|
|||
image-attrib: Daria Shevtsova
|
||||
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.
|
||||
|
||||
|
|
@ -55,4 +56,4 @@ The only qualification of sorts is that you are currently reading a book.
|
|||
|
||||
If you think this is something that interests you too, or if you simply want more details about it, please reach out to me on Twitter: [@ayoayco](https://twitter.com/ayoayco) or send me an email: [ramon.aycojr+reading@gmail.com](mailto:ramon.aycojr+reading@gmail.com)
|
||||
|
||||
>"the most famous example is The Inklings, a group started in the 1930s by a handful of friends living in Oxford, England (the two most famous being C. S. Lewis and J. R. R. Tolkien). They gathered to read selections from their own works and then to discuss them. The Inklings model is pretty simple: bring what occupies your mind and read it aloud. Stimulating the minds of others and generating conversation makes it possible to learn from one another." Tony Reinke, Lit!
|
||||
> "the most famous example is The Inklings, a group started in the 1930s by a handful of friends living in Oxford, England (the two most famous being C. S. Lewis and J. R. R. Tolkien). They gathered to read selections from their own works and then to discuss them. The Inklings model is pretty simple: bring what occupies your mind and read it aloud. Stimulating the minds of others and generating conversation makes it possible to learn from one another." Tony Reinke, Lit!
|
||||
|
|
|
|||
338
assets/main.scss
338
assets/main.scss
|
|
@ -5,10 +5,10 @@
|
|||
@import "minima";
|
||||
|
||||
* {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .004)!important;
|
||||
-webkit-font-smoothing: antialiased!important;
|
||||
-moz-osx-font-smoothing: grayscale!important;
|
||||
text-rendering: optimizelegibility!important;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
text-rendering: optimizelegibility !important;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -20,10 +20,12 @@ body {
|
|||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, .84);
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
font-size: 20px;
|
||||
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;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -31,15 +33,8 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3 {
|
||||
padding-top: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header.site-header {
|
||||
background: rgba(141, 191, 66, .97)!important;
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -48,45 +43,29 @@ footer.site-footer {
|
|||
}
|
||||
|
||||
.footer-site-title a {
|
||||
color: rgba(141, 191, 66, .97)!important;
|
||||
color: rgba(141, 191, 66, 0.97) !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border: 0px !important;
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .3) !important;
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
}
|
||||
|
||||
|
||||
article .post-content p,
|
||||
.home .post-excerpt p {
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
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 {
|
||||
table,
|
||||
table.image,
|
||||
table td,
|
||||
table th,
|
||||
table.image td,
|
||||
table.image th {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
table td, table th,
|
||||
table.image td, table.image th {
|
||||
table td,
|
||||
table th,
|
||||
table.image td,
|
||||
table.image th {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -111,21 +90,6 @@ caption {
|
|||
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 {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
@ -153,34 +117,6 @@ caption {
|
|||
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 {
|
||||
width: 100%;
|
||||
/*
|
||||
|
|
@ -198,7 +134,7 @@ caption {
|
|||
}
|
||||
|
||||
span.categories-title {
|
||||
color: rgba(141, 191, 66, .97);
|
||||
color: rgba(141, 191, 66, 0.97);
|
||||
text-transform: uppercase;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
|
|
@ -222,7 +158,7 @@ caption {
|
|||
}
|
||||
|
||||
.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-repeat: no-repeat;
|
||||
|
|
@ -234,11 +170,7 @@ caption {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.after-post #mc_embed_signup label {
|
||||
color: rgba(141, 191, 66, 0.97) !important;
|
||||
}
|
||||
|
||||
.after-post,
|
||||
.blog-post__after-content,
|
||||
.jumbotron {
|
||||
#mc_embed_signup label {
|
||||
text-align: center;
|
||||
|
|
@ -286,7 +218,6 @@ caption {
|
|||
border-left: 8px inset transparent;
|
||||
border-right: 8px inset transparent;
|
||||
border-top: 8px solid #8dbf42;
|
||||
|
||||
}
|
||||
|
||||
#donate-form {
|
||||
|
|
@ -324,23 +255,15 @@ caption {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.post-excerpt {}
|
||||
|
||||
.post-thumb {
|
||||
width: 240px;
|
||||
margin: 29px 0 25px 25px;
|
||||
}
|
||||
|
||||
.post-readmore {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.post-readmore a:hover,
|
||||
.up-next:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-readmore a,
|
||||
.up-next {
|
||||
background-color: #ee4a03;
|
||||
color: #ffffff !important;
|
||||
|
|
@ -349,7 +272,9 @@ caption {
|
|||
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;
|
||||
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;
|
||||
|
|
@ -403,7 +328,7 @@ caption {
|
|||
.subscription-message-thumb img,
|
||||
.ayo-thumb img {
|
||||
border-radius: 50%;
|
||||
border: 1px solid hsla(0, 0%, 100%, .3) !important;
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -419,28 +344,16 @@ caption {
|
|||
|
||||
main.page-content {
|
||||
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 {
|
||||
width: calc(30% - 10px);
|
||||
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: -webkit-sticky;
|
||||
top: 30px
|
||||
}
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||
|
|
@ -462,28 +375,26 @@ nav#side-nav {
|
|||
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) {
|
||||
div.subscription-message-div {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.blog-home {
|
||||
&__list-items {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 0px) and (max-width: 767px) {
|
||||
|
||||
article .post-content p,
|
||||
article .post-content ul li,
|
||||
article .post-content ol li,
|
||||
.home .post-excerpt p
|
||||
{
|
||||
font-size: 18px;
|
||||
.blog-home {
|
||||
&__list-items {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
caption {
|
||||
|
|
@ -491,7 +402,7 @@ nav#side-nav {
|
|||
}
|
||||
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, .97)!important;
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
}
|
||||
#mc_embed_signup input {
|
||||
|
|
@ -513,7 +424,7 @@ nav#side-nav {
|
|||
nav#side-nav {
|
||||
width: 100%;
|
||||
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 {
|
||||
width: calc(100%-30px) !important;
|
||||
|
|
@ -524,15 +435,14 @@ nav#side-nav {
|
|||
margin: 0 0 25px 25px;
|
||||
}
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, .97)!important;
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
}
|
||||
.jumbotron-content {
|
||||
padding: 30px 0;
|
||||
}
|
||||
.post-list li h3 a,
|
||||
.post-title {
|
||||
.post-list li h3 a {
|
||||
font-size: 31px;
|
||||
}
|
||||
#mc_embed_signup input {
|
||||
|
|
@ -551,10 +461,10 @@ nav#side-nav {
|
|||
width: 100%;
|
||||
}
|
||||
.site-nav {
|
||||
background-color: rgba(141, 191, 66, .97)!important;
|
||||
border: 1px solid hsla(0, 0%, 100%, .3) !important;
|
||||
background-color: rgba(141, 191, 66, 0.97) !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;
|
||||
}
|
||||
}
|
||||
|
|
@ -571,7 +481,7 @@ nav#side-nav {
|
|||
padding: 60px 50px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
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