Difference between revisions of "Template:TU Dresden-playgroundStyle/CSS"

Line 145: Line 145:
 
.clearfix:after { clear: both; }
 
.clearfix:after { clear: both; }
 
.clearfix { zoom: 1; }
 
.clearfix { zoom: 1; }
 +
 +
/* OUR STYLE */
 +
 +
:root {
 +
--logo-dark-blue: rgb(28, 20, 68);
 +
    --logo-bright-blue: rgb(71, 51, 174);
 +
    --logo-pink: rgb(224, 18, 100);
 +
 +
    --logo-dark-blue-opacity: rgba(28, 20, 68, .9);
 +
    --logo-pink-opacity: rgba(224, 18, 100, .8);
 +
    --bright-bg-color: rgba(244, 249, 255, 1);
 +
    --logo-bright-blue-opacity: rgba(71, 51, 174, .95);
 +
    --headfont: 'Orbitron', sans-serif;
 +
}
 +
 +
/* Pictures and code for twinkling starts taken from: http://www.script-tutorials.com/night-sky-with-twinkling-stars */
 +
 +
@keyframes move-twink-back {
 +
    from {background-position:0 0;}
 +
    to {background-position:-10000px 5000px;}
 +
}
 +
@-webkit-keyframes move-twink-back {
 +
    from {background-position:0 0;}
 +
    to {background-position:-10000px 5000px;}
 +
}
 +
@-moz-keyframes move-twink-back {
 +
    from {background-position:0 0;}
 +
    to {background-position:-10000px 5000px;}
 +
}
 +
@-ms-keyframes move-twink-back {
 +
    from {background-position:0 0;}
 +
    to {background-position:-10000px 5000px;}
 +
}
 +
 +
.stars, .twinkling {
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  width:100%;
 +
  height:100%;
 +
  display:block;
 +
}
 +
 +
.stars {
 +
  background:#000 url(T--TU_Dresden--stars.png) repeat top center;
 +
  z-index:-3;
 +
  position: fixed;
 +
}
 +
 +
.twinkling{
 +
  background:transparent url(T--TU_Dresden--twinkling.png) repeat top center;
 +
  z-index:-2;
 +
  position: fixed;
 +
 +
  -moz-animation:move-twink-back 300s linear infinite;
 +
  -ms-animation:move-twink-back 300s linear infinite;
 +
  -o-animation:move-twink-back 300s linear infinite;
 +
  -webkit-animation:move-twink-back 300s linear infinite;
 +
  animation:move-twink-back 300s linear infinite;
 +
}
 +
 +
 +
 +
main {
 +
font-family: 'Open Sans', sans-serif;
 +
line-height: 150%;
 +
margin-right: 30px;
 +
margin-left: 30px;
 +
}
 +
 +
header {
 +
height: 80px;
 +
}
 +
 +
#galaxy {
 +
background-image: url(T--TU_Dresden--galaxy.png);
 +
background-size: contain;
 +
}
 +
 +
.contentbox {
 +
text-align: justify;
 +
background: var(--bright-bg-color);
 +
box-shadow: 0 12px 24px rgba(0,0,0,0.8),0 24px 64px rgba(0,0,0,0.3);
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
padding: 40px;
 +
}
 +
 +
.box-heading {
 +
background: var(--logo-dark-blue);
 +
color: var(--bright-bg-color);
 +
box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 +
display: inline-block;
 +
font-size: 1em;
 +
position: relative;
 +
padding: 5px;
 +
padding-right: 20px;
 +
padding-left: 20px;
 +
margin-bottom: -30px;
 +
top: -50px;
 +
}
 +
 +
h1 {
 +
font-family: var(--headfont);
 +
font-weight: medium;
 +
}
 +
 +
h2 {
 +
font-size: 1.5em;
 +
font-family: var(--headfont);
 +
font-weight: medium;
 +
}
 +
 +
nav {
 +
height: 70px;
 +
background: var(--logo-dark-blue-opacity);
 +
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
right: 0;
 +
z-index: 1;
 +
}
 +
 +
nav ul {
 +
float: right;
 +
}
 +
 +
nav ul li{
 +
display: inline-block;
 +
}
 +
 +
nav ul li a {
 +
display: block;
 +
font-size: .9em;
 +
text-align: center;
 +
height: 70px;
 +
line-height: 42px;
 +
padding-top: 15px;
 +
padding-left:15px;
 +
padding-right: 15px;
 +
transition: height 0.5s;
 +
}
 +
 +
nav ul a:hover, nav ul li:hover .dropbtn{
 +
background-color: var(--logo-pink-opacity);
 +
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
height: 80px;
 +
}
 +
 +
nav ul li:hover .nav-dropdown {
 +
    display: block;
 +
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
}
 +
 +
.nav-text {
 +
color: var(--bright-bg-color);
 +
text-decoration: none;
 +
font-weight: medium;
 +
letter-spacing: .05em;
 +
font-family: var(--headfont);
 +
}
 +
 +
.nav-dropdown {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: var(--logo-bright-blue-opacity);
 +
    z-index: 1;
 +
}
 +
 +
.nav-dropdown li {
 +
display: block;
 +
}
 +
 +
.nav-dropdown li a {
 +
display: block;
 +
color: var(--bright-bg-color);
 +
height: 45px;
 +
padding-top: 0px;
 +
padding-left: 5px;
 +
padding-right: 5px;
 +
text-decoration: none;
 +
font-weight: medium;
 +
font-size: .8em;
 +
transition: 0.25s;
 +
}
 +
 +
.nav-dropdown a:hover {
 +
background-color: var(--logo-dark-blue-opacity);
 +
color: var(--bright-bg-color);
 +
box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 +
height: 45px;
 +
}
 +
 +
.nav-mobile {
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  height: 80px;
 +
  width: 80px;
 +
}
 +
 +
#nav-toggle {
 +
position: absolute;
 +
right: 18px;
 +
    top: 28px;
 +
    cursor: pointer;
 +
    padding: 10px 35px 16px 0px;
 +
}
 +
 +
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
 +
cursor: pointer;
 +
    border-radius: 1px;
 +
    height: 4px;
 +
    width: 30px;
 +
    background: rgba(244, 249, 255, 1); /*color ist the --bright-bg-color, unfortunately Edge has issues with using var() in pseudo elements*/
 +
    position: absolute;
 +
    display: block;
 +
    content: '';
 +
    transition: all 300ms ease-in-out;
 +
}
 +
 +
#nav-toggle span:before {
 +
top: -10px;
 +
background: rgba(244, 249, 255, 1);
 +
}
 +
 +
#nav-toggle span:after {
 +
bottom: -10px;
 +
background: rgba(244, 249, 255, 1);
 +
}
 +
 +
#nav-toggle.open span {
 +
background-color: transparent;
 +
}
 +
 +
#nav-toggle.open span:before {
 +
top: 0;
 +
transform: rotate(45deg);
 +
}
 +
 +
#nav-toggle.open span:after {
 +
top: 0;
 +
transform: rotate(-45deg);
 +
}
 +
 +
#logo {
 +
  top: 0;
 +
left: 0;
 +
position: absolute;
 +
margin: -10px;
 +
width: 230px;
 +
height: 230px;
 +
border-radius: 115px;
 +
background: var(--logo-dark-blue-opacity);
 +
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
}
 +
 +
#logo img {
 +
width: 200px;
 +
margin: 15px;
 +
}
 +
 +
#ufo {
 +
  bottom: 10px;
 +
right: 0;
 +
float: right;
 +
position: fixed;
 +
width: 250px;
 +
height: 253px;
 +
background-image: url(T--TU_Dresden--UFO.png);
 +
background-size: contain;
 +
}
 +
 +
.ufo-links {
 +
font-size: .85em;
 +
text-align: center;
 +
width: 100%;
 +
bottom: 20px;
 +
position: absolute;
 +
}
 +
 +
@media only screen and (min-width: 1200px) {
 +
main, .wrapper {
 +
margin-right: 20%;
 +
margin-left: 5%;
 +
}
 +
.navbar {
 +
    display: block !important;
 +
}
 +
}
 +
 +
@media screen and (min-width: 992px) and (max-width: 1199px){
 +
main {
 +
margin-right: 250px;
 +
}
 +
.navbar {
 +
    display: block !important;
 +
}
 +
.wrapper {
 +
margin-right: auto;
 +
margin-left: auto;
 +
padding-right: 30px;
 +
padding-left: 30px;
 +
}
 +
}
 +
 +
@media only screen and (max-width: 991px) {
 +
#ufo {
 +
display: none;
 +
}
 +
 +
#logo {
 +
  top: 0;
 +
left: 15px;
 +
position: absolute;
 +
margin: 0;
 +
width: 80px;
 +
height: 80px;
 +
border-radius: 40px;
 +
background: var(--logo-dark-blue-opacity);
 +
box-shadow: none;
 +
}
 +
 +
#logo img {
 +
width: 75px;
 +
margin: 2px;
 +
}
 +
 +
nav {
 +
width: 100%;
 +
padding-top: 80px;
 +
}
 +
 +
nav ul {
 +
width: 100%;
 +
display: block;
 +
background-color: var(--logo-dark-blue-opacity);
 +
position: relative;
 +
}
 +
 +
nav ul li {
 +
width: 100%;
 +
display: block;
 +
}
 +
 +
nav ul li a {
 +
font-weight: medium;
 +
text-align: center;
 +
height: 70px;
 +
min-width: 130px;
 +
line-height: 42px;
 +
color: var(--bright-bg-color);
 +
text-decoration: none;
 +
padding-top: 15px;
 +
padding-left:30px;
 +
padding-right: 30px;
 +
transition: height 0.5s;
 +
}
 +
 +
nav ul a:hover, nav ul li:hover .dropbtn{
 +
background-color: var(--logo-pink-opacity);
 +
width: 100%;
 +
box-shadow: none;
 +
height: 70px;
 +
}
 +
 +
nav ul li:hover .nav-dropdown {
 +
    display: block;
 +
}
 +
 +
.nav-dropdown {
 +
    display: none;
 +
    background-color: var(--logo-bright-blue-opacity);
 +
    min-width: 130px;
 +
    z-index: 1;
 +
}
 +
 +
.navbar {
 +
display: none;
 +
}
 +
 +
 +
.nav-mobile {
 +
display: block;
 +
}
 +
}
 +
 +
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 23:13, 10 October 2017