Redesign (#124)

* some work * footer * Changed key takeaways design * authors list * starting authors page, make post header fit max-width * working on landing page * work on authors page & font color * work on landing * fixed chart dimensions for hsis, westwood business, prof donations, covid model * mobile styling for home page * make DB link blue, fix blue color for takeaways, clean up front page code * update current authors * fix home page spacing, add editor section to authors page * fix authors page duplicate Co-authored-by: lindseyp314 <[email protected]>
dailybruin · Mar 1, 2022 · c169396 · c169396
1 parent aa5a8e1
commit c169396
Show file tree

Hide file tree

Showing 23 changed files with 986 additions and 368 deletions.
diff --git a/_data/authors.yml b/_data/authors.yml
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -2,11 +2,26 @@
 
   <div class="wrapper">
 
-    <h2><img class="logo" src="/img/logo_monochrome_black.svg" /> {{ site.title }}</h2>
-
     <div class="footer-col-wrapper">
+      <div class="footer-col  footer-col-1">
+        <h2><img class="logo" src="/img/logo.svg" /> {{ site.title }}</h2>
+        <p class="text">{{ site.description }}</p>
+        <p class="copyright-info">Content &copy; Daily Bruin</p>
+        <p class="copyright-info">Code available under open source licenses on <a href="https://github.com/{{ site.github_username }}">GitHub</a></p>
+      </div>
+
 
       <div class="footer-col  footer-col-2">
+        <ul class="contact-list">
+          <li>
+            <h3>Develop/write for us</h3>
+            <a href="{{ site.application }}">Apply to the Stack</a>
+          </li>
+          <li>
+            <h3>Contact us</h3>
+            <a href="mailto:{{ site.email }}">{{ site.email }}</a>
+          </li>
+        </ul>
         <ul class="social-media-list">
           {% if site.github_username %}
           <li>
@@ -26,29 +41,8 @@ <h2><img class="logo" src="/img/logo_monochrome_black.svg" /> {{ site.title }}</
           </li>
           {% endif %}
         </ul>
-
-        <p class="copyright-info">Content &copy; Daily Bruin</p>
-        <p class="copyright-info">Code available under open source licenses <a href="https://github.com/{{ site.github_username }}">on
-            GitHub</a></p>
       </div>
-
-      <div class="footer-col  footer-col-1">
-        <ul class="contact-list">
-          <li>
-            <h3>Contact us</h3>
-            <a href="mailto:{{ site.email }}">{{ site.email }}</a>
-          </li>
-          <li>
-            <h3>Develop/write for us</h3>
-            <a href="{{ site.application }}">Apply to the Stack</a>
-          </li>
-        </ul>
-      </div>
-
-      <div class="footer-col  footer-col-3">
-        <p class="text">{{ site.description }}</p>
-      </div>
-
+
     </div>
 
   </div>

diff --git a/_includes/head.html b/_includes/head.html
@@ -19,6 +19,10 @@
   <link rel="icon" href="/img/favicon.ico" />
 
   <!-- stylesheets -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Hind:400,300,600|Open+Sans:400,400italic,700,700italic" rel="stylesheet"
     type="text/css" />
   <link href="{{ " /css/main.css " | prepend: site.baseurl }}" rel="stylesheet" /> {% for stylesheet in

diff --git a/_includes/header.html b/_includes/header.html
@@ -2,18 +2,21 @@
 
   <div class="wrapper">
 
-    <a class="site-title" href="{{ site.baseurl }}/">
-      <img src="/img/logo.svg" />
-      {{ site.title }}
-    </a>
-
-    <span class="tagline">
-      Data and tech blog from the <a href="https://dailybruin.com/">Daily Bruin</a>
-    </span>
+    <div class="site-title-wrapper">
+      <a class="site-title" href="{{ site.baseurl }}/">
+        <img src="/img/logo.svg" />
+        <div>{{ site.title }}</div>
+      </a>
+
+      <span class="tagline">
+        Data and tech blog from the <a href="https://dailybruin.com/">Daily Bruin</a>
+      </span>
+    </div>
 
     <nav class="site-nav">
       <div class="trigger">
         <a class='page-link' href="{{ '/about' | prepend: site.baseurl }}">About</a>
+        <a class='page-link' href="{{ '/authors' | prepend: site.baseurl }}">Authors</a>
       </div>
     </nav>
 

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -3,12 +3,13 @@
 ---
 <div class="post">
 
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-  </header>
-
   <article class="post-content">
+    <header class="page-header">
+      {% unless page.hide-title %}
+        <h1 class="page-title">{{ page.title }}</h1>
+      {% endunless %}
+    </header>
     {{ content }}
   </article>
 
-</div>
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -38,65 +38,64 @@ <h2 class="post-teaser">{{ page.teaser }}</h1>
     </div>
   </header>
 
-  {% if page.key_takeaways %}
-  <section class="key-takeaways">
-    <h2>Key takeaways</h2>
-    <ul>
-    {% for takeaway in page.key_takeaways %}
-      <li>{{ takeaway | markdownify }}</li>
-    {% endfor %}
-    </ul>
-  </section>
-  {% endif %}
-
-  <a href="#visualization" id="jump-to-visualization">↓ Jump to visualization</a>
-
   <article class="post-content">
+    {% if page.key_takeaways %}
+      <section class="key-takeaways">
+        <h2>Key Takeaways</h2>
+        <ul>
+        {% for takeaway in page.key_takeaways %}
+          <li>{{ takeaway | markdownify }}</li>
+        {% endfor %}
+        </ul>
+      </section>
+    {% endif %}
+    <a href="#visualization" id="jump-to-visualization">↓ Jump to visualization</a>
     {{ content }}
   </article>
 
   <nav class="prev-next-post">
     {% if page.previous %}
     <a class="prev" href="{{ page.previous.url }}">
-      <h2>← {{ page.previous.title }}</h2>
-      <h3>{{ page.previous.teaser }}</h3>
+      <h3>← {{ page.previous.title }}</h2>
     </a>
     {% endif %}
     {% if page.next %}
     <a class="next" href="{{ page.next.url }}">
-      <h2>{{ page.next.title }} →</h2>
-      <h3>{{ page.next.teaser }}</h3>
+      <h3>{{ page.next.title }} →</h2>
     </a>
     {% endif %}
   </nav>
 
   {% if page.authors %}
   <section class="about-the-author">
-    <h2>About the author{% if page.authors.size > 1 %}s{% endif %}</h2>
-    {% for author_key in page.authors %}
-      {% assign author = site.data.authors[author_key] %}
-    <div class="author">
-      {% if author.mug %}<img class="mug" src="/img/mugs/{{ author_key }}.jpg" />{% endif %}
-      <h3>{{ author.name }}</h3>{% if author.title %}, <h4>{{ author.title }}</h4>{% endif %}
-      {% if author.bio %}
-      {{ author.bio | markdownify }}
-      {% endif %}
-      <ul class="contact">
-        {% if author.github %}
-        <li><a href="https://github.com/{{ author.github }}"><img src="/img/icons/github.svg" /> {{ author.github }}</a></li>
-        {% endif %}
-        {% if author.twitter %}
-        <li><a href="https://twitter.com/{{ author.twitter }}"><img src="/img/icons/twitter.svg" /> {{ author.twitter }}</a></li>
-        {% endif %}
-        {% if author.email %}
-        <li><a href="mailto:{{ author.email }}"><img src="/img/icons/email.svg" /> {{ author.email }}</a></li>
-        {% endif %}
-        {% if author.website %}
-        <li><a href="{{ author.website }}"><img src="/img/icons/globe.svg" /> {{ author.website | replace:'http://','' | replace:'https://','' }}</a></li>
+    <h2>AUTHOR{% if page.authors.size > 1 %}S{% endif %}</h2>
+    <div class="authors-list">
+      {% for author_key in page.authors %}
+        {% assign author = site.data.authors[author_key] %}
+      <div class="author">
+        <h3>{{ author.name }}</h3>
+        {% if author.title %}<h4>{{ author.title }}</h4>{% endif %}
+        {% if author.mug %}<img class="mug" src="/img/mugs/{{ author_key }}.jpg" />{% endif %}
+        {% if author.bio %}
+        {{ author.bio | markdownify }}
         {% endif %}
-      </ul>
+        <ul class="contact">
+          {% if author.github %}
+          <li><a href="https://github.com/{{ author.github }}"><img src="/img/icons/github.svg" /></a></li>
+          {% endif %}
+          {% if author.twitter %}
+          <li><a href="https://twitter.com/{{ author.twitter }}"><img src="/img/icons/twitter.svg" /></a></li>
+          {% endif %}
+          {% if author.email %}
+          <li><a href="mailto:{{ author.email }}"><img src="/img/icons/email.svg" /></a></li>
+          {% endif %}
+          {% if author.website %}
+          <li><a href="{{ author.website }}"><img src="/img/icons/globe.svg" /></a></li>
+          {% endif %}
+        </ul>
+      </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </section>
   {% endif %}
 

diff --git a/_posts/2020-05-12-covid-model.md b/_posts/2020-05-12-covid-model.md
@@ -52,6 +52,7 @@ To explore the visualization, drag the time slider forward through the weeks of
 UCLA could maintain a small R<sub>0</sub> if the university implements mandatory social distancing in classrooms, requires the wearing of masks or provides ample sanitizing products to all classrooms and lecture halls. Any combination of these measures would decrease the spread of the virus.
 
 <h3>Student Network</h3>
+<div class = "chart-container">
 <div class="loader-wrapper">
   <div class="loader"></div>
 </div>
@@ -80,11 +81,12 @@ UCLA could maintain a small R<sub>0</sub> if the university implements mandatory
     </div>
   </div>
 </div>
+</div>
 
 In our model network, students had an average of 228 connections. We ran the simulation 100 times from week 0 to finals week with an R<sub>0</sub> value of 5.7, and found that on average, 94% of students were infected by the end of fall quarter. The peak of new cases occurred at week 6 with over 11,000 new cases. With a smaller R<sub>0</sub> of 2.0, we found that 8% of students were infected by the end of fall quarter.
 
 We also calculated the average number of infections over 100 runs for several different values of R<sub>0</sub>. The following chart shows the number of people infected on average through the 11 weeks, for varying values of R<sub>0</sub>:
-
+<div class = "chart-container">
 <div id="linechart-wrapper">
   <canvas id="linechart"></canvas>
 </div>
@@ -97,7 +99,7 @@ We also calculated the average number of infections over 100 runs for several di
   <div class="legend-marker" id="4"></div><span class="legend-label">R<sub>0</sub> = 4</span> <br>
   <div class="legend-marker" id="5.7"></div><span class="legend-label">R<sub>0</sub> = 5.7</span> <br>
 </div>
-
+</div>
 # Conclusion
 
 The potential spread of the virus depicted above does not take into account interactions in shared spaces such as Bruin Walk, libraries, dining halls, etc. or the fact that the same lecture hall is used, i.e., the same chairs are reused and such surfaces might be a source of infection. These models also do not show the potential spread through shared living spaces such as dorms and apartments. Consequently, COVID-19 could be much more infectious through the UCLA community than the models above show. In fear of outbreaks, [California State University campuses will remain closed](https://www2.calstate.edu/csu-system/news/Pages/CSU-Chancellor-Timothy-P-Whites-Statement-on-Fall-2020-University-Operational-Plans.aspx) for the Fall 2020 semester, and the 23 universities in this system will proceed with primarily virtual instruction. UCLA has yet to make a decision on whether the Fall 2020 quarter will be held virtually or whether there will be some in-person instruction.

diff --git a/_posts/2021-02-23-prof-donations.md b/_posts/2021-02-23-prof-donations.md
@@ -69,11 +69,11 @@ Interestingly, donations to House of Representatives campaigns in particular jum
 <div class="small-line-break"></div>
 
 ### Breaking Down the Campaigns
-
-<div class="ucla-chart"> <canvas id='ucla-top-5'> </canvas> </div>
-<div class="ucb-chart"> <canvas id='ucb-top-5'> </canvas> </div>
-<div class="usc-chart"> <canvas id='usc-top-5'> </canvas> </div>
-
+<div class = "chart-container">
+  <div class="ucla-chart"> <canvas id='ucla-top-5'> </canvas> </div>
+  <div class="ucb-chart"> <canvas id='ucb-top-5'> </canvas> </div>
+  <div class="usc-chart"> <canvas id='usc-top-5'> </canvas> </div>
+</div>
 <img class="graphic" src="/img/posts/prof-donations/campaign-explanations.png">
 
 Across all three universities, just five campaigns raked in more than half of all donations made by professors to political organizations: ActBlue, Biden for President, Biden Victory Fund, Democratic Congressional Campaign Committee and Democratic National Committee.

diff --git a/_posts/2021-05-11-student-demographic-hsis.md b/_posts/2021-05-11-student-demographic-hsis.md
@@ -66,19 +66,21 @@ Looking at the graphs below, UCLA has on average the highest Latino graduation r
 
 Sylvia Hurtado, a professor of education, said UCLA must have programming to address student completion so that every student admitted graduates.
 
-<div class ="rate-line">
-  <canvas id="grad-rate-line"></canvas>
-  <div class= "caption">
-The dotted lines show the average graduation rate for Latino students for each school from 2011-2019.
-</div>
-</div>
-
-<div class ="rate-change">
-  <canvas id="grad-rate-change"></canvas>
-</div>
-
-<div class ="rate-gap">
-  <canvas id="grad-rate-gap"></canvas>
+<div class = "chart-container">
+  <div class ="rate-line">
+    <canvas id="grad-rate-line"></canvas>
+    <div class= "caption">
+  The dotted lines show the average graduation rate for Latino students for each school from 2011-2019.
+  </div>
+  </div>
+
+  <div class ="rate-change">
+    <canvas id="grad-rate-change"></canvas>
+  </div>
+
+  <div class ="rate-gap">
+    <canvas id="grad-rate-gap"></canvas>
+  </div>
 </div>
 
 ### Changes in Grant Funding
@@ -87,17 +89,19 @@ One major aspect of an HSI designation is being qualified for a large range of g
 
 The graphs below show the amount of grant money that each campus in the UC system received per student each year. Most grants reliant on HSI designation come from federal sources. There does not appear to be a large immediate correlation between reaching HSI designation and receiving a large increase in funding even when only federal grants are considered.
 
-<div class = "DOEViz">
-        <canvas id="DOEChart"></canvas>
-</div>
+<div class = "chart-container">
+  <div class = "DOEViz">
+    <canvas id="DOEChart"></canvas>
+  </div>
 
-<div class = "TotalViz">
-<canvas id = "TotalChart"></canvas>
+  <div class = "TotalViz">
+    <canvas id = "TotalChart"></canvas>
+  </div>
 </div>
 
-<script src = "C:/Users/Lindsey/Desktop/Daily-Bruin/the-stack/js/posts/student-demographic-hsis/TotalViz.js"></script>
+<!-- <script src = "C:/Users/Lindsey/Desktop/Daily-Bruin/the-stack/js/posts/student-demographic-hsis/TotalViz.js"></script>
 
-<script src = "C:/Users/Lindsey/Desktop/Daily-Bruin/the-stack/js/posts/student-demographic-hsis/DOEviz.js"></script>
+<script src = "C:/Users/Lindsey/Desktop/Daily-Bruin/the-stack/js/posts/student-demographic-hsis/DOEviz.js"></script> -->
 
 Looking at the graphs above, it first seems as though being an HSI does not have a significant impact on the amount of federal grants that each university receives. However, Hurtado said grants awarded to schools with HSI designation can have a significant impact.
 
@@ -125,13 +129,15 @@ The graphs below show UCLA’s historic growth in its Latino student population
 
 Hurtado said that 2025 was a good goal for UCLA. Hurtado added that in order to achieve the goal, UCLA needs more focus on freshman and transfer admissions and making sure that UCLA is improving in terms of admission and completion.
 
+<div class = 'chart-container'>
 <div class = 'undergrad-predict'>
   <canvas id = 'HSIS_Projection_Undergrad'></canvas>
 </div>
 
 <div class = 'total-predict'>
   <canvas id = 'HSIS_Projection'></canvas> 
 </div>
+</div>
 
 <div class='small-line-break'></div>
 

diff --git a/_posts/2021-2-16-westwood-business-turnover.md b/_posts/2021-2-16-westwood-business-turnover.md
@@ -53,22 +53,27 @@ Before studying the impact of the COVID-19 pandemic on Westwood businesses, it i
 
 [1]: https://thewestwoodvillage.com/directory/ "Westwood Village website"
 
-<div id="container" style="position: relative; width:60vw; margin:0 auto"></div>
+<div class = "chart-container">
+  <div id="container" style="position: relative; width:60vw; margin:0 auto"></div>
+</div>
 
 The map below shows an overview of business closures and openings from 2018 to 2020. Click the clusters to zoom in. You can also click the boxes in the right corner to observe the opened and closed businesses for each year.
 
-<iframe width="100%" height="500" src="../../../../js/posts/westwood-business-turnover/westwood-business-map.html" frameboarder="0" allowfullscreen></iframe>
-
+<div class = "chart-contatiner">
+  <iframe width="100%" height="500" src="../../../../js/posts/westwood-business-turnover/westwood-business-map.html" frameboarder="0" allowfullscreen></iframe>
+</div>
 ## Analysis
 
 In the time plot below, we found that 41 businesses closed in 2020 by the beginning of December. More than half of those businesses first opened after 2015. Are newer businesses more vulnerable to the negative impacts of the COVID-19 pandemic?
 
-<img src="/img/posts/westwood-business/timeline.png" style="width:53vw" class = "center"/>
-
+<div class = chart-container">
+  <img src="/img/posts/westwood-business/timeline.png" style="width:53vw" class = "center"/>
+</div>
 We labeled the businesses first opened before Jan. 1, 2015, as old businesses and those opened after this date as new businesses. We calculated the ratio between the number of closed businesses in 2020 and the number of currently active businesses for both old and new businesses. This ratio is used to reflect the vulnerability of old and new businesses to the economic impacts of the pandemic – the lower the ratio is, the more resistant the business is to the impacts of the COVID-19 pandemic. The result shows that the ratio for new businesses is 0.01143 (23 closed, 2,012 active), which is almost double the value of 0.005097 (19 closed, 3,729 active) for old businesses. Thus, we conclude that the new businesses are more susceptible to the effects of the COVID-19 pandemic.
 
-<img src="/img/posts/westwood-business/barplot.png" style="width:63vw" class = "center"/>
-
+<div class = "chart-container">
+  <img src="/img/posts/westwood-business/barplot.png" style="width:63vw" class = "center"/>
+</div>
 Compared to 2018 and 2019, there are considerably fewer businesses closed and opened for each month of 2020. On average, 4.6 businesses closed and 14.7 businesses opened monthly in 2020. In 2019, the average numbers of opening and closing businesses per month were 31.8 and 20.7, respectively. In 2018, an average of 37.1 businesses opened and 25 businesses closed each month.
 
 Ian Flores, manager of Sharetea, spoke about business trends from his past experiences of working in Westwood.
@@ -84,9 +89,9 @@ Shehbaz Mattu, the owner of the 7-Eleven store in Westwood, expressed disappoint
 In addition, our data revealed a trend that many businesses open in January and close in December. According to Thomas, there are many possible explanations for this trend, such as that it may be hard to start a process to open a business toward the end of the year.
 
 For further analysis, we dug deeper to explore Westwood business data from the past 20 years. Here, we used the closed- to open-business ratio (ratio between the total number of businesses closed and opened in a specific year) to reflect the well-being of Westwood businesses. The higher the ratio is, the worse off the businesses will in general be. From the graph below, we see that the ratio was highest during 2008 with a value of 0.86. However, the ratio of 2020 was 0.255, which is the lowest of the past 20 years. Using our ratio, we concluded that the Westwood businesses were not hit as bad as they were during the 2008 crisis.
-
-<img src="/img/posts/westwood-business/close-open-ratio.png" style="width:63vw" class = "center"/>
-
+<div class = "chart-container">
+  <img src="/img/posts/westwood-business/close-open-ratio.png" style="width:63vw" class = "center"/>
+</div>
 However, Thomas said he saw the percentage of vacancies go up in 2020.
 
 “About 31% of our ground floor retail spaces are vacant now,” Thomas said, compared to 22% the year before. The difference in the trends between the closed- to open-business ratio and the rate of vacancy may have resulted from the fact that the data we used includes all businesses in Westwood, including independent businesses and those in UCLA, while the data from the association only includes retail spaces in its estimation.