Tidying up the create form - using custom css

6 files changed, 38 insertions, 17 deletions

diff --git a/pyblackbird_cc/resources/forms.py b/pyblackbird_cc/resources/forms.py
index 9645a82..f905811 100644
--- a/pyblackbird_cc/resources/forms.py
+++ b/pyblackbird_cc/resources/forms.py
@@ -26,7 +26,7 @@ class ResourceCreateForm(forms.Form):
     name = forms.CharField(
         max_length=255,
         help_text="Concisely describe what the resource is, aiming for"
-        "35-45 characters. "
+        " in 35-45 characters. "
         "eg: 'Fractions KS2 Worksheet and Answers.'",
     )
     description = forms.CharField(
diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css
index 833e0a0..5df7099 100644
--- a/pyblackbird_cc/static/css/custom.css
+++ b/pyblackbird_cc/static/css/custom.css
@@ -6149,3 +6149,14 @@ progress {
     display: none !important;
   }
 }
+h2, .h2 {
+  color: #51635e;
+}
+
+.form-label {
+  font-weight: 500;
+}
+
+.asteriskField {
+  color: red;
+}
diff --git a/pyblackbird_cc/static/css/project.css b/pyblackbird_cc/static/css/project.css
index 0f95690..a0a7496 100644
--- a/pyblackbird_cc/static/css/project.css
+++ b/pyblackbird_cc/static/css/project.css
@@ -34,9 +34,8 @@ body {
 
 h1 {
     color: #657c76;
-    font-size: 1.8rem;
+    font-size: 2.0rem;
     font-weight: bold;
-
 }
 
 a {
diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss
index fc9b6c4..a87a968 100644
--- a/pyblackbird_cc/static/scss/custom.scss
+++ b/pyblackbird_cc/static/scss/custom.scss
@@ -7,6 +7,7 @@
 // 2. Include any default variable overrides here
 $primary: #51635EFF;
 $display-font-weight: 600;
+$ml-font-label-weight: 500;
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "../bootstrap/scss/variables";
@@ -22,3 +23,15 @@ $display-font-weight: 600;
 @import "../bootstrap/scss/buttons";
 @import "../bootstrap/scss/bootstrap-utilities";
 // 5. Add additional custom code here
+
+h2 {
+  color: $primary;
+}
+
+.form-label {
+  font-weight: $ml-font-label-weight;
+}
+
+.asteriskField {
+  color: red;
+}
diff --git a/pyblackbird_cc/templates/resources/resource_create.html b/pyblackbird_cc/templates/resources/resource_create.html
index c10e7b8..d428e46 100644
--- a/pyblackbird_cc/templates/resources/resource_create.html
+++ b/pyblackbird_cc/templates/resources/resource_create.html
@@ -7,18 +7,16 @@
 {#    <link rel="stylesheet" href="{% static 'css/forms.css' %}">#}
 {#    {% endblock %}#}
 {% block content %}
-  <div class="container">
-    <div class="row d-flex justify-content-center">
-      <div class="col-md-10 bg-light mt-lg-4">
-        <h2>Upload a new resource</h2>
-        <p>{% lorem %}</p>
-        <form action="{% url 'resources:create_resource' %}"
-              method="post"
-              enctype="multipart/form-data">
-          {% csrf_token %}
-          {% crispy form form.helper %}
-        </form>
-      </div>
+  <div class="row d-flex justify-content-center">
+    <div class="col bg-light mt-lg-4 p-4 border border-success border-opacity-25 rounded">
+      <h2>Upload a new resource</h2>
+      <p>{% lorem %}</p>
+      <form action="{% url 'resources:create_resource' %}"
+            method="post"
+            enctype="multipart/form-data">
+        {% csrf_token %}
+        {% crispy form form.helper %}
+      </form>
     </div>
   </div>
 {% endblock content %}
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 2a6ab3a..3c8780f 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-3 py-3 m-4 bg-body-tertiary border border-1 rounded">
+        <div class="col-3 py-3 m-4 bg-white border border-1 rounded">
           <h5>Welcome!</h5>
           <p>
             I love to make clear and colourful resources and can't resist using rainbow colours
@@ -53,7 +53,7 @@
             I am also available to tutor younger learners online via Sherpa!
           </p>
         </div>
-        <div class="col py-3 m-4 bg-body-tertiary border border-1 rounded">
+        <div class="col py-3 m-4 bg-white border border-1 rounded">
           <h2 class="text-primary">Subscriptions available now!</h2>
           <p>
             I love to make clear and colourful resources and can't resist using rainbow colours