2 // --------------------------------------------
15 @include breakpoint('<=small') {
17 justify-content: center;
22 #header .logo.image img {
24 transform: none !important;
27 @include breakpoint('<=small') {
28 #sidebar:not(.inactive) .toggle:before {
32 #sidebar:not(.inactive) .toggle:after {
38 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
48 // --------------------------------------------
50 // Couple of alignment fixes cause we're not
51 // using page numbers, just prev/next
54 justify-content: space-between;
58 border-top: solid 2px rgba(210, 215, 217, 0.75);
63 // --------------------------------------------
67 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
73 // --------------------------------------------
77 flex-direction: column;
80 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
85 .author-profile-image {
90 box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
99 margin-bottom: 0.5rem;
112 .author-location:before {
117 // --------------------------------------------
126 justify-content: center;
133 display: inline-flex;
134 align-items: flex-start;
141 color: #212931 !important;
144 .author-box:hover .author-box-name {
146 transition: color 0.2s ease;
149 .author-box .author-profile-image {
155 .author-box-content {
157 flex-direction: column;
161 font-family: _font(family-heading);
165 text-transform: uppercase;
173 transition: color 0.5s ease;
187 // --------------------------------------------
189 // Markdown images and videos
190 .content p > img, .content p > video {
200 flex-direction: column;
209 .kg-card figcaption {
219 width: calc(100% + 12rem);
221 @include breakpoint('<=large') {
224 width: calc(100% + 8rem);
226 @include breakpoint('<=medium') {
229 width: calc(100% + 4rem);
231 @include breakpoint('<=small') {
240 margin-left: -14.1rem;
241 margin-right: -14.1rem;
242 width: calc(100% + 28.25rem);
244 @include breakpoint('<=large') {
247 width: calc(100% + 16rem);
249 @include breakpoint('<=medium') {
252 width: calc(100% + 8rem);
254 @include breakpoint('<=small') {
257 width: calc(100% + 4rem);
261 .kg-gallery-container {
263 flex-direction: column;
266 width: calc(100% + 12rem);
268 @include breakpoint('<=large') {
271 width: calc(100% + 8rem);
273 @include breakpoint('<=medium') {
276 width: calc(100% + 4rem);
278 @include breakpoint('<=small') {
288 justify-content: center;
291 .kg-gallery-image img {
298 .kg-gallery-row:not(:first-of-type) {
299 margin: 0.75em 0 0 0;
302 .kg-gallery-image:not(:first-of-type) {
303 margin: 0 0 0 0.75em;
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;
318 .kg-bookmark-container {
320 text-decoration: none;
322 border: 1px solid rgba(210, 215, 217, 0.75);
323 border-radius: .375em;
324 box-sizing: border-box;
326 @include breakpoint('<=xsmall') {
327 flex-direction: column;
331 .kg-bookmark-container:hover {
332 border-bottom-color: rgba(210, 215, 217, 0.75);
335 .kg-bookmark-content {
337 flex-direction: column;
339 align-items: flex-start;
340 justify-content: start;
343 @include breakpoint('<=xsmall') {
354 .kg-bookmark-container:hover .kg-bookmark-title {
358 .kg-bookmark-description {
359 display: -webkit-box;
367 -webkit-line-clamp: 2;
368 -webkit-box-orient: vertical;
371 .kg-bookmark-thumbnail {
375 margin: -1px -1px -1px 0;
377 @include breakpoint('<=xsmall') {
380 margin: -1px -1px 0px -1px;
384 .kg-bookmark-thumbnail img {
391 border-radius: 0 .375em .375em 0;
393 @include breakpoint('<=xsmall') {
394 border-radius: .375em .375em 0 0;
398 .kg-bookmark-metadata {
411 margin-right: 0.4rem;
414 .kg-bookmark-author:after {
419 .kg-bookmark-publisher {
422 text-overflow: ellipsis;
428 // --------------------------------------------
433 flex-direction: column;
439 justify-content: center;
443 padding-bottom: 8rem !important;