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 -24px;
 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 .kg-card {
 190     margin: 0 0 2rem 0;
 191 }
 192
 193 .kg-embed-card {
 194     display: flex;
 195     flex-direction: column;
 196     align-items: center;
 197     min-width: 100%;
 198 }
 199
 200 .kg-image {
 201     max-width: 100%;
 202 }
 203
 204 .kg-card figcaption {
 205     font-size: 0.8rem;
 206     line-height: 1.4em;
 207     text-align: center;
 208 }
 209
 210 .kg-width-wide {
 211     position: relative;
 212     margin-left: -6rem;
 213     margin-right: -6rem;
 214     width: calc(100% + 12rem);
 215
 216     @include breakpoint('<=large') {
 217         margin-left: -4rem;
 218         margin-right: -4rem;
 219         width: calc(100% + 8rem);
 220     }
 221     @include breakpoint('<=medium') {
 222         margin-left: -2rem;
 223         margin-right: -2rem;
 224         width: calc(100% + 4rem);
 225     }
 226     @include breakpoint('<=small') {
 227         margin-left: 0;
 228         margin-right: 0;
 229         width: 100%;
 230     }
 231 }
 232
 233 .kg-width-full {
 234     position: relative;
 235     margin-left: -14.1rem;
 236     margin-right: -14.1rem;
 237     width: calc(100% + 28.2rem);
 238
 239     @include breakpoint('<=large') {
 240         margin-left: -8rem;
 241         margin-right: -8rem;
 242         width: calc(100% + 16rem);
 243     }
 244     @include breakpoint('<=medium') {
 245         margin-left: -4rem;
 246         margin-right: -4rem;
 247         width: calc(100% + 8rem);
 248     }
 249     @include breakpoint('<=small') {
 250         margin-left: -2rem;
 251         margin-right: -2rem;
 252         width: calc(100% + 4rem);
 253     }
 254 }
 255
 256 .kg-gallery-container {
 257     display: flex;
 258     flex-direction: column;
 259     margin-left: -6rem;
 260     margin-right: -6rem;
 261     width: calc(100% + 12rem);
 262
 263     @include breakpoint('<=large') {
 264         margin-left: -4rem;
 265         margin-right: -4rem;
 266         width: calc(100% + 8rem);
 267     }
 268     @include breakpoint('<=medium') {
 269         margin-left: -2rem;
 270         margin-right: -2rem;
 271         width: calc(100% + 4rem);
 272     }
 273     @include breakpoint('<=small') {
 274         margin-left: 0;
 275         margin-right: 0;
 276         width: 100%;
 277     }
 278 }
 279
 280 .kg-gallery-row {
 281     display: flex;
 282     flex-direction: row;
 283     justify-content: center;
 284 }
 285
 286 .kg-gallery-image img {
 287     display: block;
 288     margin: 0;
 289     width: 100%;
 290     height: 100%;
 291 }
 292
 293 .kg-gallery-row:not(:first-of-type) {
 294     margin: 0.75em 0 0 0;
 295 }
 296
 297 .kg-gallery-image:not(:first-of-type) {
 298     margin: 0 0 0 0.75em;
 299 }
 300
 301 .kg-gallery-card + .kg-image-card.kg-width-wide,
 302 .kg-gallery-card + .kg-gallery-card,
 303 .kg-image-card.kg-width-wide + .kg-gallery-card,
 304 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
 305     margin: -2.25em 0 3em;
 306 }
 307
 308 // Error Pages
 309 // --------------------------------------------
 310
 311 .error-page {
 312     height: 100%;
 313     display: flex;
 314     flex-direction: column;
 315 }
 316
 317 .error-wrapper {
 318     flex-grow: 1;
 319     display: flex;
 320     justify-content: center;
 321     align-items: center;
 322     height: 100%;
 323     width: 100%;
 324     padding-bottom: 8rem !important;
 325     text-align: center;
 326 }
 327
 328 .error-code {
 329     margin: 0;
 330 }