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.

283 lines
5.6 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;
}
/* rules for the general structural elements */
section{
display: flex;
flex-direction: columns;
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%);
}
/* 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;
}