11.wpfc-sermon {
2- & :last-child {
3- margin-bottom 0 ;
4- }
5-
6- & -image {
7- height auto ;
8- position relative ;
9- }
10-
11- & -image-img {
12- width 100% ;
13- height 100% ;
14- background-size cover ;
15- background-position center ;
16- padding-top 56.25% ;
17- }
18-
19- & -header {
20- display grid ;
21- grid-template-columns 70% 30% ;
22- align-items center ;
23- }
24-
25- & -header-aside {
26- text-align center ;
27- }
28-
29- & -title {
2+
3+ & -shortcode {
4+ margin-bottom 2rem ;
5+ }
6+
7+ & -image {
8+ height auto ;
9+ position relative ;
10+ }
11+
12+ & -image-img {
13+ width 100% ;
14+ background-size cover ;
15+ background-position center ;
16+ }
17+
18+ & -header {
19+ display grid ;
20+ grid-template-columns 70% 30% ;
21+ align-items center ;
22+ }
23+
24+ & -header-aside {
25+ text-align center ;
26+ }
27+
28+ & -title {
29+ margin 0 ;
30+ padding 0 ;
31+ }
32+
33+ & -meta-item {
34+ font-size 14px ;
35+ opacity .87 ;
36+ }
37+
38+ & -meta-series {
39+ margin 0 0 8px 0 ;
40+ }
41+
42+ & -meta-date {
43+ margin 8px 0 0 ;
44+ }
45+
46+ & -description {
47+ font-size 14px ;
48+ margin 8px 0 0 ;
49+
50+ p {
51+ margin 0 0 12px 0 ;
52+
53+ & :last-child {
3054 margin 0 ;
31- padding 0 ;
32- }
33-
34- & -meta-item {
35- font-size 14px ;
36- opacity .87 ;
37- }
38-
39- & -meta-series {
40- margin 0 0 8px 0 ;
41- }
42-
43- & -meta-date {
44- margin 8px 0 0 ;
55+ }
4556 }
46-
47- & -description {
48- font-size 14px ;
49- margin 8px 0 0 ;
50-
51- p {
52- margin 0 0 12px 0 ;
53-
54- & :last-child {
55- margin 0 ;
56- }
57- }
58- }
59-
60- & -audio {
61- margin-top 24px ;
62- }
63-
64- & -footer {
65- margin-top 24px ;
66- padding-top 24px ;
67- border-top 1px solid #ddd ;
68-
69- .wpfc-sermon-meta-item {
70- display inline-block ;
71- position relative ;
72-
73- & :not (:last-child ):after {
74- content : ' |'
75- padding 0 4px ;
76- color #ddd ;
77- }
78- }
79- }
80-
81- & -meta-preacher img {
82- border-radius 50% ;
83- width 35px ;
84- height 35px ;
85- vertical-align middle ;
86- }
87-
88- & -meta-prefix ,
89- & -meta-text {
90- vertical-align middle ;
57+ }
58+
59+ & -audio {
60+ margin-top 24px ;
61+ }
62+
63+ & -footer {
64+ margin-top 24px ;
65+ padding-top 24px ;
66+ border-top 1px solid #ddd ;
67+
68+ .wpfc-sermon-meta-item {
69+ display inline-block ;
70+ position relative ;
71+
72+ & :not (:last-child ):after {
73+ content : ' |'
74+ padding 0 4px ;
75+ color #ddd ;
76+ }
9177 }
92-
93- > .wpfc-sermon-inner {
94- background white ;
95- border 1px solid #ddd ;
78+ }
79+
80+ & -meta-preacher img {
81+ border-radius 50% ;
82+ width 35px ;
83+ height 35px ;
84+ vertical-align middle ;
85+ }
86+
87+ & -meta-prefix ,
88+ & -meta-text {
89+ vertical-align middle ;
90+ }
91+
92+ > .wpfc-sermon-inner {
93+ background white ;
94+ border 1px solid #ddd ;
95+ }
96+
97+ & -main {
98+ padding 24px ;
99+ }
100+
101+ & -att-audio ,
102+ & -att-notes ,
103+ & -bulletin {
104+ width auto ;
105+ height auto ;
106+ padding 4px ;
107+ border 1px solid #efefef ;
108+ margin-bottom 4px ;
109+ }
110+ }
111+
112+ @media (min-width 801px ) {
113+ .wpfc-sermon {
114+ & -inner {
115+ display flex ;
116+ flex-flow row wrap ;
96117 }
97-
98- & -main {
99- padding 24px 24px 24px 0 ;
100-
101- & .no-image {
102- padding 24px ;
103- }
118+
119+ & -image {
120+ flex 0 30% ;
104121 }
105122
106- & -att-audio ,
107- & -att-notes ,
108- & -bulletin {
109- width auto ;
110- height auto ;
111- padding 4px ;
112- border 1px solid #efefef ;
113- margin-bottom 4px ;
123+ & -image-img {
124+ height 100% ;
114125 }
115- }
116126
117- @media (min-width 800px ) {
118- .wpfc-sermon {
119- & -inner {
120- display flex ;
121- flex-flow row wrap ;
122- }
123-
124- & -image {
125- flex 0 30% ;
126- margin-right 24px ;
127- }
128-
129- & -main {
130- flex 1 ;
131- }
127+ & -main {
128+ flex 1 ;
132129 }
130+ }
133131}
134132
135133@media (max-width 800px ) {
136- .wpfc-sermon-image-img {
137- padding-top 65.25% ;
138- }
134+ .wpfc-sermon-image-img {
135+ padding-top 65.25% ;
136+ }
139137}
0 commit comments