From 752f28180f5a8aa61f3a0038c3aff8ea66e7f6d5 Mon Sep 17 00:00:00 2001 From: Alexander Pickering Date: Fri, 3 Jun 2016 03:42:43 -0400 Subject: Some minor updates to the page --- vaud/jumbotron-narrow.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 vaud/jumbotron-narrow.css (limited to 'vaud/jumbotron-narrow.css') diff --git a/vaud/jumbotron-narrow.css b/vaud/jumbotron-narrow.css new file mode 100644 index 0000000..43eadd3 --- /dev/null +++ b/vaud/jumbotron-narrow.css @@ -0,0 +1,94 @@ +/* Space out content a bit */ +body { + padding-top: 20px; + padding-bottom: 20px; +} + +/* Everything but the jumbotron gets side spacing for mobile first views */ +.header, +.marketing, +.footer { + padding-right: 15px; + padding-left: 15px; +} + +/* Custom page header */ +.header { + padding-bottom: 20px; + border-bottom: 1px solid #e5e5e5; +} +/* Make the masthead heading the same height as the navigation */ +.header h3 { + margin-top: 0; + margin-bottom: 0; + line-height: 40px; +} + +/* Custom page footer */ +.footer { + padding-top: 19px; + color: #777; + border-top: 1px solid #e5e5e5; +} + +/* Customize container */ +@media (min-width: 768px) { + .container { + max-width: 730px; + } +} +.container-narrow > hr { + margin: 30px 0; +} + +/* Main marketing message and sign up button */ +.jumbotron { + text-align: center; + color: #acacac; + border-bottom: 1px solid #e5e5e5; + background:url("vaud.png") no-repeat center; +} +.jumbotron p{ + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + background: black; + background: -webkit-radial-gradient(black, rgba(0, 0, 0, 0)); + background: -o-radial-gradient(black, rgba(0, 0, 0, 0)); + background: -moz-radial-gradient(black, rgba(0, 0, 0, 0)); + background: radial-gradient(black, rgba(0, 0, 0, 0)); + border-radius:20px; +} +.jumbotron .btn { + padding: 14px 24px; + font-size: 21px; +} + +/* Supporting marketing content */ +.marketing { + margin: 40px 0; +} +.marketing p + h4 { + margin-top: 28px; +} + +/* Responsive: Portrait tablets and up */ +@media screen and (min-width: 768px) { + /* Remove the padding we set earlier */ + .header, + .marketing, + .footer { + padding-right: 0; + padding-left: 0; + } + /* Space out the masthead */ + .header { + margin-bottom: 30px; + } + /* Remove the bottom border on the jumbotron for visual effect */ + .jumbotron { + border-bottom: 0; + } +} -- cgit v1.2.3-70-g09d2