You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

255 lines
5.5 KiB
CSS

/*
.---.
| | __.....__
.-. .-| | .-'' '.
.|\ \ / /| | / .-''"'-. `.
.' |_\ \ / / | |/ /________\ \
_ .' |\ \ / / | || | _
.' |'--. .-' \ \ / / | |\ .-------------' .' |
. | / | | \ ` / | | \ '-.____...---. . | /
.'.'| |// | | \ / | | `. .'.'.'| |//
.'.'.-' / | '.' / / '---' `''-...... -'.'.'.-' /
.' \_.' | /|`-' / .' \_.'
`'-' '..'
*/
@import 'fonts.css';
@import 'mobile.css' screen and (max-width: 900px);
body{
min-width: 720px;
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: flex;
flex-direction: row;
flex-wrap: wrap;
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;
border:0px solid black;
font-family: monospace;
font-size: 14px;
line-height: 1.9;
}
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{
flex: 3 3 auto;
display: inline-block;
width: calc(33.3% - 42px);
vertical-align: top;
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;
}
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;
}
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%);
}