style: simpler post list items, spacing adjustments
This commit is contained in:
Ayo
parent
8b82201693
commit
aa4da0ec1e
4 changed files with 53 additions and 149 deletions
|
|
@ -2,8 +2,10 @@
|
|||
<title>
|
||||
{{page.title}} - Web Technologies and Productivity Hacks - {{site.title}}
|
||||
</title>
|
||||
<meta name="description"
|
||||
content="Learn how to use the best and latest web technologies to boost your productivity." />
|
||||
<meta
|
||||
name="description"
|
||||
content="Learn how to use the best and latest web technologies to boost your productivity."
|
||||
/>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
|
@ -18,14 +20,23 @@
|
|||
{% else %}
|
||||
<meta property="og:type" content="website" />
|
||||
{% endif %} {% if page.layout == 'home' %}
|
||||
<meta property="og:image" content="{{ '/assets/images/' | absolute_url }}ayo.png" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{{ '/assets/images/' | absolute_url }}ayo.png"
|
||||
/>
|
||||
{% elsif page.image %}
|
||||
<meta property="og:image" content="{{ '/assets/images/' | absolute_url }}{{ page.image }}.jpg" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{{ '/assets/images/' | absolute_url }}{{ page.image }}.jpg"
|
||||
/>
|
||||
{% else %}
|
||||
<meta property="og:image" content="{{ '/assets/images/' | absolute_url }}hello-world.jpg" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{{ '/assets/images/' | absolute_url }}ayo.png"
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
<meta property="og:site_name" content="Ayo Ayco's Blog" />
|
||||
<meta property="og:site_name" content="{{site.title}}" />
|
||||
|
||||
<!--meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
|
||||
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
|
||||
|
|
@ -39,12 +50,23 @@
|
|||
<link rel="me" href="https://metapixl.com/@ayo" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}"
|
||||
href="{{ '/feed.xml' | relative_url }}" />
|
||||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="{{ site.title | escape }}"
|
||||
href="{{ '/feed.xml' | relative_url }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="//fonts.googleapis.com/css?family=Lato"
|
||||
/>
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -20,20 +20,4 @@
|
|||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<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/{{ post.image }}.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>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ layout: default
|
|||
|
||||
<div class="blog-post__after-content">
|
||||
<div id="reply-by-email">
|
||||
<a href="mailto:blog@ayco.io?subject=Re: {{page.title}}&body=%0A%0AResponse to: {{site.url}}{{page.url}}">Thoughts? Reply to this post by email</a>
|
||||
<a href="mailto:blog@ayco.io?subject=Re: {{page.title}}&body=%0A%0AResponse to: {{site.url}}{{page.url}}">Thoughts? Reply by email</a>
|
||||
<style>
|
||||
#reply-by-email {
|
||||
margin: 1em 0;
|
||||
|
|
@ -77,8 +77,8 @@ layout: default
|
|||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
width: calc(100% - 1em);
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
138
assets/main.scss
138
assets/main.scss
|
|
@ -86,17 +86,12 @@ caption {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 15px 0 !important;
|
||||
}
|
||||
|
||||
.page-content-home {
|
||||
background-color: #e4e2dd;
|
||||
}
|
||||
|
||||
.page-content .wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.desc-list {
|
||||
|
|
@ -187,23 +182,8 @@ caption {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
#about-me::after {
|
||||
content: "";
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
border-bottom: 0 inset transparent;
|
||||
border-left: 10px inset transparent;
|
||||
border-right: 10px inset transparent;
|
||||
border-top: 10px solid #8dbf42;
|
||||
}
|
||||
|
||||
#donate-form {
|
||||
background-color: #80ae3c !important;
|
||||
background-color: #90c049 !important;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
|
|
@ -235,17 +215,17 @@ caption {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav#side-nav,
|
||||
main.page-content {
|
||||
width: calc(70% - 20px);
|
||||
margin: 1em 0;
|
||||
}
|
||||
main.page-content {
|
||||
padding: 0;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
nav#side-nav {
|
||||
width: calc(30% - 10px);
|
||||
margin: 1em 0;
|
||||
// box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
// position: sticky;
|
||||
// position: -webkit-sticky;
|
||||
// top: 1em;
|
||||
}
|
||||
|
||||
.side-panel-top {
|
||||
|
|
@ -257,7 +237,7 @@ nav#side-nav {
|
|||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.side-panel {
|
||||
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||
background-color: #80ae3c !important;
|
||||
color: white;
|
||||
font-size: normal;
|
||||
padding: 0 15px;
|
||||
|
|
@ -306,8 +286,6 @@ table.image caption {
|
|||
|
||||
.blog-post {
|
||||
&__header {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&__category {
|
||||
span {
|
||||
a:hover {
|
||||
|
|
@ -365,6 +343,8 @@ table.image caption {
|
|||
}
|
||||
}
|
||||
&__content {
|
||||
margin: 1em 0;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
|
|
@ -410,7 +390,7 @@ table.image caption {
|
|||
}
|
||||
&__after-content {
|
||||
#rss-sign-up {
|
||||
color: rgba(141, 191, 66, 0.97);
|
||||
color: #90c049;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
|
|
@ -420,7 +400,7 @@ table.image caption {
|
|||
|
||||
// #rss-sign-up a,
|
||||
#rss-sign-up em {
|
||||
color: rgba(141, 191, 66, 1);
|
||||
color: #90c049;
|
||||
}
|
||||
|
||||
#rss-sign-up a {
|
||||
|
|
@ -437,11 +417,13 @@ table.image caption {
|
|||
|
||||
&__item {
|
||||
background-color: #fff;
|
||||
padding-bottom: 40px;
|
||||
border: 1px solid rgba(34, 34, 34, 0.25);
|
||||
border-radius: 5px;
|
||||
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.25);
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&__title {
|
||||
margin: 10px 0;
|
||||
font-family: "Source Serif Pro", serif;
|
||||
|
|
@ -460,56 +442,6 @@ table.image caption {
|
|||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
&__excerpt {
|
||||
&__thumb {
|
||||
border-radius: 5px;
|
||||
}
|
||||
p {
|
||||
margin: 15px 0 0;
|
||||
--x-height-multiplier: 0.375;
|
||||
--baseline-multiplier: 0.17;
|
||||
font-family: medium-content-serif-font, Georgia, Cambria,
|
||||
"Times New Roman", Times, serif;
|
||||
letter-spacing: 0.01rem;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
line-height: 1.58;
|
||||
letter-spacing: -0.003em;
|
||||
}
|
||||
p:not(blockquote *):first-of-type::first-letter {
|
||||
font-weight: 900;
|
||||
font-size: 3em;
|
||||
line-height: 60px;
|
||||
float: left;
|
||||
padding: 0px 3px;
|
||||
color: #80ae3c;
|
||||
margin-top: -4px;
|
||||
}
|
||||
/*
|
||||
p:first-of-type::first-letter {
|
||||
font-size: 75px;
|
||||
line-height: 60px;
|
||||
float: left;
|
||||
padding: 0px 3px;
|
||||
color: #8a2be2;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
&__readmore {
|
||||
margin-top: 1em;
|
||||
|
||||
a:hover {
|
||||
color: #ee4a03;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #bb4a03;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -564,15 +496,6 @@ table.image caption {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jumbotron-content {
|
||||
width: calc(100% - 120px);
|
||||
padding: 80px 60px;
|
||||
}
|
||||
.page-content .wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -589,27 +512,12 @@ table.image caption {
|
|||
// margin: 0 15px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
}
|
||||
.jumbotron-content {
|
||||
padding: 1em 0;
|
||||
}
|
||||
.post-list li h3 a {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.jumbotron-content #logo-div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jumbotron-content {
|
||||
width: 100%;
|
||||
}
|
||||
.site-nav {
|
||||
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||
background-color: #90c049 !important;
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
}
|
||||
.site-nav .menu-icon {
|
||||
|
|
@ -619,13 +527,3 @@ table.image caption {
|
|||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
||||
.jumbotron-content {
|
||||
width: calc(100% - 100px);
|
||||
padding: 60px 50px;
|
||||
}
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue