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 background-color: @ini_background; 32 &::before { 33 content: '✕'; 34 } 35 } 36 37 div.mobile-logo { 38 display: block; 39 a { 40 display: block; 41 width: 100%; 42 height: 3rem; 43 background-size: contain; 44 background-repeat: no-repeat; 45 background-position: center; 46 } 47 } 48 49 div.mobile-menu { 50 position: absolute; 51 top: 0; 52 left: 0; 53 54 height: 100%; 55 overflow-y: auto; 56 57 z-index: 500; 58 background-color: @ini_background; 59 box-shadow: 5px 0 5px @ini_border; 60 61 padding-top: 3rem; 62 63 a { 64 color: @ini_existing; 65 } 66 67 .mobile-search { 68 display: block; 69 margin: 0.25em; 70 input, 71 button { 72 line-height: inherit; 73 } 74 } 75 76 ul { 77 padding: 0; 78 list-style-type: none; 79 list-style-image: none !important; 80 margin: 0.25em 0; 81 82 border-bottom: 1px solid @ini_border; 83 84 li { 85 margin: 0; 86 padding: 0.25em; 87 } 88 } 89 } 90 91 div.mobile-menu.open { 92 display: block; 93 } 94 95 #page-base, 96 #head-base, 97 #head, 98 #panel { 99 display: none; 100 } 101 102 div#content, 103 div#footer { 104 margin-left: 0; 105 } 106 107} 108