Browse Source

updated icons about About page styling

main
Cristina Cochior 4 years ago
parent
commit
3434511bb1
  1. BIN
      voicegardens/static/images/ABOUT-BW.png
  2. BIN
      voicegardens/static/images/GARDEN-BW.png
  3. BIN
      voicegardens/static/images/RECORD-BW.png
  4. BIN
      voicegardens/static/images/STOP-BWW.png
  5. BIN
      voicegardens/static/images/up-projects.png
  6. 50
      voicegardens/static/styles.css
  7. 2
      voicegardens/static/voicegardens.js
  8. 15
      voicegardens/templates/about.html

BIN
voicegardens/static/images/ABOUT-BW.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
voicegardens/static/images/GARDEN-BW.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
voicegardens/static/images/RECORD-BW.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
voicegardens/static/images/STOP-BWW.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
voicegardens/static/images/up-projects.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

50
voicegardens/static/styles.css

@ -14,49 +14,21 @@
font-style: normal; font-style: normal;
} }
@font-face { body {
font-family: "Rubik"; height: 100vh;
src: url("fonts/Rubik-Bold.ttf") format("ttf"), margin: 0px;
url("fonts/rubik-bold-webfont.woff") format("woff"), overflow: hidden;
url("fonts/rubik-bold-webfont.woff2") format("woff2");
font-weight: bold;
font-style: normal;
} }
@font-face { a {
font-family: "Rubik"; text-decoration: none;
src: url("fonts/Rubik-Regular.ttf") format("ttf"); color: red;
font-weight: normal;
font-style: normal;
} }
@font-face { a:hover {
font-family: "Rubik";
src: url("fonts/Rubik-Italic.ttf") format("ttf");
font-weight: normal;
font-style: italic; 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 { canvas {
display: block; display: block;
} }
@ -117,7 +89,7 @@ img.button {
height: 100vh; height: 100vh;
padding: 1em; padding: 1em;
width: 60%; width: 60%;
font-family: sans-serif; font-family: 'Signika', sans-serif;
font-size: 1.5em; font-size: 1.5em;
line-height: 1.5em; line-height: 1.5em;
overflow: scroll; overflow: scroll;
@ -127,6 +99,10 @@ h1 {
line-height: 1em; line-height: 1em;
} }
h3 {
padding: 1em 0;
}
.backtoindex img { .backtoindex img {
width: 10%; width: 10%;
margin: 0 auto !important; margin: 0 auto !important;

2
voicegardens/static/voicegardens.js

@ -172,7 +172,7 @@ function setupRecording() {
recordButton.mousePressed(record); recordButton.mousePressed(record);
recordButton.class("button record"); recordButton.class("button record");
stopButton = createImg("../static/images/STOP-BW.png"); stopButton = createImg("../static/images/STOP-BWW.png");
stopButton.mousePressed(stop); stopButton.mousePressed(stop);
stopButton.class("button stop"); stopButton.class("button stop");

15
voicegardens/templates/about.html

@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>voicegardens.org: home</title> <title>voicegardens.org: home</title>
<link rel="stylesheet" href="/static/styles.css" type="text/css" media="screen" /> <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> </head>
<body> <body>
@ -18,16 +21,16 @@
<h3>1. Key</h3> <h3>1. Key</h3>
<img class="button button-about" src="../static/images/RECORD-COLOR.png"> <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"> <img class="button button-about" src="../static/images/STOP-BWW.png">
<h6>Stop / Generate shape</h6> <h4>Stop / Generate shape</h4>
<img class="button button-about" src="../static/images/GARDEN-BW.png"> <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"> <img class="button button-about" src="../static/images/ABOUT-BW.png">
<h6>About</h6> <h4>About</h4>
<h3>2. About the work</h3> <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 <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. 79.
<div class="footer"> <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>
</div> </div>

Loading…
Cancel
Save