Browse Source

Tighten CSS layout with a focus on symmetry

This commit contains some minor layout tweaks to make the lines more
symmetrical. It also adjusts some spacing to be more symmetrical. The
end result is greater readability on mobile devices and better browser
performance.
master
Nathaniel McCallum 8 years ago
parent
commit
3ef041ec2d
  1. 35
      static/css/style.css

35
static/css/style.css

@ -43,7 +43,7 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
.icon-facebook-rect:before { content: '\e803'; } .icon-facebook-rect:before { content: '\e803'; }
/* Spacing */ /* Spacing */
.post h1, h3, h4, h5, p, .post-body ul, #post-list li, pre {
.post h1, h3, h4, h5, p, .post-body ul, pre {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -76,8 +76,6 @@ h2 {
} }
.profile #header { .profile #header {
border-bottom: 1px solid #eee;
margin-bottom: 40px;
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; text-align: center;
position: relative; position: relative;
@ -182,7 +180,7 @@ a,
transition: all 0.15s ease; transition: all 0.15s ease;
} }
ul { margin:0; padding:0; }
ul { margin:0; padding:0; margin-bottom: 20px; }
li { list-style-type:circle; list-style-position:inside; } li { list-style-type:circle; list-style-position:inside; }
/* Line Height */ /* Line Height */
@ -371,21 +369,24 @@ img {
/*========================================= /*=========================================
Post List Post List
=========================================== */ =========================================== */
#post-list,#archive-list {
#archive-list {
margin-top: 100px; margin-top: 100px;
} }
#post-list li,#archive-list li {
list-style-type: none;
#post-list {
margin-bottom: 0;
} }
#post-list li:last-child {
#post-list li,#archive-list li {
border-top: 1px solid #eee;
padding-top: 20px;
padding-bottom: 20px;
list-style-type: none;
margin-bottom: 0; margin-bottom: 0;
} }
#post-list li+li {
padding-top: 20px;
border-top: 1px solid #eee;
#post-list li:last-child {
border-bottom: 1px solid #eee;
} }
#post-list a { #post-list a {
@ -430,16 +431,10 @@ Post List
} }
#footer { #footer {
box-shadow: inset 0 1px 0 #eee;
padding: 40px 0 0 0; padding: 40px 0 0 0;
margin-top: 100px;
} }
/* Post Page */ /* Post Page */
#header {
border-bottom: 1px solid #eee;
}
.post { .post {
margin: 80px 0 0 0; margin: 80px 0 0 0;
} }
@ -495,12 +490,10 @@ Post List
/* Post Navigation */ /* Post Navigation */
#post-nav { #post-nav {
border-top:1px solid #eee;
text-align:center; text-align:center;
padding-top:20px;
font-size:13px; font-size:13px;
font-weight:500; font-weight:500;
margin-top: 40px;
margin-top: 20px;
} }
#post-nav span { #post-nav span {
@ -626,9 +619,7 @@ h2.month {
/* Media Queries */ /* Media Queries */
@media screen and (max-width: 540px) { @media screen and (max-width: 540px) {
#wrapper { padding:20px 20px 20px 20px;} #wrapper { padding:20px 20px 20px 20px;}
#header { margin-bottom: 60px; border-bottom: 1px solid #eee; }
.post { margin: 40px 0; } .post { margin: 40px 0; }
#footer { margin-top: 60px; }
#post-list, #archive-list { margin-top: 0; } #post-list, #archive-list { margin-top: 0; }
#post-meta { margin-top: 60px; } #post-meta { margin-top: 60px; }

Loading…
Cancel
Save