home: improve tiles

git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@286 a672b425-5310-4d7a-af5c-997e18724b81

site/_sass/_home.scss

@@ -1,35 +1,64 @@
 .home-tiles {
-    display: grid;
+    display: flex;
-    grid-template-columns: auto auto auto;
+    flex-wrap: wrap;
-    grid-gap: 20px;
     padding-top: 40px;
 }
 
 .home-tile {
-    display:block;
     text-align: center;
-    font-size: 1rem;
+    font-size: 1.5rem;
     margin: .5em;
-    padding: 2rem;
-    background-color: #68BB6A;
     transition: all .2s ease-in-out;
+    padding: 2rem 0;
 }
 
 .home-tile:hover {
     text-align: center;
-    margin: .5em;
+    transform: scale(1.075);
+}
+
+.home-tile-green {
+    background-color: #68BB6A;
+    color: white;
+}
+
+.home-tile-green:hover {
     background-color: #388E3C;
-    transform: scale(1.1);
+    color: white;
+}
+
+.home-tile-white {
+    background-color: #f5f5f5;
+    color: #212121;
+}
+
+.home-tile-white:hover {
+    background-color: #d0d0d0;
+    color: #212121;
+}
+
+.home-tile-grey {
+    background-color: #333333;
+    color: white;
+}
+
+.home-tile-grey:hover {
+    background-color: #212121;
+    color: white;
 }
 
 .home-tile-title {
-    color: white;
     text-decoration: none;
+    flex: 0 0 calc(33.33%);
+    box-sizing: border-box;
 }
 
-.home-tile-title:hover {
+.home-tile-title-2 {
-    color: white;
+    flex-basis: 66.66%;
-    text-decoration: none;
+}
+
+.home-tile-title-3 {
+    flex-basis: 100%;
 }
 
 #videoHome {
@@ -40,13 +69,37 @@
     opacity:0;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
 
-    .home-tiles {
+    .home-tile {
-        grid-template-columns: auto;
+        font-size: 1.25rem;
+    }
+
+    .home-tile-title {
+        flex-basis: 50%;
+    }
+
+    .home-tile-title-2 {
+        flex-basis: 100%;
+    }
+
+    .home-tile-title-3 {
+        flex-basis: 100%;
     }
 }
 
+@media screen and (max-width: 500px) {
+
+    .home-tile {
+        font-size: 1rem;
+    }
+
+    .home-tile-title {
+        flex-basis: 100%;
+    }
+}
+
+
 .NotoSansLight{
     font-family: NotoSansLight;
 }

site/index.html

@@ -12,37 +12,37 @@ title: Home page
 <div class="home-tiles">
 
   <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/cmd/basic.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-white">
       <h2>Basic</h2>
     </article>
   </a>
 
   <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/cmd/intermediate.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-green">
       <h2>Intermediate</h2>
     </article>
   </a>
 
   <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/cmd/advanced.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-grey">
       <h2>Advanced</h2>
     </article>
   </a>
 
   <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/fs.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-grey">
       <h2>FileSystem</h2>
     </article>
   </a>
 
-  <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/scripts.html">
+  <a class="home-tile-title home-tile-title-2" href="{{ site.baseurl }}/pages/topic/scripts.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-white">
       <h2>Scripting</h2>
     </article>
   </a>
 
-  <a class="home-tile-title" href="{{ site.baseurl }}/pages/topic/about.html">
+  <a class="home-tile-title home-tile-title-3" href="{{ site.baseurl }}/pages/topic/about.html">
-    <article class="home-tile">
+    <article class="home-tile home-tile-green">
       <h2>About</h2>
     </article>
   </a>