mirror of https://github.com/Nofated095/blog
194 lines
3.8 KiB
Stylus
194 lines
3.8 KiB
Stylus
/* ---------------------------------
|
|
* Article Summary and Content
|
|
* --------------------------------- */
|
|
$article-font-size ?= 1.1rem
|
|
|
|
article
|
|
&.media
|
|
color: $text-light
|
|
|
|
a
|
|
color: inherit
|
|
|
|
&:hover
|
|
color: $primary
|
|
|
|
.image
|
|
width: 64px
|
|
height: 64px
|
|
|
|
img
|
|
object-fit: cover
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.title
|
|
@extend .is-size-6
|
|
margin-bottom: .25em
|
|
|
|
.date, .categories
|
|
@extend .is-size-7
|
|
|
|
.categories
|
|
@extend .is-uppercase
|
|
|
|
.media-content
|
|
color: $text-light
|
|
|
|
.title
|
|
margin: 0
|
|
line-height: inherit
|
|
|
|
&.article
|
|
.article-meta, .article-tags
|
|
color: $text-light
|
|
|
|
.article-meta
|
|
overflow-x: auto
|
|
margin-bottom: .5rem
|
|
|
|
.article-more
|
|
@extend .button.is-light
|
|
|
|
.content
|
|
word-wrap: break-word
|
|
font-size: $article-font-size
|
|
|
|
h1
|
|
font-size: 1.75em
|
|
|
|
h2
|
|
font-size: 1.5em
|
|
|
|
h3
|
|
font-size: 1.25em
|
|
|
|
h4
|
|
font-size: 1.125em
|
|
|
|
h5
|
|
font-size: 1em
|
|
|
|
pre
|
|
font-size: .85em
|
|
|
|
code
|
|
padding: 0
|
|
background: transparent
|
|
overflow-wrap: break-word
|
|
|
|
blockquote
|
|
&.pullquote
|
|
float: right
|
|
max-width: 50%
|
|
font-size: 1.15rem
|
|
position: relative
|
|
|
|
footer
|
|
strong + cite
|
|
margin-left: .5em
|
|
|
|
.message.message-immersive
|
|
border-radius: 0
|
|
margin: 0 0 - $card-content-padding $card-content-padding 0 - $card-content-padding
|
|
|
|
.message-body
|
|
border: none
|
|
|
|
.rtl
|
|
direction: rtl
|
|
|
|
.level
|
|
&, &.is-mobile
|
|
.level-item:not(:last-child)
|
|
margin-left: .75rem
|
|
margin-right: 0
|
|
|
|
// Overflow table
|
|
.table-overflow
|
|
overflow-x: auto
|
|
|
|
table
|
|
width: auto !important
|
|
|
|
th
|
|
word-break: keep-all
|
|
|
|
// Video container
|
|
.video-container
|
|
position: relative
|
|
padding-bottom: 56.25%
|
|
padding-top: 25px
|
|
height: 0
|
|
|
|
iframe
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.article-licensing
|
|
position: relative
|
|
z-index: 1
|
|
box-shadow: none
|
|
background: $white-ter
|
|
border-radius: $radius
|
|
overflow: hidden
|
|
|
|
&:after
|
|
position: absolute
|
|
z-index: -1
|
|
right: -50px
|
|
top: -87.87px
|
|
content: '\f25e'
|
|
font-size: 200px
|
|
font-family: 'Font Awesome 5 Brands'
|
|
opacity: .1
|
|
|
|
.level-left
|
|
flex-wrap: wrap
|
|
max-width: 100%
|
|
|
|
.licensing-title
|
|
@extend .mb-3
|
|
line-height: 1.2
|
|
|
|
p:not(:last-child)
|
|
@extend .mb-1
|
|
|
|
a
|
|
@extend .is-size-7, .has-text-grey
|
|
|
|
.licensing-meta
|
|
.level-item
|
|
@extend .mr-4
|
|
|
|
.icons
|
|
.icon
|
|
@extend .ml-1
|
|
width: 1.2em
|
|
height: 1.2em
|
|
font-size: 1.2em
|
|
vertical-align: bottom
|
|
|
|
h6
|
|
@extend .is-size-7
|
|
|
|
a
|
|
color: inherit
|
|
|
|
a
|
|
&.article-nav-prev
|
|
span
|
|
text-align: left
|
|
flex-shrink: 1
|
|
word-wrap: break-word
|
|
white-space: normal
|
|
|
|
&.article-nav-next
|
|
span
|
|
text-align: right
|
|
flex-shrink: 1
|
|
word-wrap: break-word
|
|
white-space: normal |