From ebc748f72d2a471d26c19729b5becd12affcaba3 Mon Sep 17 00:00:00 2001
From: enricomarino <enrico.marino@email.com>
Date: Tue, 1 Nov 2016 12:22:21 +0100
Subject: [PATCH] .

---
 elements/layout-page.html   |  31 ++++++-
 elements/page-about.html    | 171 ++++++++++++++----------------------
 elements/page-blog.html     |   7 +-
 elements/page-contacts.html |   7 +-
 elements/page-cookies.html  |   7 +-
 elements/page-courses.html  |  21 +----
 elements/page-home.html     |  23 ++---
 elements/page-people.html   | 101 ++++++---------------
 elements/page-projects.html |   8 +-
 elements/page-theses.html   |   8 +-
 elements/part-menu.html     |   7 +-
 11 files changed, 148 insertions(+), 243 deletions(-)

diff --git a/elements/layout-page.html b/elements/layout-page.html
index 7433e6e..b57f969 100644
--- a/elements/layout-page.html
+++ b/elements/layout-page.html
@@ -30,10 +30,25 @@
 
       #layout #main {
         @apply --layout-fit;
+        @apply --layout-horizontal;
         overflow-y: scroll;
         padding-top: 60px;
       }
 
+      #layout #content {
+        @apply --container;
+      }
+
+      #layout .aside .fixed {
+        position: fixed;
+        top: 20px;
+        bottom: 20px;
+        right: 40px;
+        @apply --layout-horizontal;
+        @apply --layout-center;
+      }
+
+
       #layout #space {
         @apply --layout-flex;
       }
@@ -41,13 +56,27 @@
       #layout #footer {
         @apply --layout-block;
       }
+
+
+      @media (max-width: 768px) {
+        #layout .aside {
+          display: none;
+        }
+      }
     </style>
 
     <div id="layout">
       <div id="frame">
         <part-header id="header"></part-header>
         <div id="main">
-          <content select="*"></content>
+          <div id="content">
+            <content select=".content"></content>
+          </div>
+          <div class="aside">
+            <div class="fixed">
+              <content select=".menu"></content>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/elements/page-about.html b/elements/page-about.html
index 044e138..45d9796 100644
--- a/elements/page-about.html
+++ b/elements/page-about.html
@@ -1,7 +1,4 @@
 <link rel="import" href="layout-page.html">
-<link rel="import" href="part-jumbotron.html">
-<link rel="import" href="part-map.html">
-<link rel="import" href="part-menu.html">
 <link rel="import" href="part-technologies.html">
 
 <template-element id="page-about">
@@ -11,31 +8,6 @@
         @apply --layout-block;
       }
 
-      #page-about .frame {
-        @apply --layout-horizontal;
-      }
-
-      #page-about .aside {
-        width: 120px;
-      }
-      #page-about .aside .fixed {
-        position: fixed;
-        width: 120px;
-        top: 20px;
-        bottom: 20px;
-        @apply --layout-horizontal;
-        @apply --layout-center;
-      }
-
-      #page-about .main {
-        @apply --layout-flex;
-      }
-
-      #page-about .container {
-        @apply --container;
-        padding-top: 60px;
-      }
-
       #page-about .section {
         /*@apply --layout-fullbleed;*/
         margin-bottom: 180px;
@@ -65,10 +37,6 @@
       }
 
       @media (max-width: 768px) {
-        #page-about .aside {
-          display: none;
-        }
-
         #page-about .tagline {
           font-size: 30px;
         }
@@ -77,91 +45,82 @@
     </style>
 
     <layout-page id="page-about">
-      <div class="frame">
-        <div class="aside">
-          <div class="fixed">
-            <part-menu links="{{context.menu.about}}"></part-menu>
+      <part-menu class="menu" links="{{context.menu.about}}"></part-menu>
+      <div class="content">
+        <div class="section what">
+          <h1 class="title">What we do</h1>
+
+          <div class="tagline">
+            <span>We make<span><br>
+            <span class="web">Web </span><span class="stuff" ref="stuff"></span>
           </div>
-        </div>
-        <div class="main">
-          <div class="container">
-
-            <div class="section what">
-              <h1 class="title">What we do</h1>
-
-              <div class="tagline">
-                <span>We make<span><br>
-                <span class="web">Web </span><span class="stuff" ref="stuff"></span>
-              </div>
-
-              <div class="subsection">
-                <h2 class="title">Our workflow</h2>
-                <div class="principles">
-                  <p>Explore, Make, Share</p>
-                </div>
-              </div>
-
-              <div class="subsection">
-                <h2 class="title">Our principles</h2>
-                <div class="principles">
-                  <p>First do it, then do it right, then do it better</p>
-                  <p>Dividi et Impera, componetizing all the things</p>
-                  <p>Keep It Stupid Simple</p>
-                </div>
-              </div>
-
-              <div class="subsection">
-                <h2 class="title">Our work tools</h2>
-                <p>Web Technologies, what else?</p>
-                <div class="technologies">
-                  <part-technologies ref="technologies" technologies="{{technologies}}"></part-technologies>
-                </div>
-              </div>
-            </div>
 
-            <div class="section who">
-              <h1 class="title">Who we are</h1>
-              <div class="people">
-                <h2 class="title">Founders</h2>
-                <div class="founders">
-                  <span class="founder">Alberto Paoluzzi</span><span>,</span>
-                  <span class="founder">Enrico Marino</span><span> &amp; </span>
-                  <span class="founder">Federico Spini</span>
-                </div>
-                <div>
-                  <a href="/people">Meet the teem</a>
-                </div>
-              </div>
+          <div class="subsection">
+            <h2 class="title">Our workflow</h2>
+            <div class="principles">
+              <p>Explore, Make, Share</p>
             </div>
+          </div>
 
-            <div class="section why">
-              <h1 class="title">Why we do what we do</h1>
-              <h2>Love, Love, Love</h2>
-              <div class="description">
-                <p>Love studying cutting-edge Web Technologies (that are going to be Web standards)</p>
-                <p>Love experimenting and making Web stuff using what we have studied</p>
-                <p>Love teaching what we have maked, sharing our know-how and our projects</p>
-              </div>
+          <div class="subsection">
+            <h2 class="title">Our principles</h2>
+            <div class="principles">
+              <p>First do it, then do it right, then do it better</p>
+              <p>Dividi et Impera, componetizing all the things</p>
+              <p>Keep It Stupid Simple</p>
             </div>
+          </div>
 
-            <div class="section where">
-              <h1 class="title">Where you can find us</h1>
-              <h2>We are in Rome</h2>
-              <div class="description">
-                <p>In the RomaTre University, in the Computer Engineering Department.</p>
-                <p>If you're in the neighborhood, come to visit us, or <a href="/contacts">drop us a line</a>.</p>
-              </div>
-              <div>
-                <!-- <a href="/contacts">contact us</a> -->
-              </div>
+          <div class="subsection">
+            <h2 class="title">Our work tools</h2>
+            <p>Web Technologies, what else?</p>
+            <div class="technologies">
+              <part-technologies ref="technologies" technologies="{{technologies}}"></part-technologies>
             </div>
+          </div>
+        </div>
 
-            <div class="section when">
-              <h1 class="title">When did it all start?</h1>
-              <div>CVDLAB was founded in 2010.</div>
+        <div class="section who">
+          <h1 class="title">Who we are</h1>
+          <div class="people">
+            <h2 class="title">Founders</h2>
+            <div class="founders">
+              <span class="founder">Alberto Paoluzzi</span><span>,</span>
+              <span class="founder">Enrico Marino</span><span> &amp; </span>
+              <span class="founder">Federico Spini</span>
+            </div>
+            <div>
+              <a href="/people">Meet the teem</a>
             </div>
           </div>
         </div>
+
+        <div class="section why">
+          <h1 class="title">Why we do what we do</h1>
+          <h2>Love, Love, Love</h2>
+          <div class="description">
+            <p>Love studying next gen Web Technologies (that are going to be Web standards)</p>
+            <p>Love experimenting and making Web stuff using what we have studied</p>
+            <p>Love teaching what we have maked, sharing our know-how and our projects</p>
+          </div>
+        </div>
+
+        <div class="section where">
+          <h1 class="title">Where you can find us</h1>
+          <h2>We are in Rome</h2>
+          <div class="description">
+            <p>In the RomaTre University, in the Computer Engineering Department.</p>
+            <p>If you're in the neighborhood, come to visit us, or <a href="/contacts">drop us a line</a>.</p>
+          </div>
+          <div>
+            <!-- <a href="/contacts">contact us</a> -->
+          </div>
+        </div>
+
+        <div class="section when">
+          <h1 class="title">When did it all start?</h1>
+          <div>CVDLAB was founded in 2010.</div>
+        </div>
       </div>
     </layout-page>
 
diff --git a/elements/page-blog.html b/elements/page-blog.html
index d073760..9b419ec 100644
--- a/elements/page-blog.html
+++ b/elements/page-blog.html
@@ -7,15 +7,10 @@
       :host {
         @apply --layout-block;
       }
-
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
     </style>
 
     <layout-page>
-      <div class="container">
+      <div class="content">
         <h1 class="title">Blog</h1>
         <div class="articles">
           <template-repeat items="{{articles}}" item="article">
diff --git a/elements/page-contacts.html b/elements/page-contacts.html
index b5bae0b..3c8702c 100644
--- a/elements/page-contacts.html
+++ b/elements/page-contacts.html
@@ -8,11 +8,6 @@
         @apply --layout-block;
       }
 
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
-
       .contacts {
         padding-top: 60px;
         @apply --text;
@@ -38,7 +33,7 @@
     </style>
 
     <layout-page>
-      <div class="container">
+      <div class="content">
         <div class="contacts">
           <h1>
             <span ref="condition"></span>,<br>
diff --git a/elements/page-cookies.html b/elements/page-cookies.html
index 0c0ca82..c8246c9 100644
--- a/elements/page-cookies.html
+++ b/elements/page-cookies.html
@@ -3,14 +3,13 @@
 <template-element id="page-cookies" selfy>
   <template>
     <style>
-      .container {
-        @apply --container;
-        @apply --text;
+      :host {
+        display: block;
       }
     </style>
 
     <layout-page>
-      <div class="container">
+      <div class="content">
 
         <h1 class="title">Cookie policy</h1>
         <h3>Cookie policy</h3>
diff --git a/elements/page-courses.html b/elements/page-courses.html
index 1b76249..320db16 100644
--- a/elements/page-courses.html
+++ b/elements/page-courses.html
@@ -1,5 +1,4 @@
 <link rel="import" href="layout-page.html">
-<link rel="import" href="part-jumbotron.html">
 <link rel="import" href="part-courses.html">
 
 <template-element id="page-courses">
@@ -8,29 +7,15 @@
       :host {
         @apply --layout-block;
       }
-
-      .jumbotron {
-        @apply --layout-block;
-        height: 200px;
-      }
-
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
-
-      .section {
-        /*@apply --layout-fullbleed;*/
-      }
     </style>
 
     <layout-page>
-      <div class="section coursed">
-        <div class="container">
+      <div class="content">
+        <div class="section">
           <h1 class="title">Courses</h1>
           <part-courses courses="{{courses}}"></part-courses>
         </div>
-        <div class="container">
+        <div class="section">
           <h1 class="title">Learning by doing</h1>
           <part-courses courses="{{crumbs}}"></part-courses>
         </div>
diff --git a/elements/page-home.html b/elements/page-home.html
index f346821..cd459a8 100644
--- a/elements/page-home.html
+++ b/elements/page-home.html
@@ -24,6 +24,7 @@
         text-transform: uppercase;
         text-align: left;
       }
+
       #heading .title .word {
         display: block;
       }
@@ -42,16 +43,18 @@
     </style>
 
     <layout-page>
-      <part-jumbotron id="jumbotron">
-        <div id="heading">
-          <h1 class="title">
-            <span class="word">Computational</span>
-            <span class="word">Visual</span>
-            <span class="word">Design</span>
-            <span class="word">Lab</span>
-          </h1>
-        </div>
-      </part-jumbotron>
+      <div class="content">
+        <part-jumbotron id="jumbotron">
+          <div id="heading">
+            <h1 class="title">
+              <span class="word">Computational</span>
+              <span class="word">Visual</span>
+              <span class="word">Design</span>
+              <span class="word">Lab</span>
+            </h1>
+          </div>
+        </part-jumbotron>
+      </div>
     </layout-page>
   </template>
 </template-element>
\ No newline at end of file
diff --git a/elements/page-people.html b/elements/page-people.html
index c4cbb4f..17b27a9 100644
--- a/elements/page-people.html
+++ b/elements/page-people.html
@@ -1,7 +1,5 @@
 <link rel="import" href="layout-page.html">
-<link rel="import" href="part-jumbotron.html">
 <link rel="import" href="part-alumni.html">
-<link rel="import" href="part-menu.html">
 
 <template-element id="page-people">
   <template>
@@ -10,26 +8,6 @@
         @apply --layout-block;
       }
 
-      .frame {
-        @apply --layout-horizontal;
-      }
-
-      .aside {
-        width: 120px;
-      }
-      .aside .fixed {
-        position: fixed;
-        width: 120px;
-        top: 20px;
-        bottom: 20px;
-        @apply --layout-horizontal;
-        @apply --layout-center;
-      }
-
-      .main {
-        @apply --layout-flex;
-      }
-
       .deck {
         @apply --layout-horizontal;
         @apply --layout-wrap;
@@ -43,66 +21,41 @@
         margin-bottom: 25px;
         @apply --text;
       }
-
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
-
-      .section {
-        /*@apply --layout-fullbleed;*/
-      }
-
-      @media (max-width: 768px) {
-        .aside {
-          display: none;
-        }
-      }
-
     </style>
 
     <layout-page>
-      <div class="frame">
-        <div class="aside">
-          <div class="fixed">
-            <part-menu links="{{context.menu.people}}"></part-menu>
+      <div class="content">
+
+        <div class="section team">
+          <h2>Meet the team</h2>
+          <div class="deck people">
+            <template-repeat items="{{team}}" item="member">
+              <template>
+                <div class="card">
+                  <h4>{{member}}</h4>
+                </div>
+              </template>
+            </template-repeat>
           </div>
         </div>
-        <div class="main">
-          <div class="container">
-
-            <div class="section team">
-              <h2>Meet the team</h2>
-              <div class="deck people">
-                <template-repeat items="{{team}}" item="member">
-                  <template>
-                    <div class="card">
-                      <h4>{{member}}</h4>
-                    </div>
-                  </template>
-                </template-repeat>
-              </div>
-            </div>
-
-            <div class="section collaborations">
-              <h2>Proud to have worked with</h2>
-              <div class="deck people">
-                <template-repeat items="{{collaborators}}" item="collaborator">
-                  <template>
-                    <div class="card">
-                      <h4>{{collaborator}}</h4>
-                    </div>
-                  </template>
-                </template-repeat>
-              </div>
-            </div>
 
-            <div class="section alumni">
-              <h2 class="title">Our students are the secret ingredient</h2>
-              <part-alumni alumni="{{alumni}}"></part-alumni>
-            </div>
+        <div class="section collaborations">
+          <h2>Proud to have worked with</h2>
+          <div class="deck people">
+            <template-repeat items="{{collaborators}}" item="collaborator">
+              <template>
+                <div class="card">
+                  <h4>{{collaborator}}</h4>
+                </div>
+              </template>
+            </template-repeat>
           </div>
         </div>
+
+        <div class="section alumni">
+          <h2 class="title">Our students are the secret ingredient</h2>
+          <part-alumni alumni="{{alumni}}"></part-alumni>
+        </div>
       </div>
     </layout-page>
 
diff --git a/elements/page-projects.html b/elements/page-projects.html
index 4f6be62..74acbee 100644
--- a/elements/page-projects.html
+++ b/elements/page-projects.html
@@ -1,5 +1,4 @@
 <link rel="import" href="layout-page.html">
-<link rel="import" href="part-jumbotron.html">
 <link rel="import" href="part-projects.html">
 
 <template-element id="page-projects">
@@ -8,15 +7,10 @@
       :host {
         @apply --layout-block;
       }
-
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
     </style>
 
     <layout-page>
-      <div class="container">
+      <div class="content">
         <div class="section projects">
           <h1 class="title">Projects</h1>
           <part-projects projects="{{projects}}"></part-projects>
diff --git a/elements/page-theses.html b/elements/page-theses.html
index adfe5aa..1f6116d 100644
--- a/elements/page-theses.html
+++ b/elements/page-theses.html
@@ -1,5 +1,4 @@
 <link rel="import" href="layout-page.html">
-<link rel="import" href="part-jumbotron.html">
 <link rel="import" href="part-theses.html">
 
 <template-element id="page-theses">
@@ -8,15 +7,10 @@
       :host {
         @apply --layout-block;
       }
-
-      .container {
-        @apply --container;
-        padding-top: 60px;
-      }
     </style>
 
     <layout-page>
-      <div class="container">
+      <div class="content">
         <div class="section">
           <h1 class="title">Theses</h1>
           <part-theses theses="{{theses}}"></part-theses>
diff --git a/elements/part-menu.html b/elements/part-menu.html
index ae2bd39..455cc5c 100644
--- a/elements/part-menu.html
+++ b/elements/part-menu.html
@@ -8,10 +8,9 @@
       #links {
         position: absolute;
         width: 100%;
-        height: 58px;
-        transform: rotate(270deg);
-        transform-origin: 0px 0px;
-        @apply --layout-horizontal-reverse;
+        transform: rotate(90deg) translateX(50%);
+        transform-origin: 0px 0;
+        @apply --layout-horizontal;
         @apply --layout-center;
       }