diff options
| author | Rene Ae <aehtyb@gmail.com> | 2015-11-19 19:32:24 -0600 |
|---|---|---|
| committer | Rene Ae <aehtyb@gmail.com> | 2015-11-19 19:32:45 -0600 |
| commit | 4d76672ac9089d2e7e170c00bc3b24fec9f71802 (patch) | |
| tree | c1b3c44f055daa29425f91cc3803382d2354bb02 /StoneIsland | |
| parent | 74e7f60ddccf181aa80259fb9eac4c84f17a070b (diff) | |
burger menu spacing
Diffstat (limited to 'StoneIsland')
| -rw-r--r-- | StoneIsland/www/css/nav.css | 45 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 16 |
2 files changed, 56 insertions, 5 deletions
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index 9b4e4fd3..66b1b20f 100644 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -41,9 +41,23 @@ #nav .menu span { display: block; font-size: 14px; + letter-spacing:1.25px; + text-shadow:0px 0px 1px rgba(0,0,0,.2); color: #000; - padding: 15px 0 15px 20px; } + +#nav .main_menu span { + padding: 30px 0 10px 20px; +} + +#nav .account_menu span, #nav .faq_menu span { + padding: 28px 0 0px 20px; +} + +#nav .faq_menu span:last-child { + padding-bottom:45px!important; +} + #nav .main_menu { display: block; } #nav .account_menu { display: none; } #nav .faq_menu { display: none; } @@ -51,19 +65,23 @@ #nav.account .main_menu { display: none; } #nav.account .account_menu { display: block; } #nav.faq .faq_menu { display: block; } + #nav .submenu { position: absolute; width: 100%; padding: 20px 0; - bottom: 33px; + top:0; border-top: 1px solid #ddd; } + #nav .submenu span { display: block; font-size: 14px; + letter-spacing:1.25px; color: #bbb; padding: 4px 0 5px 20px } + #nav .social { position: absolute; bottom: 0; @@ -81,6 +99,29 @@ text-align: center; } +#nav-container { + display:flex; + height:calc(100% - 40px); + width:100%; + position:absolute; + flex-direction: column; +} + +#nav-row { + box-sizing:border-box; + padding-bottom:30px; +} + +#nav-fill { + flex: 1; + position:relative; +} + +.menu-emphasis { +font-weight:bold; +padding-bottom:0px; +} + /* INTRO PAGE WITH SPINNING COMPASS */ #intro { diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 852fcb6d..7eb0e318 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -30,6 +30,10 @@ <body> <div id="nav"> + <div id="nav-container"> + <div id="nav-row"> + <!-- flex --> + <span class="menu"> <div class="logo"></div> <div class="main_menu"> @@ -39,7 +43,7 @@ <span class="archive">ARCHIVE</span> </div> <div class="account_menu"> - <span class="account_back">< ACCOUNT</span> + <span class="account_back menu-emphasis">< ACCOUNT</span> <span class="profile">PROFILE</span> <span class="payment">PAYMENT</span> <span class="shipping">SHIPPING</span> @@ -48,14 +52,17 @@ <span class="settings">NOTIFICATIONS</span> </div> <div class="faq_menu"> - <span class="faq_back">< FAQ</span> + <span class="faq_back menu-emphasis">< FAQ</span> <span class="privacy">PRIVACY POLICY</span> <span class="terms">TERMS AND CONDITIONS</span> <span class="returns">RETURN POLICY</span> <span class="care">CUSTOMER CARE</span> </div> </span> - + + </div> + <div id="nav-fill"> + <!-- flex fill --> <span class="submenu"> <div class="main_menu"> <span class="account">ACCOUNT</span> @@ -74,6 +81,9 @@ <span class="main">MAIN MENU</span> </div> </span> + </div> + <!-- end flex --> + </div> <span class="social"> <span class="fb ion-social-facebook"></span> |