diff --git a/_sass/_customizations.scss b/_sass/_customizations.scss index ac54ac0..8ec5e2d 100644 --- a/_sass/_customizations.scss +++ b/_sass/_customizations.scss @@ -5,112 +5,153 @@ $brand-brown-light: #E7DCD3; $slightly-bold: 500; a { - text-decoration: none; - color: $brand-teal; - &:visited { - color: $brand-teal; - } - &:hover { - color: $brand-teal-dark; text-decoration: none; - } + color: $brand-teal; + + &:visited { + color: $brand-teal; + } + + &:hover { + color: $brand-teal-dark; + text-decoration: none; + } } .teal { - color: $brand-teal; + color: $brand-teal; } .btn-teal { - background: white; - border: 2px solid $brand-teal; + background: white; + border: 2px solid $brand-teal; } .slightly-bold { - font-weight: $slightly-bold; + font-weight: $slightly-bold; } .jumbotron { - background-color: $brand-brown-light; - border-bottom: 1px solid $brand-teal; - h2 { - display: inline-block; - border-bottom: 1px solid black; - } - color: $brand-brown; - p { - font-size: 20px; - } + background-color: $brand-brown-light; + border-bottom: 1px solid $brand-teal; + + h2 { + display: inline-block; + border-bottom: 1px solid black; + } + + color: $brand-brown; + + p { + font-size: 20px; + } } .panel-default { - border: 1px solid $brand-teal; - &>.panel-heading { - font-weight: $slightly-bold; - background-color: $brand-brown-light; - border-bottom: 1px solid $brand-teal; - } + border: 1px solid $brand-teal; + + & > .panel-heading { + font-weight: $slightly-bold; + background-color: $brand-brown-light; + border-bottom: 1px solid $brand-teal; + } } .navbar { - margin-bottom: 0px; - border-bottom: 3px solid $brand-teal; - height: 70px; - a { - font-size: 1.3em; - font-weight: $slightly-bold; - letter-spacing: 2px; - text-transform: uppercase; - } - .titleUpper { - font-size: 20px; - } - - .titleLower { - text-align: right; - font-size: 12px; - letter-spacing: 1px; - } - - .navbar-nav { - margin-top: 6px; - font-size: 18px; - } - + margin-bottom: 0px; + border-bottom: 3px solid $brand-teal; + height: 70px; + + a { + font-size: 1.3em; + font-weight: $slightly-bold; + letter-spacing: 2px; + text-transform: uppercase; + } + + .titleUpper { + font-size: 20px; + } + + .titleLower { + text-align: right; + font-size: 12px; + letter-spacing: 1px; + } + + .navbar-nav { + margin-top: 6px; + font-size: 18px; + } } .instagram-image-container { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } .instagram-image-link { - flex-shrink: 0; - text-align: center; + flex-shrink: 0; + text-align: center; } .instagram-image { - height: 150px; + height: 150px; } .tc { - text-align: center; + text-align: center; } .sponsor { - display: inline-block; - margin: 15px; - height: 55px; - width: auto; - img { + display: inline-block; + margin: 15px; height: 55px; width: auto; - } + + img { + height: 55px; + width: auto; + } } .flex { - display: flex; + display: flex; } + .flex-auto { - flex: 1 1 auto; + flex: 1 1 auto; } + +@media (max-width: 767px) { + .navbar { + .navbar-collapse { + position: relative; + z-index: 10; + border: none; + padding-right: 20px; // Line up buttons to hamburger + background: rgb(255, 255, 255); + background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%); + } + + .navbar-nav { + font-size: 28px; + } + + .navbar-toggle { + padding: 15px; + } + } + footer { + .flex { + flex-direction: column; + } + .btn { + margin: 0 auto 20px auto; + display: block; + width: 80%; + font-size: 20px; + } + } +} \ No newline at end of file