some styling fixes (#178)

* logos at bottom * use GT-Zirkon font * update filter/category copy * add a fallback font * stop tracking * make timeline smaller for smaller laptops * fix for firefox responsive intropopup * mobile fallback * update design system version
2026-06-13 05:48:36 +03:00 · 2020-10-29 18:14:32 +01:00
parent 955e3631f9
commit 8b507fde96
27 changed files with 92 additions and 80 deletions
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'GT-Zirkon';
+  src: url(../assets/fonts/timemapfont.woff); // a Lato woff by default
+}
+
 $event_default: red;

 $offwhite: #efefef;
@@ -24,6 +29,7 @@ $other:     yellow;
 .alpha { background: $alpha; }
 .beta { background: $beta; }

+$mainfont: 'GT-Zirkon', 'Lato', Helvetica, sans-serif;

 // Font sizes
 $xsmall: 10px;//0.7em;
@@ -54,7 +60,7 @@ $card-width: 386px;
 $card-right: 9px;
 $narrative-info-height: 205px;
 $narrative-info-desc-height: 153px;
-$timeline-height: 170px;
+$timeline-height: 250px;
 $toolbar-width: 110px;

 $panel-width: 1000px;
@@ -68,4 +74,5 @@ $header-inset: 10px;
 // CSS variables (for React access)
 :root {
  --toolbar-width: 110px;
-}
+  --error-red: #eb443e;
+}
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -170,7 +170,6 @@
  }

  .timestamp {
-    font-family: 'Lato', Helvetica, sans-serif;
    margin-top: 0;

    .estimated-timestamp {
@@ -196,10 +195,6 @@
    }
  }

-  .location {
-    font-family: 'Lato', Helvetica, sans-serif;
-  }
-
  .summary {
    overflow: auto;
    margin-top: 0;
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -15,7 +15,7 @@ body {
 }

 h1 {
-  font-family: 'Lato', Helvetica, serif;
+  font-family: $mainfont;
 }

 h2 {
@@ -44,7 +44,7 @@ h2 {
    box-sizing: border-box;
    padding: 0 5px;
    outline: none;
-    font-family: 'Lato', sans-serif;
+    font-family: $mainfont;

    &:focus {
      border: 3px solid $yellow;
@@ -74,7 +74,7 @@ h2 {
 }

 .page {
-  font-family: 'Lato', Helvetica sans-serif;
+  font-family: $mainfont;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -43,17 +43,18 @@
  }

  &.minimized {
-    top: 0;
+    bottom: 150px;
    max-width: $toolbar-width;
    max-height: 30px;
    justify-content: center;
    align-items: center;
+    flex-direction: column;
    .cover-logo-container {
      padding: 5px;
    }
    .cover-logo {
-      width: 15px;
-      height: 15px;
+      width: 60px;
+      height: 60px;
    }
  }
 }
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -14,7 +14,6 @@

  .header-title {
    a {
-      font-family: 'Lato', Helvetica, serif;
      color: darken($offwhite, 5%);
      font-size: $xlarge;
      letter-spacing: 0.1em;
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -12,7 +12,6 @@
  border-radius: 1px;
  padding: 20px;
  box-sizing: border-box;
-  font-family: 'Lato', 'Helvetica', sans-serif;
  font-size: $large;
  transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
  opacity: 1;
@@ -53,6 +52,14 @@
    }
  }

+  &.mobile {
+    border: none;
+    padding: 5vmin;
+    .side-menu-burg {
+      display: none;
+    }
+  }
+

  .legend {
    display: flex;
--- a/src/scss/loading.scss
+++ b/src/scss/loading.scss
@@ -1,5 +1,4 @@
 .loading-overlay {
-  font-family: 'Lato', Helvetica, sans-serif;
  font-weight: 300;
  width: 100%;
  height: 100%;
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -13,3 +13,5 @@
@import 'mediaplayer';
@import 'cover';
@import 'stateoptions';
+
+
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -46,7 +46,6 @@
    padding: 5px;
    font-weight: 500;
    font-size: 11px;
-    font-family: 'Lato', Helvetica, sans-serif;
    border: rgba($black,0.6);
    letter-spacing: 0.05em;

--- a/src/scss/narrativecard.scss
+++ b/src/scss/narrativecard.scss
@@ -12,7 +12,6 @@ NARRATIVE INFO
  box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
  background: $black;
  color: $offwhite;
-  font-family: Helvetica, 'Georgia', serif;

  .narrative-info-header {
    display: flex;
@@ -50,7 +49,6 @@ NARRATIVE INFO

  h3 {
    font-size: $large;
-    font-family: Helvetica, 'Georgia', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 100;
@@ -64,7 +62,6 @@ NARRATIVE INFO
  }

  p {
-    font-family: 'Lato', 'Helvetica', sans-serif;
    font-size: $normal;
    line-height: 1.4em;
  }
@@ -76,7 +73,6 @@ NARRATIVE INFO
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
-      font-family: 'Lato', 'Helvetica', sans-serif;
      text-align: center;
      display: inline-block;

--- a/src/scss/notification.scss
+++ b/src/scss/notification.scss
@@ -21,7 +21,6 @@
  padding: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
-  font-family: 'Lato', 'Helvetica', sans-serif;
  font-size: $large;
  transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
  opacity: 1;
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -168,7 +168,6 @@ $overlay-bg: rgba(239,239,239,0.9);
  box-sizing: border-box;
  width: 100%;
  max-height: calc(#{$panel-height} - 100px);
-  font-family: "Lato", Helvetica, sans-serif;

  .media-content {
    display: flex;
@@ -219,7 +218,6 @@ $overlay-bg: rgba(239,239,239,0.9);
    max-width: $panel-width;
    padding: $padding 0;
    border-top: 1px solid rgb(189,189,189);
-    font-family: "Lato", Helvetica, sans-serif;
    font-size: $normal;

    h4 {
@@ -291,7 +289,6 @@ $overlay-bg: rgba(239,239,239,0.9);
  box-sizing: border-box;
  padding: 0 calc(50% - 400px);
  overflow-y: scroll;
-  font-family: Helvetica, Georgia, serif;
  line-height: 1.5em;
  min-width: 100%;
  margin-bottom: 120px;
@@ -327,15 +324,10 @@ $overlay-bg: rgba(239,239,239,0.9);
  height: 100%;
  min-height: 100%;
  display: block;
-  // align-self: center;
-  // display: flex;
-  // flex-direction: column;
 }

 .source-image, .source-video {
  padding: 1px;
-  font-family: 'Lato', Helvetica, sans-serif;
-  // max-width: calc(#{$panel-width} - 100px);
  max-height: 100%;
  margin: auto;
  width: auto;
--- a/src/scss/popup.scss
+++ b/src/scss/popup.scss
@@ -48,14 +48,12 @@
  }

  .timestamp {
-    font-family: 'Lato', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: $xlarge;
    margin-top: 0;
  }

  .location {
-    font-family: 'Lato', Helvetica, sans-serif;
    font-size: $normal;
    color: $offwhite;
  }
--- a/src/scss/tabs.scss
+++ b/src/scss/tabs.scss
@@ -9,7 +9,6 @@


  [role=tab] {
-    font-family: 'Lato', Helvetica, sans-serif;
    font-size: $xlarge;
    width: 33%;
    background: none;
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -1,5 +1,3 @@
-$timeline-height: 170px;
-
 .timeline-wrapper {
  position: fixed;
  box-sizing: border-box;
@@ -160,7 +158,6 @@ $timeline-height: 170px;
        }

        text {
-          font-family: 'Lato', Helvetica, sans-serif;
          fill: $midwhite;
          text-transform: capitalize;
        }
@@ -181,7 +178,6 @@ $timeline-height: 170px;

        .tick text {
          font-size: 10px;
-          font-family: 'Lato';
          text-anchor: end;
        }
      }
--- a/src/scss/toolbar.scss
+++ b/src/scss/toolbar.scss
@@ -38,7 +38,6 @@
      transition: 0.2s ease;
      border-bottom: 2px solid $midwhite;
      text-transform: uppercase;
-      font-family: Helvetica, serif;
      cursor: pointer;

      p {
@@ -82,7 +81,6 @@
        margin-top: 10px;
        display: block;
        outline: none;
-        font-family: 'Lato';
        font-size: $xsmall;
        cursor: pointer;
        transition: 0.2s ease;
@@ -250,7 +248,6 @@
  box-sizing: border-box;
  padding: 30px 10px 10px 30px;
  font-size: $normal;
-  font-family: 'Lato', Helvetica, sans-serif;
  background: $black;
  color: $offwhite;
  position: fixed;
@@ -259,7 +256,6 @@
  box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);

  h2 {
-    font-family: Helvetica, 'Georgia', 'serif';
    font-size: $large;
    text-transform: none;
    letter-spacing: normal;
@@ -267,7 +263,6 @@

  p {
    font-size: $normal;
-    font-family: Helvetica, 'Georgia', 'serif';
    line-height: 1.4em;
  };

@@ -365,7 +360,6 @@
    margin: 20px 0;
    padding: 5px 10px;
    font-size: 18px;
-    font-family: 'Lato', sans-serif;
    letter-spacing: 0.1em;
    transition: 0.2s ease;
    border-color: $midwhite;
@@ -382,7 +376,6 @@
    height: 36px;
    line-height: 36px;
    background: none;
-    font-family: 'Lato', Helvetica, sans-serif;
    font-size: $large;

    button {
@@ -416,7 +409,6 @@
      float: left;
      color: $offwhite;
      font-size: $normal;
-      font-family: Helvetica, 'Georgia', 'serif';
      overflow: hidden;
    }

@@ -461,7 +453,6 @@
      color: $offwhite;
      cursor: pointer;
      outline: none;
-      font-family: 'Lato', Helvetica, sans-serif;
      text-transform: uppercase;
      margin-bottom: 10px;
      transition: 0.2s ease;
--- a/src/scss/video.scss
+++ b/src/scss/video.scss
@@ -5,7 +5,6 @@
  height: 420px;
  transition: opacity 500ms;
  background-color: black;
-  font-family: 'Lato', Helvetica, sans-serif;
  overflow: hidden;
 }