From f2b0ab963dcdb0be70a5d513cd25302c857b2735 Mon Sep 17 00:00:00 2001 From: manetta Date: Wed, 20 Jan 2021 15:23:03 +0100 Subject: [PATCH] (2019/2020/2021) update issue.xpub.nl website --- .gitignore | 1 + fonts.css | 111 +++++++++++ index.html | 491 +++++++++++++++++++++++++------------------------ mobile.css | 86 +++++++++ stylesheet.css | 381 +++++++++++++++----------------------- 5 files changed, 603 insertions(+), 467 deletions(-) create mode 100644 fonts.css create mode 100644 mobile.css diff --git a/.gitignore b/.gitignore index 4db70a3..f1c3443 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store .poop +SI* diff --git a/fonts.css b/fonts.css new file mode 100644 index 0000000..c40e393 --- /dev/null +++ b/fonts.css @@ -0,0 +1,111 @@ +/* + .-'''-. + ' _ \ + / /` '. \ _..._ + _.._ . | \ ' .' '. + .' .._|| ' | '. .-. . .| + | ' \ \ / / | ' ' | .' |_ + __| |__ `. ` ..' / | | | | .' | _ +|__ __| '-...-'` | | | |'--. .-' .' | + | | | | | | | | . | / + | | | | | | | | .'.'| |// + | | | | | | | '.'.'.'.-' / + | | | | | | | / .' \_.' + |_| '--' '--' `'-' + +*/ + +/* Main fonts used on the webpage. */ +@font-face{ + font-family: 'italic'; + src: url('fonts/cmunvi.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'header'; + src: url('fonts/KomikaTitle-Kaps-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + + +/* Custom fonts for a Special Issue can be called here below. */ +@font-face{ + font-family:'special-issue-1'; + src:url('fonts/GT-Cinetype-Bold.otf') format('opentype'); +} +@font-face{ + font-family:'special-issue-2'; + src:url('fonts/Gidugu.ttf') format('truetype'); +} +@font-face{ + font-family:'special-issue-3'; + src:url('fonts/dashness.ttf') format('truetype'); +} +@font-face { + font-family: 'special-issue-4'; + src: + url('fonts/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), + url('fonts/LibreBaskerville-Regular.woff') format('woff'), + url('fonts/LibreBaskerville-Regular.ttf') format('truetype'), + url('fonts/LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg'); +} +@font-face { + font-family: 'special-issue-5'; + src: + url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), + url('fonts/PinyonScript.woff') format('woff'), + url('fonts/PinyonScript.ttf') format('truetype'), + url('fonts/PinyonScript.svg#PinyonScript') format('svg'); +} +@font-face { + font-family: 'special-issue-5-desc'; + src: + url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), + url('fonts/NotCourierSans.woff') format('woff'), + url('fonts/NotCourierSans.ttf') format('truetype'), + url('fonts/NotCourierSans.svg#NotCourierSans') format('svg'); +} +@font-face { + font-family: 'special-issue-6'; + src: + url('fonts/ArchivoNarrow-Regular.eot?#iefix') format('embedded-opentype'), + url('fonts/ArchivoNarrow-Regular.woff') format('woff'), + url('fonts/ArchivoNarrow-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'special-issue-7'; + src: url('fonts/Vegur-Regular.otf') format('opentype'); + /* todo: check if this one is still used! */ +} +@font-face { + font-family: "special-issue-10"; + src: url("fonts/OCR_A.ttf") format('truetype'); + font-style: normal; +} +@font-face { + font-family: 'special-issue-11'; + src: url('fonts/compagnon-light.woff') format('woff'); + font-style: normal; +} +@font-face { + font-family: 'special-issue-12'; + src: url('fonts/RobotoMono-Regular.ttf') format('truetype'); + font-style: normal; +} +@font-face { + font-family: 'special-issue-13-t'; + src: url('fonts/Roboto-Regular.ttf') format('truetype'); + font-style: normal; +} +@font-face { + font-family: 'special-issue-13'; + src: url('fonts/EBGaramond-Regular.ttf') format('truetype'); + font-style: normal; +} +@font-face { + font-family: 'special-issue-13-custom'; + src: url('fonts/WFTF_custom-Regular.otf') format('truetype'); + font-style: normal; +} \ No newline at end of file diff --git a/index.html b/index.html index 0ae258e..77b847e 100644 --- a/index.html +++ b/index.html @@ -2,249 +2,262 @@ - XPUB Special Issues! + XPUB Special Issues -
-
-

XPUB Special Issues

-

XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. 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, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.

-
-

In relation to these two points, every trimester students and staff of XPUB work together on a Special Issue.

-
-

xpub.nl
- XPUB wiki

-
+ +
+
+

XPUB
SPECIAL
ISSUES

+

+ A Special Issue is a tri-annually released publication created by the XPUB master's students, allowing students and staff to explore not only the individual themes of each edition, but also the definition of what is or can be a publication. +

+ Each Special Issue addresses a specific "issue", often coordinated with outside events and collaborations, and culminates in a release party. + + The organisation, tools, and workflows are reset every trimester to both allow the rotation of roles within this publishing experiment, but also permit to explore novel collaborative methods beyond their archetypes and stereotypes. +

+
+ + + +
+ + + + + + + + + + - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + +
+
+

XPUB

+

+ XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. 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, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation. +

+ + +
+
+

+ xpub.nl + +

+ +
+
diff --git a/mobile.css b/mobile.css new file mode 100644 index 0000000..2c7a25f --- /dev/null +++ b/mobile.css @@ -0,0 +1,86 @@ +/* + .-'''-. + ' _ \ .---. + __ __ ___ / /` '. \ /| .--.| | __.....__ +| |/ `.' `. . | \ ' || |__|| | .-'' '. +| .-. .-. '| ' | '|| .--.| | / .-''"'-. `. +| | | | | |\ \ / / || __ | || |/ /________\ \ +| | | | | | `. ` ..' / ||/'__ '. | || || | +| | | | | | '-...-'` |:/` '. '| || |\ .-------------' +| | | | | | || | || || | \ '-.____...---. +|__| |__| |__| ||\ / '|__|| | `. .' + |/\'..' / '---' `''-...... -' + ' `'-'` + +*/ + +/* responsive rules for mobile */ + +body{ + min-width: 0 !important; + width: 100% !important; +} +div#wrapping{ + width: 100% !important; + max-width: 100% !important; + margin: 3em 0 !important; +} +section#intro.endpoint, +section#info.endpoint, +section#credits{ + position: relative !important; + width: calc(100% - 50px) !important; + left: 0 !important; + height: auto !important; + margin: 10px 20px 80px 30px !important; + padding: 0 !important; + font-size: 16px !important; + line-height: 1.9 !important; + hyphens: auto !important; +} + +body section#issues .issue[data-cycle="1"], +body section#issues .issue[data-cycle="2"], +body section#issues .issue[data-cycle="3"], +body section#issues .issue[data-cycle="4"], +body section#issues .issue[data-cycle="5"], +body section#issues .issue[data-cycle="6"]{ + margin-top: 0 !important; +} +section#issues .issue{ + width: 100% !important; + margin: 0 0 50px 0 !important; +} +section#issues .issue.future{ + display: none !important; +} +section#issues .issue-title, +section#issues .issue-nr, +section#issues .issue-abstract, +section#issues .issue-date, +section#issues .issue-text{ + margin:20px; + padding:0; + height: auto; +} + section#issues .issue-title, + section#issues .issue-nr{ + line-height: 50px; + margin-left: 60px + } + section#issues .issue-nr{ + max-width: 75%; + } + section#issues .issue-abstract{ + margin-bottom:0; + } + section#issues .issue-date{ + margin-top:0; + margin-left: 60px + } + section#issues .issue.future div.issue-img{ + min-height: 0; + } +a:hover{ + opacity: 1; +} diff --git a/stylesheet.css b/stylesheet.css index 52d0264..959d8d3 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,55 +1,110 @@ +/* + .---. + | | __.....__ + .-. .-| | .-'' '. + .|\ \ / /| | / .-''"'-. `. + .' |_\ \ / / | |/ /________\ \ + _ .' |\ \ / / | || | _ + .' |'--. .-' \ \ / / | |\ .-------------' .' | + . | / | | \ ` / | | \ '-.____...---. . | / + .'.'| |// | | \ / | | `. .'.'.'| |// +.'.'.-' / | '.' / / '---' `''-...... -'.'.'.-' / +.' \_.' | /|`-' / .' \_.' + `'-' '..' +*/ + + +@import 'fonts.css'; +@import 'mobile.css' screen and (max-width: 900px); + body{ - min-width: 1024px; + min-width: 720px; margin: 0; padding: 0; - font-size: 14px; - line-height: 22px; - background-color: rgb(254,247,220); + /*background-color: #fdd7d7;*/ + background: + linear-gradient(150deg, lightyellow, transparent, lightblue), + linear-gradient(190deg, yellow, transparent, pink), + linear-gradient(230deg, lightgreen, transparent, purple); + background-size: 100% 100%; + /*background: linear-gradient(180deg, lightyellow 25%, pink 25%, pink 50%, lightblue 50%, lightblue 75%, lime 75%, lime 100%);*/ + /*background: linear-gradient(90deg, yellow 25%, #e3e000 25%, #f4da73 50%, 50%, #ffe86b 75%, yellow 75%, gold 100%);*/ + /*background: linear-gradient(90deg, #a466ff 0%, #dd9fff 25%, pink 25%, pink 50%, #e5c0ff 50%, #e5c0ff 75%, #fb62fb 75%, #fbf 100%);*/ + /*background: linear-gradient(90deg, #a466ff 0%, #dd9fff 25%, pink 25%, pink 50%, #e5c0ff 50%, #e5c0ff 75%, #fb62fb 75%, #fbf 100%);*/ + /*background-size: 100% 1.9em;*/ +} + +div#wrapping{ + max-width: 1280px; + margin: 5em auto 6em; } -/* header, intro (on the left), future (for future issues) */ -.intro, .issue.future{ - font-family: 'default'; -} -header{ - position: absolute; - width: 100%; - height: 10px; - top:0; - padding:0; - z-index: 1; - background-image: url('img/header.png'); - overflow: hidden; -} -.intro{ - position: absolute; - width: 160px; - height:100vh; - top:20px; - padding:10px; - font-size: 10pt; - line-height: 14pt; - color:rgb(15,15,93); -} - .intro p{ - margin:0 0 10px; +/* SECTIONS: INTRO + INFO */ + +section#intro.endpoint, +section#info.endpoint, +section#credits{ + position: relative; + width: calc(33.3% + 180px); + left: calc(33.3% - 90px); + margin: 0; + padding: 0 15px; + border:0px solid black; + font-family: monospace; + font-size: 14px; + line-height: 1.9; + /*hyphens: auto;*/ +} + section#intro h1, + section#info h1{ + margin: 0 0 80px; + font-family: 'header', sans-serif; + font-size: 650%; + line-height: 0.9; + text-align: center; + font-weight: normal; + letter-spacing: 0.015em; + color: #b32dff; } - .intro b{ - letter-spacing: 0.05em; + section#intro p, + section#intro p{ + margin:0 0 1em; } - .intro a{ - font-size:14px; + section#intro em, + section#intro em{ + font-family: 'italic'; + font-size: 122.5%; + line-height: 1.0; } -.issue.future{ - opacity: 0.2; -} - .issue.future div.issue-img{ - width: 100%; - border:1px solid; + section#intro hr, + section#info hr{ + margin: 2em 0; + border: 0; + border-bottom: 1px solid black; } + section#credits{ + text-align: center; + color: #b32dff; + margin: 5em 0; + } + section#credits a{ + text-decoration: underline; + } + +/* SECTION: SPECIAL ISSUES */ + +section#issues{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: 14px; + line-height: 20px; +} + + +/* Custom rules per issue */ +/* The font size is adjusted here in % to balance the differences in size between the different fonts. */ -/* custom rules per issue */ -/* the font size is adjusted here in % to balance the differences in size between fonts out. */ .issue#special-issue-1{ font-family: 'special-issue-1'; letter-spacing: 0.2px; @@ -85,15 +140,14 @@ header{ } .issue#special-issue-7 { font-family: 'special-issue-7'; - font-weight: bold; - letter-spacing: -0.1em; - font-size: 110%; - } + font-weight: bold; + letter-spacing: -0.1em; + font-size: 110%; +} .issue#special-issue-7 .issue-text{ - font-weight: normal; - letter-spacing: 0em; + font-weight: normal; + letter-spacing: 0em; } - .issue#special-issue-10{ font-family: 'special-issue-10'; } @@ -101,7 +155,6 @@ header{ font-family: 'special-issue-10'; letter-spacing: -0.1em; } - .issue#special-issue-11{ font-family: 'special-issue-11'; } @@ -109,8 +162,6 @@ header{ font-family: 'special-issue-11'; letter-spacing: -0.1em; } - - .issue#special-issue-12{ font-family: 'special-issue-12'; } @@ -118,222 +169,96 @@ header{ font-family: 'special-issue-12'; letter-spacing: -0.1em; } - .issue#special-issue-13{ font-family: 'special-issue-13-t'; } +.issue#special-issue-13 .issue-date, .issue#special-issue-13 .issue-text{ font-family: 'special-issue-13'; - letter-spacing: -0.1em; + font-size: 20px; + line-height: 26px; + letter-spacing: .6px; } -/* rules for the general structural elements */ -section{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin:0 14px; - padding-top:80px; - padding-left:170px; -} -.issue{ - flex:3 3 auto; + +/* Rules for the general structural elements */ + +section#issues .issue{ + flex: 3 3 auto; display: inline-block; width: calc(33.3% - 42px); vertical-align: top; - margin:0 0 80px; - padding:0 15px; - color:rgb(40,40,40); + margin: 0 0 80px; + padding: 2em 15px; + color: rgb(40,40,40); +} +section#issues .issue[data-cycle='1']{ + margin-top:0 !important; +} +section#issues .issue[data-cycle='2']{ + margin-top: 200px !important; +} +section#issues .issue[data-cycle='3']{ + margin-top: 400px !important; } -.issue-title, .issue-nr{ +section#issues .issue[data-cycle='4']{ + margin-top: 400px !important; +} +section#issues .issue[data-cycle='5']{ + margin-top: 200px !important; +} +section#issues .issue[data-cycle='6']{ + margin-top: 0 !important; +} +section#issues .issue-title, +section#issues .issue-nr{ font-size: 275%; line-height: 40px; } -.issue-title, .issue-nr, .issue-date{ - margin:15px 0 15px 20px; +section#issues .issue-title, +section#issues .issue-nr, +section#issues .issue-date{ + margin: 30px; } - .issue-nr{ + section#issues .issue-nr{ margin-top:0; } - .issue-date{ + section#issues .issue-date{ height: 22px; } -.issue-img{ +section#issues .issue-img{ line-height: 0; } - .issue-img img{ + section#issues .issue-img img{ width: 100%; } -.issue-text{ +section#issues .issue-text{ margin:15px 10px 0 20px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } - .issue-text p{ + section#issues .issue-text p{ margin:13px 0; } /* prevent hyphens in the list of names */ - .issue-text p:last-of-type{ + section#issues .issue-text p:last-of-type{ -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } +section#issues .issue.future .issue-img{ + border:1px solid black; +} /* links */ - a, a:active, a:visited{ - color:inherit; +a, a:active, a:visited{ + color: inherit; text-decoration: none; } a img{ - -webkit-filter:grayscale(100%); + -webkit-filter: grayscale(100%); } a img:hover{ - -webkit-filter:grayscale(0%); -} - -.issue-img-13 img:hover{ - -webkit-filter:invert(100%); -} - -/* responsive rules for mobile */ -@media (max-width: 500px) { - body{ - min-width: 0; - font-size: 16px; - line-height: 24px; - } - div.intro{ - position: relative; - width: calc(100% - 40px); - height: auto; - margin:10px 20px 80px 20px; - padding:0; - font-size: 18px; - line-height: 26px; - } - div.background img{ - position: fixed; - width: 90%; - margin:50px 5%; - left:0; - } - section{ - width: 100%; - left:0; - top:0; - margin:0; - padding:0; - } - .issue{ - width: 100%; - margin: 0 0 80px 0; - } - .issue-title, .issue-nr, .issue-abstract, .issue-date, .issue-text{ - margin:20px; - padding:0; - height: auto; - } - .issue-title, .issue-nr{ - line-height: 50px; - margin-left: 60px - } - .issue-nr{ - max-width: 75%; - } - .issue-abstract{ - margin-bottom:0; - } - .issue-date{ - margin-top:0; - margin-left: 60px - } - .issue.future div.issue-img{ - min-height: 0; - } - a:hover{ - opacity: 1; - } -} - -/* fonts */ -@font-face{ - font-family:'special-issue-1'; - src:url('fonts/GT-Cinetype-Bold.otf'); -} -@font-face{ - font-family:'special-issue-2'; - src:url('fonts/Gidugu.ttf'); -} -@font-face{ - font-family:'special-issue-3'; - src:url('fonts/dashness.ttf'); -} -@font-face { - font-family: 'special-issue-4'; - src: url('fonts/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/LibreBaskerville-Regular.woff') format('woff'), url('fonts/LibreBaskerville-Regular.ttf') format('truetype'), url('fonts/LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg'); -} -@font-face { - font-family: 'special-issue-5'; - src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('fonts/PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg'); -} -@font-face { - font-family: 'special-issue-5-desc'; - src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg'); -} -@font-face { - font-family: 'special-issue-6'; - src: url('fonts/ArchivoNarrow-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/ArchivoNarrow-Regular.woff') format('woff'), url('fonts/ArchivoNarrow-Regular.ttf') format('truetype'); -} -@font-face { - font-family: 'special-issue-7'; - src: url('07/fonts/Vegur-Regular.otf'); -} -@font-face{ - font-family:'default'; - src:url('fonts/cmunvt.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} -@font-face{ - font-family:'default'; - src:url('fonts/cmunvi.ttf') format('truetype'); - font-style: italic; -} - -@font-face { - font-family: "special-issue-10"; - src: url("10/font/OCR_A.ttf"); - font-style: normal; -} - - -@font-face { - font-family: 'special-issue-11'; - src: url('11/font/compagnon/compagnon-light.woff') format('woff'); - font-style: normal; -} - -@font-face { - font-family: 'special-issue-12'; - src: url('12/font/RobotoMono-Regular.ttf') format('truetype'); - font-style: normal; -} - -@font-face { - font-family: 'special-issue-13-t'; - src: url('fonts/Roboto-Regular.ttf'); - font-style: normal; -} - -@font-face { - font-family: 'special-issue-13'; - src: url('fonts/EBGaramond-Regular.ttf'); - font-style: normal; -} - -@font-face { - font-family: 'special-issue-13-custom'; - src: url('fonts/WFTF_custom-Regular.otf'); - font-style: normal; + -webkit-filter: grayscale(0%); }