_layout.scss (5002B)
1 * { 2 &, 3 &:before, 4 &:after { 5 box-sizing: border-box; 6 } 7 } 8 9 html, 10 body { 11 width: 100%; 12 height: 100%; 13 } 14 15 .clearfix { 16 &:before { 17 content: " "; 18 display: table; 19 } 20 21 &:after { 22 content: " "; 23 display: table; 24 clear: both; 25 } 26 27 *zoom: 1; 28 } 29 30 body { 31 background-color: $base-background-color; 32 } 33 34 hr { 35 border-top: none; 36 border-bottom: 2px solid lighten($light-gray-color, 7%); 37 width: 100%; 38 margin: $small-spacing 0; 39 } 40 41 .container { 42 padding: $base-spacing; 43 margin-left: auto; 44 margin-right: auto; 45 max-width: 800px; 46 font-weight: normal; 47 } 48 49 .pull-left { 50 float: left; 51 } 52 53 .pull-right { 54 float: right; 55 } 56 57 .link { 58 color: $blue-color; 59 padding-bottom: .05em; 60 border-bottom: 2px solid transparent; 61 62 @include transition(border 300ms linear); 63 64 &:hover, 65 &:focus, 66 &:active { 67 border-bottom: 2px solid $blue-color; 68 } 69 } 70 71 .site-header { 72 border-bottom: 1px solid lighten($light-gray-color, 5%); 73 margin-bottom: $small-spacing; 74 min-height: 80px; 75 } 76 77 .intro { 78 .author-name { 79 display: inline-block; 80 padding: 0 .2em; 81 background: lighten($light-gray-color, 15%) 82 } 83 84 a { 85 @extend .link; 86 } 87 88 .container { 89 padding-bottom: 0; 90 display: table; 91 } 92 } 93 94 .logo { 95 float: left; 96 margin: 0 0 1em 0; 97 cursor: pointer; 98 letter-spacing: 0.8px; 99 font-size: 20px; 100 line-height: 28px; 101 font-weight: 300; 102 103 span { 104 font-weight: 700; 105 } 106 } 107 108 .nav { 109 min-height: 64px; 110 } 111 112 .navbar { 113 float: right; 114 margin: 0; 115 position: relative; 116 padding: 0; 117 pointer-events: all; 118 cursor: pointer; 119 120 li { 121 display: inline-block; 122 padding: 0 .6em; 123 } 124 125 a { 126 @extend .link; 127 } 128 } 129 130 .category-title { 131 margin: 1em 0 0.5em 0; 132 133 &:first-child { 134 margin-top: 0; 135 } 136 } 137 138 .post-item { 139 margin-bottom: 0.2em; 140 display: block; 141 142 a { 143 color: $action-color; 144 } 145 146 .article-title { 147 display: inline-block; 148 width: 85%; 149 //border-bottom: 1px dashed lighten($light-gray-color, 10%); 150 } 151 152 .date-label { 153 //border: 1px solid lighten($light-gray-color, 10%); 154 padding: 0 0.2em; 155 margin-left: 1em; 156 margin-top: 2px; 157 @extend .pull-right; 158 } 159 160 } 161 162 .post-meta { 163 color: $medium-gray-color; 164 text-transform: uppercase; 165 display: inline-block; 166 letter-spacing: 1px; 167 font-size: rem(14); 168 margin-bottom: 1px; 169 } 170 171 .post-title { 172 margin-top: 0; 173 margin-bottom: 1em; 174 color: $dark-gray-color; 175 } 176 177 .post-link, 178 .post a, 179 .page a { 180 @extend .link; 181 } 182 183 .post { 184 @extend .clearfix; 185 } 186 187 .pagination { 188 li, a, span { 189 display: inline-block; 190 } 191 192 a, span { 193 font-size: rem(12); 194 padding: .5em; 195 } 196 197 .prev, .next { 198 @extend .link; 199 } 200 } 201 202 .share { 203 border-top: 0.2em dashed lighten($light-gray-color, 13%); 204 padding-top: $base-spacing; 205 margin-top: $base-spacing * 2; 206 207 p { 208 margin: 0 5em; 209 font-size: rem(14); 210 color: $medium-gray-color; 211 } 212 } 213 214 .disqus { 215 background-color: lighten($light-gray-color, 16%); 216 padding: $base-spacing 0; 217 218 hr { 219 margin: $base-spacing 0; 220 } 221 } 222 223 .site-footer { 224 @extend .clearfix; 225 226 padding: $base-spacing 0; 227 228 a { 229 @extend .link; 230 } 231 232 small { 233 display: block; 234 font-size: rem(12); 235 color: darken($medium-gray-color, 10%); 236 } 237 238 .block { 239 display: block; 240 } 241 } 242 243 .video-container { 244 position:relative; 245 padding-bottom:56.25%; 246 padding-top:30px; 247 height:0; 248 overflow:hidden; 249 250 iframe, 251 object, 252 embed { 253 position:absolute; 254 top:0; 255 left:0; 256 width:100%; 257 height:100%; 258 } 259 } 260 261 .divider { 262 border-top: 0.2em solid lighten($light-gray-color, 13%); 263 margin-bottom: $base-spacing * 2; 264 margin-top: $base-spacing * 2; 265 } 266 267 // This applies from 0px to 600px 268 @media (max-width: 600px) { 269 .date-label { 270 float: left !important; 271 border: 0 !important; 272 margin-left: -2px !important; 273 margin-top: 2px; 274 margin-right: 1em; 275 } 276 277 .post-item { 278 border: 1px solid lighten($light-gray-color, 10%); 279 padding: 0 0.5em; 280 background: lighten($light-gray-color, 15%); 281 } 282 283 .article-title { 284 border-bottom: none !important; 285 } 286 287 .post-link { 288 &:hover, 289 &:focus, 290 &:active { 291 border-bottom: 2px solid transparent; 292 color: $blue-color; 293 } 294 } 295 296 .navbar { 297 a span { 298 /* hide text on small screens, display only octicon */ 299 display: none; 300 } 301 } 302 } 303 304 .applist { 305 display: flex; 306 flex-wrap: wrap; 307 justify-content: space-between; 308 li { 309 width: 32%; 310 padding: 5px; 311 height: 140px; 312 list-style: none; 313 a { 314 text-align: center; 315 display: flex; 316 justify-content: center; 317 align-items: end; 318 height: 100%; 319 } 320 } 321 .diary { 322 background: #fbf8ec url("https://diary.p0c.ch/assets/images/diary-worm.png") no-repeat center; 323 background-size: 70px; 324 } 325 .myheats { 326 background: #edf5fa url("https://myheats.p0c.ch/assets/images/myheats-bw-font.png") no-repeat center; 327 background-size: 70px; 328 } 329 .hivedav { 330 background: #f9f2fa url("https://hivedav.p0c.ch/assets/images/hive.png") no-repeat center; 331 background-size: 70px; 332 } 333 }