assets/main/sass/layout/_ghost.scss

   1 // Main
   2 // --------------------------------------------
   3
   4 #header .logo {
   5     color: #3d4449;
   6     font-weight: bold;
   7 }
   8
   9 #header .logo.image {
  10     padding: 0;
  11     border: none;
  12     display: inline-flex;
  13     height: 28px;
  14
  15     @include breakpoint('<=small') {
  16         display: flex;
  17         justify-content: center;
  18         text-align: center;
  19     }
  20 }
  21
  22 #header .logo.image img {
  23     height: 28px;
  24     transform: none !important;
  25 }
  26
  27 @include breakpoint('<=small') {
  28     #sidebar:not(.inactive) .toggle:before {
  29         color: #fff;
  30     }
  31
  32     #sidebar:not(.inactive) .toggle:after {
  33         background: #f56a6a;
  34     }
  35 }
  36
  37 #banner {
  38     border-bottom: solid 2px rgba(210, 215, 217, 0.75);
  39 }
  40
  41
  42 .content {
  43     max-width: 700px;
  44     margin: 0 auto;
  45 }
  46
  47 // Pagination
  48 // --------------------------------------------
  49
  50 // Couple of alignment fixes cause we're not
  51 // using page numbers, just prev/next
  52 .pagination {
  53     display: flex;
  54     justify-content: space-between;
  55     align-items: center;
  56     width: 100%;
  57     padding: 3rem 0;
  58     border-top: solid 2px rgba(210, 215, 217, 0.75);
  59 }
  60
  61
  62 // Tag Archive
  63 // --------------------------------------------
  64
  65 .tag-header {
  66     padding: 5em 0 2em 0;
  67     border-bottom: solid 2px rgba(210, 215, 217, 0.75);
  68     text-align: center;
  69 }
  70
  71
  72 // Author Archive
  73 // --------------------------------------------
  74
  75 .author-header {
  76     display: flex;
  77     flex-direction: column;
  78     align-items: center;
  79     padding: 4em 0 3em 0;
  80     border-bottom: solid 2px rgba(210, 215, 217, 0.75);
  81     text-align: center;
  82
  83 }
  84
  85 .author-profile-image {
  86     flex-shrink: 0;
  87     margin: 0 0 15px 0;
  88     width: 100px;
  89     height: 100px;
  90     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
  91     display: block;
  92     background: #222;
  93     border-radius: 100%;
  94
  95     object-fit: cover;
  96 }
  97
  98 .author-header h1 {
  99     margin-bottom: 0.5rem;
 100 }
 101
 102 .author-meta {
 103     display: flex;
 104     align-items: center;
 105 }
 106
 107 .author-meta .icon,
 108 .author-meta .bull {
 109     padding: 5px 10px;
 110 }
 111
 112 .author-location:before {
 113     margin-right: 10px;
 114 }
 115
 116 // Author Box
 117 // --------------------------------------------
 118
 119 .post-footer {
 120     margin: 4rem auto 0;
 121     max-width: 700px;
 122 }
 123
 124 .authors {
 125     display: flex;
 126     justify-content: center;
 127     flex-wrap: wrap;
 128     margin: 0 -40px;
 129 }
 130
 131 .author-box  {
 132     flex: 1 1 300px;
 133     display: inline-flex;
 134     align-items: flex-start;
 135     padding: 5px 20px;
 136     margin: 0 20px 20px;
 137     border: none;
 138 }
 139
 140 .author-box:hover {
 141     color: #212931 !important;
 142 }
 143
 144 .author-box:hover .author-box-name {
 145     color: #18bfef;
 146     transition: color 0.2s ease;
 147 }
 148
 149 .author-box .author-profile-image {
 150     height: 60px;
 151     width: 60px;
 152     margin-right: 20px;
 153 }
 154
 155 .author-box-content {
 156     display: flex;
 157     flex-direction: column;
 158 }
 159
 160 .author-box-label {
 161     font-family: _font(family-heading);
 162     font-size: 0.7rem;
 163     line-height: 1em;
 164     font-weight: 300;
 165     text-transform: uppercase;
 166     color: #999;
 167 }
 168
 169 .author-box-name {
 170     margin: 3px 0;
 171     font-size: 1.3rem;
 172     line-height: 1.2em;
 173     transition: color 0.5s ease;
 174 }
 175
 176 .author-box p {
 177     margin: 0;
 178     font-size: 0.9rem;
 179     line-height: 1.5em;
 180 }
 181
 182 .kg-image {
 183     max-width: 100%;
 184 }
 185
 186 // Content
 187 // --------------------------------------------
 188
 189 // Markdown images and videos
 190 .content p > img, .content p > video {
 191     max-width: 100%;
 192 }
 193
 194 .kg-card {
 195     margin: 0 0 2rem 0;
 196 }
 197
 198 .kg-embed-card {
 199     display: flex;
 200     flex-direction: column;
 201     align-items: center;
 202     min-width: 100%;
 203 }
 204
 205 .kg-image {
 206     width: 100%;
 207 }
 208
 209 .kg-card figcaption {
 210     font-size: 0.8rem;
 211     line-height: 1.4em;
 212     text-align: center;
 213 }
 214
 215 .kg-width-wide {
 216     position: relative;
 217     margin-left: -6rem;
 218     margin-right: -6rem;
 219     width: calc(100% + 12rem);
 220
 221     @include breakpoint('<=large') {
 222         margin-left: -4rem;
 223         margin-right: -4rem;
 224         width: calc(100% + 8rem);
 225     }
 226     @include breakpoint('<=medium') {
 227         margin-left: -2rem;
 228         margin-right: -2rem;
 229         width: calc(100% + 4rem);
 230     }
 231     @include breakpoint('<=small') {
 232         margin-left: 0;
 233         margin-right: 0;
 234         width: 100%;
 235     }
 236 }
 237
 238 .kg-width-full {
 239     position: relative;
 240     margin-left: -14.1rem;
 241     margin-right: -14.1rem;
 242     width: calc(100% + 28.25rem);
 243
 244     @include breakpoint('<=large') {
 245         margin-left: -8rem;
 246         margin-right: -8rem;
 247         width: calc(100% + 16rem);
 248     }
 249     @include breakpoint('<=medium') {
 250         margin-left: -4rem;
 251         margin-right: -4rem;
 252         width: calc(100% + 8rem);
 253     }
 254     @include breakpoint('<=small') {
 255         margin-left: -2rem;
 256         margin-right: -2rem;
 257         width: calc(100% + 4rem);
 258     }
 259 }
 260
 261 .kg-gallery-container {
 262     display: flex;
 263     flex-direction: column;
 264     margin-left: -6rem;
 265     margin-right: -6rem;
 266     width: calc(100% + 12rem);
 267
 268     @include breakpoint('<=large') {
 269         margin-left: -4rem;
 270         margin-right: -4rem;
 271         width: calc(100% + 8rem);
 272     }
 273     @include breakpoint('<=medium') {
 274         margin-left: -2rem;
 275         margin-right: -2rem;
 276         width: calc(100% + 4rem);
 277     }
 278     @include breakpoint('<=small') {
 279         margin-left: 0;
 280         margin-right: 0;
 281         width: 100%;
 282     }
 283 }
 284
 285 .kg-gallery-row {
 286     display: flex;
 287     flex-direction: row;
 288     justify-content: center;
 289 }
 290
 291 .kg-gallery-image img {
 292     display: block;
 293     margin: 0;
 294     width: 100%;
 295     height: 100%;
 296 }
 297
 298 .kg-gallery-row:not(:first-of-type) {
 299     margin: 0.75em 0 0 0;
 300 }
 301
 302 .kg-gallery-image:not(:first-of-type) {
 303     margin: 0 0 0 0.75em;
 304 }
 305
 306 .kg-gallery-card + .kg-image-card.kg-width-wide,
 307 .kg-gallery-card + .kg-gallery-card,
 308 .kg-image-card.kg-width-wide + .kg-gallery-card,
 309 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
 310     margin: -2.25em 0 3em;
 311 }
 312
 313 .kg-bookmark-card {
 314     background: #fff;
 315     width: 100%;
 316 }
 317
 318 .kg-bookmark-container {
 319     display: flex;
 320     text-decoration: none;
 321     min-height: 148px;
 322     border: 1px solid rgba(210, 215, 217, 0.75);
 323     border-radius: .375em;
 324     box-sizing: border-box;
 325
 326     @include breakpoint('<=xsmall') {
 327         flex-direction: column;
 328     }
 329 }
 330
 331 .kg-bookmark-container:hover {
 332     border-bottom-color: rgba(210, 215, 217, 0.75);
 333 }
 334
 335 .kg-bookmark-content {
 336     display: flex;
 337     flex-direction: column;
 338     flex-grow: 1;
 339     align-items: flex-start;
 340     justify-content: start;
 341     padding: 1.2rem;
 342
 343     @include breakpoint('<=xsmall') {
 344         order: 2;
 345     }
 346 }
 347
 348 .kg-bookmark-title {
 349     font-weight: 600;
 350     line-height: 1.5em;
 351     color: #3d4449;
 352 }
 353
 354 .kg-bookmark-container:hover .kg-bookmark-title {
 355     color: #f56a6a;
 356 }
 357
 358 .kg-bookmark-description {
 359     display: -webkit-box;
 360     font-size: 90%;
 361     font-weight: 400;
 362     line-height: 1.6em;
 363     color: #7f888f;
 364     margin-top: 0.8rem;
 365     max-height: 2.6rem;
 366     overflow-y: hidden;
 367     -webkit-line-clamp: 2;
 368     -webkit-box-orient: vertical;
 369 }
 370
 371 .kg-bookmark-thumbnail {
 372     position: relative;
 373     min-width: 33%;
 374     max-height: 100%;
 375     margin: -1px -1px -1px 0;
 376
 377     @include breakpoint('<=xsmall') {
 378         order: 1;
 379         min-height: 10.6rem;
 380         margin: -1px -1px 0px -1px;
 381     }
 382 }
 383
 384 .kg-bookmark-thumbnail img {
 385     position: absolute;
 386     top: 0;
 387     left: 0;
 388     width: 100%;
 389     height: 100%;
 390     object-fit: cover;
 391     border-radius: 0 .375em .375em 0;
 392
 393     @include breakpoint('<=xsmall') {
 394         border-radius: .375em .375em 0 0;
 395     }
 396 }
 397
 398 .kg-bookmark-metadata {
 399     display: flex;
 400     align-items: center;
 401     font-size: 90%;
 402     line-height: 1.6em;
 403     color: #7f888f;
 404     margin-top: 1rem;
 405     flex-wrap: wrap;
 406 }
 407
 408 .kg-bookmark-icon {
 409     width: 20px;
 410     height: 20px;
 411     margin-right: 0.4rem;
 412 }
 413
 414 .kg-bookmark-author:after {
 415     content: "•";
 416     margin: 0 0.4rem;
 417 }
 418
 419 .kg-bookmark-publisher {
 420     overflow: hidden;
 421     line-height: 1.5em;
 422     text-overflow: ellipsis;
 423     white-space: nowrap;
 424     max-width: 14rem;
 425 }
 426
 427 // Error Pages
 428 // --------------------------------------------
 429
 430 .error-page {
 431     height: 100%;
 432     display: flex;
 433     flex-direction: column;
 434 }
 435
 436 .error-wrapper {
 437     flex-grow: 1;
 438     display: flex;
 439     justify-content: center;
 440     align-items: center;
 441     height: 100%;
 442     width: 100%;
 443     padding-bottom: 8rem !important;
 444     text-align: center;
 445 }
 446
 447 .error-code {
 448     margin: 0;
 449 }