/* .---. | | __.....__ .-. .-| | .-'' '. .|\ \ / /| | / .-''"'-. `. .' |_\ \ / / | |/ /________\ \ _ .' |\ \ / / | || | _ .' |'--. .-' \ \ / / | |\ .-------------' .' | . | / | | \ ` / | | \ '-.____...---. . | / .'.'| |// | | \ / | | `. .'.'.'| |// .'.'.-' / | '.' / / '---' `''-...... -'.'.'.-' / .' \_.' | /|`-' / .' \_.' `'-' '..' */ @import 'fonts.css'; @import 'mobile.css' screen and (max-width: 900px); body{ min-width: 720px; top: 0; left: 0; margin: 0; padding: 0; background: linear-gradient(150deg, lightyellow, transparent, lightblue), linear-gradient(190deg, yellow, transparent, pink), linear-gradient(230deg, lightgreen, transparent, purple); background-size: 100% 100%; } div#wrapping{ max-width: 1280px; margin: 5em auto 6em; } /* SECTION: SPECIAL ISSUES */ section#issues{ display: grid; grid-template-columns: repeat(3, calc(33.3% - 42px)); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; font-size: 14px; line-height: 20px; } /* Custom typographic rules per issue */ /* The font size is adjusted here in % to balance the differences in size between the different fonts. */ .issue#special-issue-1{ font-family: 'special-issue-1'; letter-spacing: 0.2px; } .issue#special-issue-2{ font-family: 'special-issue-2'; font-size: 170%; letter-spacing: 0.5px; } .issue#special-issue-3{ font-family: 'special-issue-3'; font-size: 120%; letter-spacing: 2.5px; } .issue#special-issue-4{ font-family: 'special-issue-4'; font-size: 90%; } .issue#special-issue-5{ font-family: 'special-issue-5'; font-size: 100%; } .issue#special-issue-5 .issue-text { font-family: 'special-issue-5-desc'; } .issue#special-issue-6{ font-family: 'special-issue-6'; font-size: 95%; } .issue#special-issue-6 .issue-text{ font-family: 'special-issue-6'; font-size: 115%; } .issue#special-issue-7 { font-family: 'special-issue-7'; font-weight: bold; letter-spacing: -0.1em; font-size: 110%; } .issue#special-issue-7 .issue-text{ font-weight: normal; letter-spacing: 0em; } .issue#special-issue-10{ font-family: 'special-issue-10'; } .issue#special-issue-10 .issue-text{ font-family: 'special-issue-10'; letter-spacing: -0.1em; } .issue#special-issue-11{ font-family: 'special-issue-11'; } .issue#special-issue-11 .issue-text{ font-family: 'special-issue-11'; letter-spacing: -0.1em; } .issue#special-issue-12{ font-family: 'special-issue-12'; } .issue#special-issue-12 .issue-text{ 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'; font-size: 20px; line-height: 26px; letter-spacing: .6px; } /* SECTIONS: INTRO + INFO */ section#intro.endpoint, section#info.endpoint{ position: relative; width: calc(33.3% + 180px); left: calc(33.3% - 90px); margin: 0; padding: 0 15px; font-family: monospace; font-size: 14px; line-height: 1.9; } section#intro.endpoint{ margin-bottom: 100px; } section#info.endpoint{ margin-top: 100px; } 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; } section#intro p, section#intro p{ margin:0 0 1em; } section#intro em, section#intro em{ font-family: 'italic'; font-size: 122.5%; line-height: 0.0; } section#intro hr, section#info hr{ margin: 2em 0; border: 0; border-bottom: 1px solid black; } section#info p#xpubsite{ text-align: center; color: #b32dff; margin: 5em 0; } section#info p#xpubsite a{ text-decoration: underline; } /* GENERAL ELEMENTS */ section#issues .issue{ margin: 0; padding: 2em 15px; color: rgb(40,40,40); } section#issues .issue[data-cycle='1']{ margin-top:0 !important; grid-column: 1; } section#issues .issue[data-cycle='2']{ margin-top: 200px !important; grid-column: 2; } section#issues .issue[data-cycle='3']{ margin-top: 400px !important; grid-column: 3; } section#issues .issue[data-cycle='6']{ margin-top: 400px !important; grid-column: 1; } section#issues .issue[data-cycle='5']{ margin-top: 200px !important; grid-column: 2; } section#issues .issue[data-cycle='4']{ margin-top: 0 !important; grid-column: 3; } section#issues .issue-title, section#issues .issue-nr{ font-size: 275%; line-height: 40px; } section#issues .issue-title, section#issues .issue-nr, section#issues .issue-date{ margin: 30px; } section#issues .issue-nr{ margin-top:0; } section#issues .issue-date{ height: 22px; } section#issues .issue-img{ line-height: 0; } section#issues .issue-img img{ width: 100%; } section#issues .issue-text{ margin:15px 10px 0 20px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } section#issues .issue-text p{ margin:13px 0; } /* prevent hyphens in the list of names */ 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; text-decoration: none; } a img{ -webkit-filter: grayscale(100%); } a img:hover{ -webkit-filter: grayscale(0%); }