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

fix for #8

Browse source
This commit is contained in:
Ayo 2018-02-23 00:19:05 +08:00
parent 6232070a08
commit 5e2b6d5a2b
3 changed files with 92 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
_layouts/default.html
View file

@ -20,27 +20,34 @@
{% if page.type == "home" %} {% if page.type == "home" %}
<div class="jumbotron"> <div class="jumbotron">
<!-- Begin MailChimp Signup Form --> <div class="jumbotron-content">
<div id="mc_embed_signup"> <!-- div id="logo-div" 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> <img src="../assets/images/logo.png" />
<div id="mc_embed_signup_scroll"> </div -->
<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> <!-- Begin MailChimp Signup Form -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div> <div id="mc_embed_signup" class="float-left">
<div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div> <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 class="subscription-message-div"> <div id="mc_embed_signup_scroll">
<div class="subscription-message-thumb float-left"> <label for="mce-EMAIL">Sign up for Exclusive Web Development Tips</label>
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" /> <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!" />
</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>
</div> </form>
</form> </div>
<!--End mc_embed_signup-->
<div class="clear-both"></div>
</div> </div>
<!--End mc_embed_signup-->
</div> </div>
{% endif %} {% endif %}

BIN
assets/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 250 KiB

73
assets/main.scss
View file

@ -31,8 +31,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
header.site-header, header.site-header {
.jumbotron {
background: rgba(141,191,66,.97)!important; background: rgba(141,191,66,.97)!important;
width: 100%; width: 100%;
} }
@ -132,18 +131,33 @@ article .post-content p,
padding: 20px; padding: 20px;
} }
.jumbotron {
background: url('../assets/images/logo.png') no-repeat rgba(141,191,66,.97)!important;
width: 100%;
height: 100%;
}
.jumbotron #mc_embed_signup label{ .jumbotron #mc_embed_signup label{
text-align: center; text-align: center;
font-size: 36px; font-size: 36px;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
margin: 0 0 20px 0; margin: 0 0 20px 0;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1) !important;
} }
.jumbotron { .jumbotron-content {
margin: 0 auto;
width: 800px;
padding: 80px 0; padding: 80px 0;
} }
.jumbotron-content #mc_embed_signup {
width: 100%;
}
#mc_embed_signup input { #mc_embed_signup input {
padding: 15px !important; padding: 15px !important;
font-size: 16px !important; font-size: 16px !important;
@ -287,16 +301,42 @@ nav#side-nav {
background-color: #e4e2dd; background-color: #e4e2dd;
} }
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.jumbotron {
background: rgba(141,191,66,.97)!important;
width: 100%;
height: 100%;
}
#mc_embed_signup input {
width: 250px !important;
height: 50px !important;
padding: 10px !important;
}
.jumbotron-content {
width: calc(100% - 120px);
padding: 80px 60px;
}
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.page-content .wrapper {
max-width: 100%;
}
main.page-content { main.page-content {
width: 100%; width: 100%;
padding: 0;
} }
nav#side-nav { nav#side-nav {
width: calc(100% - 30px); width: calc(100% - 30px);
margin: 30px 0 30px;
padding: 15px; padding: 15px;
margin: 0;
} }
.post-thumb { .post-thumb {
@ -304,12 +344,18 @@ nav#side-nav {
} }
.jumbotron { .jumbotron {
padding: 30px 0; background: rgba(141,191,66,.97)!important;
width: 100%;
height: 100%;
}
.jumbotron-content {
padding: 30px 0;
} }
.jumbotron #mc_embed_signup label,
.post-list li h3 a { .post-list li h3 a {
font-size: 24px; font-size: 36px;
} }
#mc_embed_signup input { #mc_embed_signup input {
@ -318,6 +364,19 @@ nav#side-nav {
height: 50px !important; height: 50px !important;
padding: 10px !important; padding: 10px !important;
} }
.jumbotron-content #logo-div {
width: 100%;
}
.jumbotron-content #mc_embed_signup {
width: 100%;
}
.jumbotron-content {
width: 100%;
}
.site-nav { .site-nav {
background-color: rgba(141,191,66,.97)!important; background-color: rgba(141,191,66,.97)!important;
border: 1px solid hsla(0, 0%, 100%, .3) !important; border: 1px solid hsla(0, 0%, 100%, .3) !important;