FUNCT First layout structure

2 files changed, 80 insertions, 12 deletions

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 5e7fbd4..c2a4c72 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,6 +1,7 @@
 $colors: (
   primary:          #00ADDC,
-  font:             #999999
+  font:             #999999,
+  grey:             #848286
 );
 
 @import "main.scss";
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a72b94b..5fd580e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,7 +14,7 @@ body {
     color: map-get($colors, font);
     margin: 5%;
 
-    .parent {
+    .center {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
@@ -23,19 +23,86 @@ body {
         height: 100%;
 
         .item {
-            color: map-get($colors, font);
-            text-decoration: none;
+            &:before {
+                content:'';
+                float:left;
+                padding-top:75%;
+            }
+
+            &.ac, &.auto {
+                .label {
+                    font-size: 5rem;
+                    text-align: center;
+                    margin-top: -50%;
+                }
+            }
+
+            &.seat {
+                img {
+                    width: 50%;
+                    margin: 0 25%;
+                }
+            }
+
+            &.circulation {
+
+            }
+
+            &.block {
+                &:before {
+                    padding-top:150%;
+                }
+
+                .item {
+                    height: 50%;
+                    position: relative;
+                    float: left;
+                    width: 100%;
+                }
+            }
+
+            &.temperatures {
+                &:before {
+                    padding-top:150%;
+                }
 
-            .icon {
-                width: 100%;
-                height: 100%;
+                .scrolling {
+                    position: relative;
+                    float: left;
+                    width: 100%;
+                    height: 100%;
+                    overflow: scroll;
+
+                    .temperature {
+                        position: relative;
+                        float: left;
+                        height: 50%;
+                        width: 100%;
+                        font-size: 10rem;
+                        text-align: center;
+                    }
+                }
             }
 
-            .name {
-                width: 100%;
-                text-align: center;
-                text-transform: uppercase;
-                margin-top: -20%;
+            text-decoration: none;
+            flex-basis: 33%;
+        }
+    }
+
+    .bottom {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: 100%;
+
+        .button {
+            flex-basis: 20%;
+
+            img {
+                width: 80%;
+                margin: 0 10%;
             }
         }
     }