Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/chrisvander/basic-node-js. Node.JS website demo. Uses EJS templating, Express, SASS, and Nightwatch
Something went wrong. Try again.
2.4 kB · 98 lines
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,500,600,700|Lora:400i');
$nav-bar-height: 3.5em;
$color-darkbg: #34495e;$color-darkbg-highlight: #2c3e50;$color-graybg: #7f8c8d;$color-graytext: #ecf0f1;
$min-width: 380px;
@import "nav.scss";@import "footer.scss";@import "music.scss";@import "movies.scss";
body { margin: 0; min-width: $min-width; font-family: 'Nunito Sans', sans-serif; font-size: 1em;}#tab-container { font-size: 1.5em; }
// EM media queries for relative sizing@media screen and (max-width: 900px) { #tab-container { font-size: 1.25em; }}@media screen and (max-width: 600px) { #tab-container { font-size: 1em; }}@media screen and (max-width: 400px) { #tab-container { font-size: 0.9em; }}
#tab-container { overflow: auto; .bg { background-color: #bdc3c7; padding-top: $nav-bar-height; height: 14em; background: radial-gradient(circle at 10%, #C0E538 5%, #C4D440 12%, #FFC312 30%, #B0D213 50%, #B53471 80%); background-size: 400% 400%; animation: bgmove 40s cubic-bezier(0.1,0.1,0.75,1) infinite; } .tab { text-align: center; display: none; } // defaults inactive .active { display: block; } .header { margin-top: -10em; margin-left: 30px; margin-right: 30px; margin-bottom: 8em; h1 { margin: 0; font-weight: 300; color: white; text-align: center; position: relative; font-size: 2em; height: 2em; } } .column { float: left; width: 50%; padding-bottom: 4em; p { display: inline-block; font-size: .8em; margin: 0.4em 0 0.4em 0; } h3{ margin: 0.7em 0 0.7em 0; } h4,h5,h6{ margin: 0.3em 0 0.3em 0; } @media screen and (max-width: 600px) { float: none; width: 100%; } } .body { display: inline-block; padding: 0 4em 0 4em; max-width: 1000px; text-align: left; } @media screen and (max-width: 900px) { .body { max-width: 600px; } } @media screen and (max-width: 700px) { .body { max-width: 400px; } } @media screen and (max-width: 500px) { .body { max-width: 340px; } }}@keyframes bgmove { 0% { background-position: 0% 0%; } 25% { background-position: 40% 0%;} 50% { background-position: 100% 0%;} 75% { background-position: 60% 0%;} 100% { background-position: 0% 0%; }}