Permalink
Browse files

Post 23: CSS Resets and Organization

  • Loading branch information...
akmurray committed Oct 11, 2012
1 parent 5caa8a0 commit 6332c7e50dc2270f2d4a1a57975b27b481d245e1
View
@@ -3,18 +3,25 @@ img.logo {
}
#wrapper-logo {
float:right;
padding:0;
margin-right:12em;
margin-top:20px;
margin-left:40px;
width: 128px;
height: 128px;
position: relative;
margin-top:20px;
margin-left:40px;
border: 0px solid #CCC;
-webkit-perspective: 640px;
-moz-perspective: 640px;
-o-perspective: 640px;
perspective: 640px;
}
#wrapper-logo .logo {
display: block;
}
#logo-cube {
width: 128px;
height: 128px;
View
@@ -0,0 +1,123 @@
/*
Aaron K. Murray
@aaronkmurray
Blog-related CSS 'reset' styles for aaronkmurray.com
This file has settings that aren't specific to the blog, but that will equalize the browser differences
Excellent CSS notes, guidelines, and examples: https://github.com/csswizardry/CSS-Guidelines
Interesting base stylesheet references:
http://fvsch.com/code/base-stylesheet/full.css
http://html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;padding:0; /* for BODY, some browsers have default 8px margins or padding, which causes inconsistencies */
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}
/* HTML5 blocks - needed in older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ul, ol {
margin: 1em 0; /* Default for all browsers except IE */
padding-left: 40px; /* IE has a 40px margin-left instead */
}
nav ul {
list-style:none; /* don't show bullets for navigation lists */
}
p {
margin: 1em 0;
}
blockquote {
margin: 1em 40px; /* Same for all browsers - Customize or remove */
}
figure {
margin: 1em 0; /* Default in HTML5 spec: `1em 40px` */
}
/* LINKS */
a {
text-decoration: underline;
}
a:active, a:hover {
outline: none; /* Remove dotted outline clicked links - Keeps outline on focus */
}
a:focus {
border:1px dashed; /* Make links easy to see when tabbing through on the keyboard */
}
/* No default border around images */
img {border: none;}
/* MISC TEXT-LEVEL ELEMENTS */
/* Make quotations and references more visible */
blockquote, q, cite {
font-style: italic;
}
/* Remove automatic quotation marks for inline quotations
(`q {quotes:none}` not implemented in WebKit) */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
/* Stop superscript and subscript from adding to the line's leading */
sup, sub {
line-height: 0;
}
/* FORMS */
fieldset {
margin: 0; /* Common default is `0 2px` */
padding: 0; /* Common default (roughly): `.35em .625em .75em` */
border: none;
}
input, button, select {
vertical-align: middle; /* Helps keep form elements roughly aligned */
}
/* TABLES */
table {
border-collapse: collapse; /* Merges cell borders together */
border-spacing:0;
/* Browser default: border-collapse: separate; border-spacing: 2px; */
}
th {
text-align: left; /* Default for TH elements is "center" */
}
td, th {
padding: 1px; /* 1px = browser default - set to "0" to remove padding */
vertical-align: top; /* Default is "middle" */
}
td:first-child, th:first-child {
empty-cells: hide; /* Hide empty cells when they're the first in the row */
}
View
@@ -1,26 +1,80 @@
/*
Aaron K. Murray
@aaronkmurray
Blog-related CSS styles for aaronkmurray.com
Excellent CSS notes, guidelines, and examples: https://github.com/csswizardry/CSS-Guidelines
*/
/*
Fonts and Text Sizing. See: http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ and http://jsfiddle.net/csswizardry/8nYqN/
Base font-size here since most elements will inherit this
*/
html {
font-size:1em; /* 1em=16px by default. see See: http://www.informationarchitects.jp/en/100e2r/ */
line-height:1.5; /* 16x1.5=24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) */
}
body {
margin:0;
padding:0;
font-size:100%;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
color:#333;
}
/* Common margin-bottom for vertical rhythm. */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
fieldset,
p,
table,
pre,
hr{
margin-bottom:24px;
margin-bottom:1.5rem;
}
/* Links */
a:link {
color:#333;
}
a:visited {
color:#333;
}
a:active {
color:#c00;
}
a:hover, a:focus {
color:#c00;
opacity: .75;
}
/*
Special case overrides for external ShareThis styles that I cannot control
*/
#wrapper-site-footer .stButton .chicklets {
font-size:150%;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
line-height:1.25em; /* 16x1.25=20px */
color:#333;
}
#wrapper-site-footer .stButton .chicklets:hover {color:#c00;}
h1 {font-size:1.3125em;/* 16x1.3125=21px */}
h2 {font-size:1.25em;}
h3 {font-size:1.1875em; }
h4 {font-size:1.125em; /* 16x1.125=18px */}
h5 {font-size:1.0625em;}
h6 {font-size:1.0em;/* 16px=1em */}
img {border:0px;}
/*
Begin real specific styling for the blog
*/
#wrapper-site-header, #wrapper-site-footer, #wrapper-blog-posts, #wrapper-blog-post-menu, #wrapper-logo {padding:10px;}
#wrapper-site-header, #wrapper-site-footer, #wrapper-logo {clear:both;}
#wrapper-site-header, #wrapper-site-footer, #wrapper-blog-posts, #wrapper-blog-post-menu {padding:10px;}
#wrapper-site-header, #wrapper-site-footer {clear:both;}
#wrapper-site-header {border-bottom:1px solid #bcc;background-color:#dee;min-height:5em;}
#wrapper-site-header {border-bottom:1px solid #bcc;background-color:#dee;min-height:10em;}
#wrapper-site-footer {border-top:1px solid #bcc;background-color:#dee;min-height:20em;}
#wrapper-site-header-words {float:left;max-width:600px;clear:both;}
@@ -29,12 +83,10 @@ img {border:0px;}
#wrapper-site-header-icons {float:right;}
#wrapper-site-footer a {text-decoration:none;}
#wrapper-site-footer a:hover {opacity: .75;}
#wrapper-site-footer section {float:left;width:13em;}
#wrapper-site-footer section h3 {margin-left:0em;}
#wrapper-site-footer section a {text-decoration:none;}
#wrapper-site-footer section ul {list-style: disc inside;margin:0;padding:0;}
#wrapper-site-footer section ul li {list-style: none;line-height:2em;}
#wrapper-site-footer section.share ul {margin-left:-0.45em;}
@@ -56,8 +108,8 @@ div.copyright span {display:block;width:20em;margin-left:auto;margin-right:auto;
.blog-post-body {padding:10px;}
.blog-post-body span.code, pre.code, code {font-family: monospace, Courier, Lucidatypewriter; }
.blog-post-body div.callout {margin:10px;text-align:center;}
.blog-post-body div.callout span.citation {text-align:center;color:#555;clear:both;display:block;font-size:smaller;}
.blog-post-body figure {margin:10px;text-align:center;}
.blog-post-body figcaption {text-align:center;color:#555;font-size:smaller;}
.blog-post-guid {display:none;}
.blog-post-body .guest-post-content {margin:10px;}
@@ -68,16 +120,12 @@ div.copyright span {display:block;width:20em;margin-left:auto;margin-right:auto;
.post-screenshot img {border:0;margin:10px;}
#wrapper-logo .logo {display: block;margin-left: auto;margin-right: auto;}
#wrapper-blog-post-menu .menu-header {}
/* START post-specific styles */
/* START POST 8 */
#table-png-compression-results {
border-collapse:collapse;
}
#table-png-compression-results th, #table-png-compression-results td {
padding:10px;
border:1px solid #888;
@@ -1,4 +1,4 @@
.img-post-1-thumb-100
.img-post-3-thumb-100
{
width: 100px;
height: 95px;
@@ -98,20 +98,20 @@
}
.img-post-15-thumb-100
.img-post-8-thumb-100
{
width: 100px;
height: 80px;
height: 62px;
background-image: url(../../img/blog/sprites/post-screenshot-thumbs-all.png);
background-position: 0px -175px;
background-repeat:no-repeat;
}
.img-post-14-thumb-100
.img-post-15-thumb-100
{
width: 100px;
height: 81px;
height: 80px;
background-image: url(../../img/blog/sprites/post-screenshot-thumbs-all.png);
background-position: -100px -175px;
background-repeat:no-repeat;
@@ -138,7 +138,7 @@
}
.img-post-21-thumb-100
.img-post-22-thumb-100
{
width: 100px;
height: 84px;
@@ -148,7 +148,7 @@
}
.img-post-22-thumb-100
.img-post-21-thumb-100
{
width: 100px;
height: 84px;
@@ -178,7 +178,7 @@
}
.img-post-2-thumb-100
.img-post-23-thumb-100
{
width: 100px;
height: 95px;
@@ -188,7 +188,7 @@
}
.img-post-3-thumb-100
.img-post-1-thumb-100
{
width: 100px;
height: 95px;
@@ -198,22 +198,32 @@
}
.img-post-8-thumb-100
.img-post-2-thumb-100
{
width: 100px;
height: 62px;
height: 95px;
background-image: url(../../img/blog/sprites/post-screenshot-thumbs-all.png);
background-position: 0px -354px;
background-repeat:no-repeat;
}
.img-post-14-thumb-100
{
width: 100px;
height: 81px;
background-image: url(../../img/blog/sprites/post-screenshot-thumbs-all.png);
background-position: -100px -354px;
background-repeat:no-repeat;
}
.img-post-4-thumb-100
{
width: 100px;
height: 57px;
background-image: url(../../img/blog/sprites/post-screenshot-thumbs-all.png);
background-position: -100px -354px;
background-position: -200px -354px;
background-repeat:no-repeat;
}
Oops, something went wrong.

0 comments on commit 6332c7e

Please sign in to comment.