reverted hero, fixed index styles

.gitignore

@@ -67,6 +67,8 @@ local_settings.py
 db.sqlite3
 db.sqlite3-journal
 
+# bruh windows
+*:Zone.Identifier
 
 # Flask stuff:
 instance/

pages/static/pages/css/styles.css

@@ -2,23 +2,58 @@
 @import 'https://fonts.googleapis.com/css?family=Josefin+Slab:700';
 @import 'https://fonts.googleapis.com/css?family=Arapey:400,600';
 @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300&display=swap');
-.jumbotron {
-    background-image: url('img/hero.png');
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+
+
+html {
+  overflow-x: hidden;
 }
+
+nav {
+  z-index: 10;
+}
+
+.animated-navbar {
+  transform: translateY(-70px);
+  animation: nav-slide 0.75s ease-in-out forwards;
+  animation-delay: 1s;
+}
+
+@keyframes nav-slide {
+  0% {
+       transform: translateY(-70px);
+  }
+
+  100% {
+       transform: translateY(0px);
+  }
+}
+
+
+.jumbotron {
+  position: relative;
+  transform: translateY(-70px);
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-image: url('img/hero.png')
+}
+
+.hero-text {
+  margin-top: 25vh;
+}
+
 .valign {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 .home {
-    weight: bold;
+    font-weight: bold;
     text-align: center;
     background-color: rgb(255, 255, 255, 0.85);
 }
+
 body {
   font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
   margin: 0px;
@@ -27,11 +62,6 @@ body {
   color: #444;
 }
 
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
 .segment {
   padding-left: 17px;
   padding-right: 17px;
@@ -78,7 +108,7 @@ body {
   font-weight: 500;
 }
 
-.segment-image {
+.news-image {
     max-width: 100%;
     margin-bottom: 10px;
 }
@@ -126,27 +156,10 @@ body {
   font-weight: 500;
 }
 
-/*# sourceMappingURL=css/index.css.map */
-html {
-    overflow-x: hidden;
-}
 
-nav {
-    z-index: 10;
-}
 
-.animated-navbar {
-    transform: translateY(-70px);
-    animation: nav-slide 0.75s ease-in-out forwards;
-    animation-delay: 1s;
-}
-
-@keyframes nav-slide {
-    0% {
-         transform: translateY(-70px);
-    }
-
-    100% {
-         transform: translateY(0px);
-    }
-}
+@media (max-width: 768px) {
+  .hero-text {
+    margin-top: 30vh;
+  }
+}

pages/templates/pages/base.html

@@ -53,5 +53,6 @@
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+        {% block js %}{% endblock js %}
     </body>
 </html>

pages/templates/pages/index.html

@@ -5,33 +5,29 @@
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
-  <div class="container home mt-5">
-      <br>
-      <h1 class="display-4"><strong>TJHSST Class of 2023</strong></h1>
+  <div class="container hero-text">
+    <h1 class="display-4"><strong>TJHSST Class of 2023</strong></h1>
     <p class="lead">We are the class to beat!</p>
-      <br>
   </div>
 </div>
-<div class="container-2">
-    <h1><center><strong>2023 News</strong></center></h1>
-    <br>
+<div class="container news">
+    <h1 class="text-center font-weight-bold">2023 News</h1>
     <div class="row">
-
         {% for story in stories %}
-
-        <div class="col segment">
-            <h1 class="segment-title">{{ story.header }}</h1>
-            <!-- <div class="segment-image" style="background:url('/static/pages/css/img/{{ story.img_name }}') 50% 50% no-repeat;"> -->
-            <div class="img_cont">
-                <img class="segment-image" src="/static/pages/css/img/{{ story.img_name }}">
-            </div>
+        {% comment %} <div class="col-4 news-col">
+            <h3 class="">{{ story.header }}</h3>
+            <img class="news-image" src="/static/pages/css/img/{{ story.img_name }}">
             <p class="segment-para">{{ story.body }}</p>
             {{ story.created.date }}
-        </div>
-
+        </div> {% endcomment %}
+            <div class="col-md-4 news-col card">
+              <img class="card-img-top" src="{% static 'pages/css/img' %}/{{ story.img_name }}" alt="{{ story.header }} Image">
+              <div class="card-body">
+                <h3 class="card-title">{{ story.header }}</h3>
+                <p class="card-text">{{ story.body }}</p>
+              </div>
+            </div>
         {% endfor %}
-
     </div>
-
 </div>
-{% endblock content %}
+{% endblock content %}