Skip to content

Commit

Permalink
Added iPhone layout, more stop points
Browse files Browse the repository at this point in the history
  • Loading branch information
@dcneiner
dcneiner committed Feb 17, 2012
1 parent 4c3b852 commit fdf974e
Show file tree
Hide file tree
Showing 2 changed files with 270 additions and 12 deletions.
44 changes: 40 additions & 4 deletions out/styles/style.css
View file
Expand Up @@ -74,15 +74,15 @@ pre{margin:0;padding:0}
html{background-image:url("../img/bg-tile.png");background-color:#4271ae;height:100%}
body{position:relative;min-height:100%}
body > header{position:fixed;left:0;top:0;bottom:0;width:315px;background-color:#d6d6d6;border-right:solid 1px #aaa;padding:1px 0}
body > header *{-webkit-transition:all linear 200ms;-moz-transition:all linear 200ms;-ms-transition:all linear 200ms;-o-transition:all linear 200ms;transition:all linear 200ms}
.scrolled body > header > .highlight{border-top-color:#aaa}
body > header *{-webkit-transition:border-color linear 200ms,color linear 200ms,opacity linear 200ms;-moz-transition:border-color linear 200ms,color linear 200ms,opacity linear 200ms;-ms-transition:border-color linear 200ms,color linear 200ms,opacity linear 200ms;-o-transition:border-color linear 200ms,color linear 200ms,opacity linear 200ms;transition:border-color linear 200ms,color linear 200ms,opacity linear 200ms}
.scrolled body > header > .highlight{border-color:#aaa}
.scrolled body > header > .highlight pre span{color:#aaa}
.scrolled body > header > a,.scrolled body > header > div.highlight{opacity:.7}
.scrolled body > header > a h1{opacity:0}
.multiplebgs body > header{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.05)),to(rgba(0,0,0,0.05))),url("../img/bg-noise.png");background-image:-webkit-linear-gradient(left,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url("../img/bg-noise.png");background-image:-moz-linear-gradient(left,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url("../img/bg-noise.png");background-image:-ms-linear-gradient(left,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url("../img/bg-noise.png");background-image:-o-linear-gradient(left,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url("../img/bg-noise.png");background-image:linear-gradient(to right,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url("../img/bg-noise.png")}
body > header > a{display:block;position:relative;overflow:hidden;width:204px;height:195px;margin:35px auto 0 auto;background:#fff;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;background:url("../img/doug-bw-photo.png") center center no-repeat;-webkit-box-shadow:rgba(0,0,0,0.30) 0 0 3px;-moz-box-shadow:rgba(0,0,0,0.30) 0 0 3px;box-shadow:rgba(0,0,0,0.30) 0 0 3px}
body > header > a h1{overflow:hidden;text-indent:-9999px;width:204px;height:195px;margin:0;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;background:url("../img/doug-photo.png") center center no-repeat}
body > header .highlight{margin:0 auto 25px auto;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;padding:1px 0;border-top:solid 4px #70c0b1;width:204px;font-size:.75em;position:relative;z-index:10;-webkit-box-shadow:rgba(0,0,0,0.40) 0 1px 5px;-moz-box-shadow:rgba(0,0,0,0.40) 0 1px 5px;box-shadow:rgba(0,0,0,0.40) 0 1px 5px}
body > header .highlight{margin:0 auto 25px auto;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;padding:1px 0;border:solid 4px #70c0b1;border-width:4px 0 0 0;width:204px;font-size:.75em;position:relative;z-index:10;-webkit-box-shadow:rgba(0,0,0,0.40) 0 1px 5px;-moz-box-shadow:rgba(0,0,0,0.40) 0 1px 5px;box-shadow:rgba(0,0,0,0.40) 0 1px 5px}
body > header .highlight:after{display:block;border:solid 1px rgba(255,255,255,0.30);content:"";position:absolute;top:-198px;left:1px;right:1px;bottom:1px;z-index:10;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px}
body > header .highlight pre{margin:10px 15px}
body > section{margin:0 60px 0 316px;background-color:#dfdfdf;background-image:url("../img/bg-noise.png");border-left:solid 1px #eee;padding:1px 0;border-right:solid 1px #fff;max-width:870px;position:relative}
Expand Down Expand Up @@ -115,7 +115,7 @@ body > section:after{display:block;content:"";position:absolute;width:60px;right
.post-content{padding:20px 35px;font-family:'Molengo',sans-serif;font-size:1.2em;line-height:1.6}
.post-content p{margin:0 0 15px 0}
.post-content h2,.post-content h3{font-family:"MuseoSlab-500",Helvetica,Arial,sans-serif;font-size:1.5em;color:#4271ae;line-height:1;padding:20px 0 10px 0;margin:0;font-weight:normal}
.post-content li code,.post-content p code{display:inline-block;background-color:#c9cda3;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:0 3px;font-size:.9em}
.post-content li code,.post-content p code{display:inline-block;background-color:#fff7cc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:0 3px;font-size:.9em}
#site-footer{border-top:solid 1px #aaa;padding:10px 0;margin:20px 35px 10px 35px;color:#666;font-size:.8em}
@media all and (max-height: 700px){body > header{width:200px;font-size:.85em}
body > header > a{width:180px;height:180px;margin-top:10px}
Expand All @@ -124,4 +124,40 @@ body > header .highlight{width:180px}
body > header .highlight:after{top:-183px}
body > header #site-menu{width:166px;margin-top:0}
body > section{margin-left:201px}
}@media all and (max-width: 900px){body > header{width:200px;font-size:.85em}
body > header > a{width:180px;height:180px;margin-top:10px}
body > header > a h1{width:180px;height:180px}
body > header .highlight{width:180px}
body > header .highlight:after{top:-183px}
body > header #site-menu{width:166px;margin-top:0}
body > section{margin-left:201px}
}@media all and (max-width: 750px){body > header{position:relative;bottom:auto;width:auto;background-image:url("../img/bg-noise.png");margin-right:60px;border-right:solid 1px #fff;border-bottom:solid 1px #aaa}
body > header:after{display:block;content:"";position:absolute;width:60px;right:-61px;top:0;bottom:0;background-color:transparent;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(24,57,101,0.40)),to(rgba(24,57,101,0.00)));background-image:-webkit-linear-gradient(left,rgba(24,57,101,0.40),rgba(24,57,101,0.00));background-image:-moz-linear-gradient(left,rgba(24,57,101,0.40),rgba(24,57,101,0.00));background-image:-ms-linear-gradient(left,rgba(24,57,101,0.40),rgba(24,57,101,0.00));background-image:-o-linear-gradient(left,rgba(24,57,101,0.40),rgba(24,57,101,0.00));background-image:linear-gradient(to right,rgba(24,57,101,0.40),rgba(24,57,101,0.00));z-index:-1}
body > section{margin-left:0;border-top:solid 1px #eee}
body > header > a{float:left;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;text-indent:0;width:auto;height:auto;background:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-decoration:none;width:50%}
body > header > a h1{-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;background:transparent;text-indent:0;width:auto;height:auto;font-family:"MuseoSlab-500",Helvetica,Arial,sans-serif;font-size:4em;color:#000;margin:10px 0 0 35px;line-height:1}
body > header > div.highlight{display:none}
body > header{overflow:hidden}
body > header > div.highlight:after{left:-184px;top:1px}
body > header #primary{float:left;width:50%}
body > header #site-menu{width:210px;margin-top:10px}
#site-menu ul li{display:inline}
#nav-main > a:before{content:"/********* "}
#nav-main > a:after{content:" *********/"}
#nav-coding > a:before{content:"/******** "}
#nav-coding > a:after{content:" ********/"}
#nav-speaking > a:before{content:"/******* "}
#nav-speaking > a:after{content:" *******/"}
#nav-learning > a:before{content:"/******* "}
#nav-learning > a:after{content:" *******/"}
}@media all and (max-width: 515px){body > header{margin-right:5px;margin-left:5px;border-left:solid 1px #fff}
body > section{margin-right:5px;margin-left:5px;border-left:solid 1px #fff}
body > section .code-block .highlight{margin-right:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius:0;border-radius:0;padding-left:15px}
body > section .code-block .code-lines{display:none}
body > header:after,body > section:after{display:none}
body > header > a{width:40%;font-size:.7em}
body > header > #primary{width:60%}
}@media all and (max-width: 415px){body > header > a{width:auto;float:none;text-align:center}
body > header > a h1{margin-left:0}
body > header > #primary{width:auto;float:none}
}
238 changes: 230 additions & 8 deletions src/documents/styles/style.css.stylus
View file
Expand Up @@ -173,15 +173,15 @@ body > header {
}

body > header * {
-webkit-transition: all linear 200ms;
-moz-transition: all linear 200ms;
-ms-transition: all linear 200ms;
-o-transition: all linear 200ms;
transition: all linear 200ms;
-webkit-transition: border-color linear 200ms, color linear 200ms, opacity linear 200ms;
-moz-transition: border-color linear 200ms, color linear 200ms, opacity linear 200ms;
-ms-transition: border-color linear 200ms, color linear 200ms, opacity linear 200ms;
-o-transition: border-color linear 200ms, color linear 200ms, opacity linear 200ms;
transition: border-color linear 200ms, color linear 200ms, opacity linear 200ms;
}

.scrolled body > header > .highlight {
border-top-color: #aaa;
border-color: #aaa;
}
.scrolled body > header > .highlight pre span {
color: #aaa;
Expand Down Expand Up @@ -243,7 +243,8 @@ body > header .highlight {
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 010px 10px;
padding: 1px 0;
border-top: solid 4px $d_aqua;
border: solid 4px $d_aqua;
border-width: 4px 0 0 0 ;
width: 204px;
font-size: 0.75em;
position: relative;
Expand Down Expand Up @@ -445,7 +446,7 @@ body > section:after {
.post-content li code,
.post-content p code {
display: inline-block;
background-color: #c9cda3;
background-color: #fff7cc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
Expand Down Expand Up @@ -495,4 +496,225 @@ body > section:after {
body > section {
margin-left: 201px;
}
}

@media all and (max-width: 900px) {
body > header {
width: 200px;
font-size: 0.85em
}

body > header > a {
width: 180px;
height: 180px;
margin-top: 10px;
}

body > header > a h1 {
width: 180px;
height: 180px;
}

body > header .highlight {
width: 180px;
}

body > header .highlight:after {
top: -183px;
}

body > header #site-menu {
width: 166px;
margin-top: 0;
}

body > section {
margin-left: 201px;
}
}

@media all and (max-width: 750px) {
body > header {
position: relative;
bottom: auto;
width: auto;
background-image: url( "../img/bg-noise.png");
margin-right: 60px;
border-right: solid 1px #fff;
border-bottom: solid 1px #aaa;
}

body > header:after {
display: block;
content: "";
position: absolute;
width: 60px;
right: -61px;
top: 0;
bottom: 0;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(24,57,101,0.4)), to(rgba(24,57,101,0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(24,57,101,0.4), rgba(24,57,101,0)); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(24,57,101,0.4), rgba(24,57,101,0)); /* FF3.6 */
background-image: -ms-linear-gradient(left, rgba(24,57,101,0.4), rgba(24,57,101,0)); /* IE10 */
background-image: -o-linear-gradient(left, rgba(24,57,101,0.4), rgba(24,57,101,0)); /* Opera 11.10+ */
background-image: linear-gradient(to right, rgba(24,57,101,0.4), rgba(24,57,101,0));
z-index: -1;
}

body > section {
margin-left: 0;
border-top: solid 1px #eee;

}

body > header > a {
float: left;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
text-indent: 0;
width: auto;
height: auto;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-decoration: none;
width: 50%;
}

body > header > a h1 {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
background: transparent;
text-indent: 0;
width: auto;
height: auto;
font-family: "MuseoSlab-500", Helvetica, Arial, sans-serif;
font-size: 4em;
color: #000;
margin: 10px 0 0 35px;
line-height: 1;
}

body > header > div.highlight {
display: none;
}

body > header {
overflow: hidden;
}

body > header > div.highlight:after {
left: -184px;
top: 1px;
}

body > header #primary {
float: left;
width: 50%;
}

body > header #site-menu {
width: 210px;
margin-top: 10px;
}

#site-menu ul {

}

#site-menu ul li {
display: inline;
}

#nav-main > a:before {
content: "/********* ";
}
#nav-main > a:after {
content: " *********/";
}

#nav-coding > a:before {
content: "/******** ";
}
#nav-coding > a:after {
content: " ********/";
}

#nav-speaking > a:before {
content: "/******* ";
}
#nav-speaking > a:after {
content: " *******/";
}

#nav-learning > a:before {
content: "/******* ";
}
#nav-learning > a:after {
content: " *******/";
}
}

@media all and (max-width: 515px) {
body > header {
margin-right: 5px;
margin-left: 5px;
border-left: solid 1px #fff;
}

body > section {
margin-right: 5px;
margin-left: 5px;
border-left: solid 1px #fff;
}

body > section .code-block .highlight {
margin-right: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding-left: 15px;
}

body > section .code-block .code-lines {
display: none;
}

body > header:after,
body > section:after {
display: none
}

body > header > a {
width: 40%;
font-size: 0.7em;
}

body > header > #primary {
width: 60%;
}
}

@media all and (max-width: 415px) {
body > header > a {
width: auto;
float: none;
text-align: center;
}

body > header > a h1 {
margin-left: 0;
}

body > header > #primary {
width: auto;
float: none;
}
}

0 comments on commit fdf974e

Please sign in to comment.