updated icons about About page styling

4 years ago · 3434511bb1
8 changed files with 23 additions and 44 deletions
--- a/voicegardens/static/images/ABOUT-BW.png
+++ b/voicegardens/static/images/ABOUT-BW.png
--- a/voicegardens/static/images/GARDEN-BW.png
+++ b/voicegardens/static/images/GARDEN-BW.png
--- a/voicegardens/static/images/RECORD-BW.png
+++ b/voicegardens/static/images/RECORD-BW.png
--- a/voicegardens/static/images/STOP-BWW.png
+++ b/voicegardens/static/images/STOP-BWW.png
--- a/voicegardens/static/images/up-projects.png
+++ b/voicegardens/static/images/up-projects.png
--- a/voicegardens/static/styles.css
+++ b/voicegardens/static/styles.css
@ -14,49 +14,21 @@
  font-style: normal;
 }

-@font-face {
-  font-family: "Rubik";
-  src: url("fonts/Rubik-Bold.ttf") format("ttf"),
-    url("fonts/rubik-bold-webfont.woff") format("woff"),
-    url("fonts/rubik-bold-webfont.woff2") format("woff2");
-  font-weight: bold;
-  font-style: normal;
+body {
+  height: 100vh;
+  margin: 0px;
+  overflow: hidden;
 }

-@font-face {
-  font-family: "Rubik";
-  src: url("fonts/Rubik-Regular.ttf") format("ttf");
-  font-weight: normal;
-  font-style: normal;
+a {
+  text-decoration: none;
+  color: red;
 }

-@font-face {
-  font-family: "Rubik";
-  src: url("fonts/Rubik-Italic.ttf") format("ttf");
-  font-weight: normal;
+a:hover {
  font-style: italic;
 }

-@font-face {
-  font-family: "PalanquinDark";
-  src: url("fonts/PalanquinDark-Bold.ttf") format("ttf");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "PalanquinDark";
-  src: url("fonts/PalanquinDark-Regular.ttf") format("ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-body {
-  height: 100vh;
-  margin: 0px;
-  overflow: hidden;
-}
-
 canvas {
  display: block;
 }
@ -117,7 +89,7 @@ img.button {
  height: 100vh;
  padding: 1em;
  width: 60%;
-  font-family: sans-serif;
+  font-family: 'Signika', sans-serif;
  font-size: 1.5em;
  line-height: 1.5em;
  overflow: scroll;
@ -127,6 +99,10 @@ h1 {
  line-height: 1em;
 }

+h3 {
+  padding: 1em 0;
+}
+
 .backtoindex img {
  width: 10%;
  margin: 0 auto !important;
--- a/voicegardens/static/voicegardens.js
+++ b/voicegardens/static/voicegardens.js
@ -172,7 +172,7 @@ function setupRecording() {
  recordButton.mousePressed(record);
  recordButton.class("button record");

-  stopButton = createImg("../static/images/STOP-BW.png");
+  stopButton = createImg("../static/images/STOP-BWW.png");
  stopButton.mousePressed(stop);
  stopButton.class("button stop");

--- a/voicegardens/templates/about.html
+++ b/voicegardens/templates/about.html
@ -6,6 +6,9 @@
  <meta name="viewport" content="width=device-width" />
  <title>voicegardens.org: home</title>
  <link rel="stylesheet" href="/static/styles.css" type="text/css" media="screen" />
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Signika&display=swap');
+  </style>
 </head>

 <body>
@ -18,16 +21,16 @@
    <h3>1. Key</h3>

    <img class="button button-about" src="../static/images/RECORD-COLOR.png">
-    <h6>Record</h6>
+    <h4>Record</h4>

-    <img class="button button-about" src="../static/images/STOP-BW.png">
-    <h6>Stop / Generate shape</h6>
+    <img class="button button-about" src="../static/images/STOP-BWW.png">
+    <h4>Stop / Generate shape</h4>

    <img class="button button-about" src="../static/images/GARDEN-BW.png">
-    <h6>Plant / Load a sound by another visitor</h6>
+    <h4>Plant / Load a sound by another visitor</h4>

    <img class="button button-about" src="../static/images/ABOUT-BW.png">
-    <h6>About</h6>
+    <h4>About</h4>

    <h3>2. About the work</h3>
    <p>Welcome to <i>Wet Signal Voice Gardens</i>, a growing online landscape and tool to explore the many facets of the human voice! <i>Wet Signal Voice Gardens</i> is a web-based artwork that invites broad participation to investigate the
@ -95,7 +98,7 @@
    79.

    <div class="footer">
-      Supported by <img class="ac" src="../static/images/artscouncil.png"><img class="stimu" src="../static/images/stimu.en.gif"><img class="up" src="../static/images/up-projects.jpg">
+      Supported by <img class="ac" src="../static/images/artscouncil.png"><img class="stimu" src="../static/images/stimu.en.gif"><img class="up" src="../static/images/up-projects.png">
    </div>

  </div>