@import url(reset.css);
html {
min-height:100%;
}
html, body {
width:100%;
padding:0px;
margin:0px;
}
body {
color:#000;
font-size:18px;/* 1 em is 16 px, which is a good readable font size according to Udacity courses */
line-height 1.2 em; /* Also adviced by Udacity */
font-family:arial, sans-serif;
padding:0.1% 0%; /* Removing this makes the whole layout behave differently, why? */
font-family: 'Goudy Bookletter 1911', serif;
}
/* Hack for lots of mobile devices and Chrome on Android to get a fixed background on the page
http://stackoverflow.com/questions/21240465/alternatives-to-background-attachment-fixed
*/
div.fixedBg {
background-color:#515F60;
background-image:url("../img/background-small.jpg");
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
margin:0em;
padding:0em;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
-webkit-transform: translateZ(0);
pointer-events: none; /* This div pretends not to be here and not to catch pointer events */
}
/*************************************************
* FONTS
*************************************************/
@font-face {
font-family: 'icons';
src: url('fonts/icons.eot?4mh7nh');
src: url('fonts/icons.eot?4mh7nh#iefix') format('embedded-opentype'),
url('fonts/icons.ttf?4mh7nh') format('truetype'),
url('fonts/icons.woff?4mh7nh') format('woff'),
url('fonts/icons.svg?4mh7nh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Period Freak';
src: url('fonts/paranoid_freak.eot?4mh7nh');
src: url('fonts/paranoid_freak.eot?4mh7nh#iefix') format('embedded-opentype'),
url('fonts/paranoid_freak.ttf?4mh7nh') format('truetype'),
url('fonts/paranoid_freak.woff?4mh7nh') format('woff'),
url('fonts/paranoid_freak.svg?4mh7nh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
font-family: "icons" !important;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before { content: "\e900"; }
.icon-info:before { content: "\e901"; }
.icon-pictures:before { content: "\e902"; }
.icon-menu-open:before { content: "\e903"; }
.icon-menu-close:before { content: "\e904"; }
/*************************************************
* GENERAL STYLING
*************************************************/
h1, h2, h3 {
margin:1em 0em;
color:#ddd;
font-size:1.5em;
font-family: 'Goudy Bookletter 1911', serif;
}
h2 {
font-size:1.2em;
margin:auto;
}
h3 {
font-size:1.1em;
margin:auto;
}
p {
margin:1em 0em;
}
a {
color:#A1A9AB;
}
a:visited {
color:#A1A9AB;
}
a:hover {
color:#C2CDCF;
text-decoration:none;
}
strong {
font-weight:bold;
color:#ddd;
}
/* Taken from https://benmarshall.me/responsive-iframes/ */
.iframe-container4x3 {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 75%; /* For 16 x 9 this should be 56.25%*/
}
.iframe-container4x3 iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/*************************************************
* HEADER
*************************************************/
header {
height:5.5em;
padding:0 0.5em;
position:fixed;
width:calc(100% - 1em);
background-color:#303B35;
z-index:10; /* Needs to be higher than everything else so relatively positioned elements also go UNDER it on scrolling */
}
header h1 {
font-size:3em;
margin:0.1em 0em;
color:#fff;
text-align:right;
font-family:'Period Freak', sans-serif;
font-style:italic;
}
header h1 span#subtitle {
font-size:0.5em;
color:#ddd;
}
span.icon-menu-open,/* Will be hidden on larger screens */
span.icon-menu-close {
font-size:2em;
margin:0.5em;
float:left;
color:#fff;
}
header p {
text-align:right;
margin:0 0 0.5em 0;
color:#fff;
}
header p a {
color:#fff;
text-decoration:none;
}
/*************************************************
* MENU
*************************************************/
nav.Menu {
width:100%;
background-color:#303B35;
position: absolute;
/* This transform moves the drawer off canvas. */
-webkit-transform: translate(-105%, -0.5em);
transform: translate(-105%, -0.5em);
/* Optionally, we animate the drawer. */
transition: transform 0.3s ease;
}
nav.MenuVisible {
-webkit-transform: translate(-0.5em, -0.5em);
transform: translate(-0.5em, -0.5em);
}
.Menu ul li {
float:left;
clear:left;
display:block;
width:100%;
min-height:3em; /* 48 recommended pixels devided by fontsize of 16 px gives 3 em */
border-top:0.1em solid white;
border-bottom:0.1em solid white;
}
.Menu ul li a,
.Menu ul li span {
display:block;
width:100%;
text-align:center;
line-height:3em; /* Vertically centering */
color:#fff;
text-decoration:none;
}
.Menu ul li.Selected a,
.Menu ul li a:hover {
text-decoration:underline;
}
/*************************************************
* MAIN BLOCK
*************************************************/
main {
margin-top:6em;
padding:0.5em 0.5em;
background: rgb(48, 59, 53); /* The Fallback */
background: rgba(48, 59, 53, 0.8);
color:#fff;
border-radius:1em;
border-color:#303B35;
border-width:0.3em 0.2em;
border-style:solid;
display:block; /* IE 11 needs this to correctly display the element. How retarded! */
}
table#personages {
width:100%;
text-align:left;
border-spacing: 0.5em;
border-collapse: initial;
}
table#personages th {
font-weight:bold;
}
table#personages td {
border-bottom:1px solid #9fa09f !important;
}
table#personages td:nth-child(2) {
text-align:center;
}
/*************************************************
* MEDIA QUERIES
*************************************************/
/* Everything bigger than a phone screen */
@media only screen and (min-width: 401px) {
div.fixedBg {
background-image:url("../img/background-medium.jpg");
}
header h1 {
font-size:4em;
}
header h1 br { display:none;}
span.icon-menu-open {
display:none;
}
nav.Menu {
width:100%;
background-color:#303B35;
position: absolute;
-webkit-transform: translate(-0.5em, -0.5em);
transform: translate(-0.5em, -0.5em);
}
.Menu ul li {
clear:none;
margin:0 2%;
width: auto;
max-width:calc((100% - 15%) / 7);
min-height:auto;
border:none;
text-align:center;
font-size:0.6em;
}
.Menu ul li a {
display:inline;
width:auto;
line-height:auto;
}
main {
margin-top:9em; /* To get below the inserted menu */
}
}
@media only screen and (min-width: 481px) {
.Menu ul li {
margin:0 1.5%;
max-width:calc((100% - 15%) / 7);
font-size:0.8em;
}
header h1 br { display:none;}
}
/* This is where lines of text are at their maximum so the whole page gets a margin */
@media only screen and (min-width: 670px) {
div.fixedBg {
background-image:url("../img/background-large.jpg");
}
main, header {
max-width:670px;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}
header h1 {
font-size:5em;
}
header h1 br { display:none;}
nav {
border-radius:0 0 0.5em 0.5em;
}
.Menu ul li {
clear:none;
margin:0 1%;
width: calc((100% - 15%) / 7);
}
}