zurück zur Seite des Unterrichtsszenarios

layout.css

/*!
 * layout.css v4.2.0 (for Thesis Project)
 * Copyright (C) 2016 Simon Marik <simon.marik@univie.ac.at>
 * Licensed under the GNU General Public License v3.0
 */
 
@import url("http://fonts.googleapis.com/css?family=Oxygen:300,400,700");
 
html {
   font-family: "Oxygen";
}
 
* {
    box-sizing: border-box;
}
 
body {
   margin: 0;
}
 
h2,h3,h4 { 
    font-weight: 400;
}
 
p {
    font-weight: 300;
}
 
main {
   margin: 4em 1em 2em 1em;
}
 
.container {
   margin: 0 15% 0 15%;
}
 
nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 3em;
}
 
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px #ddd
}
 
ul a {
    text-decoration: none;
}
 
nav li {
    float: left;
}
 
nav li a {
    display: block;
    color: #333;
    font-weight: 300;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
nav li a:hover {
    background-color: #eee;
    color: #000;
    transition: 0.3s;
}
 
.nav-active {
    background-color: #eee;
    color: #000;
    cursor: default;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .125);
}
 
.nav-active a {
    color: #55c801;
}
 
.nav-active a:hover {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    transition: 0s;
}
 
footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 2.5em;
   border-top: 1px #ddd solid;
   font-weight: 300;
   font-size: 10pt;
   z-index: 9999;
   background-color: #fff;
}
 
footer p {
   margin: 0.8em 1em 0 1em;
   font-size: 9pt;
   color: #333;
}
 
footer p a {
    text-decoration: none;
}
 
a {
    text-decoration: underline;
    color: #333;
}
 
a:hover {
   color: #55c801;
   transition: 0.3s;
}
 
.row::after {
   content: "";
   clear: both;
   display: block;
}
 
.col-1 {
   width: 8.33%;
}
.col-2 {
   width: 16.66%;
}
.col-3 {
   width: 25%;
}
.col-4 {
   width: 33.33%;
}
.col-5 {
   width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
 
[class*="col-"] {
    float: left;
    padding: 0 0.8em 0 0.8em;
    font-weight: 300;
}
 
.well {
    background-color: #fafafa;
    border: 1px #ccc solid;
    padding: 0 0.9em 0.1em 0.9em;
    border-radius: 0.3em;
    margin: 0 0 1em 0;
}
 
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
 
.jumbotron {
    background-image: url("jumbotron-bg.png");
    background-size: 100% 100%;
    background-color: #eee;
    height: 20em;
    width: 100%;
    padding: 1.7em 2.5em 2em 2.5em;
    margin-bottom: 3em;
    border-radius: 0.3em;
}
 
.jumbotron h1 {
    margin-top: 0;
    font-size: 38pt;
}
 
.jumbotron p {
   font-size: 17pt;
}
 
/**
 * MEDIA QUERIES
 *
 * 1. Tablet portrait and landscape orientation
 * 2. Smartphone portrait and landscape orientation
 * 3. Smaller devices
 */
 
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .container {
        margin: 0 10% 0 10%;
    }
    .jumbotron {
        background-size: 150% 100%;
    }
    .jumbotron h1 {
        font-size: 31pt;
    }
    .jumbotron p {
        font-size: 15pt;
    }
    [class*="col-"] {
        width: 100%;
        padding: 0;
    } 
}
@media screen and (min-width: 320px) and (max-width: 600px) {
    .container {
        margin: 0 2% 0 2%;
    }
    .jumbotron {
        background-size: 200% 100%;
        padding: 1em 1em 1em 1em;
    }
    .jumbotron h1 {
        font-size: 27pt;
    }
    .jumbotron p {
        font-size: 14pt;
    }
    [class*="col-"] {
        width: 100%;
        padding: 0;
    }
    footer p {
        margin: 0.65em 1em 0 1em;
    }
    .quicklinks a {
        font-size: 11pt;
    }
    th {
        font-size: 10pt;
    } 
}
@media screen and (max-width: 320px) {
    .container {
        margin: 0 2% 0 2%;
    }
    .jumbotron {
        background-size: 200% 100%;
    }
    .jumbotron h1 {
        font-size: 23pt;
    }
    .jumbotron p {
        font-size: 12pt;
    }
    [class*="col-"] {
        width: 100%;
        padding: 0;
    }
    footer p {
        margin: 1em 1em 0 1em;
        font-size: 7pt;
    }
    .quicklinks a {
        font-size: 11pt;
    }
    th {
        font-size: 10pt;
    } 
}