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.
340 lines
6.8 KiB
CSS
340 lines
6.8 KiB
CSS
body{
|
|
min-width: 1024px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
background-color: rgb(254,247,220);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.intro b{
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.intro a{
|
|
font-size:14px;
|
|
}
|
|
.issue.future{
|
|
opacity: 0.2;
|
|
}
|
|
.issue.future div.issue-img{
|
|
width: 100%;
|
|
border:1px solid;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.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-text{
|
|
font-family: 'special-issue-13';
|
|
letter-spacing: -0.1em;
|
|
}
|
|
|
|
/* 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;
|
|
display: inline-block;
|
|
width: calc(33.3% - 42px);
|
|
vertical-align: top;
|
|
margin:0 0 80px;
|
|
padding:0 15px;
|
|
color:rgb(40,40,40);
|
|
}
|
|
.issue-title, .issue-nr{
|
|
font-size: 275%;
|
|
line-height: 40px;
|
|
}
|
|
.issue-title, .issue-nr, .issue-date{
|
|
margin:15px 0 15px 20px;
|
|
}
|
|
.issue-nr{
|
|
margin-top:0;
|
|
}
|
|
.issue-date{
|
|
height: 22px;
|
|
}
|
|
.issue-img{
|
|
line-height: 0;
|
|
}
|
|
.issue-img img{
|
|
width: 100%;
|
|
}
|
|
.issue-text{
|
|
margin:15px 10px 0 20px;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
.issue-text p{
|
|
margin:13px 0;
|
|
}
|
|
/* prevent hyphens in the list of names */
|
|
.issue-text p:last-of-type{
|
|
-webkit-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
/* links */
|
|
a, a:active, a:visited{
|
|
color:inherit;
|
|
text-decoration: none;
|
|
}
|
|
a img{
|
|
-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;
|
|
}
|