working on index styles

pages/static/pages/css/styles.css

@@ -70,6 +70,8 @@ nav {
 
 .hero-text {
   margin-top: 25vh;
+  mix-blend-mode: exclusion;
+  color: white;
 }
 
 .home {
@@ -86,13 +88,17 @@ body {
   color: #444;
 }
 
-.contrast {
+/* mobile styles */
-    mix-blend-mode: exclusion;
-    color: white;
-}
 
 @media (max-width: 768px) {
   .hero-text {
-    margin-top: 30vh;
+    margin-top: 10vh;
+    mix-blend-mode: unset;
+    color: inherit;
+  }
+
+  .no-mobile {
+    display: none;
+    pointer-events: none;
   }
 }

pages/templates/pages/council.html

@@ -17,76 +17,73 @@
 <hr>
 <div class="council">
     <h2>Our Team</h2>
-    <br><br>
+    
     <div class="person_cont">
         <img src="{% static 'pages/css/img/vinay.png' %}" class="photo">
         <div class="details">
             <h3><b>The President</b></h3>
-            <p><a>Vinay Ayala</a><br>
+            <p><a>Vinay Ayala</a></p>
-                <i>“Live life to the fullest.”</i>
+            <i>“Live life to the fullest.”</i>
-            </p>
+
         </div>
     </div>
-    <br><br>
+    
     <div class="person_cont">
         <img src="{% static 'pages/css/img/chinmay.png' %}" class="photo">
         <div class="details">
             <h3><b>The Vice President</b></h3>
-            <p><a>Praneeth Chinmay Bhandaru</a><br>
+            <p><a>Praneeth Chinmay Bhandaru</a></p>
-                <i>“You don't need to be a potato to be good in life, all you need to do is trust yourself.”</i>
+            <i>“You don't need to be a potato to be good in life, all you need to do is trust yourself.”</i>
-            </p>
         </div>
     </div>
-    <br><br>
+    
     <div class="person_cont">
         <img src="{% static 'pages/css/img/grace.png' %}" class="photo">
         <div class="details">
             <h3><b>The Treasurer</b></h3>
-            <p><a>Grace Guan</a><br>
+            <p><a>Grace Guan</a></p>
-                <i>“I'm excited to serve again as a member of your class clowncil!”</i>
+            <i>“I'm excited to serve again as a member of your class clowncil!”</i>
-            </p>
+
         </div>
     </div>
-<br><br>
+
     <div class="person_cont">
         <img src="{% static 'pages/css/img/christina.png' %}" class="photo">
         <div class="details">
             <h3><b>The Secretary</b></h3>
-            <p><a>Christina Han</a><br>
+            <p><a>Christina Han</a></p>
-                <i>“Needs a Quote”</i>
+            <i>“Needs a Quote”</i>
-            </p>
+
         </div>
     </div>
-<br><br>
+
     <div class="person_cont">
         <img src="{% static 'pages/css/img/yulee.png' %}" class="photo">
         <div class="details">
             <h3><b>Senator</b></h3>
-            <p><a>Yulee Kang</a><br>
+            <p><a>Yulee Kang</a></p>
-                <i>“Is a Cutie :)”</i>
+            <i>“Is a Cutie :)”</i>
-            </p>
+
         </div>
     </div>
-<br><br>
+
     <div class="person_cont">
         <img src="{% static 'pages/css/img/rushil.png' %}" class="photo">
         <div class="details">
             <h3><b>Senator</b></h3>
-            <p><a>Rushil Umaretiya </a><br>
+            <p><a>Rushil Umaretiya </a></p>
-                <i>“Just failed his chem test, again.”</i>
+            <i>“Just failed his chem test, again.”</i>
-            </p>
         </div>
     </div>
-<br><br>
+
     <div class="person_cont">
         <img src="{% static 'pages/css/img/katelyn.png' %}" class="photo">
         <div class="details">
             <h3><b>The Historian</b></h3>
-            <p><a>Katelyn Chen</a><br>
+            <p><a>Katelyn Chen</a></p>
-                “&#127345;&#65039;&#127358;&#65039;&#128200;&#127883;”
+            “&#127345;&#65039;&#127358;&#65039;&#128200;&#127883;”
-            </p>
         </div>
     </div>
 </div>
-<br><br><br><br>
+
 {% endblock content %}

pages/templates/pages/index.html

@@ -7,7 +7,7 @@
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
   <div class="container hero-text contrast">
-    <h1 class="display-4"><strong>TJHSST Class of 2023</strong></h1>
+    <h1 class="display-4"><strong><span class="no-mobile">TJHSST</span> Class of 2023</strong></h1>
     <p class="lead">We are the class to beat!</p>
   </div>
 </div>