Fix Homepage, website font and post page layout (#21)

* Add centered avatar to homepage

* Fix sizes css

* Fix fonts

* Post page layout fixes

* Add blockquote to first post and styling
This commit is contained in:
Avijit Gupta
2021-07-05 05:14:48 +02:00
committed by GitHub
parent c7e90c66a5
commit 53148f6e85
6 changed files with 100 additions and 58 deletions

View File

@@ -1,7 +1,9 @@
html {
background: white;
color: black;
font-family: "Roboto", sans-serif;
font-family: "Quicksand", sans-serif;
font-weight: 300;
letter-spacing: 0.5px;
min-height: 100%;
position: relative;
}
@@ -10,6 +12,11 @@ body {
margin-bottom: 170px;
}
main#content {
width: 810px;
margin: 120px auto 0;
}
/* HEADER */
.header {
background-color: rgb(255, 255, 255);
@@ -132,7 +139,8 @@ body {
/** COMMON **/
.header .footer {
.header,
.footer {
font-family: "Ubuntu", sans-serif;
}
@@ -153,6 +161,7 @@ body {
background-color: #0058b5;
border: 1px solid #0058b5;
border-radius: 4px;
box-sizing: border-box;
color: white;
display: inline-block;
font-size: 14px;
@@ -185,15 +194,49 @@ code {
word-wrap: break-word;
}
/* SINGLE */
#content {
width: 810px;
margin: 120px auto 0;
blockquote {
border-left: 2px solid #e0e0e0;
padding-left: 1rem;
}
/* HOME PAGE */
.home-about {
text-align: center;
}
.home-about .avatar img {
border-radius: 50%;
height: auto;
}
/* Avatar sizes (default is M) - XS, S, M, L, XL */
.home-about .avatar img.size-xs {
width: 7rem;
}
.home-about .avatar img.size-s {
width: 9rem;
}
.home-about .avatar img {
width: 11rem;
}
.home-about .avatar img.size-l {
width: 13rem;
}
.home-about .avatar img.size-xl {
width: 15rem;
}
/* SINGLE */
.post .post-date {
color: gray;
}
.post .post-content {
font-size: 1.04rem;
line-height: 1.7;
margin-top: 50px;
}