diff --git a/css/style.css b/css/style.css index cc35ecd07..18c4ff5ca 100644 --- a/css/style.css +++ b/css/style.css @@ -1,23 +1,89 @@ /* Stylez */ -body {font-family: Franklin Gothic Book, Source Sans Pro, Helvetica Neue, sans-serif; margin: 0 auto; background: #efefef; line-height: 1.8em; padding: 12px; box-sizing: border-box; color: #333;} -body, html {height: 100%;} -.wrapper {box-sizing: border-box; background: #fff; box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; height: 100%; overflow: auto; } +body{ + font-family: Franklin Gothic Book, Source Sans Pro, Helvetica Neue, sans-serif; + margin: 0 auto; + background: #efefef; + line-height: 1.8em; + padding: 12px; + box-sizing: border-box; + color: #333; +} + body, html { + height: 100%; + } -a {color: #777; text-decoration: none; border-bottom: 1px solid #CCFF26;} -a:hover {border-bottom: 1px solid #CCFF26; color: #222} -p {font-weight: 200; font-size: 20px;} +.wrapper + { + box-sizing: border-box; + background: #fff;box-shadow: 0 0 5px #888;box-shadow: 0 0 5px #888; + height: 100%; + overflow: auto; +} -.name {font-family: Playfair Display; font-size: 50px; font-weight: 900; padding-bottom: 20px;} -.container {margin: 0 auto; width: 600px; height: 400px; padding: 80px 12px; overflow: auto;} +a { + color: #777; + text-decoration: none; + border-bottom: 1px solid #CCFF26; + } -.meta {text-transform: uppercase; font-family: Courier New, Quicksand, "Helvetica Neue", "Arial", sans-serif; font-size: 11px; letter-spacing: .15em;} -.meta a:hover {border-bottom: 1px solid #CCFF26; color: #333;} +a:hover { + border-bottom: 1px solid #CCFF26; + color: #222; +} -.inline-list {list-style: none; margin: 0; padding: 0;} -.inline-list li {display: inline-block;} +p{ + font-weight: 200; + font-size: 20px; + } -footer .inline-list li {padding-right: 40px;} -footer {margin: 0 auto; position: absolute; bottom: 0px; padding: 40px 0; width: 600px;} +.name { + font-family: Playfair Display; + font-size: 50px; + font-weight: 900; + padding-bottom: 20px; +} + +.container { + margin: 0 auto; + width: 600px; + height: 400px; + padding: 80px 12px; + overflow: auto; +} + +.meta { + text-transform: uppercase; + font-family: Courier New, Quicksand, "Helvetica Neue", "Arial", sans-serif; + font-size: 11px; + letter-spacing: .15em; +} + +.meta a:hover { + border-bottom: 1px solid #CCFF26; + color: #333; +} + +.inline-list { + list-style: none; + margin: 0; + padding: 0; +} + +.inline-list li { + display: inline-block; +} + +footer .inline-list li { + padding-right: 40px; +} + +footer { + margin: 0 auto; + position: absolute; + bottom: 0px; + padding: 40px 0; + width: 600px; +} diff --git a/css/style2.css b/css/style2.css index d1ee066ad..567c20cd1 100644 --- a/css/style2.css +++ b/css/style2.css @@ -1,28 +1,69 @@ -body {font-family: Montserrat, Helvetica Neue, sans-serif; margin: 0 auto; line-height: 2em; padding: 12px; box-sizing: border-box; color: #333; overflow: auto; -background: #ffded1; /* Old browsers */ -background: -moz-linear-gradient(-45deg, #ffded1 0%, #ffded1 50%, #ffc5af 50%, #ffc5af 100%); /* FF3.6+ */ -background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffded1), color-stop(50%,#ffded1), color-stop(50%,#ffc5af), color-stop(100%,#ffc5af)); /* Chrome,Safari4+ */ -background: -webkit-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Chrome10+,Safari5.1+ */ -background: -o-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Opera 11.10+ */ -background: -ms-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* IE10+ */ -background: linear-gradient(135deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* W3C */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffded1', endColorstr='#ffc5af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ +body { + font-family: Montserrat, Helvetica Neue, sans-serif; + margin: 0 auto; + line-height: 2em; + padding: 12px; + box-sizing: border-box; + color: #333; + overflow: auto; + background: #ffded1; /* Old browsers */ + background: -moz-linear-gradient(-45deg, #ffded1 0%, #ffded1 50%, #ffc5af 50%, #ffc5af 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffded1), color-stop(50%,#ffded1), color-stop(50%,#ffc5af), color-stop(100%,#ffc5af)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* IE10+ */ + background: linear-gradient(135deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffded1', endColorstr='#ffc5af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } body, html {height: 100%;} -.wrapper {box-sizing: border-box; height: 100%; overflow: auto; } +.wrapper { + box-sizing: border-box; + height: 100%; + overflow: auto; + } -a {text-decoration: none; color: #333; border-bottom: 3px solid #0068FF;} -a:hover {color: #0068FF} -p {font-weight: 200; font-size: 20px;} +a { + text-decoration: none; + color: #333; + border-bottom: 3px solid #0068FF; +} + +a:hover { + color: #0068FF +} +p { + font-weight: 200; + font-size: 20px; +} -.name {font-family: Montserrat; font-size: 45px; text-transform: uppercase; font-weight: 900; padding: 12px; border: 4px solid #0068FF; color: #0068FF; display: inline-block; position: absolute; margin-bottom: 60px; top: 60px; left: 90px;} +.name { + font-family: Montserrat; + font-size: 45px; + text-transform: uppercase; + font-weight: 900; + padding: 12px; + border: 4px solid #0068FF; + color: #0068FF; + display: inline-block; + position: absolute; + margin-bottom: 60px; + top: 60px; + left: 90px; +} + +.container { + margin: 0 auto; + width: 700px; + padding: 120px 12px 50px; + overflow: auto; + } -.container {margin: 0 auto; width: 700px; padding: 120px 12px 50px; overflow: auto;} article {padding: 60px;} + /* TODO find better cross-platform characters */ /* article::before { content: '\2601'; @@ -40,14 +81,42 @@ article::after { color: #0068FF; font-size: 44px; } */ -hr {border-bottom: 3px solid #0068FF;} +hr { + border-bottom: 3px solid #0068FF; + } + +.meta { + text-transform: uppercase; + font-family: Arial, Courier New, Source Sans Pro, sans-serif; + font-size: 10px; + letter-spacing: .15em; +} -.meta {text-transform: uppercase; font-family: Arial, Courier New, Source Sans Pro, sans-serif; font-size: 10px; letter-spacing: .15em;} .meta a:hover {color: #333;} -.inline-list {list-style: none; margin: 0; padding: 0;} -.inline-list li {display: inline-block;} +.inline-list { + list-style: none; + margin: 0; + padding: 0; + } + +.inline-list li { + display: inline-block; +} footer .inline-list li {margin-right: 40px;} -footer a {border: none; color: #0068FF;} -footer {margin: 0 auto; position: absolute; bottom: 55%; right: -255px; padding: 40px 0 0 0; width: 600px; -webkit-transform: rotate(-90deg);} + +footer a { + border: none; + color: #0068FF; + } + +footer { + margin: 0 auto; + position: absolute; + bottom: 55%; + right: -255px; + padding: 40px 0 0 0; + width: 600px; + -webkit-transform: rotate(-90deg); +} diff --git a/index.html b/index.html index 91f22f2f4..17d16924e 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ - Hello World + Hello World !
-

jlord

+

Jlord