style: improve colors and home page styling

4 files changed, 77 insertions, 50 deletions

diff --git a/style/colors.less b/style/colors.less
index 0f3fe7f..293f186 100644
--- a/style/colors.less
+++ b/style/colors.less
@@ -1,31 +1,40 @@
 /* Lovely colors! */
 
 /* Campus map */
-@color-campus-building-border: #f00;
-@color-campus-building-fill: #ccf;
+@color-campus-building-border:  #f00;
+@color-campus-building-fill:    #ccf;
 
 /* Color scheme from http://paletton.com/#uid=53v0u0k7UUa3cZA5wXlaiQ5cFL3 */
 
-@color-primary-0: #B5D6EB;	/* Main Primary color */
-@color-primary-1: #E3F2FB;
-@color-primary-2: #CDE5F5;
-@color-primary-3: #9CC5E0;
-@color-primary-4: #83B3D1;
-
-@color-secondary-1-0: #BCBFEE;	/* Main Secondary color (1) */
-@color-secondary-1-1: #E6E7FC;
-@color-secondary-1-2: #D2D4F6;
-@color-secondary-1-3: #A6A9E5;
-@color-secondary-1-4: #8F93D8;
-
-@color-secondary-2-0: #FFEFC0;	/* Main Secondary color (2) */
-@color-secondary-2-1: #FFF8E6;
-@color-secondary-2-2: #FFF4D3;
-@color-secondary-2-3: #FFEAAD;
-@color-secondary-2-4: #FFE59A;
-
-@color-complement-0: #FFE3C0;	/* Main Complement color */
-@color-complement-1: #FFF4E6;
-@color-complement-2: #FFECD3;
-@color-complement-3: #FFDBAD;
-@color-complement-4: #FFD29A;
+@color-header-background:       #41A1E0;
+@color-background:              #ECEDED;
+@color-footer-background:       #6DADD6;
+
+
+@color-menu-background:         #ECEDED;
+@color-menu-hover:              #E1E3F7;
+@color-menu-shadow:             #6DADD6;
+
+@color-home-block:              #E1E3F7;
+@color-home-hover:              #E9F0F0;
+
+@color-year-background:         #D3D3D3;
+@color-quartile-background:     #D3D3D3;
+@color-courses-background:      #E5ECF0;
+@color-bc-background:           #FCE567;
+@color-major-background:        #AEB1E6;
+@color-elective-background:     #8FBC8F;
+@color-bep-background:          #F08080;
+
+
+@color-primary-0:       #A5C9E1;
+@color-primary-1:       #E9E9EA;
+@color-secondary-1-1:   #ECECED;
+@color-secondary-1-2:   #E8E9F2;
+@color-secondary-1-3:   #7A7FDC;
+@color-secondary-1-4:   #5158E5;
+@color-secondary-2-0:   #A5E6C6;
+@color-secondary-2-2:   #E7F2ED;
+@color-secondary-2-3:   #6ADCA5;
+@color-secondary-2-4:   #38E592;
+@color-secondary-2-9:   #8390D8;
diff --git a/style/curriculum.less b/style/curriculum.less
index 1ae44ba..7ad46b0 100644
--- a/style/curriculum.less
+++ b/style/curriculum.less
@@ -13,10 +13,10 @@ body[data-page="curriculum"] #curriculum-menu {
     }
     .year {
         display: block;
-        background: @color-complement-0;
+        background: @color-year-background;
     }
     .quartile {
-        background: @color-complement-1;
+        background: @color-quartile-background;
 
         & > li {
             display: inline-block;
@@ -25,10 +25,9 @@ body[data-page="curriculum"] #curriculum-menu {
         }
     }
     .courses {
-        background: @color-complement-2;
+        background: @color-courses-background;
 
         & > li {
-            background: @color-complement-3;
             margin-top: 2px;
             margin-bottom: 2px;
             white-space: nowrap;
@@ -36,16 +35,16 @@ body[data-page="curriculum"] #curriculum-menu {
             text-overflow: ellipsis;
 
             &[data-type="bc"] {
-                background-color: #FFC000;
+                background-color: @color-bc-background;
             }
             &[data-type="major"] {
-                background-color: #31859B;
+                background-color: @color-major-background;
             }
             &[data-type="elective"] {
-                background-color: #AB9AC0;
+                background-color: @color-elective-background;
             }
             &[data-type="bep"] {
-                background-color: #C00000;
+                background-color: @color-bep-background;
             }
         }
     }
diff --git a/style/main.less b/style/main.less
index c421382..718f517 100644
--- a/style/main.less
+++ b/style/main.less
@@ -6,8 +6,7 @@
 body {
     text-align: center;
     line-height: 2em;
-    background: linear-gradient(-45deg,
-        @color-secondary-2-4, @color-secondary-2-1);
+    background: @color-background;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -16,7 +15,7 @@ body {
 
 /* header */
 header {
-    background: @color-secondary-1-4;
+    background: @color-header-background;
     margin-bottom: 1em;
 }
 
@@ -45,30 +44,47 @@ body[data-page="home"] {
         height: 300px;
         padding: 1em;
         margin: 1em;
-        background-color: @color-secondary-2-1;
+        background-color: @color-home-block;
     }
     .block {
-        background: no-repeat url(../images/filler.png);
-        height: 200px;
-        background-color: @color-secondary-2-1;
-        padding: 1em;
+        height: 300px;
+        background-color: @color-home-block;
         margin: 1em;
 
         transition: background 0.2s; /* TODO floats over text */
         &:hover {
-            background-color: @color-secondary-2-0;
+            background-color: @color-home-hover;
+        }
+
+        a {
+            color: black;
+            text-decoration: none;
         }
+    }
+    .block .inner {
+        width: 100%;
+        height: 100%;
+        padding: 1em;
 
         p {
             margin: 1em;
         }
 
         &:nth-child(2n+1) {
-            padding-left: 200px;
+            p, h2 {
+                margin-left: 200px;
+            }
+            .side-picture {
+                float: left;
+            }
         }
         &:nth-child(2n) {
-            background-position: right;
-            padding-right: 200px;
+            p, h2 {
+                margin-right: 200px;
+            }
+            .side-picture {
+                float: right;
+            }
         }
     }
 }
@@ -78,7 +94,7 @@ body[data-page="home"] {
 
 /* footer */
 footer {
-    background: @color-secondary-1-4;
+    background: @color-footer-background;
     margin-top: 1em;
 }
 
diff --git a/style/menu.less b/style/menu.less
index 715d092..dd38b32 100644
--- a/style/menu.less
+++ b/style/menu.less
@@ -11,16 +11,19 @@ nav {
         display: inline-block;
     }
     /* links */
-    a:link {
+    a {
         margin: 3px;
         padding: 0.5em 1em;
-        background: @color-secondary-1-1;
+        background: @color-menu-background;
         border-radius: 5px;
-        box-shadow: @color-secondary-1-2 0 0 0px 1px;
+        box-shadow: @color-menu-shadow 0 0 0px 1px;
         display: inline-block;
+        text-decoration: none;
+        font-weight: bold;
+        color: black;
     }
     a:link:hover {
-        background: @color-secondary-1-2;
+        background: @color-menu-hover;
     }
 }