CSS logo (#930)

* Custom CSS logo #567 * Fix horizontal scroll on the index page due to #maincontent vw unit width #567 * DRY * Keep self.organization() for ebooks * Each template has its own logo. * No longer needed.
HTTPArchive · Jun 29, 2020 · 2eb9118 · 2eb9118
1 parent 9494a97
commit 2eb9118
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 9 deletions.
diff --git a/src/static/css/2019.css b/src/static/css/2019.css
@@ -458,9 +458,48 @@ h2.header {
   color: #f2f2f2;
 }
 
-a.navigation-logo {
-  color: white;
-  min-width: 280px;
+.navigation-logo {
+  color: #fff;
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+.navigation-logo:hover,
+.navigation-logo:focus {
+  text-decoration: none;
+}
+
+.navigation-logo .line-group {
+  display: block;
+  position: relative;
+  z-index: 1;
+  line-height: 1;
+  overflow: hidden;  
+}
+
+.navigation-logo .line-group::after {
+  content: '';
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  background-color: #f7f779;
+  bottom: calc(.4em - 1px);
+  margin-inline-start: .5em; /* cover both rtl and ltr scenarios */
+}
+
+.navigation-logo .wa {  
+  font-weight: 600;
+  letter-spacing: 5px;
+  font-size: 1.3em;
+  margin-right: -5px; /* fix letter spacing issue for the last letter */
+  font-family: 'Poppins', sans-serif;
+}
+
+.navigation-logo .pre,
+.navigation-logo .ha {  
+  font-size: .8em;
+  letter-spacing: 2px;
 }
 
 header.alt-bg a:hover, footer.alt-bg a:hover,
@@ -701,6 +740,7 @@ footer .ha-logo {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  color: currentColor;
 }
 footer .nav-items ul li > * {
   margin-left: 50px;
@@ -893,7 +933,7 @@ p.copyright a {
   header .cta {
     display: none;
   }
-  a.navigation-logo {
+  .navigation-logo {
     min-width: auto;
     max-width: 75vw;
   }

diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -1,3 +1,8 @@
+/* Related to #maincontent's vw unit width */
+body {
+  overflow-x: hidden;
+}
+
 header.alt-bg {
   background: #5C687D;
   background: transparent linear-gradient(#5C687D 70%, transparent 30%);

diff --git a/src/templates/ar/2019/base.html b/src/templates/ar/2019/base.html
@@ -12,6 +12,13 @@
 {% block skip_navigation %}Skip navigation{% endblock %}
 
 {% block organization %}Web Almanac by HTTP Archive{% endblock %}
+{% block web_almanac_logo %}
+  <span class="wa">Web Almanac</span>
+  <span class="line-group">  
+    <span class="pre">By</span>
+    <span class="ha">HTTP Archive</span>
+  </span>
+{% endblock %}
 
 {% block mission %}
 Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

diff --git a/src/templates/base/2019/base.html b/src/templates/base/2019/base.html
@@ -110,7 +110,9 @@
   <header class="alt-bg">
     <div class="container">
       <div class="top-header">
-        <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="{{ self.organization() }}" height="39" width="202"></a>
+        <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
+          {{ self.web_almanac_logo() }}
+        </a>
         <nav aria-label="{{ self.page_navigation() }}">
           <ul>
             {{ self.non_chapter_nav_links() }}
@@ -140,7 +142,7 @@
             <li class="misc">
               <ul class="misc">
                 <li>
-                  <a href="https://httparchive.org/" class="navigation-logo" aria-labelledby="ha-logo-mobile">
+                  <a href="https://httparchive.org/" aria-labelledby="ha-logo-mobile">
                     <svg width="70" height="35" role="img">
                       <title id="ha-logo-mobile">{{ self.http_archive_link() }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>
@@ -182,7 +184,11 @@
 
   {% block footer %}
     <footer class="alt-bg">
-      <a class="navigation-logo home-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="{{ self.organization() }}" height="39" width="202"></a>
+      <div class="home-logo">
+        <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
+          {{ self.web_almanac_logo() }}
+        </a>
+      </div>
       <hr>
       <nav aria-label="{{ self.footer_title() }}" class="nav-items">
         <ul>
@@ -196,7 +202,7 @@
         </ul>
       </nav>
       <div class="mobile-ha-social-media">
-        <a class="navigation-logo ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile">
+        <a class="ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile">
           <svg width="70" height="35" role="img">
             <title id="httparchive-logo-footer-mobile">{{ self.http_archive_link() }}</title>
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>
@@ -227,7 +233,7 @@
         <br>
         <a href="{{ url_for('accessibility_statement', lang=lang) }}">{{ self.accessibility_statement() }}</a>
       </p>
-      <a class="navigation-logo ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer">
+      <a class="ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer">
         <svg width="70" height="35" role="img">
           <title id="ha-logo-footer">{{ self.http_archive_link() }}</title>
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>

diff --git a/src/templates/en/2019/base.html b/src/templates/en/2019/base.html
@@ -10,6 +10,13 @@
 {% block skip_navigation %}Skip navigation{% endblock %}
 
 {% block organization %}Web Almanac by HTTP Archive{% endblock %}
+{% block web_almanac_logo %}
+  <span class="wa">Web Almanac</span>
+  <span class="line-group">  
+    <span class="pre">By</span>
+    <span class="ha">HTTP Archive</span>
+  </span>
+{% endblock %}
 
 {% block mission %}
 Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

diff --git a/src/templates/es/2019/base.html b/src/templates/es/2019/base.html
@@ -10,6 +10,13 @@
 {% block skip_navigation %}Saltar navegación{% endblock %}
 
 {% block organization %}Web Almanac por HTTP Archive{% endblock %}
+{% block web_almanac_logo %}
+  <span class="wa">Web Almanac</span>
+  <span class="line-group">
+    <span class="pre">Por</span>
+    <span class="ha">HTTP Archive</span>
+  </span>
+{% endblock %}
 
 {% block mission %}
 Nuestra misión es combinar las estadísticas y tendencias sin procesar del HTTP Archive con la experiencia de la comunidad web. Web Almanac es un informe exhaustivo sobre el estado de la web, respaldado por datos reales y expertos web de confianza. Se compone de 20 capítulos que abarcan aspectos del contenido de la página, la experiencia del usuario, la publicación y la distribución.

diff --git a/src/templates/fr/2019/base.html b/src/templates/fr/2019/base.html
@@ -10,6 +10,13 @@
 {% block skip_navigation %}Sauter la navigation{% endblock %}
 
 {% block organization %}Web Almanac par HTTP Archive{% endblock %}
+{% block web_almanac_logo %}
+  <span class="wa">Web Almanac</span>
+  <span class="line-group">
+    <span class="pre">Par</span>
+    <span class="ha">HTTP Archive</span>
+  </span>
+{% endblock %}
 
 {% block mission %}
 Notre mission est de combiner les statistiques brutes et les tendances de HTTP Archive avec l’expertise de la communauté web. Le Web Almanac est un rapport complet sur l’état du Web, soutenu par des données réelles et des experts du Web. Il est composé de 20 chapitres couvrant l’expérience utilisateur, le contenu des pages, leur publication et leur distribution.

diff --git a/src/templates/ja/2019/base.html b/src/templates/ja/2019/base.html
@@ -9,6 +9,11 @@
 {% block skip_navigation %}ナビゲーションをスキップ{% endblock %}
 
 {% block organization %}HTTP ArchiveによるWeb Almanac{% endblock %}
+{% block web_almanac_logo %}
+  <span class="ha line-group">HTTP Archive</span>
+  <span class="pre">による</span>
+  <span class="wa">Web Almanac</span>
+{% endblock %}
 
 {% block mission %}
 私たちの使命は、HTTP Archiveの生の統計やトレンドを、ウェブコミュニティの専門知識と組み合わせることです。Web Almanacは、実際のデータと信頼できるウェブの専門家に裏付けられた、ウェブの状態に関する包括的なレポートです。ページコンテンツ、ユーザー体験、パブリッシング、配布などの側面を網羅した20の章で構成されています。