From b178dfabefc2beafb03f7457365fb590fad443f1 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Fri, 20 Sep 2013 16:10:29 -0400
Subject: [PATCH] support advertisement added to homepage

---
 node/src/documents/index.html.eco       |  13 +-
 node/src/files/stylesheets/semantic.css | 157 +++++++++++++-----------
 2 files changed, 96 insertions(+), 74 deletions(-)

diff --git a/node/src/documents/index.html.eco b/node/src/documents/index.html.eco
index 15eda6fdc..d14a560cc 100755
--- a/node/src/documents/index.html.eco
+++ b/node/src/documents/index.html.eco
@@ -13,11 +13,16 @@ type   : 'Semantic'
 <div class="masthead segment">
   <div class="ui responsive grid">
     <div class="column">
-      <h1 class="ui header">Semantic UI <span class="ui black label">Pre-release</span></h1>
-      <h2 class="ui header">UI is the vocabulary of the web.</h2>
-      <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
+      <div class="introduction">
+        <h1 class="ui header">Semantic UI <span class="ui black label">Pre-release</span></h1>
+        <h2 class="ui header">UI is the vocabulary of the web.</h2>
+        <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
         <a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>
         <a class="ui red large labeled icon button" href="release/semantic.zip" class="ui button"><i class="upload icon"></i> Download</a>
+      </div>
+      <div class="inverted advertisement">
+        <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/51619/azcarbon_2_1_0_VERTDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+      </div>
     </div>
   </div>
 </div>
@@ -194,7 +199,7 @@ type   : 'Semantic'
       <div class="ui horizontal divider">
         <i class="circular heart icon"></i>
       </div>
-      <div class="ui grid" data-demo="true">
+      <div class="ui stackable grid" data-demo="true">
         <div class="four column center aligned row">
           <div class="column">
             <div class="ui stacked segment">
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index 482505d68..0fe4661c4 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -34,51 +34,6 @@ h3::selection {
   background-color: #CCE2FF;
 }
 
-/* No license
-
-
-@font-face {
-  font-family: 'Neutraface';
-  src:
-    url('../fonts/neutraface-book.eot');
-  src:
-    url('../fonts/neutraface-book.eot?#iefix') format('embeddedopentype'),
-    url('../fonts/neutraface-book.woff') format('woff')
-  ;
-  font-style: normal;
-  font-weight: normal;
-  font-stretch: normal;
-}
-@font-face {
-  font-family: 'Neutraface';
-  src:
-    url('../fonts/neutraface-bold.eot');
-  src:
-    url('../fonts/neutraface-bold.eot?#iefix') format('embeddedopentype'),
-    url('../fonts/neutraface-bold.woff') format('woff')
-  ;
-  font-style: normal;
-  font-weight: bold;
-  font-stretch: normal;
-}
-
-@font-face {
-  font-family: 'Neutraface';
-  src:
-    url('../fonts/neutraface-italic.eot');
-  src:
-    url('../fonts/neutraface-italic.eot?#iefix') format('embeddedopentype'),
-    url('../fonts/neutraface-italic.woff') format("woff")
-  ;
-  font-style: italic;
-  font-weight: normal;
-  font-stretch: normal;
-}
-
-*/
-
-
-
 /*******************************
              Global
 *******************************/
@@ -133,30 +88,6 @@ h1 {
   padding: 50px 0px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-/* h1 {
-  margin: 0px auto;
-  font-size: 38px;
-}
-h1:first-child {
-  margin-top: 0px;
-  padding-top: 0px;
-}
-h2 {
-  font-size: 28px;
-  margin: 35px 0px 30px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #DDDDDD;
-}
-h3 {
-  font-size: 24px;
-  margin: 40px 0px 15px;
-}
-h4 {
-  margin: 30px 0px 3px;
-  font-size: 18px;
-  font-weight: bold;
-  color: #555555;
-} */
 h4 + p {
   margin: 0px 0px 20px;
 }
@@ -227,7 +158,7 @@ a:hover {
 
 #example .main.menu {
   top: 0px;
-  min-width: 370px;
+  min-width: 380px;
   z-index: 900;
 
   -webkit-box-sizing: border-box;
@@ -261,6 +192,11 @@ a:hover {
   font-weight: bold;
 }
 
+#example .advertisement {
+  float: right;
+  margin-left: 2em;
+}
+
 
 /*--------------
     Playground
@@ -289,6 +225,10 @@ a:hover {
   top: 50%;
   width: 100%;
 }
+#example .error.masthead .column {
+  position: relative;
+  z-index: 10;
+}
 #example .masthead {
   position: relative;
   overflow: hidden;
@@ -409,6 +349,48 @@ a:hover {
   position: relative;
   z-index: 2;
 }
+#example .masthead .column {
+  display: table;
+}
+#example .masthead .introduction {
+  display: table-cell;
+  vertical-align: top;
+}
+#example .masthead .advertisement {
+  float: none;
+  display: table-cell;
+  vertical-align: top;
+  padding-left: 2em;
+}
+#example .masthead #carbonads-container {
+  float: right;
+}
+#example .inverted.advertisement .carbonad {
+  background-color: rgba(0, 31, 30, 0.5);
+  border: none;
+  overflow: hidden;
+  height: auto;
+  padding-bottom: 11px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+#example .inverted.advertisement .carbonad-text {
+  color: rgba(255, 255, 255, 0.6);
+  height: auto;
+  font-size: 12px;
+  line-height: 1.3;
+}
+#example .inverted.advertisement .carbonad-tag {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.4);
+}
+#example .inverted.advertisement .carbonad-tag a {
+  color: rgba(255, 255, 255, 0.8);
+}
+#example .inverted.advertisement .carbonad-tag a:hover {
+  color: #FFFFFF;
+}
 
 
 #example .masthead .labeled.button {
@@ -1175,6 +1157,9 @@ body.progress .ui.progress .bar {
 }
 
 @media only screen and (max-width : 600px) {
+  #example .main.menu .borderless.item {
+    display: none;
+  }
   #example .fixed .right.menu {
     display: inline-block;
     float: none;
@@ -1191,10 +1176,16 @@ body.progress .ui.progress .bar {
   #example .fixed .title b {
     display: none;
   }
+  #example .stripe .header .code.icon {
+    display: none;
+  }
   #example .fixed .container {
     width: auto;
     margin: 0px auto;
   }
+  #example .attached.launch.button {
+    display: none;
+  }
   #example .fixed .launch {
     display: inline-block;
   }
@@ -1205,9 +1196,13 @@ body.progress .ui.progress .bar {
     width: auto;
     margin: 0% 30px 0px;
   }
+  #example
   #example .right.attached.launch {
     display: none;
   }
+  #example .masthead .introduction {
+    display: block;
+  }
 }
 
 @media only screen and (min-width : 1725px) {
@@ -1262,6 +1257,28 @@ body.progress .ui.progress .bar {
   #example.index .icon.header .icon {
     font-size: 3em;
   }
+  #example .masthead .advertisement {
+    display: block;
+    margin: 1em 0em;
+    padding: 0em;
+  }
+  #example .masthead #carbonads-container {
+    float: none;
+  }
+  #example .masthead .carbonad-img {
+    margin-top: 0px;
+  }
+  #example .masthead .carbonad {
+    width: auto;
+  }
+  #example .masthead .carbonad-text,
+  #example .masthead .carbonad-tag {
+    float: none;
+    display: block;
+    margin-left: 160px;
+    width: 170px;
+  }
+
 
 }
 @media only screen and (max-width : 1500px) {