responsive.css (4361B)
1 @media (min-width: 600px) { 2 /* content */ 3 .headline-hash { 4 display: none; 5 } 6 7 /* header */ 8 .header__title:not(h1) { 9 margin-top: 1.4em; 10 } 11 12 /* content */ 13 .image-figure { 14 margin-top: 1.5rem; 15 margin-bottom: 1.5rem; 16 } 17 18 .image-figure div.portrait { 19 width: 360px; 20 height: 520px; 21 } 22 .image-figure div.landscape { 23 width: 520px; 24 } 25 .image-figure div.landscape.r79 { 26 height: 490px; 27 } 28 .image-figure div.landscape.r72 { 29 height: 420px; 30 } 31 .image-figure div.landscape.r68 { 32 height: 370px; 33 } 34 .image-figure div.landscape.r58 { 35 height: 320px; 36 } 37 .image-figure div.landscape.r48 { 38 height: 250px; 39 } 40 .image-figure div.r1 { 41 width: 360px; 42 height: 390px; 43 } 44 } 45 46 @media (max-width: 599px) { 47 html { 48 font-size: 15px; 49 } 50 51 body { 52 padding: 0 1.5em; 53 margin: 0; 54 } 55 56 .listing__post { 57 padding: 0.3em 0 1.3em 0; 58 } 59 60 /* content */ 61 .before-hash { 62 display: none; 63 } 64 .responses:target { 65 outline: solid 0.3rem; 66 outline-offset: 1.2rem 0.8rem; 67 } 68 .notes:target { 69 outline: solid 0.3em; 70 outline-offset: 0.5em; 71 } 72 .notes__title { 73 margin: 10px 0 0; 74 display: flex; 75 flex-direction: column; 76 } 77 .notes__title__separator { 78 display: none; 79 } 80 .image-figure { 81 margin-left: auto; 82 margin-right: auto; 83 } 84 .image-figure div.portrait { 85 width: 275px; 86 height: 420px; 87 } 88 .image-figure div.landscape { 89 width: 350px; 90 } 91 .image-figure div.landscape.r79 { 92 height: 350px; 93 } 94 .image-figure div.landscape.r72 { 95 height: 300px; 96 } 97 .image-figure div.landscape.r68 { 98 height: 275px; 99 } 100 .image-figure div.landscape.r58 { 101 height: 240px; 102 } 103 .image-figure div.landscape.r48 { 104 height: 200px; 105 } 106 .image-figure div.r1 { 107 width: 350px; 108 height: 390px; 109 } 110 111 /* header */ 112 .header__title { 113 font-size: 1.4rem; 114 margin: 1rem 0; 115 } 116 .header__menu__list { 117 justify-content: space-between; 118 } 119 .header__menu__list__item { 120 margin: 0 0.1rem; 121 font-size: 0.9rem; 122 } 123 124 /* footer */ 125 .footer__nav { 126 font-size: 0.9rem; 127 display: flex; 128 flex-direction: column; 129 } 130 .footer__nav__left { 131 text-align: center; 132 padding-bottom: 0.5em; 133 margin: 0; 134 } 135 .footer__nav__right { 136 text-align: center; 137 margin-top: 0; 138 } 139 .footer__nav__right a { 140 line-height: 2rem; 141 } 142 } 143 144 @media (max-width: 400px) { 145 /* content */ 146 .image-figure div.portrait { 147 width: 250px; 148 height: 380px; 149 } 150 .image-figure div.landscape { 151 width: 300px; 152 } 153 .image-figure div.landscape.r79 { 154 height: 290px; 155 } 156 .image-figure div.landscape.r72 { 157 height: 270px; 158 } 159 .image-figure div.landscape.r68 { 160 height: 250px; 161 } 162 .image-figure div.landscape.r58 { 163 height: 220px; 164 } 165 .image-figure div.landscape.r48 { 166 height: 170px; 167 } 168 .image-figure div.r1 { 169 width: 290px; 170 height: 325px; 171 } 172 173 /* webmention */ 174 .wm-form form { 175 flex-direction: column; 176 } 177 .wm-form__button { 178 margin-top: .5rem; 179 margin-left: 0; 180 } 181 182 /* footer */ 183 .footer__nav__right a { 184 padding: 0 0.15rem; 185 margin: 0 0.15rem; 186 } 187 } 188 189 @media(max-width: 360px) { 190 a.button { 191 padding: 0.3rem; 192 } 193 194 /* header */ 195 .header__title { 196 font-size: 1.2em; 197 } 198 .header__menu__list__item { 199 font-size: 0.8rem; 200 } 201 202 /* content */ 203 .image-figure div.portrait { 204 width: 240px; 205 height: 370px; 206 } 207 .image-figure div.landscape { 208 width: 280px; 209 } 210 .image-figure div.landscape.r79 { 211 height: 280px; 212 } 213 .image-figure div.landscape.r72 { 214 height: 260px; 215 } 216 .image-figure div.landscape.r68 { 217 height: 240px; 218 } 219 .image-figure div.landscape.r58 { 220 height: 200px; 221 } 222 .image-figure div.landscape.r48 { 223 height: 160px; 224 } 225 .image-figure div.r1 { 226 width: 270px; 227 height: 310px; 228 } 229 } 230 231 @media(max-width: 320px) { 232 /* content */ 233 .image-figure div.portrait { 234 width: 230px; 235 height: 360px; 236 } 237 .image-figure div.landscape { 238 width: 250px; 239 } 240 .image-figure div.landscape.r79 { 241 height: 250px; 242 } 243 .image-figure div.landscape.r72 { 244 height: 240px; 245 } 246 .image-figure div.landscape.r68 { 247 height: 230px; 248 } 249 .image-figure div.landscape.r58 { 250 height: 200px; 251 } 252 .image-figure div.landscape.r48 { 253 height: 150px; 254 } 255 .image-figure div.r1 { 256 width: 250px; 257 height: 290px; 258 } 259 }