diff --git a/index.html b/index.html index c7d2622..e6cc06f 100644 --- a/index.html +++ b/index.html @@ -19,16 +19,27 @@
+
+ + +
-
-
-
-
-
+
+
-
-
-
-
-
- - about | - - - colophon | - - - how to use - - -
-
- -
-
diff --git a/static/css/style.css b/static/css/style.css index 962fc90..bfe40ac 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -4,7 +4,7 @@ @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); * { - border: 0px black solid; + border: 1px black solid; } body { @@ -61,7 +61,8 @@ body { /* Audio in background */ .audioBG { - padding-top: 10px; + margin-top: 35px; + margin-left: 50px; } button { @@ -70,6 +71,7 @@ button { #dur1 { margin-top: 18px; } + .audio-button { background: transparent; color:inherit; @@ -152,7 +154,7 @@ a { #box1 { height: 15px; width: 15px; - margin-left : 10px; + margin-left : 58px; margin-top: 5px; display: inline-block; color: #d81159; @@ -297,19 +299,7 @@ h2 { /* circles */ -#first_circle { - width: 100%; - height: 100%; -} -#second_circle { - width: 100%; - height: 100%; -} - -@media all and (max-width: 350px) { - -} .draggable { position: absolute; cursor: move; @@ -466,8 +456,6 @@ color: #d81159; left: 20%; } - - /*d3 map*/ .link { stroke: #c46666; @@ -487,3 +475,30 @@ color: #d81159; display: inline; /* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */ } + +/*media*/ + +@media (max-width: 770px) { + #menu { + text-align: center; + } + + .map_legend p { + font-size: 0.8em; + } + #box1, #box2, #box3, #box4 { + display: block; + + } +#box1 { + margin-left: 10px; +} +} + +@media (max-width: 550px) { + + .map_legend p { + font-size: 0.5em; + } + +}