assets/main/sass/layout/_ghost.scss

   1 // Main
   2 // --------------------------------------------
   3
   4 // Fix main cover image bg position
   5 #wrapper>.bg {
   6     background-position: top center;
   7     background-size: cover;
   8 }
   9
  10 #intro {
  11     max-width: 800px;
  12     margin: 0 auto;
  13 }
  14
  15 #header .logo.image {
  16     padding: 0;
  17     border: none;
  18 }
  19
  20 #header .logo.image img {
  21     height: 75px;
  22     transform: none !important;
  23 }
  24
  25 .content {
  26     max-width: 700px;
  27     margin: 0 auto;
  28 }
  29
  30 // Pagination
  31 // --------------------------------------------
  32
  33 // Couple of alignment fixes cause we're not
  34 // using page numbers, just prev/next
  35 .pagination {
  36     display: flex;
  37     justify-content: space-between;
  38     align-items: center;
  39     width: 100%;
  40 }
  41
  42 .page-number {
  43     padding: 0 20px;
  44     border-color: transparent !important;
  45     color: #222 !important;;
  46 }
  47
  48 .spacer {
  49     width: 160px;
  50 }
  51
  52
  53 // Tag Archive
  54 // --------------------------------------------
  55
  56 .tag-header,
  57 .tag-header p {
  58     text-align: center;
  59 }
  60
  61
  62 // Author Archive
  63 // --------------------------------------------
  64
  65 .author-header {
  66     display: flex;
  67     flex-direction: column;
  68     align-items: center;
  69 }
  70
  71 .author-profile-image {
  72     flex-shrink: 0;
  73     margin: 0 0 20px 0;
  74     width: 100px;
  75     height: 100px;
  76     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
  77     display: block;
  78     background: #222;
  79     border-radius: 100%;
  80
  81     object-fit: cover;
  82 }
  83
  84 .author-header h1 {
  85     margin-bottom: 1rem;
  86 }
  87
  88 .author-meta {
  89     display: flex;
  90     align-items: center;
  91 }
  92
  93 .author-meta .icon,
  94 .author-meta .bull {
  95     padding: 5px 10px;
  96 }
  97
  98 .author-location:before {
  99     margin-right: 10px;
 100 }
 101
 102 // Author Box
 103 // --------------------------------------------
 104
 105 .post-footer {
 106     margin: 4rem auto 0;
 107     max-width: 700px;
 108 }
 109
 110 .authors {
 111     display: flex;
 112     justify-content: center;
 113     flex-wrap: wrap;
 114     margin: 0 -40px;
 115 }
 116
 117 .author-box  {
 118     flex: 1 1 300px;
 119     display: inline-flex;
 120     align-items: flex-start;
 121     padding: 5px 20px;
 122     margin: 0 20px 20px;
 123     border: none;
 124 }
 125
 126 .author-box:hover {
 127     color: #212931 !important;
 128 }
 129
 130 .author-box:hover .author-box-name {
 131     color: #18bfef;
 132     transition: color 0.2s ease;
 133 }
 134
 135 .author-box .author-profile-image {
 136     height: 60px;
 137     width: 60px;
 138     margin-right: 20px;
 139 }
 140
 141 .author-box-content {
 142     display: flex;
 143     flex-direction: column;
 144 }
 145
 146 .author-box-label {
 147     font-family: _font(family-heading);
 148     font-size: 0.7rem;
 149     line-height: 1em;
 150     font-weight: 300;
 151     text-transform: uppercase;
 152     color: #999;
 153 }
 154
 155 .author-box-name {
 156     margin: 3px 0;
 157     font-size: 1.3rem;
 158     line-height: 1.2em;
 159     transition: color 0.5s ease;
 160 }
 161
 162 .author-box p {
 163     margin: 0;
 164     font-size: 0.9rem;
 165     line-height: 1.5em;
 166 }
 167
 168 .kg-image {
 169     max-width: 100%;
 170 }
 171
 172 // Content
 173 // --------------------------------------------
 174
 175 .kg-card {
 176     margin: 0 0 2rem 0;
 177 }
 178
 179 .kg-embed-card {
 180     display: flex;
 181     flex-direction: column;
 182     align-items: center;
 183     min-width: 100%;
 184 }
 185
 186 .kg-image {
 187     max-width: 100%;
 188 }
 189
 190 .kg-card figcaption {
 191     font-size: 0.8rem;
 192     line-height: 1.4em;
 193     text-align: center;
 194 }
 195
 196 .kg-width-wide {
 197     position: relative;
 198     margin-left: -6rem;
 199     margin-right: -6rem;
 200     width: calc(100% + 12rem);
 201
 202     @include breakpoint('<=large') {
 203         margin-left: -4rem;
 204         margin-right: -4rem;
 205         width: calc(100% + 8rem);
 206     }
 207     @include breakpoint('<=medium') {
 208         margin-left: -2rem;
 209         margin-right: -2rem;
 210         width: calc(100% + 4rem);
 211     }
 212     @include breakpoint('<=small') {
 213         margin-left: 0;
 214         margin-right: 0;
 215         width: 100%;
 216     }
 217 }
 218
 219 .kg-width-full {
 220     position: relative;
 221     margin-left: -14.1rem;
 222     margin-right: -14.1rem;
 223     width: calc(100% + 28.2rem);
 224
 225     @include breakpoint('<=large') {
 226         margin-left: -8rem;
 227         margin-right: -8rem;
 228         width: calc(100% + 16rem);
 229     }
 230     @include breakpoint('<=medium') {
 231         margin-left: -4rem;
 232         margin-right: -4rem;
 233         width: calc(100% + 8rem);
 234     }
 235     @include breakpoint('<=small') {
 236         margin-left: -2rem;
 237         margin-right: -2rem;
 238         width: calc(100% + 4rem);
 239     }
 240 }
 241
 242 .kg-gallery-container {
 243     display: flex;
 244     flex-direction: column;
 245     margin-left: -6rem;
 246     margin-right: -6rem;
 247     width: calc(100% + 12rem);
 248
 249     @include breakpoint('<=large') {
 250         margin-left: -4rem;
 251         margin-right: -4rem;
 252         width: calc(100% + 8rem);
 253     }
 254     @include breakpoint('<=medium') {
 255         margin-left: -2rem;
 256         margin-right: -2rem;
 257         width: calc(100% + 4rem);
 258     }
 259     @include breakpoint('<=small') {
 260         margin-left: 0;
 261         margin-right: 0;
 262         width: 100%;
 263     }
 264 }
 265
 266 .kg-gallery-row {
 267     display: flex;
 268     flex-direction: row;
 269     justify-content: center;
 270 }
 271
 272 .kg-gallery-image img {
 273     display: block;
 274     margin: 0;
 275     width: 100%;
 276     height: 100%;
 277 }
 278
 279 .kg-gallery-row:not(:first-of-type) {
 280     margin: 0.75em 0 0 0;
 281 }
 282
 283 .kg-gallery-image:not(:first-of-type) {
 284     margin: 0 0 0 0.75em;
 285 }
 286
 287 .kg-gallery-card + .kg-image-card.kg-width-wide,
 288 .kg-gallery-card + .kg-gallery-card,
 289 .kg-image-card.kg-width-wide + .kg-gallery-card,
 290 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
 291     margin: -2.25em 0 3em;
 292 }