diff --git a/08/pedrosacouto/cnn.css b/08/pedrosacouto/cnn.css new file mode 100644 index 0000000..da972c4 --- /dev/null +++ b/08/pedrosacouto/cnn.css @@ -0,0 +1,91 @@ +/* Push the body down with margin-top*/ +body { + margin-top: 40px; + /*background-color: pink;*/ +} + +/* CNN styling */ +#cnn{ + position: fixed; + width: calc(100% - 10px); + min-width: 420px; + height: 25px; + top:0; + left:0; + right: 0; + vertical-align: top; + padding: 6px; + font-size: 16px; + background-color: #f2f5f6; + background-image: -webkit-gradient(linear, left top, left bottom, from(yellow), to(gold)); +} + +#cnn .button_container { + display: inline-block; + width: calc(50% - 20px); + transform: scaleX(0.7); + transform-origin: 0 0; +} + +#sitemap button:hover{ + color: blue; +} + +#sitemap button{ + position: absolute; + top:0; + right:0; + margin:5px; + padding-top: 5px; + text-transform: uppercase; + color: black; + transform: scaleX(0.7); + transform-origin: 0 0; +} + +.cnn-button{ + padding-top: 5px; +} + +#buttonA{ + padding-left: 20px; +} + + +@media only screen and (max-width: 700px){ + + body { + margin-top: 40px; + /*background-color: yellow;*/ + } + + #cnn { + width: calc(100% - 10px); + height: 40px; + font-size: 12px; + padding-bottom: 12px; + } + + #cnn .button_container { + width: calc(100% - 100px); + } + + #sitemap button { + position: fixed; + right: 5px; + top: 1px; + margin-top: 2px; + } + + #buttonA, #buttonB{ + padding-left: 5px; + } + + .cnn-button{ + padding-top: 1px; + } + + #cnn{ + height: 25px; + +} diff --git a/08/pedrosacouto/cnn.js b/08/pedrosacouto/cnn.js new file mode 100644 index 0000000..834d688 --- /dev/null +++ b/08/pedrosacouto/cnn.js @@ -0,0 +1,84 @@ + const invocation = new XMLHttpRequest(); + const url = 'https://pad.xpub.nl/p/special_issue_8_cnn/export/txt'; + + function findCategories(data){ + // Return categories that this page is part of + // by doing a reversed dictionary lookup + var current_url = window.location.href; + var keys = Object.keys(data) + var categories = []; + for(var i=0; i + + + + —  The Network We de(Served) + + + + + + + + + + + + + + + +
+
+
    +
  • +
+
+
    +
  • +
+
+
    +
  • +
+
+
    +
  • +
+
+ +
+ + + + + + + diff --git a/08/pedrosacouto/reset.css b/08/pedrosacouto/reset.css new file mode 100644 index 0000000..ed11813 --- /dev/null +++ b/08/pedrosacouto/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/08/pedrosacouto/style.css b/08/pedrosacouto/style.css new file mode 100644 index 0000000..ff40e24 --- /dev/null +++ b/08/pedrosacouto/style.css @@ -0,0 +1,425 @@ +@font-face { + font-family: "Arial"; + src: url("font/Arial.ttf"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Times New Roman"; + src: url("font/Times New Roman.ttf"); + font-weight: 400; + font-style: normal; +} + +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: calc(94vh - 30px); + 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: calc(94vh - 30px); + padding-top: 5px; + margin-top: 10px; + margin-bottom: 5px; + margin-left: 10px; + width: 35px; + overflow: auto; + white-space: normal; +} + +.popup{ + line-height: 120%; + display: none; + background-color: #e2e3e4; + width: 450px; + height: calc(94vh - 30px); + overflow: auto; + white-space: normal; + vertical-align: top; + padding-top: 5px; + margin-top: 10px; + margin-bottom: 5px; + +} + +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; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} + +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; +} + +}