commit 76fbb463ef9230f667395ca4e2c24eee0e90d116 Author: Pedro Sá Couto Date: Sat Mar 30 17:51:37 2019 +0100 special issue 08 website diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..2a26b49 Binary files /dev/null and b/.DS_Store differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..545650e Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/00.png b/img/00.png new file mode 100644 index 0000000..cf475ba Binary files /dev/null and b/img/00.png differ diff --git a/img/01.png b/img/01.png new file mode 100644 index 0000000..3377335 Binary files /dev/null and b/img/01.png differ diff --git a/img/02.png b/img/02.png new file mode 100644 index 0000000..c251eca Binary files /dev/null and b/img/02.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..94c601a --- /dev/null +++ b/index.html @@ -0,0 +1,1021 @@ + + + + + —  WttN + + + + + + + + + + + + + +
+
+
1 — WHAT IS A NETWORK?
+
2 — AUTONOMY AND ITS CONTINGENCIES
+
3 — SOCIAL NETWORKS
+
4 — NETWORK(ED) PUBLISHING
+
5 — MAPPING NETWORKS
+
+
+ +
+
+
    +
  • +
+
+
    +
  • +
+
+
    +
  • +
+
+
    +
  • +
+
+ +
+ + + + + + + diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..ed11813 --- /dev/null +++ b/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..099f599 --- /dev/null +++ b/style.css @@ -0,0 +1,420 @@ +body{ + width: 99%; + background-color: #FFF; + font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif; + font-weight: 400; + margin-left: 1%; +} + +main{ + width:100%; + height:100%; + overflow:scroll; + white-space: nowrap; +} + +ul{ + text-transform: uppercase; + width: 94.5vh; + transform: rotate(90deg); + transform-origin:top left; + -ms-transform: rotate(90deg); /* IE 9 */ + -ms-transform-origin:top left; /* IE 9 */ + -webkit-transform: rotate(90deg); /* Safari and Chrome */ + -webkit-transform-origin:top left; /* Safari and Chrome */ + moz-transform: rotate(90deg); /* Firefox */ + -moz-transform-origin:top left; /* Firefox */ + -o-transform: rotate(90deg); /* Opera */ + -o-transform-origin:top left; /* Opera */ + position: relative; + left: 30px; +} + +li{ + font-size: 1.8em; + transform: scaleX(0.45); + transform-origin: 0 0; +} + +footer{ + font-family: "Times New Roman"; + position: fixed; + bottom: 2vh; + right: -75px; + text-align: right; + font-size: 1.4em; + text-transform: uppercase; + transform: scaleX(0.6); + transform-origin: 0 0; + z-index: -1; +} + +header{ + font-family: "Times New Roman"; + position: fixed; + top: 2vh; + right: -134px; + text-align: right; + font-size: 1.4em; + text-transform: uppercase; + transform: scaleX(0.6); + transform-origin: 0 0; + z-index: -1; +} + +a{ + text-decoration: none; + color: #000; +} + +a:hover{ + text-decoration: none; + color: #e2e3e4; +} + +a.grey:hover, a.aboutmore:hover{ + text-decoration: none; + color: #eeeff0; +} + +a:visited{ + text-decoration: none; +} + +em{ + font-style: italic; +} + +.not_mine{ + color: #909090; +} + +.open{ + display: inline-block; + background-color: #eeeff0; + height: 94.5vh; + padding-top: 10px; + margin-top: 2vh; + margin-bottom: 2vh; + margin-left: 10px; + width: 35px; + overflow: auto; + white-space: normal; +} + +.home{ + font-family: "Times New Roman"; + display: inline-block; + background-color: #FFF; + height: 94.5vh; + padding-top: 10px; + margin-top: 2vh; + margin-right: 20px; + margin-bottom: 2vh; + margin-left: 20px; + width: 35px; + overflow: auto; + white-space: normal; +} + +.popup{ + line-height: 120%; + display: none; + background-color: #e2e3e4; + width: 450px; + height: 94.5vh; + overflow: auto; + white-space: normal; + vertical-align: top; + margin-top: 2vh; + padding-top: 10px; +} + +h2{ + transform: scaleX(0.7); + font-size: 1.6em; + line-height: 110%; + text-transform: uppercase; + transform-origin: 0 0; + margin-left: 8px; + margin-bottom: 10px; +} + +h1{ + transform: scaleX(0.6); + font-size: 1.8em; + line-height: 110%; + text-transform: uppercase; + transform-origin: 0 0; + margin-left: 8px; + margin-bottom: 10px; +} + +.sub_h1{ + font-family: "Times New Roman"; +} + +p{ + margin-left: 16px; + margin-right: 36px; + overflow: auto; + white-space: normal; + padding-bottom: 1em; + font-size: 15px; + line-height: 120%; +} + +.footnotes{ + font-family: "Times New Roman"; + transform: scaleX(0.8); + transform-origin: 0 0; + margin-left: 8px; + font-size: 14px; + line-height: 120%; +} + +.git{ + font-family: "Times New Roman"; + transform: scaleX(0.8); + transform-origin: 0 0; + margin-left: 0px; + font-size: 14px; + line-height: 120%; + padding-top: 8px; +} + +button, input[type="submit"], input[type="reset"] { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + +figcaption{ + font-family: "Times New Roman"; + transform: scaleX(0.8); + transform-origin: 0 0; + margin-left: 8px; + font-size: 14px; + line-height: 120%; + text-align: justify; + text-justify: inter-word; + margin-bottom: 12px; +} + + +img{ + margin-top: 3px; + margin-left: 8px; + width: 326px; +} + +h3{ + transform: scaleX(0.7); + font-size: 1.6em; + line-height: 110%; + text-transform: uppercase; + transform-origin: 0 0; + margin-left: 8px; + margin-bottom: 10px; +} + +.avatar{ + width: 125px; + padding-top: 10px; +} + +.answer{ + background-color: #eeeff0; + width: 388px; + margin-left: 0; + margin-right: 0; + margin-bottom: 75px; + padding: 8px; + padding-left: 36px; + padding-right: 26px; +} + +.link{ + font-size: 1.6em; + line-height: 110%; + transform: scaleX(0.6); + text-transform: uppercase; + transform-origin: 0 0; + background-color: #eeeff0; + width: 742px; + margin-left: 0; + margin-right: 0; + margin-bottom: 8px; + padding: 8px; + padding-left: 8px; + padding-right: 0px; +} + +#text04 { + padding-top: 0px; + padding-top: 1vh; +} + +.description{ + margin-bottom: 15px; +} + +.name{ + display: inline-block; + vertical-align: top; + padding-top: 10px; +} + +.username{ + font-family: "Times New Roman"; + transform: scaleX(0.8); + transform-origin: 0 0; + margin-left: 8px; + font-size: 14px; + margin-bottom: 6px; +} + +.code{ + display: none; +} + +.aboutmore{ + font-family: "Times New Roman"; + transform: scaleX(0.6); + transform-origin: 0 0; + font-size: 12px; +} + +@media only screen and (max-width: 700px){ + +header{ + display: none; +} + +ul{ + width: 95%; + transform: rotate(0deg); + transform-origin:top left; + -ms-transform: rotate(0deg); /* IE 9 */ + -ms-transform-origin:top left; /* IE 9 */ + -webkit-transform: rotate(0deg); /* Safari and Chrome */ + -webkit-transform-origin:top left; /* Safari and Chrome */ + moz-transform: rotate(0deg); /* Firefox */ + -moz-transform-origin:top left; /* Firefox */ + -o-transform: rotate(0deg); /* Opera */ + -o-transform-origin:top left; /* Opera */ + position: relative; + left: 5px; + margin-top: -4px; +} + +li{ + margin-top: 5px; + font-size: 1.6em; +} + +.open{ + display: block; + height: 35px; + margin-left: 4px; + margin-right: 4px; + margin-top: 10px; + margin-bottom: 0px; + width: 95%; +} + +.popup{ + background-color: #F5F5F5; + margin-left: 4px; + margin-right: 4px; + margin-top: 0; + padding-top: 0; + width: 95%; + height: 70vh; +} + +h2{ + font-size: 1.2em; +} + +h1{ + font-size: 1.4em; + margin-top: 6px; +} + +p{ + margin-left: 12px; + margin-right: 20px; + padding-bottom: 1em; + font-size: 13px; +} + +.footnotes{ + font-size: 12px; +} + +figcaption{ + font-size: 13px; +} + +img{ + width: 90%; +} + +h3{ + transform: scaleX(0.7); + font-size: 1.4em; +} + +.avatar{ + padding-top: 5px; +} + +.answer{ + width: 83vw; + margin-left: 0; + margin-right: 0; + margin-bottom: 25px; + padding: 0; + padding-left: 2vw; + padding-right: 8vw; +} + +.link{ + font-size: 1.2em; + width: 163%; +} + +.instance{ + margin-top: 10px; +} + +#text04 { + padding-top: 1vh; +} +#text05 { + padding-top: 8px; +} + +.description{ + margin-bottom: 50px; +} + +.name{ + display: inline-block; + vertical-align: top; + padding-top: 5px; +} + +footer{ + bottom: 8px; + left: 8px; + text-align: left; + font-size: 1.2em; +} + +}