Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

A ton more work and tweaking.

  • Loading branch information...
commit df8cb2469f25f0fc66682056b0ba3d407f7ddf3b 1 parent 8de46cc
@Abban Abban authored
View
0  .gitignore 100644 → 100755
File mode changed
View
0  README.md 100644 → 100755
File mode changed
View
858 assets/css/style.css 100644 → 100755
@@ -1,758 +1,100 @@
-/**
- * Responsable Grid System
- *
- * Setting up a responsive grid based on Semantic GS
- *
- * @author Abban Dunne http://abandon.ie
- * @version 1.0
- */
-/* ========================================================== */
-/* = Site Variables = */
-/* ========================================================== */
-/* Grid options */
-/**
- * Baseline
- *
- * Common settings for this:
- *
- * 100% for 16px font and 24px baseline.
- *
- * 75% for 12px font and 18px baseline.
- *
- */
-/* Font variables */
-/* Default Colors */
-/* ========================================================== */
-/* = Import normalize, baseline and grid = */
-/* ========================================================== */
-/**
- * Normalize
- *
- * Adapted from http://github.com/necolas/normalize.css
- *
- * @since 1.0
- */
-/* Box sizing to make life easier with % layouts */
-* {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-/*
- * Corrects `block` display not defined in IE6/7/8/9 & FF3.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
- display: block;
-}
-/*
- * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
- */
-audio,
-canvas,
-video {
- display: inline-block;
- *display: inline;
- *zoom: 1;
-}
-/*
- * Prevents modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS5 devices.
- */
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-/*
- * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
- * Known issue: no IE6 support.
- */
-[hidden] {
- display: none;
-}
-/* ==========================================================================
- Base
- ========================================================================== */
-/*
- * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
- * `em` units.
- * 2. Prevents iOS text size adjust after orientation change, without disabling
- * user zoom.
- */
-html {
- font-size: 100%;
- /* 1 */
-
- -webkit-text-size-adjust: 100%;
- /* 2 */
-
- -ms-text-size-adjust: 100%;
- /* 2 */
-
-}
-/*
- * Addresses `font-family` inconsistency between `textarea` and other form
- * elements.
- */
-html,
-button,
-input,
-select,
-textarea {
- font-family: sans-serif;
-}
-/*
- * Addresses margins handled incorrectly in IE6/7.
- */
-body {
- margin: 0;
-}
-/* ==========================================================================
- Links
- ========================================================================== */
-/*
- * Addresses `outline` inconsistency between Chrome and other browsers.
- */
-a:focus {
- outline: thin dotted;
-}
-/*
- * Improves readability when focused and also mouse hovered in all browsers.
- * people.opera.com/patrickl/experiments/keyboard/test
- */
-a:active,
-a:hover {
- outline: 0;
-}
-/* ==========================================================================
- Typography
- ========================================================================== */
-/*
- * Addresses font sizes and margins set differently in IE6/7.
- * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin: 0;
-}
-/*
- * Addresses styling not present in IE7/8/9, S5, Chrome.
- */
-abbr[title] {
- border-bottom: 1px dotted;
-}
-/*
- * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
- */
-b,
-strong {
- font-weight: bold;
-}
-blockquote {
- margin: 1em 40px;
-}
-/*
- * Addresses styling not present in S5, Chrome.
- */
-dfn {
- font-style: italic;
-}
-/*
- * Addresses styling not present in IE6/7/8/9.
- */
-mark {
- background: #ff0;
- color: #000;
-}
-/*
- * Addresses margins set differently in IE6/7.
- */
-p,
-pre {
- margin: 1em 0;
-}
-/*
- * Corrects font family set oddly in IE6, S4/5, Chrome.
- * en.wikipedia.org/wiki/User:Davidgothberg/Test59
- */
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, serif;
- _font-family: 'courier new', monospace;
- font-size: 1em;
-}
-/*
- * Improves readability of pre-formatted text in all browsers.
- */
-pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-/*
- * Addresses CSS quotes not supported in IE6/7.
- */
-q {
- quotes: none;
-}
-/*
- * Addresses `quotes` property not supported in S4.
- */
-q:before,
-q:after {
- content: '';
- content: none;
-}
-small {
- font-size: 75%;
-}
-/*
- * Prevents `sub` and `sup` affecting `line-height` in all browsers.
- * gist.github.com/413930
- */
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-sup {
- top: -0.5em;
-}
-sub {
- bottom: -0.25em;
-}
-/* ==========================================================================
- Lists
- ========================================================================== */
-/*
- * Addresses margins set differently in IE6/7.
- */
-dl,
-menu,
-ol,
-ul {
- margin: 1em 0;
-}
-dd {
- margin: 0 0 0 40px;
-}
-/*
- * Addresses paddings set differently in IE6/7.
- */
-menu,
-ol,
-ul {
- padding: 0 0 0 40px;
-}
-/*
- * Corrects list images handled incorrectly in IE7.
- */
-nav ul,
-nav ol {
- list-style: none;
- list-style-image: none;
-}
-/* ==========================================================================
- Embedded content
- ========================================================================== */
-/*
- * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
- * 2. Improves image quality when scaled in IE7.
- * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
- */
-img {
- border: 0;
- /* 1 */
-
- -ms-interpolation-mode: bicubic;
- /* 2 */
-
-}
-/*
- * Corrects overflow displayed oddly in IE9.
- */
-svg:not(:root) {
- overflow: hidden;
-}
-/* ==========================================================================
- Figures
- ========================================================================== */
-/*
- * Addresses margin not present in IE6/7/8/9, S5, O11.
- */
-figure {
- margin: 0;
-}
-/* ==========================================================================
- Forms
- ========================================================================== */
-/*
- * Corrects margin displayed oddly in IE6/7.
- */
-form {
- margin: 0;
-}
-/*
- * Define consistent border, margin, and padding.
- */
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
-}
-/*
- * 1. Corrects color not being inherited in IE6/7/8/9.
- * 2. Corrects text not wrapping in FF3.
- * 3. Corrects alignment displayed oddly in IE6/7.
- */
-legend {
- border: 0;
- /* 1 */
-
- padding: 0;
- white-space: normal;
- /* 2 */
-
- *margin-left: -7px;
- /* 3 */
-
-}
-/*
- * 1. Corrects font size not being inherited in all browsers.
- * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
- * 3. Improves appearance and consistency in all browsers.
- */
-button,
-input,
-select,
-textarea {
- font-size: 100%;
- /* 1 */
-
- margin: 0;
- /* 2 */
-
- vertical-align: baseline;
- /* 3 */
-
- *vertical-align: middle;
- /* 3 */
-
-}
-/*
- * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
- * UA stylesheet.
- */
-button,
-input {
- line-height: normal;
-}
-/*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
- * `input` and others.
- * 4. Removes inner spacing in IE7 without affecting normal text inputs.
- * Known issue: inner spacing remains in IE6.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button;
- /* 2 */
-
- cursor: pointer;
- /* 3 */
-
- *overflow: visible;
- /* 4 */
-
-}
-/*
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-input[disabled] {
- cursor: default;
-}
-/*
- * 1. Addresses box sizing set to content-box in IE8/9.
- * 2. Removes excess padding in IE8/9.
- * 3. Removes excess padding in IE7.
- * Known issue: excess padding remains in IE6.
- */
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box;
- /* 1 */
-
- padding: 0;
- /* 2 */
-
- *height: 13px;
- /* 3 */
-
- *width: 13px;
- /* 3 */
-
-}
-/*
- * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
- * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
- * to future-proof).
- */
-input[type="search"] {
- -webkit-appearance: textfield;
- /* 1 */
-
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- /* 2 */
-
- box-sizing: content-box;
-}
-/*
- * Removes inner padding and search cancel button in S5, Chrome on OS X.
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-/*
- * Removes inner padding and border in FF3+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-/*
- * 1. Removes default vertical scrollbar in IE6/7/8/9.
- * 2. Improves readability and alignment in all browsers.
- */
-textarea {
- overflow: auto;
- /* 1 */
-
- vertical-align: top;
- /* 2 */
-
-}
-/* ==========================================================================
- Tables
- ========================================================================== */
-/*
- * Remove most spacing between table cells.
- */
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-/**
- * Grid
- *
- * Set up our responsive grid system.
- *
- * @since 1.0
- */
-/* ensure grid columns are set to border-boxes. This is essential */
-/**
- * Typography
- *
- * Sets up some decent default css styles and a baseline grid.
- *
- * @since 1.0
- */
-html {
- font-size: 100.01%;
-}
-body {
- font-size: 100%;
- color: #333333;
- line-height: 1.5em;
- font-family: Georgia, "Times New Roman", Times, Serif;
- text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- -webkit-text-size-adjust: 100%;
- /* Stops Mobile Safari from auto-adjusting font-sizes */
-
-}
-/* ========================================================== */
-/* = Selection = */
-/* ========================================================== */
-::selection {
- background: #78aace;
- color: #ffffff;
-}
-::-moz-selection {
- background: #78aace;
- color: #ffffff;
-}
-img::selection {
- background: transparent;
-}
-img::-moz-selection {
- background: transparent;
-}
-body {
- -webkit-tap-highlight-color: #78aace;
-}
-/* ========================================================== */
-/* = Headings = */
-/* ========================================================== */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-weight: bold;
- font-family: "Helvetica Neue", Arial, Helvetica, Sans-Serif;
- color: #111111;
-}
-h1 {
- font-size: 3em;
- line-height: 1;
- margin-bottom: 0.5em;
-}
-h2 {
- font-size: 2em;
- margin-bottom: 0.75em;
-}
-h3 {
- font-size: 1.5em;
- line-height: 1;
- margin-bottom: 1em;
-}
-h4 {
- font-size: 1.2em;
- line-height: 1.25;
- margin-bottom: 1.25em;
-}
-h5 {
- font-size: 1em;
- font-weight: bold;
- margin-bottom: 1.5em;
-}
-h6 {
- font-size: 1em;
- font-weight: bold;
-}
-/* ========================================================== */
-/* = Text Elements = */
-/* ========================================================== */
-p {
- margin: 0 0 1.5em;
-}
-a:focus,
-a:hover {
- color: #78aace;
-}
-a {
- text-decoration: none;
- color: #557b96;
- -webkit-transition: all .2s linear;
- -moz-transition: all .2s linear;
- -o-transition: all .2s linear;
- transition: all .2s linear;
-}
-blockquote {
- margin: 1.5em;
- font-style: italic;
-}
-strong {
- font-weight: bold;
-}
-em,
-dfn {
- font-style: italic;
-}
-dfn {
- font-weight: bold;
-}
-sup,
-sub {
- line-height: 0;
-}
-abbr,
-acronym {
- border-bottom: 1px dotted #dddddd;
-}
-address {
- margin: 0 0 1.5em;
- font-style: italic;
-}
-del {
- color: #dddddd;
-}
-pre {
- margin: 1.5em 0;
- white-space: pre;
-}
-pre,
-code,
-tt {
- font: 1em 'andale mono', 'lucida console', monospace;
- line-height: 1.5;
-}
-hr {
- background: #dddddd;
- color: #dddddd;
- clear: both;
- float: none;
- width: 100%;
- height: 1px;
- margin: 0 0 1.35em;
- border: none;
-}
-/* ========================================================== */
-/* = Lists = */
-/* ========================================================== */
-li ul,
-li ol {
- margin: 0;
-}
-ul,
-ol {
- margin: 0 1.5em 1.5em 0;
- padding-left: 1.5em;
-}
-ul {
- list-style-type: disc;
-}
-ol {
- list-style-type: decimal;
-}
-dl {
- margin: 0 0 1.5em 0;
-}
-dl dt {
- font-weight: bold;
-}
-dd {
- margin-left: 1.5em;
-}
-/* ========================================================== */
-/* = Tables = */
-/* ========================================================== */
-table {
- margin-bottom: 1.4em;
- width: 100%;
-}
-th {
- font-weight: bold;
-}
-th,
-td,
-caption {
- padding: 4px 10px 4px 5px;
-}
-tr.even td {
- background: #dddddd;
-}
-tfoot {
- font-style: italic;
-}
-/* ========================================================== */
-/* = Your custom styles go here = */
-/* ========================================================== */
-body {
- background: url(../images/bg.png);
-}
-header#worlds_birth > div {
- display: block;
- max-width: 1008px;
- margin: 0 auto;
- *zoom: 1;
-}
-header#worlds_birth > div:before,
-header#worlds_birth > div:after {
- content: "";
- display: table;
-}
-header#worlds_birth > div:after {
- clear: both;
-}
-header#worlds_birth > div hgroup {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: inline;
- float: left;
- width: 100%;
- padding: 0 24px;
- *width: 99.95039682539682%;
- *padding: 0 23.950396825396826px;
-}
-#content > div {
- display: block;
- max-width: 1008px;
- margin: 0 auto;
- *zoom: 1;
- background: #999;
-}
-#content > div:before,
-#content > div:after {
- content: "";
- display: table;
-}
-#content > div:after {
- clear: both;
-}
-#content > div > section {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: inline;
- float: left;
- width: 66.66666666666666%;
- padding: 0 24px;
- *width: 66.61706349206348%;
- *padding: 0 23.950396825396826px;
- background: #ccc;
-}
-#content > div > section > div {
- height: 50px;
- background: #eee;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: inline;
- float: left;
- width: 50%;
- padding: 0 20px;
- *width: 49.95039682539682%;
- *padding: 0 19.950396825396826px;
-}
-#content > div > aside {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: inline;
- float: left;
- width: 33.33333333333333%;
- padding: 0 24px;
- *width: 33.28373015873015%;
- *padding: 0 23.950396825396826px;
- background: #ddd;
-}
+*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
+audio:not([controls]){display:none;height:0;}
+[hidden]{display:none;}
+html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
+html,button,input,select,textarea{font-family:sans-serif;}
+body{margin:0;}
+a:focus{outline:thin dotted;}
+a:active,a:hover{outline:0;}
+h1,h2,h3,h4,h5,h6{margin:0;}
+abbr[title]{border-bottom:1px dotted;}
+b,strong{font-weight:bold;}
+blockquote{margin:1em 40px;}
+dfn{font-style:italic;}
+mark{background:#ff0;color:#000;}
+p,pre{margin:1em 0;}
+code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new',monospace;font-size:1em;}
+pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+q{quotes:none;}
+q:before,q:after{content:'';content:none;}
+small{font-size:75%;}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
+sup{top:-0.5em;}
+sub{bottom:-0.25em;}
+dl,menu,ol,ul{margin:1em 0;}
+dd{margin:0 0 0 40px;}
+menu,ol,ul{padding:0 0 0 40px;}
+nav ul,nav ol{list-style:none;list-style-image:none;}
+img{border:0;-ms-interpolation-mode:bicubic;}
+svg:not(:root){overflow:hidden;}
+figure{margin:0;}
+form{margin:0;}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
+legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
+button,input{line-height:normal;}
+button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible;}
+button[disabled],input[disabled]{cursor:default;}
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px;}
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+textarea{overflow:auto;vertical-align:top;}
+table{border-collapse:collapse;border-spacing:0;}
+html{font-size:100.01%;}
+body{font-size:100%;color:#333333;line-height:1.5em;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;text-shadow:0 -1px 1px rgba(255, 255, 255, 0.01);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;}
+::selection{background:#78aace;color:#ffffff;}
+::-moz-selection{background:#78aace;color:#ffffff;}
+img::selection{background:transparent;}
+img::-moz-selection{background:transparent;}
+body{-webkit-tap-highlight-color:#78aace;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;font-family:"Open Sans Condensed","Helvetica Neue",Arial,Helvetica,Sans-Serif;color:#111111;}
+h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2{font-size:2em;padding-top:0.25em;margin-bottom:0.5em;}
+h3{font-size:1.5em;line-height:1;padding-top:0.35em;margin-bottom:0.65em;}
+h4{font-size:1.2em;line-height:1.25;padding-top:0.45em;margin-bottom:0.8em;}
+h5{font-size:1em;font-weight:bold;padding-top:0.6em;margin-bottom:0.9em;}
+h6{font-size:1em;font-weight:bold;}
+p{margin:0 0 1.5em;}
+a:focus,a:hover{color:#557b96;}
+a{text-decoration:none;color:#78aace;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
+blockquote{margin:0 1.5em 1.5em;font-style:italic;}
+strong{font-weight:bold;}
+em,dfn{font-style:italic;}
+dfn{font-weight:bold;}
+sup,sub{line-height:0;}
+abbr,acronym{border-bottom:1px dotted #dddddd;}
+address{margin:0 0 1.5em;font-style:italic;}
+del{color:#dddddd;}
+pre{margin:1.5em 0;white-space:pre;}
+pre,code,tt{font:1em 'andale mono','lucida console',monospace;line-height:1.5;}
+ins,small{line-height:1.5;}
+kbd,samp{line-height:1.4;}
+mark{line-height:1.5;background:#78aace;color:#ffffff;}
+hr{background:#cccccc;color:#cccccc;clear:both;float:none;width:100%;height:1px;margin:0 0 1.35em;border:none;}
+li ul,li ol{margin:0;}
+ul,ol{margin:0 1.5em 1.5em 0;padding-left:1.5em;}
+ul{list-style-type:disc;}
+ol{list-style-type:decimal;}
+dl{margin:0 0 1.5em 0;}
+dl dt{font-weight:bold;}
+dd{margin-left:1.5em;}
+table{margin-bottom:1.4em;width:100%;}
+th{font-weight:bold;}
+th,td,caption{padding:4px 10px 4px 5px;}
+tr.even td{background:#dddddd;}
+tfoot{font-style:italic;}
+body{background:url(../images/bg.png) 0 2px;}
+header#worlds_birth>div{*zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;max-width:1008px;margin:0 auto;padding:0 0;}header#worlds_birth>div:before,header#worlds_birth>div:after{content:"";display:table;}
+header#worlds_birth>div:after{clear:both;}
+header#worlds_birth>div hgroup{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 24px;*width:99.95039682539682%;*padding:0 23.950396825396826px;padding-top:1.5em;margin-bottom:2px;}
+header#worlds_birth>div nav ul{*zoom:1;margin-bottom:1.5em;text-align:center;font-weight:bold;}header#worlds_birth>div nav ul:before,header#worlds_birth>div nav ul:after{content:"";display:table;}
+header#worlds_birth>div nav ul:after{clear:both;}
+header#worlds_birth>div nav ul li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:25%;padding:0 0;*width:24.950396825396826%;*padding:0 -0.0496031746031746px;}header#worlds_birth>div nav ul li a{display:block;background:#557b96;padding:.75em 0;border-right:1px solid #fff;color:#fff;}header#worlds_birth>div nav ul li a:hover,header#worlds_birth>div nav ul li a:focus{background:#78aace;}
+#content>div{*zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;max-width:1008px;margin:0 auto;padding:0 0;}#content>div:before,#content>div:after{content:"";display:table;}
+#content>div:after{clear:both;}
+#content>div>section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:66.66666666666666%;padding:0 24px;*width:66.61706349206348%;*padding:0 23.950396825396826px;}
+#content>div>aside{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:33.33333333333333%;padding:0 24px;*width:33.28373015873015%;*padding:0 23.950396825396826px;}
+@media screen and (max-width:750px){#content>div>section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 24px;*width:99.95039682539682%;*padding:0 23.950396825396826px;} #content>div>aside{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 24px;*width:99.95039682539682%;*padding:0 23.950396825396826px;}}
View
BIN  assets/images/apple-touch-icon-114x114.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/images/apple-touch-icon-57x57.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/images/apple-touch-icon-72x72.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/images/bg.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/images/favicon.ico
Binary file not shown
View
0  assets/js/libs/picture.js 100644 → 100755
File mode changed
View
0  assets/js/script-ck.js 100644 → 100755
File mode changed
View
0  assets/js/script.js 100644 → 100755
File mode changed
View
39 assets/less/typography.less → assets/less/baseline.less 100644 → 100755
@@ -1,5 +1,5 @@
/**
- * Typography
+ * Baseline
*
* Sets up some decent default css styles and a baseline grid.
*
@@ -60,22 +60,26 @@ h1{
}
h2{
font-size: 2em;
- margin-bottom: 0.75em;
+ padding-top: 0.25em;
+ margin-bottom: 0.5em;
}
h3{
font-size: 1.5em;
line-height: 1;
- margin-bottom: 1em;
+ padding-top: 0.35em;
+ margin-bottom: 0.65em;
}
h4{
font-size: 1.2em;
line-height: 1.25;
- margin-bottom: 1.25em;
+ padding-top: 0.45em;
+ margin-bottom: 0.8em;
}
h5{
font-size: 1em;
font-weight: bold;
- margin-bottom: 1.5em;
+ padding-top: 0.6em;
+ margin-bottom: 0.9em;
}
h6{
font-size: 1em;
@@ -93,11 +97,11 @@ p{
a:focus,
a:hover{
- color: @links;
+ color: @link;
}
a{
text-decoration: none;
- color:@links_hover;
+ color:@link_hover;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
@@ -105,7 +109,7 @@ a{
}
blockquote{
- margin: 1.5em;
+ margin: 0 1.5em 1.5em;
font-style: italic;
}
strong{
@@ -134,7 +138,6 @@ address{
del{
color:@grey_light;
}
-
pre{
margin: 1.5em 0;
white-space: pre;
@@ -145,10 +148,22 @@ tt{
font: 1em 'andale mono', 'lucida console', monospace;
line-height: 1.5;
}
-
+ins,
+small{
+ line-height: 1.5;
+}
+kbd,
+samp{
+ line-height: 1.4;
+}
+mark{
+ line-height: 1.5;
+ background: @select;
+ color: @select_color;
+}
hr {
- background: @grey_light;
- color: @grey_light;
+ background: @grey_regular;
+ color: @grey_regular;
clear: both;
float: none;
width: 100%;
View
30 assets/less/grid.less 100644 → 100755
@@ -2,18 +2,16 @@
* Grid
*
* Set up our responsive grid system.
+ * This is heavily infleuenced by the Semantic Grid http://semantic.gs
*
* @since 1.0
*/
-// Utility variable — you should never need to modify this
+/* Utility variable — you should never need to modify this */
@gridsystem_width: (@column_width*@columns) + (@gutter_width*@columns) * 1px;
-
-@total_width: 100%;
-
@correction: 0.5 / @max_width * 100 * 1%;
-// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+/* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack */
.grid-clearfix(){
*zoom:1;
@@ -27,36 +25,44 @@
}
}
-/* ensure grid columns are set to border-boxes. This is essential */
+/* Ensure grid columns are set to border-boxes. This is essential */
.border-box(){
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.row(){
+/* Our row container */
+.row(@padding:0){
+ .grid-clearfix();
+ .border-box();
+
display:block;
max-width: @max_width;
margin: 0 auto;
- .grid-clearfix();
+ padding:0 @padding;
}
+/* Our column container */
.column(@x, @padding:(@gutter_width*0.5), @columns:@columns){
.border-box();
display: inline;
float: left;
- width: @total_width*(((@gutter_width+@column_width)*@x) / @gridsystem_width);
+ width: 100%*(((@gutter_width+@column_width)*@x) / @gridsystem_width);
padding: 0 @padding;
//IE 6 & 7 Fix
- *width: @total_width*(((@gutter_width+@column_width)*@x) / @gridsystem_width)-@correction;
+ *width: 100%*(((@gutter_width+@column_width)*@x) / @gridsystem_width)-@correction;
*padding: 0 (@padding)-@correction;
}
+/* Push adds left padding */
.push(@offset:1) {
- padding-left: @total_width*(((@gutter_width+@column_width)*@offset) / @gridsystem_width) + @total_width*((@gutter_width*.5)/@gridsystem_width);
+ padding-left: 100%*(((@gutter_width+@column_width)*@offset) / @gridsystem_width) + @total_width*((@gutter_width*.5)/@gridsystem_width);
}
+
+/* Pull adds right padding */
.pull(@offset:1) {
- padding-right: @total_width*(((@gutter_width+@column_width)*@offset) / @gridsystem_width) + @total_width*((@gutter_width*.5)/@gridsystem_width);
+ padding-right: 100%*(((@gutter_width+@column_width)*@offset) / @gridsystem_width) + @total_width*((@gutter_width*.5)/@gridsystem_width);
}
View
7 assets/less/normalize.less 100644 → 100755
@@ -6,16 +6,15 @@
* @since 1.0
*/
-/* Box sizing to make life easier with % layouts */
+// Box sizing to make life easier with % layouts
+
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-/*
- * Corrects `block` display not defined in IE6/7/8/9 & FF3.
- */
+// Corrects `block` display not defined in IE6/7/8/9 & FF3.
article,
aside,
View
54 assets/less/style.less 100644 → 100755
@@ -33,11 +33,11 @@
@body_color: #333;
@heading_color: #111;
-@body_family: Georgia, "Times New Roman", Times, Serif;
-@heading_family: "Helvetica Neue", Arial, Helvetica, Sans-Serif;
+@body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
+@heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
-@links: #78aace;
-@links_hover: #557b96;
+@link: #557b96;
+@link_hover: #78aace;
@select: #78aace;
@select_color: #fff;
@@ -53,14 +53,14 @@
@import "normalize.less";
@import "grid.less";
-@import "typography.less";
+@import "baseline.less";
/* ========================================================== */
/* = Your custom styles go here = */
/* ========================================================== */
body{
- background: url(../images/bg.png);
+ background: url(../images/bg.png) 0 2px;
}
header#worlds_birth{
@@ -68,6 +68,27 @@ header#worlds_birth{
.row();
hgroup{
.column(12);
+ padding-top: 1.5em;
+ margin-bottom: 2px; // Figure out 2px weirdness with hgroups
+ }
+ nav ul{
+ .grid-clearfix();
+ margin-bottom: 1.5em;
+ text-align: center;
+ font-weight:bold;
+ li{
+ .column(3, 0);
+ a{
+ display:block;
+ background: @link;
+ padding: .75em 0;
+ border-right: 1px solid #fff;
+ color:#fff;
+ &:hover, &:focus{
+ background:@link_hover;
+ }
+ }
+ }
}
}
}
@@ -75,24 +96,27 @@ header#worlds_birth{
#content{
>div{
.row();
- background:#999;
>section{
.column(8);
- background:#ccc;
- >div{
- height: 50px;
- background:#eee;
- .column(4, 20px, 8);
- }
}
>aside{
.column(4);
- background:#ddd;
}
}
}
-
+@media screen and (max-width: 750px){
+ #content{
+ >div{
+ >section{
+ .column(12);
+ }
+ >aside{
+ .column(12);
+ }
+ }
+ }
+}
View
297 index.html 100644 → 100755
@@ -10,15 +10,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title></title>
+ <title>Responsable Grid System</title>
<meta name="description" content="">
- <meta name="viewport" content="width=device-width">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+ <link rel="shortcut icon" href="assets/images/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
+
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/style.css">
- <script src="assets/js/libs/modernizr-2.5.3.min.js"></script>
<script src="assets/js/script-ck.js"></script>
</head>
@@ -30,12 +36,28 @@
<header id="worlds_birth">
<div>
-
+
<hgroup>
- <h1>Responsable Grid System</h1>
+ <h1>Responsable</h1>
</hgroup>
+
+ <nav>
+
+ <ul>
+
+ <li><a href="#">Type</a></li>
+
+ <li><a href="#">Tables</a></li>
+
+ <li><a href="#">Forms</a></li>
+
+ <li><a href="#">Grid</a></li>
+
+ </ul>
+
+ </nav>
</div>
@@ -47,48 +69,52 @@
<section>
- <div>sub column</div>
- <div>sub column</div>
+ <h1>Heading 1</h1>
+ <p>Here, it must needs be said, that accidents like this have in more than one case occurred to ships in violent storms. The magnetic energy, as developed in the mariner's needle, is, as all know, essentially one with the electricity beheld in heaven; hence it is not to be much marvelled at, that such things should be. Instances where the lightning has actually struck the vessel, so as to smite down some of the spars and rigging, the effect upon the needle has at times been still more fatal; all its loadstone virtue being annihilated, so that the before magnetic steel was of no more use than an old wife's knitting needle. But in either case, the needle never again, of itself, recovers the original virtue thus marred or lost; and if the binnacle compasses be affected, the same fate reaches all the others that may be in the ship; even were the lowermost one inserted into the kelson.</p>
+
+ <p>Deliberately standing before the binnacle, and eyeing the transpointed compasses, the old man, with the sharp of his extended hand, now took the precise bearing of the sun, and satisfied that the needles were exactly inverted, shouted out his orders for the ship's course to be changed accordingly. The yards were hard up; and once more the Pequod thrust her undaunted bows into the opposing wind, for the supposed fair one had only been juggling her.</p>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<h2>Subtitle &mdash; h2</h2>
- <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
- <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+ <p>I drew rein on a little level promontory overlooking the trail below and to my left, and saw the party of pursuing savages disappearing around the point of a neighboring peak.</p>
+
<h3>Subtitle &mdash; h3</h3>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ <p>I knew the Indians would soon discover that they were on the wrong trail and that the search for me would be renewed in the right direction as soon as they located my tracks.</p>
+
<h4>Subtitle &mdash; h4</h4>
- <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
- <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+ <p>I had gone but a short distance further when what seemed to be an excellent trail opened up around the face of a high cliff. The trail was level and quite broad and led upward and in the general direction I wished to go. The cliff arose for several hundred feet on my right, and on my left was an equal and nearly perpendicular drop to the bottom of a rocky ravine.</p>
+
<h5>Subtitle &mdash; h5</h5>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ <p>I had followed this trail for perhaps a hundred yards when a sharp turn to the right brought me to the mouth of a large cave. The opening was about four feet in height and three to four feet wide, and at this opening the trail ended.</p>
+
<h6>Subtitle &mdash; h6</h6>
- <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
- <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+ <p>It was now morning, and, with the customary lack of dawn which is a startling characteristic of Arizona, it had become daylight almost without warning.</p>
+
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
</ul>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- <blockquote cite="http://www.projeturbain.com">
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+ <p>Dismounting, I laid Powell upon the ground, but the most painstaking examination failed to reveal the faintest spark of life. I forced water from my canteen between his dead lips, bathed his face and rubbed his hands, working over him continuously for the better part of an hour in the face of the fact that I knew him to be dead.</p>
+
+ <blockquote cite="http://abandon.ie">
+ <p>I was very fond of Powell; he was thoroughly a man in every respect; a polished southern gentleman; a staunch and true friend; and it was with a feeling of the deepest grief that I finally gave up my crude endeavors at resuscitation.</p>
</blockquote>
- <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
- <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+ <p>Leaving Powell's body where it lay on the ledge I crept into the cave to reconnoiter. I found a large chamber, possibly a hundred feet in diameter and thirty or forty feet in height; a smooth and well-worn floor, and many other evidences that the cave had, at some remote period, been inhabited. The back of the cave was so lost in dense shadow that I could not distinguish whether there were openings into other apartments or not.</p>
+
<hr />
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ <p>As I was continuing my examination I commenced to feel a pleasant drowsiness creeping over me which I attributed to the fatigue of my long and strenuous ride, and the reaction from the excitement of the fight and the pursuit. I felt comparatively safe in my present location as I knew that one man could defend the trail to the cave against an army.</p>
- <h2>Blockquote</h2>
- <blockquote cite="http://www.projeturbain.com">
- <p>Duis autem vel eum iriure dolor in hendrerit in <q>vulputate velit esse molestie consequat</q>, vel illum dolore eu feugiat nulla facilisis.</p>
- </blockquote>
<h2>Tables</h2>
+
<table>
<caption>Table caption</caption>
<thead>
@@ -119,86 +145,143 @@
<aside>
- <h2>List Types</h2>
- <h3>Ordered list</h3>
- <ol>
- <li>List item</li>
- <li>List item</li>
- <li>List item
- <ol>
- <li>List item level 2</li>
- <li>List item level 2
- <ol>
- <li>List item level 3</li>
- <li>List item level 3</li>
- </ol>
- </li>
- </ol>
- </li>
- </ol>
- <h3>Unordered list</h3>
- <ul>
- <li>List item 01</li>
- <li>List item 02</li>
- <li>List item 03
- <ul>
- <li>List item level 2</li>
- <li>List item level 2
- <ul>
- <li>List item level 3</li>
- <li>List item level 3</li>
- </ul>
- </li>
-
- </ul>
- </li>
- </ul>
- <h3>Definition List</h3>
- <dl>
- <dt>Definition list title</dt>
- <dd>Definition list data</dd>
- <dt>Definition list title</dt>
- <dd>Definition list data</dd>
- <dt>Definition list title</dt>
- <dd>Definition list data</dd>
- </dl>
- <h3>Dialog</h3>
- <dialog>
- <dt> Costello</dt>
- <dd> Look, you gotta first baseman?</dd>
- <dt> Abbott</dt>
- <dd> Certainly.</dd>
- <dt> Costello</dt>
- <dd> Who's playing first?</dd>
- <dt> Abbott</dt>
- <dd> That's right.</dd>
- <dt> Costello</dt>
- <dd> When you pay off the first baseman every month, who gets the money?</dd>
- <dt> Abbott</dt>
- <dd> Every dollar of it.</dd>
- </dialog>
+ <div>
+
+ <h2>List Types</h2>
+
+ <h3>Ordered list</h3>
+
+ <ol>
+
+ <li>List item</li>
+
+ <li>List item</li>
+
+ <li>List item
+
+ <ol>
+
+ <li>List item level 2</li>
+
+ <li>List item level 2
+
+ <ol>
+
+ <li>List item level 3</li>
+
+ <li>List item level 3</li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ </div>
+
+ <div>
+
+ <h3>Unordered list</h3>
+
+ <ul>
+
+ <li>List item 01</li>
+
+ <li>List item 02</li>
+
+ <li>List item 03
+
+ <ul>
+
+ <li>List item level 2</li>
+
+ <li>List item level 2
+
+ <ul>
+
+ <li>List item level 3</li>
+
+ <li>List item level 3</li>
+
+ </ul>
+
+ </li>
+
+ </ul>
+
+ </li>
+
+ </ul>
+
+ </div>
+
+ <div>
+
+ <h3>Definition List</h3>
+
+ <dl>
+
+ <dt>Definition list title</dt>
+
+ <dd>Definition list data</dd>
+
+ <dt>Definition list title</dt>
+
+ <dd>Definition list data</dd>
+
+ <dt>Definition list title</dt>
+
+ <dd>Definition list data</dd>
+
+ </dl>
+
+ </div>
<h2>Other markup code</h2>
- <p><a href="">hyperlink</a><br />
- <abbr title="title">abbreviation</abbr><br />
- <b>offset text typically styled in bold</b><br />
- <cite>cited title of a work</cite><br />
- <code>code fragment</code><br />
- <del>deleted text</del><br />
- <dfn title="title">defining instance</dfn><br />
- <em>emphatic stress</em><br />
- <i>offset text typically styled in italic</i><br />
- <ins>inserted text</ins><br />
- <kbd>user input</kbd><br />
- <mark>marked (highlighted) text</mark><br />
- <samp>sample output</samp><br />
- <small>small print</small><br />
- <strong>strong importance</strong><br />
- <sup>superscript</sup> <sub>subscript</sub><br />
- <var>variable or placeholder text</var></p>
+ <p>
+ <a href="">hyperlink</a><br>
+
+ <abbr title="title">abbreviation</abbr><br>
+
+ <b>offset text typically styled in bold</b><br>
+
+ <cite>cited title of a work</cite><br>
+
+ <code>code fragment</code><br>
+
+ <del>deleted text</del><br>
+
+ <dfn title="title">defining instance</dfn><br>
+
+ <em>emphatic stress</em><br>
+
+ <i>offset text typically styled in italic</i><br>
+
+ <ins>inserted text</ins><br>
+
+ <kbd>user input</kbd><br>
+
+ <mark>marked (highlighted) text</mark><br>
+
+ <samp>sample output</samp><br>
+
+ <small>small print</small><br>
+
+ <strong>strong importance</strong><br>
+
+ <sup>superscript</sup> <sub>subscript</sub><br>
+
+ <var>variable or placeholder text</var>
+
+ </p>
+
<address>contact information</address>
+
<pre>preformatted text</pre>
- <p>soft hyphen : <code>&amp;shy; or &amp;#173;</code></p>
</aside>
Please sign in to comment.
Something went wrong with that request. Please try again.