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

add about me side panel

Browse source
This commit is contained in:
Ayo 2018-02-22 04:35:17 +08:00
parent 9562fac4df
commit 8ebd10a92c
3 changed files with 94 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
_layouts/default.html
View file

@ -18,38 +18,53 @@
{% include header.html %} {% include header.html %}
<div class="site-body"> {% if page.type == "home" %}
{% if page.type == "home" %} <div class="jumbotron">
<div class="jumbotron"> <!-- Begin MailChimp Signup Form -->
<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup">
<div id="mc_embed_signup"> <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 Development Tips</label>
<label for="mce-EMAIL">Sign up for Exclusive Web Development 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> <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 class="subscription-message-text float-right">
<p>Learn practical methods to improve your web dev skills!</p>
</div>
<div class="clear-both"></div>
</div> </div>
<div class="subscription-message-text float-right">
<p>Learn practical methods to improve your web dev skills!</p>
</div>
<div class="clear-both"></div>
</div> </div>
</form> </div>
</div> </form>
<!--End mc_embed_signup-->
</div> </div>
<!--End mc_embed_signup-->
</div>
{% endif %} {% endif %}
<main class="page-content" aria-label="Content">
<div class="site-body">
<main class="page-content float-left" aria-label="Content">
<div class="wrapper"> <div class="wrapper">
{{ content }} {{ content }}
</div> </div>
</main> </main>
<nav id="side-nav" class="float-left">
{% if page.type != "about" %}
<div class="side-panel" id="about-me">
<div class="ayo-thumb">
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
</div>
<h2 style="font-weight: bold; text-align: center">Hi! I'm Ayo!</h2>
<p>Thanks for dropping by! I started this website with the hope of having a place to share things I think will be helpful to developers such as myself. I hope you come by more often and find some interesting stuff!</p>
<div class="post-readmore"><a class="button" href="/about/">About The Author</a></div>
</div>
{% endif %}
</nav>
<div class="clear-both"></div>
</div> </div>
{% include footer.html %} {% include footer.html %}

1
about.md
View file

@ -2,6 +2,7 @@
layout: page layout: page
title: "About the Author" title: "About the Author"
permalink: /about/ permalink: /about/
type: about
--- ---
Let me introduce myself... Let me introduce myself...

56
assets/main.scss
View file

@ -71,7 +71,7 @@ article .post-content p {
.page-content .wrapper { .page-content .wrapper {
margin: 0 auto; margin: 0 auto;
max-width: calc(700px - 60px); max-width: calc(100% - 60px);
} }
.post-title { .post-title {
@ -239,13 +239,65 @@ article .post-content p {
width: 72px; width: 72px;
} }
.subscription-message-thumb img { .subscription-message-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%, .3) !important;
margin: 2px; margin: 2px;
} }
.ayo-thumb {
width: 100px;
margin: 0 auto;
}
.site-body {
max-width: 1000px;
margin: 0 auto;
}
main.page-content {
width: 70%;
}
nav#side-nav {
width: calc(30% - 30px);
margin: 45px 0 30px;
}
.side-panel {
background-color: rgba(141, 191, 66, 0.97) !important;
color: white;
font-size: normal;
padding: 15px;
}
.page-content .wrapper .home {
background-color: white;
}
.page-content .wrapper .post {
padding: 30px;
background-color: white;
margin-top: 15px;
}
.site-container {
background-color: #e4e2dd;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
main.page-content {
width: 100%;
}
nav#side-nav {
width: calc(100% - 30px);
margin: 30px 0 30px;
padding: 15px;
}
.post-thumb { .post-thumb {
width: 100%; width: 100%;
} }