1 files changed, 113 insertions, 6 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 7c2bb5a..6be378a 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,18 +1,53 @@
+:root {
+    --link-colour: rgb(64, 21, 92);
+}
+.section-title {
+    position: relative;
+    width: max-content;
+  font-family: "Noto Sans", sans-serif;
+  font-size: 2.2em;
+  font-optical-sizing: auto;
+  font-weight: 800; /* bold */
+  font-style: italic;
+  margin: 1.2em 0.5em 1.6em;
+  font-variation-settings:
+    "wdth" 100;
+}
+
+.section-title::after {
+    content: '';
+    background: linear-gradient(to right, #e81416, #ffa500, #faeb36, #79c314, #487de7, #4b369d, #70369d, white);
+    border-radius: 100px;
+    height: 3px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transition: 100ms;
+}
+
+.section-title:hover::after {
+    width: 0;
+}
+
 
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-size: 18px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
 }
 
 h1, h2, h3 {
     color: #3d3d3d;
 }
 
-h1 {
-    font-size: 32px;
+.bulk-text p {
+    padding: 10px;
+    margin-bottom: 30px;
+    line-height: 1.3em;
+    text-align: center;
 }
 
 html, body {
@@ -37,7 +72,7 @@ body {
 }
 
 a {
-    color: blue;
+    color: var(--link-colour);
 }
 
 nav > div > ul > li {
@@ -62,7 +97,7 @@ nav > div > ul > li {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 10px;
-    padding: 5px;
+    padding: 0em 0.5em 0em;
 }
 
 .featured-card {
@@ -93,6 +128,78 @@ nav > div > ul > li {
     font-size: 0.9em;
 }
 
+/* https://www.youtube.com/watch?v=3T0gjtXRNC0&list=PL-u3LA3IYWVGIf7aLa6uAv5D6DACtINqJ&index=3 */
+.standard-grid {
+    margin-top: 30px; 
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    padding: 0em 0.5em 0em;
+    gap: 13px;
+    justify-content: center;
+}
+
+.standard-card {
+    padding: 1.1em;
+    border: 1px solid rgb(199, 200, 201);
+    border-radius: 10px;
+    /*background-color: #f0f2f7;*/
+    background-color: white;
+    text-align: left;
+    position: relative;
+}
+
+/* for animated borders, check https://www.youtube.com/watch?v=ezP4kbOvs_E */
+/*@property --angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+}
+
+.standard-card::after, .standard-card::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-image: conic-gradient(from var(--angle), transparent 90%, darkgreen);
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: -1;
+    padding: 3px;
+    border-radius: 10px;
+    animation: 3s spin linear infinite;
+}
+
+/*
+@keyframes spin {
+    from {
+        --angle: 0deg;
+    }
+    to {
+        --angle: 360deg;
+    }
+} */
+
+/*
+.standard-card::before {
+    filter: blur(1.1rem);
+    opacity: 0.2;
+} */
+
+.standard-img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #ddd;
+    padding: 3px;
+}
+
+.standard-card-description {
+    margin: 20px 0px 16px;
+    line-height: 1.6;
+    font-size: 0.9em;
+    text-align: left;
+}
+
 .card-credit {
     color: green;
     font-size: 0.9em;