diff --git a/empty.html b/empty.html new file mode 100644 index 0000000..9678dfc --- /dev/null +++ b/empty.html @@ -0,0 +1,16 @@ + + + + + + + XPUB + + + + + + + + + \ No newline at end of file diff --git a/fonts/courierprime.ttf b/fonts/courierprime.ttf new file mode 100644 index 0000000..db4e6c1 Binary files /dev/null and b/fonts/courierprime.ttf differ diff --git a/fonts/inconsolata.ttf b/fonts/inconsolata.ttf new file mode 100755 index 0000000..592ccd2 Binary files /dev/null and b/fonts/inconsolata.ttf differ diff --git a/fonts/inconsolatabold.ttf b/fonts/inconsolatabold.ttf new file mode 100755 index 0000000..9addc89 Binary files /dev/null and b/fonts/inconsolatabold.ttf differ diff --git a/img/ex1.jpg b/img/ex1.jpg new file mode 100644 index 0000000..ad9b1e1 Binary files /dev/null and b/img/ex1.jpg differ diff --git a/img/ex2.jpg b/img/ex2.jpg new file mode 100644 index 0000000..54e75c6 Binary files /dev/null and b/img/ex2.jpg differ diff --git a/img/ex3.jpg b/img/ex3.jpg new file mode 100644 index 0000000..3ab5f4a Binary files /dev/null and b/img/ex3.jpg differ diff --git a/img/logo.jpg b/img/logo.jpg new file mode 100644 index 0000000..d8b3bf0 Binary files /dev/null and b/img/logo.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c5f341 --- /dev/null +++ b/index.html @@ -0,0 +1,440 @@ + + + + + + + XPUB Grad + + + + + + +
+
+

XPUB >>

+ + +
+ + +
+
+

Experimental Publishing (XPUB) is a new study path of the Piet Zwart Institute's Media Design Master programme. XPUB's interests in publishing are twofold:

+ -> first, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;

+ -> and second, publishing as the desire to expand the means of discourse circulation beyond print media and its direct digital translation.

go back

+
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+

trailer.mp4X

+
+ +
+ +
+ +
+
+
+ +
+ +
+ +

publication nameX

+
+ + +
+
+ +
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+

publication nameX

+
+ + +
+
+
+
+
+
+
+

trailer.mp4X

+
+ +
+ +
+ +
+
+
+ +
+
+

publication nameX

+
+ + +
+
+
+
+
+
+
+

trailer.mp4X

+
+ +
+ +
+ +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+
+
+

trailer.mp4X

+
+ + +
+
+
+ + +
+ + +
+ + +
+

Year

+

Attachments

+

Students

+

Projects

+

Publications

+
+
+
+

Grad Show Title

2020

+
+

trailer.mp4

+
+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+
+
+

Grad Show Title

2019

+
+

trailer.mp4

+

publication.pdf

+

publication.png

+
+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+

Student Name

+

Project Name

+

See attachments

+
+
+
+
+

Grad Show Title

2018

+
+

trailer.mp4

+
+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+

Student Name

+

Project Name

+

PDF // IMG

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..2456969 --- /dev/null +++ b/main.css @@ -0,0 +1,900 @@ +@font-face { + font-family: inconsolata; + src: url(fonts/inconsolata.ttf); +} + +@font-face { + font-family: inconsolatabold; + src: url(fonts/inconsolatabold.ttf); +} + +@font-face { + font-family: courierprime; + src: url(fonts/courierprime.ttf); +} + +* { + box-sizing: border-box; +} + +body{ + font-family:inconsolata, sans-serif; + color:white; +} + + +#wrapper { + position:fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: -1; + background-color: #1a1a1a; +} + +/*header*/ + +header{ + position:relative; + width:100%; + padding-bottom:5%; + display:block; + overflow:hidden; + margin-left:1.3%; + line-height:1.3vw; +} + +header h1{ + font-family:courierprime; + font-size:9vw; + float:left; + width:60%; + margin-bottom:5%; + +} + + +#links{ + white-space:nowrap; + font-family:inconsolata; + float:right; + padding-top:3%; + padding-right:3%; + width:40%; +} + + +#links > a { + display:inline-block; + width:45%; + text-align:right; + font-size:calc(9px + 0.9vw); +} + +#links > a:visited { + color:white; + } + + +#hleft-text{ + display:none; + margin-top:0; + background:rgba(0,0,0,0.5); + width:100%; + height:100%; + left:0; + top:0; + position:fixed; + color:white; + z-index:55; + cursor:pointer; + overflow:hidden; + +} + +#inner-hleft-text{ + background-color:black; + width:90vw; + height:95vh; + position:fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform:translate(-50%, -50%); + transform: translate(-50%, -50%); + overflow-y:auto; + +} + +#ihtp{ + width:80%; + height:95%; + position:fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform:translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size:calc(8px + 1.5vh); + line-height:130%; + + +} + +#hleft-text:target{ + display:block; + + +} + +#getback{ + text-decoration:underline; + text-decoration-color:#99ff99; + +} + +#getback:hover{ + text-decoration: overline; + font-family:inconsolatabold; + text-decoration-color:magenta; +} + +#back, #back:hover, #back:visited{ + text-decoration:none; + color:white; +} + + +/*xpuf*/ + +[id*="att"]{ + background:rgba(0,0,0,0.7); + overflow:hidden; + height:100%; + width:100%; + top:0; + left:0; + margin:0 auto; + position:fixed; + z-index:10; + display:none; +} + + +.wrap{ + background:rgba(0,0,0,0.3); + position:fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform:translate(-50%, -50%); + transform: translate(-50%, -50%); + overflow-y:hidden; + height:80%; + width:90%; + display:flex; + flex-direction:column; + +} + +.upbar { + height:5%; + width:100%; + background-color:#99ff99; + position:relative; + +} + +.upbar a { + display:block; + height:100%; +} + +.upbar p { + position:absolute; + width:97%; + margin:0 auto; + position: absolute; + top: 50%; + left:50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform:translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.uptitle { + color:black; + float:left; + font-size:3vh; +} + +.upclose { + color:black; + float:right; + text-decoration:none; + font-size:3vh; +} + +.upclose:hover { + color:magenta; +} + + + +.twowrap { + height:95%; + overflow-y:auto; + overflow-x:hidden; +} + + +[id*="att"] img{ + width:100%; + padding:1% 3%; +} + + +[id*="att"]:target{ + display: block; + } + + +.twowrap-trailer{ + overflow-x:hidden; + overflow-y: auto; + height:91%; + +} + +.iframe-container { + overflow:hidden; + padding-top: 56%; + position: relative; +} + +.iframe-container iframe { + border: 0; + height: 100%; + left: 0; + position: absolute; + top:0; + width: 100%; +} + +[id*="att-video"] > .wrap{ + background:rgba(0,0,0,0); + +} + +/*main*/ + +section#main{ + position:relative; + margin-left:0; + left:0; + width:100%; + padding-left:1%; + display: flex; + flex-direction: column; +} + +.logo{ + display:none; +} + +[class*="col"]{ + float:left; + width:21.75%; + height:100%; + display: flex; + flex-direction: column; + padding-right:2%; +} + + +[class*="col"] p, img, h2{ + padding-right:7%; + +} + +[class*="col"] p{ + font-size:calc(9px + 0.6vw); + line-height:130%; + +} + +.col1 { + width:13%; + display:initial; +} + +.col6 { + width:65.25%; + padding-right:0; + +} + +[class*="subcl"]{ + width:33%; + float:left; + +} + +.col2 p { + word-wrap:break-word; + +} + +p.subcl3{ + padding-right:1%; +} + +.row{ + padding-bottom:2.2vh; + padding-top:2.2vh; + border-bottom-style:solid; + border-bottom-color:white; + border-bottom-width:3px; + +} + +#categories{ + font-family:inconsolata, serif; + margin:0 auto; + width:100%; + border-bottom-style:double; + border-bottom-width:4px; + + +} + + +#categories.row { + padding-top:0.7%; + padding-bottom:0.5%; + -webkit-padding-after:0.5%; + +} + +#categories h2{ + font-size:2.7vw; +} + +a{ + color:white; + text-decoration-color:#99ff99; +} + +.ext:hover { + text-decoration: overline; + font-family:inconsolatabold; + text-decoration-color:yellow; +} + +.int:hover { + text-decoration: overline; + font-family:inconsolatabold; + text-decoration-color:magenta; +} + +#show:hover{ + font-family:courierprime; +} + + +.gradShow { + font-weight:bold; +} + + +.row::after { + content: ""; + clear: both; + display: table; +} + +/* --------- 2nd case --------- */ + +@media all and (min-width: 600px) and (max-width: 720px){ + +/*header*/ + +#ihtp{ + font-size:calc(9px + 1.7vh); + line-height:130%; +} + +#links > a { + width:47%; +} + +/*xpuf*/ + +.wrap { + height:85%; +} + + +/*main*/ + + +[class*="col"]{ + width:20.75%; + +} + +.col1 { + width:17%; +} + +.col6 { + width:62.25%; +} + +[class*="col"] p{ + font-size:calc(10px + 0.6vw); + + +} + +.row{ + border-bottom-width:4px; + +} + +#categories{ + border-bottom-width:4px; +} + +#categories h2{ + font-size:2.5vw; +} + + + +} + + +/* --------- 3rd case --------- */ + +@media all and (min-width: 720px) and (max-width: 992px){ + + +/*header*/ + +#ihtp{ + font-size:calc(11px + 1.7vh); + line-height:130%; +} + +#links > a { + width:47%; + font-size:2.1vw; +} + +/*xpuf*/ + + +/*main*/ + +[class*="col"]{ + width:20.75%; + +} + +.col1 { + width:17%; +} + +.col6 { + width:62.25%; +} + + +[class*="col"] p{ + font-size:calc(11px + 0.6vw); + + +} + +.row{ + border-bottom-width:5px; + +} + +p.subcl3{ + padding-right:5%; +} + +#categories{ + border-bottom-width:5px; +} + + +#categories.row { + width:100%; + +} + + +#categories h2{ + font-size:2.1vw; +} + + +} + +/* --------- 4th case --------- */ + +@media all and (min-width: 992px) and (max-width: 1400px) { + +/*header*/ + + +header{ + width:25%; + position:fixed; + left:0; + top:2%; + bottom:0; + padding-bottom:0; + float:left; + margin-left:2%; + display:flex; + flex-direction: column; +} + +header h1{ + font-size:7vw; + width:77%; + padding-bottom:3%; + -webkit-padding-after:7%; + float:none; +} + +#show{ + display:none; +} + +#links{ + padding-top:0; + float:none; + width:100%; +} + +#links > a { + font-size:calc(10px + 0.6vw); + width: 35%; + text-align:left; +} + + +#hleft-text{ + position:relative; + display:block; + background:none; + padding-top:5%; + width:100%; + overflow-y:auto; + overflow-x:hidden; + padding-right:30%; + box-sizing:initial; + cursor:default; + +} + +#inner-hleft-text{ + width:100%; + height:inherit; + position:relative; + top:0; + left:0; + transform:none; + -webkit-transform:none; + -ms-transform:none; + overflow-y:hidden; + background-color:initial; + +} + +#ihtp{ + width:80%; + position:relative; + top:0; + left:0; + -webkit-transform:none; + -ms-transform:none; + transform:none; + font-size:calc(8px + 0.6vw); + line-height:120%; + +} + +#getback{ + display:none; +} + +#back, #back:hover, #back:visited{ + background-color:none; + cursor:default; +} + +/*xpuf*/ + +.wrap{ + width:60%; + height:82%; + +} + +.uptitle { + font-size:2.5vh; +} + +.upclose { + font-size:2.5vh; +} + +/*main*/ + +section#main{ + position:fixed; + top:0; + bottom:0; + overflow:hidden; + left:25%; + width:75%; + padding-left:1%; + +} + +#content{ + padding-top:1%; + overflow-y:auto; + overflow-x:hidden; + +} + +.logo{ + display:block; + width:70%; +} + + +[class*="col"]{ + width:20.75%; + +} + +.col1 { + width:17%; +} + +.col6 { + width:62.25%; +} + +[class*="col"] p { + font-size:calc(10px + 0.6vw); +} + +.subrow p{ + padding-right:7%; + +} + +p.subcl3{ + padding-right:5%; +} + +.row{ + border-bottom-width:5px; +} + + +#categories{ + margin-left:0; + border-bottom-width:5px; + width:98%; +} + +#categories h2{ + font-size:calc(11px + 0.6vw); +} + +} + +/* --------- 5th case --------- */ + +@media all and (min-width: 1400px){ + +/*header*/ + + +header{ + width:25%; + position:fixed; + left:0; + top:2%; + bottom:0; + padding-bottom:0; + float:left; + margin-left:2%; + display:flex; + flex-direction: column; +} + +header h1{ + font-size:7vw; + margin-bottom:13%; + width:77%; + float:none; +} + +#show{ + display:none; +} + +#links{ + padding-top:0; + float:none; + width:100%; +} + +#links > a { + font-size:1.2em; + width: 35%; + text-align:left; +} + + +#hleft-text{ + position:relative; + display:block; + background:none; + margin-top:9%; + width:100%; + overflow-y:auto; + overflow-x:hidden; + padding-right:30%; + box-sizing:initial; + cursor:default; + +} + +#inner-hleft-text{ + width:100%; + height:inherit; + position:relative; + top:0; + left:0; + transform:none; + -webkit-transform:none; + -ms-transform:none; + overflow-y:hidden; + background-color:initial; + +} + +#ihtp{ + width:80%; + position:relative; + top:0; + left:0; + -webkit-transform:none; + -ms-transform:none; + transform:none; + font-size:calc(9px + 0.6vw); + line-height:125%; + +} + +#getback{ + display:none; +} + +#back, #back:hover, #back:visited{ + background-color:none; + cursor:default; +} + +/*xpuf*/ + +.wrap{ + height:70%; + width:53%; + +} + +.uptitle { + font-size:2vh; +} + +.upclose { + font-size:2vh; +} + +/*main*/ + +section#main{ + position:fixed; + top:0; + bottom:0; + overflow:hidden; + left:25%; + width:75%; + padding-left:1%; + +} + +#content{ + padding-top:1%; + overflow-y:auto; + overflow-x:hidden; + +} + +.logo{ + display:block; + width:70%; +} + + +[class*="col"]{ + width:20.75%; + +} + +.col1 { + width:17%; +} + +.col6 { + width:62.25%; +} + + +[class*="col"] p { + font-size:calc(8px + 0.6vw); +} + +.subrow p{ + padding-right:7%; + +} + + +p.subcl3{ + padding-right:5%; +} + +.row{ + border-bottom-width:7px; +} + + +#categories{ + border-bottom-width:7px; + width:99%; + margin-left:0; +} + +#categories h2{ + font-size:calc(12px + 0.6vw); +} + +} + +/* --------- 6th case --------- */ +@media all and (max-height: 450px) { + + [id*="att-video"] > .wrap{ + width:400px; +} + + .upbar{ + height:7%; + +} +} \ No newline at end of file diff --git a/test.pdf b/test.pdf new file mode 100644 index 0000000..cca0b56 Binary files /dev/null and b/test.pdf differ