body{ /*background-color:rgb(212, 210, 251);*/ margin: 0; padding: 0; font-size: 14px; line-height: 24px; } /* header, footer, future */ header, .issue.future, footer{ font-family: 'sans-serif'; } header, footer{ width: auto; margin: 0; padding: 10px 20px; } header{ margin:27px; } .issue.future .issue-title{ font-size: 14px; margin-left: 20px; } .issue.future .issue-title:after, .issue.future .issue-abstract:after, .issue.future .issue-date:after{ content: '...'; } /* custom rules per issue */ .issue#special-issue-1{ font-family: 'special-issue-1'; font-size: 110%; 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.8px; } .issue#special-issue-4{ font-family: 'special-issue-4'; font-size: 90%; } /* rules for the general structural elements */ section{ display: flex; flex-direction: columns; flex-wrap: wrap; margin:0 12px; } div.background img{ position: fixed; width: 100vw; height: auto; -webkit-filter: blur(25px); opacity: 0.85; z-index: -1; display: none; } .issue{ flex:3 3 auto; display: inline-block; width: calc(33.3% - 30px); vertical-align: top; margin:0 0 80px; padding:50px 15px; color:rgb(40,40,40); } .issue-title{ height: 160px; font-size: 350%; line-height: 55px; margin-left: 15px; } .issue-abstract, .issue-nr, .issue-date{ font-size: smaller; line-height: 16px; margin-left:20px; } .issue-nr{ /*margin-left:0; border:1px solid; border-right:1px solid rgba(120,120,120,.5); border-bottom:1px solid rgba(120,120,120,.5); border-radius: 15px 15px 0 0; padding:10px 10px 10px 20px; margin-bottom:15px;*/ } .issue-date{ margin-bottom:15px; } .issue-img img{ width: 100%; } .issue-text{ margin:13px 10px 0 20px; } p{ margin:12px 0; } /* other */ a, a:active, a:visited{ color:inherit; text-decoration: none; } a:hover{ opacity: 0.5; } /* smaller screens */ @media (max-width: 1024px) { body{ font-size: 20px; line-height: 32px; } .issue{ width: 100%; margin: 0; } .issue-abstract, .issue-date, .issue-text, .issue-nr, .issue.future .issue-title{ margin-left: 100px; margin-right: 40px; } .issue-title{ max-width: 500px; height: auto; font-size: 300%; line-height: 70px; margin-left:90px; margin-top:20px; margin-bottom:15px; } .issue-img img{ width: 100%; max-width: 600px; } .issue-text{ max-width: 600px; } } @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/NotCourierSans.ttf'); font-weight: normal; font-style: normal; } @font-face{ font-family:'default'; src:url('fonts/NotCourierSans-Bold.ttf'); font-weight: bold; font-style: normal; }