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

feat: fold/unfold home message

Browse source
This commit is contained in:
Ayo 2023-05-21 20:26:17 +02:00
parent f400c76442
commit bcd4c267c5
1 changed files with 57 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
_layouts/home.html
View file

@ -9,41 +9,72 @@ layout: default
margin: 1em 0 2em; margin: 1em 0 2em;
color: black; color: black;
border-radius: 5px; border-radius: 5px;
border: 5px dotted #ccc !important; border: 3px dotted #ccc !important;
padding: 0.5em 1em; padding: 0.5em 1em;
" "
> >
<h2 style="font-weight: bold">Hello, fellow human!</h2> <h2 style="font-weight: bold">
Hello, fellow human! Just a short message...
</h2>
<p> <p>
Welcome. Like you, I have many areas of interests, and in this site you Welcome! Like you, I have many areas of interests, and in this site you
will find posts on varying topics that are not always confined to my will find posts on varying topics that are not always confined to my
professional life. professional life.
</p> </p>
<p> <p>
There really is no central theme here, and even the quality of writing may There really is no central theme on this blog, and even the quality of
change between posts. My only rule is that I put out words about stuff I writing may change between posts. My only rule here is that I put out
find helpful to talk about. words about stuff I find helpful to talk about.
</p> </p>
<!--p> <button
class="read-more-message"
style="cursor: pointer; margin-bottom: 1em"
onclick="toggleMessage()"
>
Read the full message &rarr;
</button>
<script>
function toggleMessage() {
var x = document.getElementsByClassName("hide")[0];
var y = document.getElementsByClassName("read-more-message")[0];
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
</script>
<div class="hide" style="display: none">
<p>
There may be some topics that pop up more than others. There may be some topics that pop up more than others.
<a href="/technology">Technology</a> posts are mostly about web <a href="/technology">Technology</a> posts are mostly about web
development, and may be more relatable to people who found me for my development, and may be more relatable to people who found me for my
development work. More opinionated <a href="/personal">personal</a> posts development work. More opinionated
are where I talk about stuff I find interesting and helpful to put out in <a href="/personal">personal</a> posts are where I talk about stuff I
the open for their potential to help others as well. However, other topics find interesting and helpful to put out in the open for their potential
will most likely be included in the future and a lot of things may change to help others as well. However, other topics will most likely be
over time. included in the future and a lot of things may change over time.
</p--> </p>
<p> <p>
Thank you for the interest in reading. I look forward to any feedback or Thank you for the interest in reading. I look forward to any feedback or
even the possibility of collaboration. Hit me up about any topic you find even the possibility of collaboration. Hit me up about any topic you
here! Below are my contact details. find here! Below are my contact details.
</p> </p>
<ul> <ul>
<li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li> <li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>
<li>chat: <a href="https://t.me/ayoayco">ayoayco @ Telegram</a></li> <li>chat: <a href="https://t.me/ayoayco">ayoayco @ Telegram</a></li>
</ul> </ul>
<p>~ <em>Ayo Ayco</em></p> <p>~ <em>Ayo Ayco</em></p>
<button
class="read-less-message"
style="cursor: pointer"
onclick="toggleMessage()"
>
&larr; Show less...
</button>
</div>
</div> </div>
{% if site.posts.size > 0 %} {% if site.posts.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">