1div.mobile-hamburger, 2div.mobile-menu, 3div.mobile-logo { 4 display: none; 5} 6 7 8@media only screen and (max-width: 750px) { 9 10 div.mobile-hamburger { 11 display: block; 12 position: absolute; 13 top: 0; 14 left: 0; 15 z-index: 1000; 16 17 cursor: pointer; 18 font-size: 2.5rem; 19 line-height: 3rem; 20 21 width: 3rem; 22 height: 3rem; 23 text-align: center; 24 25 &::before { 26 content: '☰'; 27 } 28 } 29 30 div.mobile-hamburger.open { 31 &::before { 32 content: '✕'; 33 } 34 } 35 36 div.mobile-logo { 37 display: block; 38 a { 39 display: block; 40 width: 100%; 41 height: 3rem; 42 background-size: contain; 43 background-repeat: no-repeat; 44 background-position: center; 45 } 46 } 47 48 div.mobile-menu { 49 position: absolute; 50 top: 0; 51 left: 0; 52 53 height: 100%; 54 overflow-y: auto; 55 56 z-index: 500; 57 background-color: @ini_background; 58 box-shadow: 5px 0 5px @ini_border; 59 60 padding-top: 3rem; 61 62 a { 63 color: @ini_existing; 64 } 65 66 .mobile-search { 67 display: block; 68 margin: 0.25em; 69 input, 70 button { 71 line-height: inherit; 72 } 73 } 74 75 ul { 76 padding: 0; 77 list-style-type: none; 78 list-style-image: none !important; 79 margin: 0.25em 0; 80 81 border-bottom: 1px solid @ini_border; 82 83 li { 84 margin: 0; 85 padding: 0.25em; 86 } 87 } 88 } 89 90 div.mobile-menu.open { 91 display: block; 92 } 93 94 #page-base, 95 #head-base, 96 #head, 97 #panel { 98 display: none; 99 } 100 101 div#content, 102 div#footer { 103 margin-left: 0; 104 } 105 106} 107