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.

230 lines
3.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, footer, future */
header, .intro, .issue.future, footer{
font-family: 'default';
}
header{
position: absolute;
width: 100%;
height: 30px;
top:0;
padding:0;
z-index: 1;
background-image: url('img/pix.png');
overflow: hidden;
}
footer{
width: auto;
margin: 0;
padding: 10px 20px;
}
.intro{
position: absolute;
width: 150px;
height:100vh;
top:30px;
padding:10px;
font-size: 10pt;
line-height: 14pt;
color:rgb(15,15,93);
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.intro p{
margin:0 0 10px;
}
.intro a{
font-size:14px;
}
.issue.future{
opacity: 0.2;
}
.issue.future .issue-title{
font-size: smaller;
}
.issue.future .issue-title:after{
content: '...';
}
.issue.future a:hover{
opacity: 1;
}
.issue.future img{
border:none;
}
/* custom rules per issue */
.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: 100%;
}
/* rules for the general structural elements */
section{
display: flex;
flex-direction: columns;
flex-wrap: wrap;
margin:0 14px;
padding-top:90px;
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 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;
}
.issue a, .issue a:active, .issue a:visited{
-webkit-filter:grayscale(100%);
}
a:hover{
-webkit-filter:grayscale(0%);
}
/* 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
}
a:hover{
opacity: 1;
}
}
@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('LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('LibreBaskerville-Regular.woff') format('woff'), url('LibreBaskerville-Regular.ttf') format('truetype'), url('LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family:'default';
src:url('fonts/cmunvt.ttf');
font-weight: normal;
font-style: normal;
}