dylanburkey
11/17/2012 - 10:51 PM
A CodePen by Dylan Burkey.
A CodePen by Dylan Burkey.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
section.meg { background: }
/* HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[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; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, 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: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 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-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* Dylans Styles Start Here */
body { background:#e8d5b7; }
article#sdf { position:relative; width:1000px; margin:auto; }
/* superduperfly Color Scheme */
.red { color:#FC3A51; }
.black { color:#OE2430; color:rgb(13,36,48); }
.orange { color:#F5B349; }
.whites { color:#E8D5B7; }
.offwhites { color:#E8D5B9; }
.pink { background:#FC3A51; }
/* End Of superduperfly Color Scheme */
/* === Start superduperfly Layout Styles === */
/* --- Main Header Styles === */
header#top-header {
width:100%;
background:#e86b1c;
height:95px;
color:#fff;
padding:0px 0px 10px 0px;
border-bottom:5px solid #Fc3A51;
}
header#top-header h1 {
font-size:1.9em;
padding:20px 0px 5px 30px;
/* Sit Footer Right margin:0px 0px 0px 10px; */
/* border-bottom: thin solid #fff; */
width:250px;
color:#E8D5B7;
color:rgb(232,213,183);
float:left;
}
header#top-header h1 span {
color:#F5b349;
color:rbg(14,36,48);
font-weight:900;
}
header#top-header nav {
float:left;
margin: 0px 0px 0px 50px;
width:700px;
}
header#top-header nav ul {
padding-left:20px;
margin:10px 0px 0px 0px;
float:left;
}
header#top-header nav ul li {
float:left;
width:90px;
height:70px;
padding:20px 0px 0px 0px;
text-align:center;
color:rbg(232,213,183);
color:#E8D5B7;
}
/* === / Main Header Styles --- */
/* --- Main Article Styles === */
article#main {
background:#E8D5B7;
min-height:500px;
float:left;
}
section.meg { color:#474843; }
section.meg ul { list-style-type:circle; }
article#main section.post {
background:#f5b349;
background:(232,213,183);
width:700px;
min-height:400px;
margin:20px 0px 20px 0px;
border-radius: 10px/10px;
}
section.post header {
background:rbg(232,213,183);
background:#0e2430;
width:100%;
height:50px;
float:left;
border-radius: 5px 5px 0px 0px;
color:rgb(232,213,183);
}
section.post header div.date {
float:right;
width:auto;
height:50px;
background:#f5b349;
border-radius:0px 5px 0px 0px;
color:#0e2430;
font-weight:600;
font-size:1.4em;
padding:7px;
}
section.post header h1 {
font-weight:600;
padding:10px 0px 0px 30px;
font-size:1.2em;
float:left;
}
section.post p {
float:left;
border-radius:4px/4px;
background:#E8D5b9;
width:660px;
min-height:70%;
padding:20px;
margin:15px;
}
/* === / Main Article Styles --- */
aside#content-right {
background:#Fc3A51;
width:140px;
min-height:800px;
max-height:100%;
float:right;
}
/* --- Main Aside Styles === */
/* === / Main Aside Styles --- */
/* --- Main Footer Styles === */
/* === / Main Footer Styles --- */
/* === End superduperfly Layout Styles
a:link {color: #0075a4;}
a:visited {color: #0075a4;}
a:hover {color: #0075A4;}
a:active {color: #0075a4;}
/* Footer */
*/ END Footer*/
@media only screen and (min-width: 35em) {
}
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
<article id="sdf">
<header id="top-header">
<h1>Megan<span>/about</span></h1>
<!-- <nav>
<ul>
<li>home</li>
<li>about</li>
<li>history</li>
<li>contact</li>
</ul>
</nav> -->
</header>
<article id="main">
<section class="meg">
<ul>
<li>Gorgeous Eyes</li>
<li>A Smile that explodes</li>
<li>Rude at the perfect times</li>
<li>Smells like Coffee</li>
</ul>
</section>
</aritcle>