Newer
Older
.top
margin-bottom: $spacing2
a
@include icon("arrow-right", "after", px2rem(16), true)
text-decoration: none
article
h1
a
@include stretched-link
text-decoration: none
.post-content
> * + *
margin-top: $spacing0
.media
margin-top: 0
&--grid
@include media-breakpoint-down(md)
article + article
margin-top: $spacing3
@include media-breakpoint-up(md)
@include in-page-with-sidebar
.grid
@include grid(2, md, $grid-gutter, half($grid-gutter))
@include in-page-without-sidebar
.grid
@include grid(3)
&--list
article
border-bottom: 1px solid $color-border
.media
background: none
margin: 0
&, img
aspect-ratio: auto
@include media-breakpoint-down(md)
article
position: relative
padding-bottom: half($spacing3)
// display: flex
// flex-direction: row
+ article
margin-top: half($spacing3)
.post-content
display: flex
flex-direction: column
h1
margin-bottom: 0
time
margin-top: half($spacing0)
order: 2
p
margin-top: half($spacing0)
order: 4
// h1, time, p
// padding-right: calc(30% + #{$spacing1})
// position: absolute
// width: 30%
// top: 0
// right: 0
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
@include media-breakpoint-up(md)
article
display: flex
flex-direction: row
@include in-page-with-sidebar
article
padding-bottom: $spacing1
+ article
margin-top: $spacing1
.media
width: calc(#{col(2, 8)} + #{half($grid-gutter)})
.post-content
width: col(6, 8)
margin-left: half($grid-gutter)
@include in-page-without-sidebar
article
padding-bottom: $spacing3
border-bottom: 1px solid $color-border
position: relative
.media
width: col(3)
.post-content
width: col(6)
margin-left: $grid-gutter
+ article
margin-top: $spacing3
time
position: absolute
right: 0
top: 0
margin-top: 0.3em
&--highlight
.highlight-post
h1
margin-bottom: $spacing0
.media
margin-bottom: $spacing0
background: none
&, img
aspect-ratio: auto
.list
margin-top: half($spacing3)
border-top: 1px solid $color-border
article
@include article
border-bottom: 1px solid $color-border
position: relative
padding-bottom: half($spacing3)
margin-top: half($spacing3)
article
> * + *
margin-top: $spacing0
.media
margin-top: 0
@include media-breakpoint-down(md)
.list
border-top: 1px solid $color-border
@include media-breakpoint-up(md)
.highlight
h1
@include h2
.list
article
h1
@include h4
@include in-page-with-sidebar
.highlight-post
.post
flex-direction: row
.media
width: calc(#{col(3, 8)} + #{half($grid-gutter)})
margin-bottom: 0
.post-content
width: col(5, 8)
margin-left: half($grid-gutter)
.list
article
@include grid(8, md, 0, 0)
h1
grid-column: 1 / 7
time
grid-column: 7 / 9
text-align: right
order: 2
margin-top: 0
p
grid-column: 1 / 7
order: 3
@include in-page-without-sidebar
.highlight
@include grid(2)
.list
border-top: 0
margin-top: 0
article:first-child
margin-top: 0