added fonts, font variables, color variables, styled library course--…

…title, and gave course library grid an inset of 100px
bottega-code-school · Jun 1, 2018 · bb2de5b · bb2de5b
1 parent 0c34898
commit bb2de5b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/style/library.scss b/src/style/library.scss
@@ -4,8 +4,17 @@
     display: grid;
     grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
     grid-row-gap: 22px;
+
+    padding-left: 100px;
+    padding-top: 100px;
+    margin-right: -50px;
 
     &__title {
-        // grid-row: title-s/title-e;
+        color: $color-blue;
+        font-family: $font-alegreya;
+        font-size: 34px;
+        font-weight: bold;
+        border-left: 2px solid $color-blue;
+        padding: 20px 40px;
     }
 }
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -14,9 +14,9 @@
     display: grid;
     grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
     grid-template-rows: 1fr;
-}
 
 
+}
 
 .schedule {
     grid-column: schedule-s/schedule-e;

diff --git a/src/style/variables.scss b/src/style/variables.scss
@@ -1,2 +1,8 @@
 $color-purple: #6F48CE;
-$color-light-blue: #32CBE8;
+$color-light-blue: #32CBE8;
+$color-blue: #487BCE;
+$color-gray: #4D4D4D;
+
+$font-alegreya: 'Alegreya';
+$font-mont: 'Montserrat';
+$font-lato: 'Lato';
diff --git a/static/index.html b/static/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Alegreya:400,700|Lato:400,700|Montserrat:400,700" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
   <title>Course Schedule</title>
 </head>