Update gateway page with expanded descriptions and updated screenshots

Author: benfrancis

about/images/web_of_things_block_diagram.png

@@ -53,7 +53,7 @@ <h1>The Web of Things</h1>
         <p>The <a href="https://www.w3.org/WoT/">Web of Things</a> (WoT) connects physical objects to the World Wide Web.</p>
         <p>The purpose of the Web of Things is to create a decentralised <a href="https://en.wikipedia.org/wiki/Internet_of_things">Internet of Things</a> (IoT) by giving connected devices URLs on the web to make them linkable and discoverable, and defining a standard <a href="https://www.w3.org/TR/wot-thing-description/">data model</a> and <a href="https://www.w3.org/community/web-thing-protocol/">protocol</a> to make them interoperable.</p>
         <p>The Web of Things is intended as a unifying application layer for the Internet of Things, linking together multiple underlying IoT protocols using existing web technologies.</p>
-        <img class="illustration" src="images/web_of_things_block_diagram.png" alt="Horizontal application layer on top of existing IoT technologies"/>
+        <img class="illustration" src="/images/web_of_things_block_diagram.png" alt="Horizontal application layer on top of existing IoT technologies"/>
         <p>The Web of Things is currently undergoing standardisation at the <a href="https://www.w3.org/WoT/">W3C</a>, via the <a href="https://www.w3.org/WoT/WG/">Web of Things Working Group</a> and <a href="https://www.w3.org/community/web-thing-protocol/">Web Thing Protocol Community Group</a>.</p>
       </section>
 

about/index.html

@@ -69,3 +69,12 @@ header #wordmark {
 #main-navigation a.selected {
   background-color: #333;
 }
+
+.light-section, .dark-section {
+  padding: 0;
+}
+
+.illustration {
+  padding: 2rem;
+  box-sizing: border-box;;
+}

css/site-mobile.css

@@ -112,14 +112,26 @@ h2 {
 
 h3 {
   font-family: "Open Sans", sans-serif;
-  font-size: 18px;
+  font-size: 18px;  
   font-weight: 600;
 }
 
 section {
   padding: 20px;
 }
 
+.dark-section {
+  background-color: #e6e6e6;
+  padding-left: 80px;
+  padding-right: 80px;
+}
+
+.light-section {
+  background-color: #fff;
+  padding-left: 80px;
+  padding-right: 80px;
+}
+
 .button {
   display: inline-block;
   background-color: #b6d806;

css/site.css

@@ -4,43 +4,59 @@
   margin: 40px 20px 20px 20px;
 }
 
-.carousel-section.selected {
-  display: block;
+#download-grid {
+  grid-template-columns: none;
+  width: calc(100% - 40px);
+  margin: 0;
 }
 
-.carousel-screenshot {
-  display: block;
-  padding-bottom: 0;
+.download-box {
+  clear: both;
+  width: 100%;
 }
 
-.carousel-screenshot-image {
-  width: 100%;
-  margin: 0;
+.download-box img {
+  width: calc(100% - 20px);
+  max-width: 128px;
+  height: auto;
 }
 
-.carousel-description {
+.feature {
   display: block;
-  padding-bottom: 0;
 }
 
-.carousel-description-wrapper {
-  top: 0;
-  transform: none;
+.feature .illustration {
+  padding-top: 40px;
 }
 
-#download-grid {
-  grid-template-columns: none;
-  width: calc(100% - 40px);
-  margin: 0;
+.feature .illustration img {
+  display: block;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
 }
 
-.download-box {
-  clear: both;
+.feature .description, .feature.dark-section .description {
   width: 100%;
+  padding: 0 20px 40px 20px;
+  text-align: center;
+  box-sizing: border-box;
 }
 
-.download-box img {
-  width: calc(100% - 20px);
-  max-width: 128px;
-  height: auto;
+.feature .description h1 {
+  font-size: 24px;
+  text-align: center;
+}
+
+#standards {
+  padding: 2rem;
+  box-sizing: border-box;;
+}
+
+#standards img {
+  display: block;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
 }
+

gateway/css/gateway-mobile.css

@@ -11,95 +11,88 @@ section p {
   font-size: 16px;
 }
 
-#intro {
-  background-color: #e3eff8;
+#hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  background-color: #f6faaf;
   background-image: url('../images/hub_background.png');
-  background-size: cover;
   background-position: center;
-  color: #000;
+  background-size: cover;
+  padding: 0;
   text-align: center;
+  color: #000;
+}
+
+#hero p {
+  font-size: 20px;
+  margin: 30px;
+}
+
+#hero .button {
+  margin-top: 0;
 }
 
 #webthings-gateway-wordmark {
   height: 64px;
   margin-top: 30px;
 }
 
-.carousel-section {
-  display: none;
-  flex-direction: row;
+#intro {
   padding-bottom: 0;
 }
 
-.carousel-section.selected {
+#intro p {
+  display: block;
+  margin: 30px auto 0 auto;
+  max-width: 600px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.feature {
   display: flex;
+  flex-direction: row;
+  padding-top: 60px;
+  padding-bottom: 60px;
 }
 
-.carousel-screenshot {
-  flex: 1;
-  padding: 0 20px;
+.feature.dark-section {
+  flex-direction: row-reverse;
 }
 
-.carousel-screenshot-image {
-  width: 90%;
-  max-width: 800px;
-  margin: 30px 0;
+.feature .illustration img {
+  width: 600px;
 }
 
-.carousel-description {
+.feature .description {
   flex: 1;
-  text-align: left;
-  padding: 0 20px;
+  padding-left: 60px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
 }
 
-.carousel-description-wrapper {
-  padding: 20px;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
+.feature.dark-section .description {
+  padding-left: 0;
+  padding-right: 60px;
 }
 
-.carousel-heading {
-  font-family: "Zilla Slab", serif;
-  display: inline-block;
+.feature .description h1 {
   font-size: 30px;
-  font-weight: bold;
-  color: #000;
+  margin: 10px 0;
   padding: 0;
-  margin: 0;
-}
-
-#carousel-tabs {
-  display: block;
-  margin: 0 auto;
-  width: 200px;
-  list-style-type: none;
-  padding-bottom: 20px;
-}
-
-#carousel-tabs a {
-  display: inline-block;
-  margin: 5px;
-  width: 25px;
-  height: 25px;
-  border-radius: 12.5px;
-  background-color: #609dc8;
-  opacity: 0.3;
-}
-
-#carousel-tabs a:focus {
-  outline: none;
-}
-
-#carousel-tabs a.selected {
-  opacity: 1;
+  text-align: left;
 }
 
-#carousel-tabs li {
-  display: inline-block;
+.feature .description p {
+  font-size: 17px;
+  margin: 0;
 }
 
-#instructions {
+#download {
   text-align: center;
 }
 
@@ -128,3 +121,14 @@ section p {
 .download-box .button {
   margin: 0 auto 10px auto;
 }
+
+#standards p {
+  text-align: center;
+  font-size: 18px;
+}
+
+#standards img {
+  display: block;
+  width: 800px;
+  margin: 40px auto;
+}