hamburger.css (2462B)
1 @media (max-width: 420px) { 2 .header .logo a { 3 font-size: 18px; 4 } 5 } 6 7 @media (max-width: 340px) { 8 .header .logo a { 9 font-size: 0; 10 } 11 } 12 13 .header #menu-button { 14 display: none; 15 } 16 17 .header #menu-icon { 18 display: none; 19 } 20 21 .header #menu-capture { 22 display: none; 23 } 24 25 @media (max-width: 600px) { 26 .header #menu-button:checked ~ #menu-capture { 27 display: block; 28 position: fixed; 29 top: 0px; 30 left: 0px; 31 height: 100%; 32 width: 100%; 33 z-index: 1; 34 } 35 36 .header #menu-icon { 37 cursor: pointer; 38 display: inline-block; 39 float: right; 40 margin-left: auto; 41 padding: calc((var(--header-height) - 2px) / 2) var(--gap); 42 padding-left: 0px; 43 position: relative; 44 user-select: none; 45 } 46 47 .header #menu-icon span { 48 background: var(--primary); 49 display: block; 50 height: 2px; 51 position: relative; 52 transition: background .1s ease-out; 53 width: 18px; 54 } 55 56 .header #menu-icon span:before, 57 .header #menu-icon span:after { 58 background: var(--primary); 59 content: ''; 60 display: block; 61 height: 100%; 62 position: absolute; 63 transition: all .1s ease-out; 64 width: 100%; 65 } 66 67 .header #menu-icon span:before { 68 top: 5px; 69 } 70 71 .header #menu-icon span:after { 72 top: -5px; 73 } 74 75 .header #menu-button:checked ~ #menu { 76 transform: scaleY(1); 77 } 78 79 .header #menu { 80 flex-direction: column; 81 padding: 0px; 82 align-items: end; 83 position: absolute; 84 top: var(--header-height); 85 right: var(--gap); 86 background: var(--entry); 87 border-radius: var(--radius); 88 z-index: 2; 89 clear: both; 90 border: 1px solid var(--border); 91 box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.1); 92 transform: scaleY(0); 93 transform-origin: top; 94 transition: transform .1s ease-out; 95 } 96 97 .dark .header #menu { 98 box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.4); 99 } 100 101 .header #menu li { 102 line-height: initial; 103 margin-inline: var(--gap); 104 margin-top: var(--gap); 105 } 106 107 .header #menu li:last-child{ 108 margin-bottom: var(--gap); 109 } 110 111 .header #menu-button:checked ~ #menu-icon span { 112 background: transparent; 113 } 114 115 .header #menu-button:checked ~ #menu-icon span:before { 116 transform: rotate(-45deg); 117 } 118 119 .header #menu-button:checked ~ #menu-icon span:after { 120 transform: rotate(45deg); 121 } 122 123 .header #menu-button:checked ~ #menu-icon:not(.steps) span:before, 124 .header #menu-button:checked ~ #menu-icon:not(.steps) span:after { 125 top: 0; 126 } 127 }