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.
325 lines
6.5 KiB
CSS
325 lines
6.5 KiB
CSS
/*
|
|
.---.
|
|
| | __.....__
|
|
.-. .-| | .-'' '.
|
|
.|\ \ / /| | / .-''"'-. `.
|
|
.' |_\ \ / / | |/ /________\ \
|
|
_ .' |\ \ / / | || | _
|
|
.' |'--. .-' \ \ / / | |\ .-------------' .' |
|
|
. | / | | \ ` / | | \ '-.____...---. . | /
|
|
.'.'| |// | | \ / | | `. .'.'.'| |//
|
|
.'.'.-' / | '.' / / '---' `''-...... -'.'.'.-' /
|
|
.' \_.' | /|`-' / .' \_.'
|
|
`'-' '..'
|
|
*/
|
|
|
|
|
|
@import 'fonts.css';
|
|
@import 'mobile.css' screen and (max-width: 900px);
|
|
@import 'sticker.css';
|
|
|
|
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;
|
|
} */
|
|
|
|
.issue#special-issue-14{
|
|
font-family: 'special-issue-14';
|
|
}
|
|
|
|
.issue#special-issue-16{
|
|
font-family: 'special-issue-16';
|
|
}
|
|
|
|
#special-issue-16 .issue-title {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
#special-issue-16 .issue-title {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
#special-issue-16 {
|
|
position: relative;
|
|
}
|
|
|
|
#special-issue-16 * {
|
|
position: relative;
|
|
}
|
|
|
|
/* #special-issue-16 .issue-img {
|
|
position: relative;
|
|
border: 1px solid currentColor;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
} */
|
|
|
|
#special-issue-17 {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
#special-issue-17 .issue-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 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%);
|
|
}
|
|
|
|
#special-issue-13 img:hover{
|
|
-webkit-filter: invert();
|
|
}
|
|
|
|
|
|
#special-issue-14 img:hover{
|
|
-webkit-filter: invert();
|
|
}
|
|
|
|
#issue-img-17{
|
|
border:none;
|
|
} |