1 files changed, 59 insertions, 28 deletions
diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index b782ae2..3832efb 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,10 +1,19 @@
 
 * {
     box-sizing: border-box;
+    background-color: #F1F3F6;
     margin: 0;
     padding: 0;
     font-size: 18px;
-    font-family: "Ubuntu Mono", monospace;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3 {
+    color: #3d3d3d;
+}
+
+h1 {
+    font-size: 32px;
 }
 
 html, body {
@@ -12,7 +21,7 @@ html, body {
 }
 
 header, nav, main, footer {
-    padding: 2px calc((100% - 800px) / 2) 0;
+    padding: 2px calc((100% - 1200px) / 2) 0;
 }
 
 main {
@@ -24,48 +33,70 @@ main {
 
 body {
     line-height: 1.5;
-    background-color: #F1F3F6;
     color: #34495E;
     overflow-y: scroll;
 }
 
-h1 a {
-    font-size: 36px;
-    font-weight: bold;
-    background-image: url("/static/img/logo.png");
-    background-repeat: no-repeat;
-    background-position: 0px 0px;
-    height: 36px;
-    padding-left: 50px;
-    position: relative;
+a {
+    color: blue;
+}
+
+nav > div > ul > li {
+    display: inline;
+    padding: 1px 2px;
 }
 
-h1 a:hover {
-    text-decoration: none;
-    color: #34495E;
+.featured-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 5px;
 }
 
-h2 {
-    font-size: 22px;
-    margin-bottom: 36px;
-    position: relative;
-    top: -9px;
+.featured-card {
+    border: solid;
+    border-width: 2px;
+    border-radius: 5px;
+    padding: 10px;
+    height: 560px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
 }
 
-a {
-    color: blue;
+.featured-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 3px;
+    width: 100%;
+}
+
+.featured-card-description {
+    margin: 10px 0px;
+    line-height: 1.1;
+    font-size: 0.9em;
 }
 
-@font-face {
-  font-family: 'Lato';
-  src: url(../fonts/Lato-Regular.ttf);
+.card-credit {
+    color: green;
+    font-size: 0.9em;
 }
 
-@font-face {
-  font-family: 'Lato-Italic';
-  src: url(../fonts/Lato-Italic.ttf);
+.add-to-basket-button {
+    background-color: green;
+    color: white;
+    padding: 5px;
 }
 
+.add-to-basket-button-disabled {
+    background-color: lightgray;
+    color: black;
+    padding: 3px;
+}
 
 /* Change the colour of the box shadow */
 .my-card-shadow-sm {