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

feat: layout and style improvements

Browse source
This commit is contained in:
Ayo Ayco 2021-06-26 00:26:33 +08:00
parent 0b0b3722cb
commit 0d252101b1
2 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_layouts/default.html
View file

@ -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 newsletters on life and personal growth.</p> <p>Get my newsletters on life and personal growth.</p>
</div> </div>
<div class="clear-both"></div> <div class="clear-both"></div>
</div> </div>
@ -79,7 +79,7 @@
</div> </div>
</main> </main>
<nav id="side-nav" class="float-left"> <nav id="side-nav" class="float-left">
<div class="side-panel" id="about-me"> <div class="side-panel side-panel-top" id="about-me">
<div class="ayo-thumb"> <div class="ayo-thumb">
<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>
@ -88,7 +88,7 @@
<p>Want to give me a tip?</p> <p>Want to give me a tip?</p>
<!--div class="post-readmore"><a target="_blank" class="button" href="https://docs.google.com/forms/d/e/1FAIpQLScinfuT_8-4q5Yk16nGUMxWxVpQgWZwyAaJ5oFY5_0NsRMjMw/viewform?usp=sf_link">Get FREE Consultation</a></div--> <!--div class="post-readmore"><a target="_blank" class="button" href="https://docs.google.com/forms/d/e/1FAIpQLScinfuT_8-4q5Yk16nGUMxWxVpQgWZwyAaJ5oFY5_0NsRMjMw/viewform?usp=sf_link">Get FREE Consultation</a></div-->
</div> </div>
<div class="side-panel" id="donate-form"> <div class="side-panel side-panel-bottom" id="donate-form">
<!--form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <!--form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="5JY6XQBB35E5E"> <input type="hidden" name="hosted_button_id" value="5JY6XQBB35E5E">

47
assets/main.scss
View file

@ -147,7 +147,7 @@ caption {
*/ */
margin-top: 80px; margin-top: 80px;
border: 2px solid #ccc; border: 2px solid #ccc;
border-radius: 3.2px !important; border-radius: 5px !important;
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25); box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
background: white; background: white;
@ -236,7 +236,7 @@ caption {
font-size: 16px !important; font-size: 16px !important;
font-weight: bold; font-weight: bold;
height: 60px !important; height: 60px !important;
border-radius: 3.2px !important; border-radius: 5px !important;
} }
#mc_embed_signup .button { #mc_embed_signup .button {
@ -275,7 +275,7 @@ caption {
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif !important; sans-serif !important;
border-radius: 3.2px; border-radius: 5px;
border: 1px solid #ee4a03; border: 1px solid #ee4a03;
text-align: center; text-align: center;
} }
@ -355,6 +355,14 @@ nav#side-nav {
top: 30px; top: 30px;
} }
.side-panel-top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.side-panel-bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.side-panel { .side-panel {
background-color: rgba(141, 191, 66, 0.97) !important; background-color: rgba(141, 191, 66, 0.97) !important;
color: white; color: white;
@ -543,6 +551,9 @@ table.image caption {
font-weight: bold; font-weight: bold;
} }
} }
&__image {
border-radius: 5px;
}
&__image-caption { &__image-caption {
font-size: small; font-size: small;
text-align: center; text-align: center;
@ -595,7 +606,8 @@ table.image caption {
&__item { &__item {
background-color: #fff; background-color: #fff;
margin-bottom: 35px; padding-bottom: 40px;
&__header { &__header {
margin-bottom: 15px; margin-bottom: 15px;
&__title { &__title {
@ -618,8 +630,11 @@ table.image caption {
} }
&__excerpt { &__excerpt {
&__thumb {
border-radius: 5px;
}
p { p {
margin-top: 21px; margin: 15px 0 0;
--x-height-multiplier: 0.375; --x-height-multiplier: 0.375;
--baseline-multiplier: 0.17; --baseline-multiplier: 0.17;
font-family: medium-content-serif-font, Georgia, Cambria, font-family: medium-content-serif-font, Georgia, Cambria,
@ -643,24 +658,28 @@ table.image caption {
} }
&__readmore { &__readmore {
margin: 10px 0; margin-top: 15px;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
color: #ee4a03;
border: 1px solid #ee4a03;
} }
a { a {
background-color: #ee4a03; color: #bb4a03;
color: #ffffff !important; background-color: #f5f5f5;
padding: 15px; border: 1px solid #ccc;
display: inline-block; border-radius: 5px;
padding: 10px 15px;
width: calc(100% - 30px); width: calc(100% - 30px);
font-size: 16px; text-align: center;
display: inline-block;
font-size: 18px;
font-weight: bold; font-weight: bold;
font-family: medium-content-sans-serif-font, -apple-system, font-family: medium-content-sans-serif-font, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif !important; "Open Sans", "Helvetica Neue", sans-serif !important;
border-radius: 3.2px;
border: 1px solid #ee4a03;
text-align: center;
} }
} }
} }