Added CSS classes and HTML skeleton for announcement banner. (django#…

…1302) * feat: create CSS for Banner styling * limit line length of billboard text * add HTML skeleton for banner * update billboard comment and banner css * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * update css and banner comment * Fix style and HTML tags description --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Sarah Abderemane <[email protected]>
sabderemane · Nov 2, 2023 · 80eae28 · 80eae28
1 parent a4799dc
commit 80eae28
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -687,6 +687,39 @@ blockquote {
     }
 }
 
+/* banner for billboard */
+#billboard {
+    background-color: $green-medium;
+
+    * {
+        color: $black;
+    }
+
+    .banner {
+        text-align: center;
+        padding: 1em 3em;
+        max-width: 60em;
+        margin: 0 auto;
+        p {
+            @include sans-serif;
+            font-size: 3.2rem;
+            font-weight: 300;
+            margin: 0.35em 0 0.35em;
+            line-height: 1.3;
+            padding: 1px 0 6px;
+        }
+    }
+
+
+    a, h1 a {
+        color: $black;
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
 .copy-banner {
     // Large green callout at the top of the page
     background: var(--primary);

diff --git a/djangoproject/templates/base.html b/djangoproject/templates/base.html
@@ -69,6 +69,21 @@
         {% block header %}{% endblock %}
       </div>
     </div>
+
+    {% comment %}
+    Replace the div#billboard below with banner using the skeleton here to
+    add a site banner for surveys/promotions/etc
+
+    <div id="billboard">{% block billboard %}
+      <div class="banner">
+        <p> Banner content goes here </p>
+      </div>
+        {% endblock %}
+    </div>
+    The CSS targets the `#billboard` selector and expects nested `div and `p` elements.
+    elements.
+    {% endcomment %}
+
     <div id="billboard">{% block billboard %}{% endblock %}</div>
 
     <div class="container {% block layout_class %}{% endblock %}">