style: adjusting styles of titles (#2410)

## Description Updating style of titles on main osv.dev website to be more consistent. Recommendations are visible on Figma: https://www.figma.com/design/Yi1nd5v6iR406zngmscSD3/Open-Source-Vulnerability-(OSV)-Scanner?node-id=0-1&t=eH3EaOJ8WHYCUudr-0 ## Screenshots ![Screenshot 2024-07-23 at 3 03 24 PM](https://github.com/user-attachments/assets/ecc69e7a-1d56-4eec-b7ad-3f19f982aa4c) ![Screenshot 2024-07-23 at 3 03 20 PM](https://github.com/user-attachments/assets/62c6d58e-0e14-4a7e-8c1a-70b1cae48f2f) ![Screenshot 2024-07-23 at 3 08 26 PM](https://github.com/user-attachments/assets/391ce49f-d192-40e6-a4c7-b041f74b8b71)
google · Jul 25, 2024 · c10b005 · c10b005
1 parent 2b5cc46
commit c10b005
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/gcp/appengine/blog/layouts/index.html b/gcp/appengine/blog/layouts/index.html
@@ -1,7 +1,7 @@
 {{ $pages := where site.RegularPages "Type" "posts"}}
 {{ range $pages.ByPublishDate.Reverse }}
 <div class="blog-entry">
-  <a class="title" href="{{ .Permalink | relURL }}">{{ .Title }}</a>
+  <a class="entry-title" href="{{ .Permalink | relURL }}">{{ .Title }}</a>
   <div class="author">Posted by {{ .Params.author }} on {{ .PublishDate.Format "Jan 2, 2006" }}</div>
   <div class="summary">
     {{ .Summary }}

diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss
@@ -369,8 +369,9 @@ pre {
 
 .list-page {
   .title {
-    font-size: 20px;
-    height: 25px;
+    font-size: 42px;
+    margin-top: 24px;
+    margin-bottom: 26px; // To compensate the margin-top of search input of 22px
   }
 
   .ecosystem-buttons {
@@ -1372,6 +1373,13 @@ dl.vulnerability-details,
     .blog-entry {
       padding-bottom: 24px;
 
+      .entry-title {
+        font-size: 1.5rem;
+        font-family: $osv-heading-font-family;
+        display: block;
+        padding-bottom: 16px;
+      }
+
       .author {
         font-size: 18px;
         font-family: $osv-body-font-family;
@@ -1461,13 +1469,24 @@ div.highlight {
   }
 }
 
+.blog-page{
+  .title {
+    padding-top: 24px;
+    padding-bottom: 42px;
+  }
+}
+
 .blog-post-page {
   .post {
     max-width: 800px;
     width: 100%;
     margin: 0 auto;
     font-size: 16px;
   }
+
+  .author{
+    padding-bottom: 48px;
+  }
 }
 
 /** 404 page */

diff --git a/gcp/appengine/frontend3/src/templates/blog.html b/gcp/appengine/frontend3/src/templates/blog.html
@@ -6,6 +6,7 @@
   <div class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell--span-12 posts">
+        <h1 class="title">Blog</h1>
         {{ index|safe }}
       </div>
     </div>

diff --git a/gcp/appengine/frontend3/src/templates/list.html b/gcp/appengine/frontend3/src/templates/list.html
@@ -30,7 +30,7 @@
   <div class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell--span-12">
-        <h1 class="title">Vulnerability Library</h1>
+        <h1 class="title">Vulnerabilities</h1>
         <div class="search">
           <form action="{{ url_for('frontend_handlers.list_vulnerabilities') }}" data-turbo-frame="vulnerability-table">
             <div class="mdc-layout-grid__inner">