ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: home and blog layouts; initial BEM

Browse source
This commit is contained in:
Ayo Ayco 2021-06-25 23:44:46 +08:00
parent 6ea362643f
commit 587e294218
6 changed files with 635 additions and 496 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -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,
} }

4
_layouts/default.html
View file

@ -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&amp;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&amp;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>

73
_layouts/home.html
View file

@ -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"> </div>
{% if post.image != '' %} <div class="blog-home__list-items__item__header__description">
<a href="{{post.url}}"><img class="float-right post-thumb" alt="{{ post.description | escape }}" src="../assets/images/{{ post.image }}.jpg" /></a> <span>{{post.description}}</span>
{% endif %} </div>
{{ post.excerpt }} </div>
</div> <div class="blog-home__list-items__item__excerpt">
<div class="clear-both"></div> {% if post.image %}
<div class="post-readmore"> <a href="{{post.url | relative_url}}"
<a href="{{ post.url | relative_url }}" class="button">Continue Reading</a> ><img
</div> class="blog-home__list-items__item__excerpt__thumb"
</li> alt="{{ post.description | escape }}"
{% endfor %} title="{{ post.description | escape }}"
</ul> 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 %} {% endif %}
</div> </div>

168
_layouts/post.html
View file

@ -1,68 +1,132 @@
--- ---
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">
</time> {{ page.title | escape }}
</p> </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>
</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 &copy; {{ page.image-attrib }}</a></p> src="../assets/images/{{page.image}}.jpg"
{% else %} />
<p class="image-caption">Image &copy; {{ page.image-attrib }}</p> {% if page.image-attrib %} {% if page.image-attrib-url %}
{% endif %} <p class="blog-post__header__image-caption">
{% endif %} <a href="{{ page.image-attrib-url }}" targe="_blank"
{% endif %} >Photo &copy; {{ page.image-attrib }}</a
>
</p>
{% else %}
<p class="blog-post__header__image-caption">
Image &copy; {{ page.image-attrib }}
</p>
{% 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&amp;id=2366f7f35a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <form
<div id="mc_embed_signup_scroll"> action="https://github.us17.list-manage.com/subscribe/post?u=85102052c447ce8a8bba06f24&amp;id=2366f7f35a"
<label for="mce-EMAIL">Sign up to get useful posts like this periodically and more.</label> method="post"
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required> id="mc-embedded-subscribe-form"
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div> name="mc-embedded-subscribe-form"
<div class="clear"><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div> class="validate"
<div class="subscription-message-div"> target="_blank"
<div class="subscription-message-thumb float-left"> novalidate
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" /> >
</div> <div id="mc_embed_signup_scroll">
<div class="subscription-message-text float-left"> <label for="mce-EMAIL"
<p>Cutting-edge productivity hacks for my subscribers.</p> >Sign up to get useful posts like this periodically and more.</label
</div> >
<div class="clear-both"></div> <input
</div> type="email"
</div> value=""
</form> name="EMAIL"
</div> class="email"
</div> 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!"
/>
</div>
<div class="subscription-message-text float-left">
<p>Cutting-edge productivity hacks for my subscribers.</p>
</div>
<div class="clear-both"></div>
</div>
</div>
</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> {% 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>

11
_posts/2020-04-09-reading.md
View file

@ -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.
@ -37,9 +38,9 @@ We all have limited time, and the environments we are in are never so favorable.
Because of this, I had to stop doing some things I "loved". Because of this, I had to stop doing some things I "loved".
For instance, I deactivated my Facebook for a time, and playing computer games had to be at a minimum. For instance, I deactivated my Facebook for a time, and playing computer games had to be at a minimum.
> “The only people who achieve much are those who want knowledge so badly that they seek it while the conditions are still unfavorable. Favorable conditions never come.” C.S. Lewis > “The only people who achieve much are those who want knowledge so badly that they seek it while the conditions are still unfavorable. Favorable conditions never come.” C.S. Lewis
## Next Goal: Find Others ## Next Goal: Find Others
@ -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) 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!

874
assets/main.scss
View file

File diff suppressed because it is too large Load diff