Skip to content

Commit

Permalink
added kevins and mobile styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephaniedavidson
stephaniedavidson committed Jun 10, 2015
1 parent 424cf86 commit c28748b
Show file tree
Hide file tree
Showing 12 changed files with 234 additions and 41 deletions.
Binary file modified images/emotes/chatter_Green.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mobileBG.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/reggaegg1.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/sec1_conferences.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/sec1_rubegoldberg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/sec1_whale.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/sec2_fridgebike.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/toc_icon.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 13 additions & 9 deletions modules/toc/toc.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
[data-module="toc"] {
position: fixed;
width: 400px;
width: 360px;
height: 100%;
top: 0;
left: -380px;
left: -340px;
z-index: 3;
/*transition: left .5s;*/
transition: left .3s;
/*background: #2800d7;*/
}

Expand All @@ -27,7 +27,7 @@ article#code.toc-open {
.histogram {
position: absolute;
height: 100%;
width: 20px;
width: 16px;
top: 0;
left: 0;
background: white;
Expand Down Expand Up @@ -59,15 +59,15 @@ article#code.toc-open {
}

.toc {
margin-left: 20px;
margin-left: 8px;
height: 100%;
overflow-y: scroll;
}


.toc .toc-section {
background: white;
padding: 20px;
padding: 10px;
margin: 20px;
}

Expand All @@ -81,15 +81,19 @@ article#code.toc-open {

.toc .toc-head[data-level="H2"] {
font-family: "BWHaasText-75Bold", Helvetica, Arial, sans-serif;
font-size: 14pt;
font-size: 16px;
line-height: 18px;
}

.toc .toc-head[data-level="H3"] {
font-family: "BWHaasText-55Roman", Helvetica, Arial, sans-serif;
font-size: 10pt;
font-size: 13px;
line-height: 14px;
margin-left: 10px;
}

.toc .toc-section.stats {
font-family: "BWHaasText-55Roman", Helvetica, Arial, sans-serif;
font-size: 10pt;
font-size: 13px;
line-height: 14px;
}
42 changes: 42 additions & 0 deletions reggaegg.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles/reggaegg.css">
<link rel="stylesheet" type="text/css" href="http://www.bloomberg.com/graphics/assets/css/fonts.css"/>

</head>

<body>

<iframe width="20" height="15" src="https://www.youtube.com/embed/0T3tg6Xwt7A?autoplay=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

<div id="space">
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
</div>


<div id="hashtag">#CODE</div>

<div class="centerVert">
<div class="centerVertInner">
<img src="images/reggaegg1.gif">
</div>
</div>



<script src="scripts/libs/jquery.min.js"></script>
<script src="scripts/jquery.fittext.js"></script>
<script type="Text/Javascript">
jQuery("#hashtag").fitText(0.45);
//jQuery("#fit").fitText();
</script>


</body>
</html>
118 changes: 86 additions & 32 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ hr{width: 75%; border:none;height:4px;background-color:#3C3C3C;margin: 60px auto
margin: 100px auto 0 auto;
position: relative;
background-color: #fff;
padding: 40px 0 40px 0;
padding: 40px 0;
}

.code-content{
Expand All @@ -44,8 +44,8 @@ article img {max-width: 100%;}

#headerArt{ background: rgba(0,0,0,0);max-height: 1000px}

.introText {font-size: 26px; line-height: 30px;}

.introText {font-size: 26px; line-height: 30px;}


.figureInline {
Expand Down Expand Up @@ -86,13 +86,10 @@ article img {max-width: 100%;}
.codeblock{color:#fff;background-color:#3c3c3c;font-family: 'Roboto Mono', courier, monospace;width:80%;display: block;margin: 0 auto;}


#headerArt h1, #headerArt h2,#headerArt h3{margin: 0;color: #fff;}
#headerArt h1,#headerArt h3{margin: 0;color: #fff;}
#headerArt h1{
text-transform: uppercase;
font-size: 260px;
font-family: 'Roboto Mono', courier, monospace;
font-weight: 700;
line-height: 240px;
margin: 0;
padding-top: 100px;
/* font-family: "BWHaasText-75Bold",Helvetica, Arial, sans-serif; */
Expand All @@ -107,7 +104,6 @@ h2{
line-height: 94px;
margin: 40px 0 40px 0;
text-align: center;
/* text-shadow: 2px 2px 0 #f94600, -2px -2px 0 #00c770; */
}
h3{font-size: 34px;line-height: 34px;font-weight: bold;margin-top:74px;}

Expand All @@ -120,15 +116,17 @@ h4{font-size: 22px;line-height: 24px;margin:0;}
display: table;
}

#headerArt h2 {font-size: 46px; line-height:80px; margin: 0;font-family:'BWHaasText-65Medium';}
#headerArt h2 {font-size: 40px; line-height:40px; margin-bottom: 0;margin-top:0;font-family: 'Roboto Mono', courier, monospace;color: #fff}
.byline{height:40px;margin: 150px 0;}
.bylinePaul {float:right;margin-right:70px;display: block;}
.bylineDate {float:left;margin-left:70px}

#headerArt h1{
font-family: 'Roboto Mono', courier, monospace;
font-weight: 700;
margin: 0;
margin: 0;padding: 0;
/* font-family: "BWHaasText-75Bold",Helvetica, Arial, sans-serif; */
}
#headerArt h2{text-shadow:none;}


.vertCenter{
Expand All @@ -144,9 +142,8 @@ h4{font-size: 22px;line-height: 24px;margin:0;}

.indent{margin-left: 40px}

.chat{width: 85%;font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;font-size: 16px;line-height: 20px;margin: 0 auto;}

.manA,.manB,.manC{font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;font-size: 16px;line-height: 20px;text-align: center;}
.chat{width: 100%;font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;font-size: 16px;line-height: 20px;margin: 0 auto;text-align: center;}
.chatBig{font-size: 24px;line-height: 26px}

.manA
{
Expand All @@ -160,6 +157,7 @@ h4{font-size: 22px;line-height: 24px;margin:0;}
-moz-border-radius: 14px;
border-radius: 14px;
border: #f94600 solid 4px;
margin: 4px auto;
}

.manA:after
Expand Down Expand Up @@ -193,6 +191,7 @@ top: 15px;

.manB
{
margin:4px auto;
color: #2800d7;
position: relative;
width: 80%;
Expand Down Expand Up @@ -235,6 +234,7 @@ top: 15px;

.manC
{
margin: 4px auto;
color:#00c770;
position: relative;
width: 80%;
Expand Down Expand Up @@ -276,7 +276,9 @@ top: 17px;
}



.chatterL{display: inline-block;width: 25%;vertical-align: middle;z-index: 2;position:relative;}
.chatterL img{width: 100%;max-width: 80px}
.chatterR{display: inline-block;width: 75%;vertical-align: middle;z-index: 1;position:relative;}



Expand All @@ -290,7 +292,7 @@ top: 17px;
#footnotes p{margin-left: 80px;}
.footdef {margin-top: 54px}

#postamble{margin:100px 0 100px 0;font-family: "BWHaasText-55Roman";font-size: 14px}
#postamble{margin:100px 0 100px 0;font-family: "BWHaasText-55Roman";font-size: 18px; width: 80%}
#postamble a{ font-weight: normal; border-bottom: none; }

a{
Expand Down Expand Up @@ -355,7 +357,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
color: transparent;
}
50% {
color: #3C3C3C;
color: #fff;
}
}

Expand All @@ -364,7 +366,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
color: transparent;
}
50% {
color: #3C3C3C;
color: #fff;
}
}

Expand All @@ -373,7 +375,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
color: transparent;
}
50% {
color: #3C3C3C;
color: #fff;
}
}

Expand All @@ -382,7 +384,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
color: transparent;
}
50% {
color: #3C3C3C;
color: #fff;
}
}

Expand All @@ -391,7 +393,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
color: transparent;
}
50% {
color: #3C3C3C;
color: #fff;
}
}

Expand Down Expand Up @@ -492,13 +494,17 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
.tokens tr:nth-child(odd){ background: #fff; }
.tokens tr:nth-child(even){ background: #f94600;color:#fff;}

ol{overflow: visible;}
li {margin-left: 40px}




/* images */

.bigimgWrap{margin:60px -100px 60px -100px;}
.bigimgWrap{margin:60px -200px 60px -200px;}
.bigimg {margin: 0 auto;}
.bigimg img{max-width: 100%;}
.bigimg img{width: 100%;}

.imageLeft{margin-left: -140px;float:left;width: 400px;padding-right: 24px;}
.imageRight{margin-right: -140px;float:right;width: 400px;padding-left: 24px;}
Expand Down Expand Up @@ -583,7 +589,7 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
width:240px;
}
.listLinner {padding: 8px; border:4px solid #2800d7;}

.listLinner li{margin-left: 0}

.listR{
color:#2800d7;
Expand All @@ -605,6 +611,39 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
float: right;
}


.videoWrapperB {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: block;
}

.videoWrapperB iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoWrapper2 {
width: 100%;
height: 0;
position: relative;
padding-top: 56.25%;
}


.videoWrapper2 .video-js {
position: absolute;
top: 0;
width: 100% !important;
height: 100% !important;
}



.language{ border-bottom: 4px solid #f94600;margin: 20px auto; padding: 4px auto;}
.language img{max-width: 60px;margin: 0 auto}

Expand Down Expand Up @@ -654,23 +693,38 @@ a:hover{color:#f94600; border-bottom: 2px solid #f94600;}
}

@media (max-width: 600px) {
.code-section{}
#headerArt h2 {font-size: 22px;line-height: 22px;}
#headerArt {padding: 0;}
#background-canvas{display:none;}
body{font-size: 16px; line-height: 20px;}
h2{font-size: 55px;line-height: 55px;}
h3{font-size:26px;line-height: 28px}
.ephemeraL,.ephemeraR{margin: 0}
.listL,.listR{width: 100%}
li {margin-left:20px}
.videoRight{margin-right: 0;width: 100%;padding:10px;}
#interestingWrap{margin:0 auto;width: 220px}
.interesting1, .interesting2, .interesting3{width: 220px;position: relative;}
.interesting2{margin:0}
.interesting3{margin:0}
}

@media (max-width: 400px) {
.code-section{}
#headerArt{background: url('../images/mobileBG.gif');}
.byline{height:200px;}
.bylinePaul, .bylineDate {float: none;width: 100%; margin: 0}
.introText {font-size: 20px; line-height: 22px;}
.listL, .listR,.ephemeraR,.ephemeraL,.profileL,.profileR{display: none;}
li {margin-left:0px}
#productivity{display: none;}
.chat{font-size: 14px;line-height: 16px;}
.chatBig{font-size: 20px;line-height: 22px}
.byline{height:46px;margin: 30px 0;}
.code-section { width: 100%; margin: 40px auto 0 auto;padding:10px 0;}
.sectionNum{margin-top: 40px}
}

@media (max-width: 325px) {
h2{color: yellow}
}

@media (max-width: 400px) {
.code-section{}
}




Loading

0 comments on commit c28748b

Please sign in to comment.