# Front matter comment to ensure Jekyll properly reads file.
/**
* Models the styles for the website. * * Exclusively made for PREFIRE * © 2019-2020 University of Wisconsin - Madison. Space Science and Engineering Center. All Rights Reserved. */
// Imports @import url(stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css); @import url('fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i'); @import url(stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
// Color import $font-size: 50px; $red: red; $light-gray: cfcfcf; $dark-gray: #4a4a4a;
// Master Styles *{
font-family: "Open Sans"; font-weight: 300;
}
.body-container{
border: 1px solid black; margin: 0; width: 100%;
}
.pic{ // All parallax Background
height: 100%; transform: scale(1.5);
}
// Tools .hidden{
display: none;
}
.main-container{
width: 100%; scroll-behavior: smooth; background-image: url("bg-picture-2.jpg");
}
.border{
border: 1px solid red !important;
}
.row{
width: 100%; margin: 0;
}
// Text Styles h1{
color: white; font-size: 1.25em; font-weight: 300; letter-spacing: 0.10em; margin-top: 1em; display: block; text-align: center;
}
h2{
color: white; font-weight: 300;
}
h3{
font-weight: 300; font-size: 1.5em;
}
h5{
text-align: center; margin-top: 1em; font-weight: 300; background-color: white; padding: 0.5em; border-radius: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); font-weight: 400;
}
h6{
font-size: 1.5em; text-align: center;
}
// Generic styles .generic-container{
padding: 1em; margin-top: 3em; margin-bottom: 3em;
}
.generic-box{
background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.mission-text{
margin-bottom: 0;
}
// Navbar Styles .navbar{
width: 100%; z-index: 999; color: white; position: fixed; transition:500ms ease;
}
.navbar-scrolled{
background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); color: black;
}
.navbar-menu{
list-style-type: none; width: 100%; text-align: center; margin: 0;
}
.navbar-menu-link{
display: inline-block; padding: 0 2em;
}
.navbar-menu-link-text{
color: white; transition: 500ms ease;
}
.burger-icon-text{
color: white; margin: 0; transition: 500ms ease;
}
.burger-icon-text-scrolled{
color: black; margin: 0; transition: 500ms ease;
}
.fa-bars{
font-size: 1.5em; margin: 0;
}
.burger-icon{
margin: 0; padding: 0;
}
.burger-icon-btn{
margin: 0; background-color: transparent; border: 0;
}
.navbar-fullscreen{
z-index: 10000; position: fixed; background-color: rgba(black, 0.75); width: 100%; height: 100%; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.2s ease;
}
.navbar-fullscreen-gone{
position: fixed; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s ease;
}
.navbar-menu-link-text-scrolled{
color: black;
}
.navbar-menu-link-text:hover{
color: $light-gray; text-decoration: none; transition: 200ms ease;
}
.mobile-nav-link{
color: white;
}
.mobile-nav-hover{
color: $light-gray; text-decoration: none; transition: 200ms ease;
}
.mobile-nav-link-span{
display: block; text-align: center; padding: 1em;
}
.mobile-nav-containers{
margin-top: 5em;
}
.go-to-top-container{
position: fixed; z-index: 15000; right: 0; margin-right: 1em; margin-top: 4em; padding-right: 0.4em; padding-left: 0.4em; padding-bottom: 0.25em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 100000px; background-color: white; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.2s ease;
}
.chevron-white{
padding: 0; margin: 0;
}
.scroll-top-a{
color: black; transition: 200ms ease;
}
.scroll-top-a:hover{
color: $dark-gray; transition: 200ms ease;
}
.scroll-top-a-gone{
position: fixed; z-index: 15000; right: 0; margin-right: 1em; margin-top: 3.5em; padding-right: 0.4em; padding-left: 0.4em; padding-bottom: 0.25em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 100000px; background-color: white; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s ease;
}
// Main Page Styles .main-page{
min-height: 100vh; padding-top: 2.5em;
}
.logo{ // Prefire main logo
height: 20vh; margin-top: 50vh - 20vh; display: block; text-align: center; margin-left: auto; margin-right: auto;
}
.uw-logo{
height: 6em; display: block; margin: 0 auto;
}
.jpl-logo{
height: 7em; display: block; margin: 0 auto;
}
.ssec-logo{
height: 6em; display: block; margin: 0 auto;
}
.main-logos{
padding-top: 11vh;
}
// Section title header styles .item-header{
background-color: #2B336F; padding: 2.5em; padding-left: 4em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
// Overview styles .overview-body{
background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.overview-body-text{
margin-bottom: 0;
}
.overview-container{
padding: 1em; margin-top: 3em; height: 100%; margin-bottom: 3em; background-image: url("bg-picture-3.jpg");
}
.overview-preview{
margin-bottom: 3em;
}
.overview-images-point{
max-width: 8em; margin: 0 auto; display: block; margin-bottom: 0.5em; background-color: rgba(white, 1); padding: 0.5em; border-radius: 10000px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); z-index: 50; position: relative; margin-right: -2em;
}
.overview-view-picture{
padding: 0;
}
.overview-point-text{
background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); margin-left: -2em; margin-right: 6em; padding-left: 4em;
}
.overview-point-container{
margin-bottom: 2em;
}
// Mission styles .mission-container{
padding: 1em; margin-top: 3em; margin-bottom: 3em;
}
.mission-container-row{
margin-top: 2.5em; margin-bottom: 2.5em;
}
.mission-box{
background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.earth-picture{
max-width: 15em; display: block; margin: 0 auto;
}
.earth-picture-container{
margin: 0 auto; background-color: rgba(white, 1); padding: 1em; width: 17em; border-radius: 100000px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.mission-text{
margin-bottom: 0;
}
// Instrument styles .instrument-container{
padding: 2.5em; margin-top: 3em; margin-bottom: 3em;
}
.tirs-image-container{
background-color: rgba(white, 1); padding: 1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); margin-bottom: 1em;
}
.tirs-info-container{
background-color: rgba(white, 1); padding: 1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.tirs-picture{
max-width: 15em; padding: 0; margin: 0 auto; display: block;
}
.technical-container{
background-color: rgba(white, 1); padding: 1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.technical-sub{
text-align: right; display: block; font-size: 1.25em; font-weight: 350;
}
.technical-divider{
border-right: 1px solid $light-gray;
}
.technical-infos{
padding: 0.5em;
}
// Custom media resolution (for responsivity) @media(max-width: 1090px){
.uw-logo{ height: 5em; display: block; margin: 0 auto; } .jpl-logo{ height: 6em; display: block; margin: 0 auto; } .ssec-logo{ height: 5em; display: block; margin: 0 auto; } .overview-point-text{ background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); margin-left: -2em; margin-right: 3em; padding-left: 4em; } .earth-picture{ max-width: 12em; display: block; margin: 0 auto; } .earth-picture-container{ margin: 0 auto; background-color: rgba(white, 1); padding: 1em; width: 14em; border-radius: 100000px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .tirs-picture{ max-width: 10em; padding: 0; margin: 0 auto; display: block; }
}
@media(max-width: 850px){
.jpl-logo{ height: 5em; display: block; } .ssec-logo{ height: 4.5em; display: block; margin: 0 auto; } .uw-logo{ height: 4.5em; display: block; margin: 0 auto; }
}
@media(max-width: 991px){
.mission-question-container{ margin-bottom: 3em; } .earth-picture-orbit-container{ margin-top: 3em; } .earth-picture{ max-width: 15em; display: block; margin: 0 auto; } .earth-picture-container{ margin: 0 auto; background-color: rgba(white, 1); padding: 1em; width: 17em; border-radius: 100000px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .tirs-picture{ max-width: 15em; padding: 0; margin: 0 auto; display: block; } .tirs-info-container{ background-color: rgba(white, 1); padding: 1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); margin-bottom: 3em; }
}
@media(max-width: 767px){
.main-logos{ margin-bottom: 3em; } .jpl-logo{ height: 5em; display: block; margin-bottom:: 1.25em; } .ssec-logo{ height: 4.5em; display: block; margin: 0 auto; } .uw-logo{ height: 4.5em; display: block; margin: 0 auto; margin-bottom:: 1.25em; } .overview-images-point{ max-width: 8em; margin: 0 auto; display: block; margin-bottom: 0.5em; background-color: rgba(white, 1); padding: 0.5em; border-radius: 10000px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); z-index: 50; position: relative; margin-bottom: -2em; } .overview-point-text{ background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); padding-top: 2.5em; } .overview-container{ padding: 1em; margin-top: 3em; margin-bottom: 3em; } .pic{ height: 100%; transform: scale(2); } .overview-body{ background-color: rgba(white, 1); border-radius: 1px; padding: 1em; margin: 0 auto; margin: 1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } h2{ margin: 0 auto; } .item-header{ background-color: #2B336F; padding: 2.5em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
}