Fixed Merging Issues and changed news borders

pages/static/pages/css/styles.css

@@ -8,6 +8,13 @@ html {
   overflow-x: hidden;
 }
 
+.border-sides {
+    border: 0px !important;
+    border-left: 1px solid gray !important;
+    border-right: 1px solid gray !important;
+    border-radius: 0px;
+}
+
 nav {
   z-index: 10;
 }
@@ -34,8 +41,8 @@ nav {
   transform: translateY(-70px);
   top: 0;
   left: 0;
+  height: 100vh;
   width: 100vw;
-  color: white;
   background-image: url('img/hero.png');
   background-repeat: no-repeat;
   background-position: left bottom;
@@ -45,11 +52,6 @@ nav {
   margin-top: 25vh;
 }
 
-.valign {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 .home {
     font-weight: bold;
     text-align: center;
@@ -64,110 +66,13 @@ body {
   color: #444;
 }
 
-.segment {
-  padding-left: 17px;
-  padding-right: 17px;
-}
-
-.segment-title {
-  color: blue;
-  font-size: 24px;
-  padding-bottom: 17px;
-  font-weight: 500;
-}
-
-.segment-para {
-  color: #444;
-  text-align: left;
-  font-size: 22px;
-  line-height: 33px;
-  font-weight: 300;
-  font-family: 'Hind', sans-serif;
-}
-
-.segment-more-button {
-  width: 80px;
-  font-size: 11px;
-  margin: 0 auto;
-  padding-left: 23px;
-  padding-right: 23px;
-  padding-top: 13px;
-  padding-bottom: 13px;
-  border-radius: 3px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #38A3BD;
-  color: #38A3BD;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-  line-height: 14.4px;
-  font-weight: 400;
-}
-
-.segment-more-button:hover {
-  color: #FFF;
-  background-color: #38A3BD;
-  font-weight: 500;
-}
-
-.news-image {
-    max-width: 100%;
-    margin-bottom: 10px;
-}
-
-.news {
-    margin-bottom: 150px;
-}
-
-.segment-quote {
-  color: #444;
-  text-align: left;
-  font-size: 28px;
-  line-height: 42px;
-  font-weight: 300;
-  font-style: italic;
-  font-family: "Arapey";
-  margin-top: 0px;
-}
-
-.segment-projects-button {
-  width: auto;
-  font-size: 11px;
-  margin: 0 auto;
-  padding-left: 23px;
-  padding-right: 23px;
-  padding-top: 13px;
-  padding-bottom: 13px;
-  border-radius: 3px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #38A3BD;
-  color: #38A3BD;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-  line-height: 14.4px;
-  font-weight: 400;
-}
-
-.segment-projects-button:hover {
-  color: #FFF;
-  background-color: #38A3BD;
-  font-weight: 500;
-}
-
-.segment-title-outer {
-  color: #38A3BD;
-  font-size: 24px;
-  padding-bottom: 17px;
-  font-weight: 500;
-}
-
-.hero-text {
-    margin-top: 30vh;
-    text-weight: bold;
-    color: white;
-}
 .contrast {
     mix-blend-mode: exclusion;
     color: white;
+}
+
+@media (max-width: 768px) {
+  .hero-text {
+    margin-top: 30vh;
+  }
 }

pages/templates/pages/index.html

@@ -6,22 +6,17 @@
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
-  <div class="container hero-text">
+  <div class="container hero-text contrast">
     <h1 class="display-4"><strong>TJHSST Class of 2023</strong></h1>
     <p class="lead">We are the class to beat!</p>
   </div>
 </div>
 <div class="container news">
     <h1 class="text-center font-weight-bold">2023 News</h1>
+    <br><br>
     <div class="row">
         {% for story in stories %}
-        {% 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> {% endcomment %}
-            <div class="col-md-4 news-col card">
+            <div class="border-sides 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>

pages/views.py

@@ -9,6 +9,7 @@ def index(request):
         stories = stories[:3]
     except Exception:
         stories = []
+
     return render(request, 'pages/index.html', {'stories': stories, 'animate': True})