wip: resource index page my CSS changes

- using flex for featured, grid for standard
- nice rainbow underline to h1 using ::after, etc
- lorem ipsum text
- spaced out content of standard cards a little
- new Noto font from Google fonts

4 files changed, 166 insertions, 54 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;
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index def801e..c338e06 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -14,6 +14,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <meta name="description" content="Joanna Lemon Resources"/>
         <meta name="author" content="Matthew Lemon"/>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
         <link rel="icon" href="{% static 'images/favicons/al.png' %}"/>
         {% block extra_css %}
         {% endblock extra_css %}
diff --git a/alphabetlearning/templates/resources/resource_card_standard.html b/alphabetlearning/templates/resources/resource_card_standard.html
index cf2b786..4cfa929 100644
--- a/alphabetlearning/templates/resources/resource_card_standard.html
+++ b/alphabetlearning/templates/resources/resource_card_standard.html
@@ -3,56 +3,50 @@
 
 <!-- Card 1 -->
 
-<div style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
-     onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
+<div class="standard-card">
+    <div>
+        <img class="standard-img" src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+    </div>
     <div>
         <div>
-            <img src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+            <h5><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
+            </h5>
         </div>
         <div>
-            <div>
-                <div>
-                    <h5><a
-                            href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
-                    </h5>
-                </div>
-                <div>
-                    <span>{{ resource.age_range }}</span>
-                    {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
-                        <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
-                    {% else %}
-                        <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
-                    {% endif %}
-                    {% if request.user.is_authenticated and request.user.is_staff %}
-                        <span>Feature slot: {{ resource.feature_slot }}</span>
-                    {% endif %}
-                </div>
-                <div>
-                    <p>{{ resource.card_description }}</p>
-                </div>
-                <div>
-                    <p><small class="text-muted">1 credit</small></p>
-
-                        {% if resource.in_cart %}
-                        <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
-                            {% csrf_token %}
-                            <button type="submit">In basket</button>
-                        </form>
-                        {% else %}
-                        <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
-                            {% csrf_token %}
-                            <button type="submit">Add to basket</button>
-                        </form>
-                        {% endif %}
-                </div>
-            </div>
+            <span>{{ resource.age_range }}</span>
+            {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
+            <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+            {% else %}
+            <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+            {% endif %}
+            {% if request.user.is_authenticated and request.user.is_staff %}
+            <span>Feature slot: {{ resource.feature_slot }}</span>
+            {% endif %}
+        </div>
+        <div>
+            <p class="standard-card-description">{{ resource.card_description }}</p>
         </div>
-        {% if request.user.is_authenticated and request.user.is_staff %}
         <div>
-            <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
-                <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
-                <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
-            </div>
-        {% endif %}
+            <p><small class="text-muted">1 credit</small></p>
+
+            {% if resource.in_cart %}
+            <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+                {% csrf_token %}
+                <button type="submit">In basket</button>
+            </form>
+            {% else %}
+            <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+                {% csrf_token %}
+                <button type="submit">Add to basket</button>
+            </form>
+            {% endif %}
+        </div>
+    </div>
+    {% if request.user.is_authenticated and request.user.is_staff %}
+    <div>
+        <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
+        <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
+        <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
     </div>
+    {% endif %}
 </div>
diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html
index a6e2a5d..4ea1850 100644
--- a/alphabetlearning/templates/resources/resource_list.html
+++ b/alphabetlearning/templates/resources/resource_list.html
@@ -13,7 +13,11 @@ Alphabet Learning - Resource List
     {# featured resources #}
     {% if featured_resources %}
     <div>
-        <h1>Featured resources</h1>
+        <h1 class="section-title">Featured resources</h1>
+    </div>
+
+    <div class="bulk-text">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ante vel ornare sagittis. Integer ac nisi tellus. Aenean tempus eleifend ipsum eget iaculis. Donec vehicula tortor malesuada sapien semper, quis fermentum turpis laoreet. Sed pulvinar vitae nibh et posuere. Aenean sed metus in tellus sagittis aliquam vel eu dui. Aliquam tellus purus, semper ut ligula in, pharetra maximus massa. Sed ut ipsum sit amet felis vulputate efficitur a vitae ex. Vestibulum hendrerit dapibus ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed malesuada dui. Phasellus at risus in tortor sagittis faucibus. Curabitur imperdiet, turpis et varius efficitur, odio nibh rhoncus odio, vitae tincidunt turpis magna sed risus. Duis venenatis at tortor vel commodo.</p>
     </div>
 
     <div class="featured-container">
@@ -35,7 +39,10 @@ Alphabet Learning - Resource List
 
             {# standard resources #}
             <div>
-                <h1>Standard resources</h1>
+                <h1 class="section-title">Standard resources</h1>
+            </div>
+            <div class="bulk-text">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ante vel ornare sagittis. Integer ac nisi tellus. Aenean tempus eleifend ipsum eget iaculis. Donec vehicula tortor malesuada sapien semper, quis fermentum turpis laoreet. Sed pulvinar vitae nibh et posuere. Aenean sed metus in tellus sagittis aliquam vel eu dui. Aliquam tellus purus, semper ut ligula in, pharetra maximus massa. Sed ut ipsum sit amet felis vulputate efficitur a vitae ex. Vestibulum hendrerit dapibus ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed malesuada dui. Phasellus at risus in tortor sagittis faucibus. Curabitur imperdiet, turpis et varius efficitur, odio nibh rhoncus odio, vitae tincidunt turpis magna sed risus. Duis venenatis at tortor vel commodo.</p>
             </div>
 
             <!-- Tabbed navigation bar for filtering -->
@@ -52,7 +59,7 @@ Alphabet Learning - Resource List
             </ul>
 
 
-            <div>
+            <div class="standard-grid">
                 {% for resource in page_obj.object_list %}
                 <div data-type="{{ resource.main_resource_category_name }}">
                     {% include "resources/resource_card_standard.html" with resource=resource %}