From 0e8d9dcdc2ea4504e71881b702ce300688971b45 Mon Sep 17 00:00:00 2001 From: Gregory Ballantine Date: Fri, 18 Nov 2016 12:41:46 -0500 Subject: [PATCH] Mobile navigation styles --- assets/sass/partials/_navigation.sass | 13 +++++++------ public/css/main.css | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/assets/sass/partials/_navigation.sass b/assets/sass/partials/_navigation.sass index 9c4a17f..e65d8d6 100755 --- a/assets/sass/partials/_navigation.sass +++ b/assets/sass/partials/_navigation.sass @@ -11,12 +11,6 @@ .navbar-header text-align: center - .navbar-collapse - background: #212121 - border-radius: 5px - border: 1px solid #212121 - box-shadow: inset 0 0 6px #212121 - ul list-style: none text-align: center @@ -63,3 +57,10 @@ &:hover color: $main-color + + @media (max-width: 767px) + .navbar-collapse + background: #212121 + border-radius: 5px + border: 1px solid #212121 + box-shadow: inset 0 0 6px #212121 diff --git a/public/css/main.css b/public/css/main.css index 3e70473..387acd5 100755 --- a/public/css/main.css +++ b/public/css/main.css @@ -1 +1 @@ -/*! normalize.sass v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none}select{text-transform:none}button,html input[type="button"]{-webkit-appearance:button;cursor:pointer}input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input::-moz-focus-inner{border:0;padding:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")}*{margin:0px;padding:0px;font-family:"Open Sans",sans-serif;font-size:14px}html{width:100%;height:-webkit-calc(100% - 200px);height:calc(100% - 200px)}body{height:auto;width:100%;height:100%}#wrapper{height:auto;width:100%;min-height:100%;margin-bottom:200px;padding-bottom:50px;background:url(/img/bg2.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#header{display:block;padding:-10px 0;text-align:center}.shadow-0{border:1px solid #eee}.shadow-1{box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 5px 0 rgba(0,0,0,0.26)}.shadow-2{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.shadow-3{box-shadow:0 17px 50px 0 rgba(0,0,0,0.19),0 12px 15px 0 rgba(0,0,0,0.24)}.shadow-4{box-shadow:0 25px 55px 0 rgba(0,0,0,0.21),0 16px 28px 0 rgba(0,0,0,0.22)}.shadow-5{box-shadow:0 40px 77px 0 rgba(0,0,0,0.22),0 27px 24px 0 rgba(0,0,0,0.2)}#header .band-logo{width:100%;max-width:600px}#nav{margin-bottom:20px}#nav .navbar-nav{display:inline-block}#nav .navbar-nav{float:none}#nav .navbar-collapse,#nav .navbar-header{text-align:center}#nav .navbar-collapse{background:#212121;border-radius:5px;border:1px solid #212121;box-shadow:inset 0 0 6px #212121}#nav ul{list-style:none;text-align:center}#nav ul .nav_item{display:inline-block;background:none;border:none;border-bottom:3px solid rgba(229,20,0,0);border-radius:none;-webkit-transition:border-color,200ms;-moz-transition:border-color,200ms;transition:border-color,200ms}#nav ul .nav_item a{display:block;height:100%;width:100%;padding:5px 14px;text-decoration:none;color:#fff;font-size:32px;font-weight:600;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav ul .nav_item:hover{background-color:transparent;border-color:#e51400}#nav ul .nav_item:hover a{background-color:transparent;color:#e51400}#nav #navbar-collapse-button.navbar-toggle{float:none;margin:0;color:#e51400;font-size:32px;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav #navbar-collapse-button.navbar-toggle:hover,#nav #navbar-collapse-button.navbar-toggle:active{background-color:transparent}#nav #navbar-collapse-button.navbar-toggle.collapsed{color:#fff}#nav #navbar-collapse-button.navbar-toggle.collapsed:hover{color:#e51400}#footer{position:fixed;bottom:0;left:0;width:100%;background:#fff;margin:0;padding:10px 15px;z-index:-9999999}#footer .column-info{text-align:center}#footer .column-info p{font-size:18px;font-weight:bold;text-decoration:underline}#footer .column-info ul{list-style:none}#footer .column-info ul a{text-decoration:none;color:#212121;-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#footer .column-info ul a:hover{color:#e51400}#footer .copyright p{color:#212121;text-align:center}#footer .copyright hr{border-color:#bbb}#footer .mailing-list p{color:#212121}.card{display:block;height:auto;margin-bottom:15px;padding:15px 10px;background:#fff}.card.hover-box{-webkit-transition:box-shadow,200ms;-moz-transition:box-shadow,200ms;transition:box-shadow,200ms}.card.hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.card .underline{text-decoration:underline}.card input[type=text]{background:none;border:none;outline:none}.card .input-group{position:relative;display:block;width:100%;margin:20px auto 10px}.card .input-group input{display:inline-block;width:100%;padding:10px 0;border-bottom:solid 2px #e51400;color:#191919;font-size:16px}.card .input-group input:focus,.card .input-group input:active{outline:none}.card .input-group label{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);font-style:italic;font-size:16px;color:#999;pointer-events:none;-webkit-transition:all,200ms ease-out 0s;-moz-transition:all,200ms ease-out 0s;transition:all,200ms ease-out 0s}.card .input-group input:focus+label,.card .input-group input.has-value+label{top:-5px;font-size:12px;color:#e51400}.full-width{width:100%}#about-header{margin-bottom:25px;padding-bottom:15px;background:#fff}#about-header img{position:absolute;top:0;left:0;height:480px;width:100%}#about-header .about-band{margin-top:405px}#about-header h2{margin-bottom:20px;color:#fff}#about-header p{color:#212121}#about-content section a{display:block;position:absolute;top:0;left:15px;width:-webkit-calc(100% - 30px);width:calc(100% - 30px);height:-webkit-calc(100% - 20px);height:calc(100% - 20px);border-radius:5px;text-decoration:none;-webkit-transition:all,300ms ease-in;-moz-transition:all,300ms ease-in;transition:all,300ms ease-in}#about-content section h3,#about-content section h4,#about-content section p{color:#212121}#about-content section:hover a{background:rgba(0,0,0,0.15)}#about-content section hr{border-color:#bbb}#contact-header{margin-top:-20px;text-align:center}#contact-header h1{color:#fff;font-size:34px;font-weight:bold}#contact-info .card{max-width:680px;margin-top:15px;padding-top:20px;padding-bottom:20px;background:#f0f0f0}#contact-info .card hr{border-color:#666}#contact-info .card a,#contact-info .card p,#contact-info .card h3{text-align:center;font-size:20px}#contact-info .card p{padding:5px;color:#212121}#contact-info .card a{color:darkred;text-decoration:none;-webkit-transition:color 200ms ease-in-out;-moz-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}#contact-info .card a:hover{color:red}#contact-info .card h3{margin-bottom:15px}#featured{height:auto;margin:0 auto 20px;padding:5px;background:none}#featured .hover-box{-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#featured .hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}#featured div{margin-bottom:25px}#featured div a{display:block;width:100%;margin-left:auto;margin-right:auto}#featured div img{width:100%}#wrapper-home{display:block;min-height:300px;padding:0}#wrapper-home .content{margin:0;padding:0}#wrapper-home .actions #mailing-list p{margin-bottom:7px;text-align:center}#music-header{text-align:center}#music-header h1{color:#fff;font-size:34px;font-weight:bold}#music-list-section .music-list{position:relative;-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}#music-list-section .music-list:hover{cursor:pointer;background:#f0f0f0}#music-list-section .music-list-header{margin:10px 0}.now-playing-list,.music-list ol{margin-left:15px;margin-right:15px;color:#212121}.now-playing-list li,.music-list ol li{-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}.now-playing-list li:hover,.music-list ol li:hover{background:#f0f0f0}.now-playing-list li:hover a,.music-list ol li:hover a{color:#e51400}.now-playing-list li.selected,.music-list ol li.selected{background:#e0e0e0}.now-playing-list li,.now-playing-list a,.music-list ol li,.music-list ol a{display:block;height:100%;width:100%;padding:8px 5px;color:#212121;text-decoration:none;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}.shows-header{margin-top:-20px;margin-bottom:20px;text-align:center}.shows-header h3{color:#fff;font-size:26px;font-weight:bold}#shows-table{margin-top:20px}#shows-table tr{border-bottom:1px solid rgba(153,153,153,0.4)}#shows-table tr:last-child{border-bottom:none}#shows-table tr td{vertical-align:middle;border:none}#shows-table tr td p,#shows-table tr td a{font-size:18px;color:#fff}#shows-table tr td a{font-weight:600;text-decoration:underline;-webkit-transition:all,200ms ease-in;-moz-transition:all,200ms ease-in;transition:all,200ms ease-in}#shows-table tr td a:hover{color:#e51400} +/*! normalize.sass v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none}select{text-transform:none}button,html input[type="button"]{-webkit-appearance:button;cursor:pointer}input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input::-moz-focus-inner{border:0;padding:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")}*{margin:0px;padding:0px;font-family:"Open Sans",sans-serif;font-size:14px}html{width:100%;height:-webkit-calc(100% - 200px);height:calc(100% - 200px)}body{height:auto;width:100%;height:100%}#wrapper{height:auto;width:100%;min-height:100%;margin-bottom:200px;padding-bottom:50px;background:url(/img/bg2.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#header{display:block;padding:-10px 0;text-align:center}.shadow-0{border:1px solid #eee}.shadow-1{box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 5px 0 rgba(0,0,0,0.26)}.shadow-2{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.shadow-3{box-shadow:0 17px 50px 0 rgba(0,0,0,0.19),0 12px 15px 0 rgba(0,0,0,0.24)}.shadow-4{box-shadow:0 25px 55px 0 rgba(0,0,0,0.21),0 16px 28px 0 rgba(0,0,0,0.22)}.shadow-5{box-shadow:0 40px 77px 0 rgba(0,0,0,0.22),0 27px 24px 0 rgba(0,0,0,0.2)}#header .band-logo{width:100%;max-width:600px}#nav{margin-bottom:20px}#nav .navbar-nav{display:inline-block}#nav .navbar-nav{float:none}#nav .navbar-collapse,#nav .navbar-header{text-align:center}#nav ul{list-style:none;text-align:center}#nav ul .nav_item{display:inline-block;background:none;border:none;border-bottom:3px solid rgba(229,20,0,0);border-radius:none;-webkit-transition:border-color,200ms;-moz-transition:border-color,200ms;transition:border-color,200ms}#nav ul .nav_item a{display:block;height:100%;width:100%;padding:5px 14px;text-decoration:none;color:#fff;font-size:32px;font-weight:600;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav ul .nav_item:hover{background-color:transparent;border-color:#e51400}#nav ul .nav_item:hover a{background-color:transparent;color:#e51400}#nav #navbar-collapse-button.navbar-toggle{float:none;margin:0;color:#e51400;font-size:32px;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav #navbar-collapse-button.navbar-toggle:hover,#nav #navbar-collapse-button.navbar-toggle:active{background-color:transparent}#nav #navbar-collapse-button.navbar-toggle.collapsed{color:#fff}#nav #navbar-collapse-button.navbar-toggle.collapsed:hover{color:#e51400}@media (max-width: 767px){#nav .navbar-collapse{background:#212121;border-radius:5px;border:1px solid #212121;box-shadow:inset 0 0 6px #212121}}#footer{position:fixed;bottom:0;left:0;width:100%;background:#fff;margin:0;padding:10px 15px;z-index:-9999999}#footer .column-info{text-align:center}#footer .column-info p{font-size:18px;font-weight:bold;text-decoration:underline}#footer .column-info ul{list-style:none}#footer .column-info ul a{text-decoration:none;color:#212121;-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#footer .column-info ul a:hover{color:#e51400}#footer .copyright p{color:#212121;text-align:center}#footer .copyright hr{border-color:#bbb}#footer .mailing-list p{color:#212121}.card{display:block;height:auto;margin-bottom:15px;padding:15px 10px;background:#fff}.card.hover-box{-webkit-transition:box-shadow,200ms;-moz-transition:box-shadow,200ms;transition:box-shadow,200ms}.card.hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.card .underline{text-decoration:underline}.card input[type=text]{background:none;border:none;outline:none}.card .input-group{position:relative;display:block;width:100%;margin:20px auto 10px}.card .input-group input{display:inline-block;width:100%;padding:10px 0;border-bottom:solid 2px #e51400;color:#191919;font-size:16px}.card .input-group input:focus,.card .input-group input:active{outline:none}.card .input-group label{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);font-style:italic;font-size:16px;color:#999;pointer-events:none;-webkit-transition:all,200ms ease-out 0s;-moz-transition:all,200ms ease-out 0s;transition:all,200ms ease-out 0s}.card .input-group input:focus+label,.card .input-group input.has-value+label{top:-5px;font-size:12px;color:#e51400}.full-width{width:100%}#about-header{margin-bottom:25px;padding-bottom:15px;background:#fff}#about-header img{position:absolute;top:0;left:0;height:480px;width:100%}#about-header .about-band{margin-top:405px}#about-header h2{margin-bottom:20px;color:#fff}#about-header p{color:#212121}#about-content section a{display:block;position:absolute;top:0;left:15px;width:-webkit-calc(100% - 30px);width:calc(100% - 30px);height:-webkit-calc(100% - 20px);height:calc(100% - 20px);border-radius:5px;text-decoration:none;-webkit-transition:all,300ms ease-in;-moz-transition:all,300ms ease-in;transition:all,300ms ease-in}#about-content section h3,#about-content section h4,#about-content section p{color:#212121}#about-content section:hover a{background:rgba(0,0,0,0.15)}#about-content section hr{border-color:#bbb}#contact-header{margin-top:-20px;text-align:center}#contact-header h1{color:#fff;font-size:34px;font-weight:bold}#contact-info .card{max-width:680px;margin-top:15px;padding-top:20px;padding-bottom:20px;background:#f0f0f0}#contact-info .card hr{border-color:#666}#contact-info .card a,#contact-info .card p,#contact-info .card h3{text-align:center;font-size:20px}#contact-info .card p{padding:5px;color:#212121}#contact-info .card a{color:darkred;text-decoration:none;-webkit-transition:color 200ms ease-in-out;-moz-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}#contact-info .card a:hover{color:red}#contact-info .card h3{margin-bottom:15px}#featured{height:auto;margin:0 auto 20px;padding:5px;background:none}#featured .hover-box{-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#featured .hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}#featured div{margin-bottom:25px}#featured div a{display:block;width:100%;margin-left:auto;margin-right:auto}#featured div img{width:100%}#wrapper-home{display:block;min-height:300px;padding:0}#wrapper-home .content{margin:0;padding:0}#wrapper-home .actions #mailing-list p{margin-bottom:7px;text-align:center}#music-header{text-align:center}#music-header h1{color:#fff;font-size:34px;font-weight:bold}#music-list-section .music-list{position:relative;-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}#music-list-section .music-list:hover{cursor:pointer;background:#f0f0f0}#music-list-section .music-list-header{margin:10px 0}.now-playing-list,.music-list ol{margin-left:15px;margin-right:15px;color:#212121}.now-playing-list li,.music-list ol li{-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}.now-playing-list li:hover,.music-list ol li:hover{background:#f0f0f0}.now-playing-list li:hover a,.music-list ol li:hover a{color:#e51400}.now-playing-list li.selected,.music-list ol li.selected{background:#e0e0e0}.now-playing-list li,.now-playing-list a,.music-list ol li,.music-list ol a{display:block;height:100%;width:100%;padding:8px 5px;color:#212121;text-decoration:none;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}.shows-header{margin-top:-20px;margin-bottom:20px;text-align:center}.shows-header h3{color:#fff;font-size:26px;font-weight:bold}#shows-table{margin-top:20px}#shows-table tr{border-bottom:1px solid rgba(153,153,153,0.4)}#shows-table tr:last-child{border-bottom:none}#shows-table tr td{vertical-align:middle;border:none}#shows-table tr td p,#shows-table tr td a{font-size:18px;color:#fff}#shows-table tr td a{font-weight:600;text-decoration:underline;-webkit-transition:all,200ms ease-in;-moz-transition:all,200ms ease-in;transition:all,200ms ease-in}#shows-table tr td a:hover{color:#e51400}