style: tweaks to update bar

content/en/_index.html

@@ -34,7 +34,7 @@ <h3 id="what-is-rosenpass">What is Rosenpass?</h3>
 {{< blocks/section color="white" >}}
 	<p><strong>Rosenpass</strong> is free and <strong>open-source</strong> software based on the latest research in the field of <strong>cryptography</strong>. It is intended to be used with WireGuard VPN, but can work with all software that uses pre-shared keys. It uses two cryptographic methods (Classic McEliece and Kyber) to secure systems against attacks with <strong>quantum computers</strong>.</p>
 	<p><strong>Rosenpass</strong> is also a <strong>science communication</strong> project that intends to make cryptography easy to understand for everyone. </p>
-	<h4>"Explain it like I'm..."</h4>
+	<h4>“Explain it like …”</h4>
 	<p>
 		On that note, we have provided a series in-depth of explanations about what <strong>Rosenpass</strong> does at different levels.
 		Pick whatever you feel suits you best! :D
@@ -56,7 +56,7 @@ <h4>"Explain it like I'm..."</h4>
 {{< /blocks/section >}}
 
 {{< blocks/lead color="light" >}}
-<h3 id="explain-it-like-im-five">Explain it like I'm five!</h3>
+<h3 id="explain-it-like-im-five">… I'm five!</h3>
 <p>(Meaning you don't have to know a lot about computers to understand this.)</p>
 {{< /blocks/lead >}}
 {{< blocks/section color="white">}}
@@ -94,7 +94,7 @@ <h4 id="how-can-i-use-rosenpass">How can I use Rosenpass?</h4>
 {{< /blocks/section >}}
 
 {{< blocks/lead  color="secondary" >}}
-	<h3 id="explain-it-like-im-a-tech-journalist">Explain it like I'm a tech journalist!</h4>
+	<h3 id="explain-it-like-im-a-tech-journalist">… I'm a tech journalist!</h4>
 {{< /blocks/lead >}}
 {{< blocks/section  color="light" >}}
 	<p>Rosenpass provides a complement to the well-known WireGuard protocol, adding quantum-hardened cryptography and key exchange while keeping the established WireGuard standard encryption security. So Rosenpass functions as an add-on, enhancing WireGuard's key negotiation process with Post Quantum Secure (PQS) cryptography, based a combination of Classic McEliece and Kyber.</p>
@@ -106,7 +106,7 @@ <h3 id="explain-it-like-im-a-tech-journalist">Explain it like I'm a tech journal
 
 
 {{< blocks/lead  color="primary" >}}
-	<h3 id="explain-it-like-im-a-developer">Explain it like I'm a developer!</h3>
+	<h3 id="explain-it-like-im-a-developer">… I'm a developer!</h3>
 {{< /blocks/lead >}}
 {{< blocks/section  color="white" >}}
 	<p>Rosenpass implements a post-quantum-secure key exchange in the spirit of the <a href="https://noiseprotocol.org/">Noise Protocol Framework</a>. The motivating use case is integrating with the WireGuard VPN. In this mode, the shared secret generated by Rosenpass is supplied to WireGuard as its pre-shared symmetric key (PSK). This results in a WireGuard VPN connection with hybrid post-quantum security.</p>
@@ -120,7 +120,7 @@ <h4 id="repo">Repo</h4>
 
 
 {{< blocks/lead color="dark" >}}
-	<h3 id="explain-it-like-im-a-cryptographer">Explain it like I'm a cryptographer!</h3>
+	<h3 id="explain-it-like-im-a-cryptographer">… I'm a cryptographer!</h3>
 {{< /blocks/lead >}}
 {{< blocks/section color="light" >}}
 	<p>The Rosenpass protocol provides a post-quantum-secure authenticated key exchange, based on the work "Post-quantum WireGuard" (PQWG) by Hülsing, Ning, Schwabe, Weber, and Zimmermann<a href="#pqwg"><sup>1</sup></a>. Apart from some tweaks to the protocol internals, we provide security against what we call <em>state disruption attacks</em> as a major contribution.</p>

layouts/partials/new-update.html → layouts/partials/frontpage-update.html

@@ -1,7 +1,7 @@
 <div class="alert alert-warning alert-dismissible fade show new-update-bar" role="alert">
     <div class="col">
         <div class="row update-text">
-            <span class="h4"><strong>Latest Update:</strong></span><span class="h4">We were at <a href="https://hack-mas.at/">Hack Ma's 2024!</a></span> <span>To see our presentation on building post quantum protocols, <a href="/docs/presentations/hackmas-2024">click here!</a></span>
+            <span class="h4"><strong>Latest Update:</strong></span><span class="h4">We gave a talk at <a href="https://hack-mas.at/" class="quiet-link">Hack Ma's 2024!</a></span><span>Watch our presentation on <a href="/docs/presentations/hackmas-2024">Building Post Quantum protocols.</a></span>
         </div>
     </div>
     <button type="button" class="btn close" data-dismiss="alert" aria-label="Close">

layouts/shortcodes/blocks/cover.html

@@ -26,7 +26,7 @@
 {{ end }}
 <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }}{{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover{{ end }} /*td-overlay td-overlay--dark*/ -bg-{{ $col_id }}">
   {{ if .Page.Params.newUpdate }}
-  {{ partial "new-update.html"}}
+  {{ partial "frontpage-update.html"}}
   {{ end }}
   <div class="container td-overlay__inner">
     <div class="row">

static/css/rosenpass.css

@@ -731,12 +731,12 @@ margin-left: 1rem;
   margin-top: -3rem;
   margin-bottom: 3rem;
   background-color: #FFA630;
-  padding: 0.3rem 1rem 0.3rem 1.5rem;
+  padding: 0.5rem 1rem 0.5rem 1.5rem;
   display: flex;
   border: 0;
 }
 
-@media(min-width: 721px){
+@media(min-width: 768px){
   .new-update-bar {
     margin-top: -1.5rem;
     margin-bottom: 1.5rem;
@@ -752,8 +752,8 @@ margin-left: 1rem;
 
 @media(min-width: 1200px){
   .new-update-bar {
-    margin-top: -4rem;
-    margin-bottom: 4rem;
+    margin-top: -3.5rem;
+    margin-bottom: 3.5rem;
   }
 }
 
@@ -768,9 +768,15 @@ margin-left: 1rem;
 .update-text span a {
 color: #FFF;
 text-shadow: 1px 1px 1px #00000060;
-font-weight: inherit;
+/* font-weight: inherit; */
 }
 
+.update-text span a.quiet-link {
+  color: #000;
+  text-shadow: 1px 1px 1px #FFFFFF30;
+  font-weight: inherit;
+  }
+
 .update-text span a:hover {
 transition: all 0.5s;
 color: var(--bs-link-color);