Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: aaronjamesyoung/Skeleton-Wordpress-Theme
base: 8f854f3c41
...
head fork: aaronjamesyoung/Skeleton-Wordpress-Theme
compare: b505885273
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 209 additions and 190 deletions.
  1. +3 −4 css/ie.css
  2. +0 −161 css/reset.css
  3. +206 −25 css/style.css
View
7 css/ie.css
@@ -1,6 +1,3 @@
-/* self-clearing floats */
-.mod {zoom: 1;}
-
/* IE7+ - scale images more attractively */
img {
-ms-interpolation-mode: bicubic;
@@ -21,5 +18,7 @@ img {
/* fix measurements for IE 6 & 7 because they don't support box-sizing */
-/* they get the ie7 class on the html tag, so use as such: */
+/* they get the ie7 class on the html tag, so use as such:
+ * comment the below line if you're using the 960 default layout, it doesn't have padding so box-sizing won't
+ * matter */
.ie7 .body { width: 648px; } /* needed to fix the width of the .body stuff */
View
161 css/reset.css
@@ -1,161 +0,0 @@
-/* TOUCAN CSS RESET | v0.1.9 */
-/* Adapted by Aaron James Young */
-
-/* General
----------------------------------------- */
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;
- padding: 0;
-}
-
-p, blockquote, q, pre, address, hr, code, samp,
-dl, ol, ul, form, table, fieldset, menu {
- margin-bottom: 1.5em;
-}
-
-/* html5 elements */
-/* required for FF <= 3.6 */
-header, footer, section, nav, aside, article, figure {
- display: block;
-}
-
-/* Structure
----------------------------------------- */
-html { font-size: 100%; }
-body { line-height: 1.5em; } /* define a pixel font size in normal stylesheet */
-
-/* Text
----------------------------------------- */
-h1, h2, h3, h4, h5, h6 { font-weight: bold; }
-h1 { font-size: 3em; line-height: 1.1em; margin-bottom: .238em; }
-h2 { font-size: 2em; line-height: 1.15em; margin-bottom: .357em; }
-h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .476em; }
-em, i { font-style: italic; }
-strong, b { font-weight: bold; }
-blockquote, q, cite { font-style: italic; }
-blockquote, q { quotes: none; }
-blockquote:before, blockquote:after,
-q:before, q:after { content: ""; content: none; }
-code, kbd, pre, samp, { } /* set a font */
-pre { /* word-wrap: break-word; */ white-space: pre-wrap; }
-abbr, dfn { border-bottom: 1px dotted; cursor: help; font-style: normal; font-variant: normal; }
-var { font-style: normal; }
-
-/* Hypertext
----------------------------------------- */
-a:focus { outline: 1px dotted; }
-
-/* Image
----------------------------------------- */
-img { border: 0; }
-
-/* List
----------------------------------------- */
-
-ul { list-style: disc outside none; }
-ol { list-style: decimal outside none; }
-li { margin-left: 2em; } /*20px?*/
-li ul, li ol { margin-bottom: 0; }
-dt { font-weight: bold; }
-dd { margin-bottom: 1em; }
-
-/* Presentation
----------------------------------------- */
-hr { border: 0; border-bottom: 1px solid; }
-small, sub, sup { font-size: .85em; }
-sub, sup { line-height: 1; }
-sub { vertical-align: bottom; }
-sup { vertical-align: top; }
-del, s, { text-decoration: line-through; }
-ins { border-bottom: 1px dotted; text-decoration: none; }
-bdo { border-bottom: 1px dotted; }
-
-/* Form
----------------------------------------- */
-fieldset { padding: 1em; }
-legend { font-weight: bold; padding: 0 .25em; }
-input, textarea, select, button { font-family: inherit; font-size: 100%; }
-input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit],
-button[type=button], button[type=reset], button[type=submit] { cursor: pointer; line-height: 1; }
-textarea { line-height: 1.25; text-align: left; }
-
-/* Table
----------------------------------------- */
-table { border: 0; border-collapse: collapse; border-spacing: 0; line-height: 1.3; }
-caption, th, td { text-align: left; vertical-align: top; }
-th, td { border: 1px solid; padding: .5em 1em; }
-caption { padding-bottom: 1em; }
-th { font-weight: bold; }
-
-/* "Grid" stuff
- * ------------------------------------- */
-body, div, object, iframe, header, footer, section, nav, aside, article, figure,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, li,
-form, fieldset, textarea, input {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box; /* these settings work in FF, Webkit, and IE8+ */
-}
-
-/* Default, 8-column: 768 px total width, 60px margins, 24px gutters, 60px columns
- * IE 6-8 will use these settings */
-.body { padding: 0 60px; width: 768px; margin: 0 auto; }
-.gl /* golden large */ { width: 396px; }
-.gs /* golden small */ { width: 228px; }
-/* half-width, third-width, quarter-width, sixth-width classes.
- * They float:left, have margin-right=24px (gutter), and the ones on the right have no margin-right
- * This won't work real well in IE, TODO: Fix IE
- * also TODO: consider using nth-child instead of nth-of-type in case I'm using these classes on
- * different types of elements
- * */
-.full { width: 648px; }
-.half { float: left; width: 312px; margin-right: 24px; }
-.half:nth-of-type(2n) { margin-right: 0; }
-.third { float: left; width: 200px; margin-right: 24px; }
-.third:nth-of-type(3n) { margin-right: 0; }
-.quarter { float: left; width: 144px; margin-right: 24px; }
-.quarter:nth-of-type(4n) { margin-right: 0; }
-/* todo - make this more sane, 88px is really narrow */
-.sixth { float: left; width: 88px; margin-right: 24px; }
-.sixth:nth-of-type(6n) { margin-right: 0; }
-
-/* 13-column: 60px columns, 24px gutters, 72px margins, 1212px total */
-@media only screen and (min-width: 1212px) {
- .body { padding: 0 72px; width: 1212px; margin: 0 auto; }
- .gl { width: 648px; } .gs { width: 396px; }
- .full { width: 1068px; }
- .half { float: left; width: 522px; margin-right: 24px; }
- .half:nth-of-type(2n) { margin-right: 0; }
- .third { float: left; width: 340px; margin-right: 24px; }
- .third:nth-of-type(3n) { margin-right: 0; }
- .quarter { float: left; width: 249px; margin-right: 24px; }
- .quarter:nth-of-type(4n) { margin-right: 0; }
- .sixth { float: left; width: 158px; margin-right: 24px; }
- .sixth:nth-of-type(6n) { margin-right: 0; }
-}
-
-/* 5-column: 60px columns, 24px gutters, 42px margins, 480px total */
-@media only screen and (max-width: 767px) and (min-width: 480px) {
- .body { padding: 0 42px; width: 480px; margin: 0 auto; }
- .gl { width: 228px; } .gs { width: 144px; }
- .full { width: 396px; }
- .half, .third, .quarter, .sixth { float: left; width: 174px; margin-right: 24px; }
- .third:nth-of-type(3n) { margin-right: 24px; }
- .half:nth-of-type(2n), .third:nth-of-type(2n), .quarter:nth-of-type(2n), .sixth:nth-of-type(2n) { margin-right: 0; }
-}
-
-/* 3-column: 60px columns, 24px gutters, 46px margins, 320px total */
-@media only screen and (max-width: 479px) {
- .body { padding: 0 46px; width: 320px; margin: 0 auto; }
- .gl, .gs, .full, .half, .third, .quarter { width: 228px; float: left; margin: 0; }
- .sixth { float: left; width: 102px; margin-right: 24px; }
- .sixth:nth-of-type(2n) { margin-right: 0; }
-}
View
231 css/style.css
@@ -1,6 +1,4 @@
-/* Imports */
-@import url("reset.css");
-
+/* font-face stuff first, just cuz: */
@font-face { /* fill in font name and filenames */
font-family:'';
src: url('.eot?') format(''), /* keep the question mark */
@@ -13,18 +11,138 @@
font-style: normal;
}
-/* OK, here we go */
+/* TOUCAN CSS RESET | v0.1.9 */
+/* Adapted by Aaron James Young */
+
+/* General
+---------------------------------------- */
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+}
+
+p, blockquote, q, pre, address, hr, code, samp,
+dl, ol, ul, form, table, fieldset, menu {
+ margin-bottom: 1.5em;
+}
+
+/* html5 elements */
+/* required for FF <= 3.6 */
+header, footer, section, nav, aside, article, figure, hgroup {
+ display: block;
+}
+
+/* Structure
+---------------------------------------- */
+html { font-size: 100%; }
+body { line-height: 1.5em; } /* define a pixel font size later in this stylesheet */
+
+/* Text
+---------------------------------------- */
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+h1 { font-size: 3em; line-height: 1.1em; margin-bottom: .238em; }
+h2 { font-size: 2em; line-height: 1.15em; margin-bottom: .357em; }
+h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .476em; }
+em, i { font-style: italic; }
+strong, b { font-weight: bold; }
+blockquote, q, cite { font-style: italic; }
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+code, kbd, pre, samp, { } /* set a font */
+pre { /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
+ white-space: pre; white-space: pre-wrap; word-wrap: break-word;
+ padding: 15px;
+}
+abbr, dfn { border-bottom: 1px dotted; cursor: help; font-style: normal; font-variant: normal; }
+var { font-style: normal; }
+/* Set sub, sup without affecting line-height: gist.github.com/413930 */
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+/* Hypertext
+---------------------------------------- */
+a:focus { outline: 1px dotted; }
+
+/* Image
+---------------------------------------- */
+img { border: 0; }
+
+/* List
+---------------------------------------- */
+
+ul { list-style: disc outside none; }
+ol { list-style: decimal outside none; }
+li { margin-left: 2em; } /*20px?*/
+li ul, li ol { margin-bottom: 0; }
+dt { font-weight: bold; }
+dd { margin-bottom: 1em; }
+/* Remove margins for navigation lists */
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+
+/* Presentation
+---------------------------------------- */
+hr { border: 0; border-bottom: 1px solid; }
+small, sub, sup { font-size: .85em; }
+sub, sup { line-height: 1; }
+sub { vertical-align: bottom; }
+sup { vertical-align: top; }
+del, s, { text-decoration: line-through; }
+ins { border-bottom: 1px dotted; text-decoration: none; }
+bdo { border-bottom: 1px dotted; }
+
+/* Form
+---------------------------------------- */
+fieldset { padding: 1em; }
+legend { font-weight: bold; padding: 0 .25em; }
+input, textarea, select, button { font-family: inherit; font-size: 100%; }
+input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit],
+button[type=button], button[type=reset], button[type=submit] { cursor: pointer; line-height: 1; }
+textarea { line-height: 1.25; text-align: left; }
+/* Align checkboxes, radios, text inputs with their label tjkdesign.com/ez-css/css/base.css */
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+/* Hand cursor on clickable input elements */
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+
+/* Table
+---------------------------------------- */
+table { border: 0; border-collapse: collapse; border-spacing: 0; line-height: 1.3; }
+caption, th, td { text-align: left; vertical-align: top; }
+th, td { border: 1px solid; padding: .5em 1em; }
+caption { padding-bottom: 1em; }
+th { font-weight: bold; }
+
+/* box-sizing to make things easier. Use a fallback for IE 6 & 7 */
+body, div, object, iframe, header, footer, section, nav, aside, article, figure,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, li,
+form, fieldset, textarea, input {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* these settings work in FF, Webkit, and IE8+ */
+}
+
+/***********************CUSTOMIZATION AND LAYOUT STUFF***************************/
+
+/* First, set some generic styles */
body { font-family: 'Liberation Sans', sans-serif; /* no helvetica or arial */
/* set a pixel font size here, no need to set any other font sizes */ }
/* self-clearing floats */
-.mod:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
-}
+.mod:before, .mod:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.mod:after { clear: both; }
+/* Fix mod: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
+.mod { zoom: 1; }
/* optional vanity styles */
::selection {background: #c80000;}
@@ -33,8 +151,6 @@ body { font-family: 'Liberation Sans', sans-serif; /* no helvetica or arial */
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
-/* structural layout stuff */
-/* Default, 8-column: 768 px total width, 60px columns, 24px gutters, 60px columns */
.gl { float: left; } /* adjust direction of float for golden columns here */
.gs { float: right; }
@@ -44,26 +160,91 @@ img::-moz-selection {background: transparent;}
.alignleft { float: left; display: inline; margin: 0 15px 15px 0; }
.center { display: block; margin: 0 auto; }
+/* text general styles */
+h1 { }
+h2 { }
+h3 { }
+p { }
+ul { }
+ol { }
+hr { }
+a { }
+a:link { -webkit-tap-highlight-color: #FF5E99; }
+
+/* "Grid" stuff
+ * Two default layouts given: 768 width (from Less Framework) and 960 width (I like better)
+ * Choose one default layout and comment/delete the other
+ * There are three media query layouts: 1212px, 480px, 320px (from Less Framework)
+ * Use as desired, delete or comment the others
+ * ------------------------------------- */
+
+/* Default, 8-column: 768 px total width, 60px margins, 24px gutters, 60px columns
+ * IE 6-8 will use these settings */
+.body { padding: 0 60px; width: 768px; margin: 0 auto; }
+.gl /* golden large */ { width: 396px; }
+.gs /* golden small */ { width: 228px; }
+/* half-width, third-width, quarter-width, sixth-width classes.
+ * They float:left, have margin-right=24px (gutter), and the ones on the right have no margin-right
+ * Must be used on the same type of element, nth-child is a little tricky in this kind of case
+ * */
+.full { width: 648px; }
+.half { float: left; width: 312px; margin-right: 24px; }
+.half:nth-of-type(2n) { margin-right: 0; }
+.third { float: left; width: 200px; margin-right: 24px; }
+.third:nth-of-type(3n) { margin-right: 0; }
+.quarter { float: left; width: 144px; margin-right: 24px; }
+.quarter:nth-of-type(4n) { margin-right: 0; }
+/* todo - make this more sane, 88px is really narrow */
+.sixth { float: left; width: 88px; margin-right: 24px; }
+.sixth:nth-of-type(6n) { margin-right: 0; }
+
+/* Alternate default: 960px width. Uncomment and delete above stuff
+ * gets rid of padding on sides of .body
+ * .gl and .gs are actually 2/3 + 1/3, not golden ratio
+ *
+.body { padding: 0; width: 960px; margin: 0 auto; }
+.gl { width: 632px; }
+.gs { width: 304px; }
+.full { width: 960px; }
+.half { float: left; width: 518px; margin-right: 24px; }
+.half:nth-of-type(2n) { margin-right: 0; }
+.third { float: left; width: 304px; margin-right: 24px; }
+.third:nth-of-type(3n) { margin-right: 0; }
+.quarter { float: left; width: 222px; margin-right: 24px; }
+.quarter:nth-of-type(4n) { margin-right: 0; }
+.sixth { float: left; width: 140px; margin-right: 24px; }
+.sixth:nth-of-type(6n) { margin-right: 0; }
+*/
+
/* 13-column: 60px columns, 24px gutters, 72px margins, 1212px total */
@media only screen and (min-width: 1212px) {
+ .body { padding: 0 72px; width: 1212px; margin: 0 auto; }
+ .gl { width: 648px; } .gs { width: 396px; }
+ .full { width: 1068px; }
+ .half { float: left; width: 522px; margin-right: 24px; }
+ .half:nth-of-type(2n) { margin-right: 0; }
+ .third { float: left; width: 340px; margin-right: 24px; }
+ .third:nth-of-type(3n) { margin-right: 0; }
+ .quarter { float: left; width: 249px; margin-right: 24px; }
+ .quarter:nth-of-type(4n) { margin-right: 0; }
+ .sixth { float: left; width: 158px; margin-right: 24px; }
+ .sixth:nth-of-type(6n) { margin-right: 0; }
}
/* 5-column: 60px columns, 24px gutters, 42px margins, 480px total */
@media only screen and (max-width: 767px) and (min-width: 480px) {
+ .body { padding: 0 42px; width: 480px; margin: 0 auto; }
+ .gl { width: 228px; } .gs { width: 144px; }
+ .full { width: 396px; }
+ .half, .third, .quarter, .sixth { float: left; width: 174px; margin-right: 24px; }
+ .third:nth-of-type(3n) { margin-right: 24px; }
+ .half:nth-of-type(2n), .third:nth-of-type(2n), .quarter:nth-of-type(2n), .sixth:nth-of-type(2n) { margin-right: 0; }
}
/* 3-column: 60px columns, 24px gutters, 46px margins, 320px total */
@media only screen and (max-width: 479px) {
+ .body { padding: 0 46px; width: 320px; margin: 0 auto; }
+ .gl, .gs, .full, .half, .third, .quarter { width: 228px; float: left; margin: 0; }
+ .sixth { float: left; width: 102px; margin-right: 24px; }
+ .sixth:nth-of-type(2n) { margin-right: 0; }
}
-/* end structural layout stuff */
-
-/* text and other general styles */
-h1 { }
-h2 { }
-h3 { }
-p {}
-ul {}
-ol {}
-hr {}
-
-/* page-specific stuff */

No commit comments for this range

Something went wrong with that request. Please try again.