diff options
Diffstat (limited to 'src/styles/splash.less')
| -rw-r--r-- | src/styles/splash.less | 436 |
1 files changed, 436 insertions, 0 deletions
diff --git a/src/styles/splash.less b/src/styles/splash.less new file mode 100644 index 00000000..7a88dd33 --- /dev/null +++ b/src/styles/splash.less @@ -0,0 +1,436 @@ +@screen-sm: 768px; +@screen-md: 992px; +@screen-lg: 1200px; + +html, body { + width: 100%; + height: 100%; + margin: 0; +} + +/* Fix for the white space appearing otherwise on the right of the page, on mobile */ +.body-wrapper { + overflow-x: hidden; + overflow-y: hidden; +} + +/* NAVBAR */ +@media screen and (min-width: @screen-sm) { + .navbar { + padding: 20px 0; + -webkit-transition: background 200ms ease-in-out, padding 200ms ease-in-out; + -moz-transition: background 200ms ease-in-out, padding 200ms ease-in-out; + transition: background 200ms ease-in-out, padding 200ms ease-in-out; + } + + .top-nav-collapse { + padding: 0; + } +} + +.navbar { + text-transform: uppercase; +} + +.navbar-transparent { + background: transparent; + border: none; + + .collapse li a, .projects-btn { + color: #eee; + } +} + +.navbar-toggle { + margin-right: 30px; +} + +.navbar-fixed-top { + padding: 0; +} + +.navbar .logged-in { + display: none; +} + +.sign-out { + padding: 10px; + width: 40px; + margin-top: 5px; + margin-left: 5px; + + font-size: 14pt; + color: #eeeeee; + + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + + -webkit-transition: background 200ms; + -moz-transition: background 200ms; + -ms-transition: background 200ms; + -o-transition: background 200ms; + transition: background 200ms; +} + +.sign-out:hover { + background: #e3474d; + color: #eeeeee; +} + +.sign-out:active { + background: #a73438; +} + +.projects-btn { + position: relative; + top: -4px; + color: #eee; +} + +.projects-btn:hover { + color: #fff; +} + +a.navbar-brand { + width: 40px; + height: 40px; + padding: 0; + margin-right: 5px; + margin-top: 5px; + + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; + + -webkit-transition: background-color 200ms ease-in-out; + -moz-transition: background-color 200ms ease-in-out; + -ms-transition: background-color 200ms ease-in-out; + -o-transition: background-color 200ms ease-in-out; + transition: background-color 200ms ease-in-out; +} + +a.navbar-brand:hover { + background: #eee !important; +} + +a.navbar-brand:active, a.navbar-brand:visited, .active a.navbar-brand { + background: #ccc !important; +} + +.navbar-brand > img { + padding: 5px; + margin: 0; + width: auto; + height: 100%; +} + +@media screen and (max-width: @screen-sm) { + .navbar-brand { + margin-left: 15px; + } +} + +#google-signin { + margin-top: 10px; + margin-bottom: 10px; +} + +/* GENERAL CONTENT RULES */ +a { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +.content-section { + padding-top: 50px; + padding-bottom: 150px; + text-align: center; +} + +.img-caption { + margin-top: 10px; + color: #666; +} + +@media screen and (min-width: @screen-sm) and (max-width: @screen-md) { + .content-section h1 { + font-size: 2em; + margin-bottom: 40px; + } + + .content-section h3 { + font-size: 1.5em; + } +} + +@media screen and (min-width: @screen-md) and (max-width: @screen-lg) { + .content-section h1 { + font-size: 3em; + margin-bottom: 40px; + } + + .content-section h3 { + font-size: 1.8em; + } +} + +@media screen and (min-width: @screen-lg) { + .content-section h1 { + font-size: 3em; + margin-bottom: 40px; + } +} + +.info-points { + font-size: 1.2em; +} + +@media screen and (min-width: @screen-sm) and (max-width: @screen-md) { + .info-points { + font-size: 1em; + } +} + +@media screen and (min-width: @screen-md) and (max-width: @screen-lg) { + .info-points { + font-size: 1.1em; + } +} + +.pitch-column { + text-align: left; +} + +.jumbotron ul, .content-section ul { + list-style: none; + padding-left: 25px; +} + +.jumbotron ul li, .content-section ul li { + display: block; +} + +.jumbotron ul li:before, .content-section ul li:before { + content: "\e080"; + font-family: 'Glyphicons Halflings', monospace; + font-size: 10px; + float: left; + margin-top: 6px; + margin-left: -17px; + color: #aaa; +} + +/* CONTENT SECTION COLORS */ +.intro-section { + background-color: #fff; +} + +.stakeholder-section { + background-color: #f2f2f2; +} + +.modeling-section { + background-color: #fff; +} + +.simulation-section { + background-color: #f2f2f2; +} + +.technologies-section { + background-color: #fff; +} + +.team-section { + background-color: #f2f2f2; +} + +.contact-section { + background-color: #444; +} + +/* HEADING SECTION */ +.header-section { + background-image: linear-gradient(135deg, #1c2e48, #005bbf, #00c5d6); +} + +.jumbotron { + margin: 140px 0 120px 0; + background-color: inherit; +} + +.jumbotron h1 { + color: #eee; +} + +.jumbotron h1 .dc { + color: #eee; + font-weight: bold; +} + +.jumbotron h2 { + margin-top: 50px; + color: #eee; + +} + +/* INTRO SECTION*/ +.intro-section { + padding-top: 0; + padding-bottom: 50px; + text-align: center; +} + +.pitch-container { + margin-top: 50px; +} + +p.img-source { + font-size: 0.6em; + position: relative; + top: 20px; +} + +@media screen and (max-width: @screen-sm) { + p.img-source { + top: 0; + } +} + +/* STAKEHOLDERS */ +@media screen and (max-width: @screen-sm) { + .stakeholder-section img { + position: relative; + top: 15px; + } +} + +@media screen and (min-width: @screen-sm) and (max-width: @screen-md) { + .stakeholder-section img { + position: relative; + top: 5px; + } + + .stakeholder-section h3 { + font-size: 1.5em; + } +} + +@media screen and (min-width: @screen-md) and (max-width: @screen-lg) { + .stakeholder-section img { + position: relative; + top: 15px; + } + + .stakeholder-section h3 { + font-size: 1.7em; + } +} + +.stakeholder-container div { + text-align: left; +} + +/* MOCKUPS */ +.construction-container { + margin-top: 20px; + margin-bottom: 60px; +} + +.simulation-container > div:first-child { + margin-bottom: 30px; +} + +.img-construction-building { + margin-top: 10px; +} + +.modeling-section img, .simulation-section img { + outline: 2px solid #3f3f3f; + padding-right: 0; + padding-left: 0; +} + +.simulation-building-row { + margin-bottom: 40px; +} + +.key-points { + padding-right: 50px; +} + +/* TECHNOLOGIES */ +.web-flow { + font-size: 4em; +} + +.technologies-section { + h3 { + margin-top: 0; + } + + .tech-row { + padding: 15px; + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + + margin-bottom: 10px; + } + + .browser-tech { + background-color: #82d0e7; + } + + .server-tech { + background-color: #edd667; + } + + .database-tech { + background-color: #ed9c67; + } + + .simulator-tech { + background-color: #49d65f; + } +} + +.technology-arrow { + margin-bottom: 20px; + margin-top: 15px; +} + +/* TEAM */ +.team-member-description { + margin-bottom: 30px; +} + +/* CONTACT */ +.contact-section { + margin-bottom: -5px; // Fixes an unwanted margin that appeared when adding the sign-in button to the nav + + h1 { + color: #ddd; + } + + .names { + color: #ddd; + } + + a { + color: #ddd; + } + + a:hover { + color: #fff; + } +} + +.tudelft-icon { + margin-bottom: 10px; +}
\ No newline at end of file |