-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
114 lines (93 loc) · 5.34 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
.clear {clear:both;}
.throbber {display:none;background:url(throbber.gif) no-repeat;background-size:35px 35px;float:right;vertical-align:middle;width:35px;height:35px;}
.sermon {margin:20px 0;}
.sermon a {border-left:1px solid white; text-decoration:none;display:block;padding:10px;background:rgba(200,200,200,.1);}
.sermon a:hover {border-left:1px solid black;background:rgba(200,200,200,.3);}
.sermon-date {text-transform:uppercase;color:#777;font-size:.8em;}
.sermon h3 {margin:0;}
.fullwidth {width:100%; height:auto;}
.download-links {border: 1px solid black; border-left: 0px; border-right:0px;margin:6px 0px;padding-left:3px;padding-right:3px;}
.download-links a{display:inline-block;padding:6px;border-radius:3px;background-color:rgba(200,200,200,.3);}
.download-links a:hover {background-color:rgba(200,200,200,.8);}
.media-player-title {text-transform:uppercase;opacity:.6;}
.sermon-media-table {font-size:.8em;width:100%;}
.sermon-media-table th {text-align:left;}
.sp-warning {color:red;font-weight:bold;background-color:#ffaaaa;padding:4px;margin-top:5px;}
.sp-media-title {}
.sp-media-purpose {font-size:.8em;padding:1px 2px;text-transform:uppercase;background:#333;color:white;font-weight:bold;}
.sp-collection-name {font-weight:bold;}
.sp-archive-link {text-align:center;font-size:8px;}
.featured-series {position:relative;margin-bottom:20px;}
.series-gallery-item {position:relative;}
.featured-series div, .series-gallery div {box-sizing:border-box;}
.featured-series .featured-series-image,
.series-gallery-item-image {width:100%; height:auto;transition:opacity .5s;}
.featured-series a,
.series-gallery-item a
{text-decoration:none;color:#bbb;}
.featured-series a:hover,
.series-gallery-item a:hover {color:white;}
.featured-series a:hover .featured-series-image {opacity:.9;}
.sp_series_group_items a.series-post {position:relative;display:block;width:100%;box-sizing:border-box;text-decoration:none;overflow:hidden;background:white;box-shadow:1px 1px 5px #bbb;border-radius:20px;height:140px;}
.sp_series_group_items a.series-post:hover{margin-left:-1px;margin-top:-1px;margin-bottom:1px;background:ivory;box-shadow:2px 2px 5px #bbb;}
.sp_series_group_items .series-image {width:40%;height:100%;object-fit:cover;float:left;}
.sp_series_group_items .series-content {margin:0 0 0 40%;height:100%;box-sizing:border-box;padding:10px;}
.sp_series_group_items .series-title {margin:0;}
.sp_series_group_items .series-description {font-size:.9em;}
/* now with flexbox! */
.series-gallery {
--max-width: 33.33%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: center;
row-gap:20px;
column-gap:20px;
/* gap: 1%; */
/* consider a grid layout like the demo here: https://css-tricks.com/almanac/properties/g/gap/ */
}
.series-gallery-item-excerpt {border-top: 1px solid rgba(255,255,255,0.2);}
.series-gallery-item { width:calc(var(--max-width) - 20px); transition: all 0.2s ease-out; }
.series-gallery-item:hover {transform:scale(1.1);}
.series-gallery-item-image { aspect-ratio:16/9; }
/* WIDGET STYLING */
.SP_SeriesInfoWidget { margin-top:10px; margin-bottom:10px; }
.SP_SeriesInfoWidget .sp_thumb {width:100%;height:auto;}
.SP_SeriesInfoWidget .sp_caption {font-size:.9em;}
.SP_SeriesInfoWidget .most-recent-sermon a{font-size:1.3em;}
/* CAPTIONS */
.featured-series-image-overlay,
.series-gallery-item-image-overlay
{width:100%;background-color:rgba(0,0,0,.8);box-sizing:border-box;padding:6px;position:absolute;visibility:hidden;opacity:0;overflow:hidden;transition:opacity .5s;}
.featured-series-image-overlay {height:30%;top:70%;}
.series-gallery-item-image-overlay {height:100%;top:0;padding:20px;}
.featured-series a:hover .featured-series-image-overlay,
.series-gallery-item a:hover .series-gallery-item-image-overlay
{opacity:1;visibility:visible;}
.featured-series-image-caption,
.series-gallery-item-image-caption
{overflow:hidden;max-height:100%;}
.featured-series-title, .series-gallery-item-title {font-weight:700;text-transform:uppercase;}
.featured-series-excerpt, .series-gallery-item-excerpt {font-weight:300;font-style:italic;line-height:.9em;}
.featured-series-date, .series-gallery-item-date {font-weight:700;font-size:.9em;}
.series-gallery-item-date {position:absolute;bottom:2px;right:4px;}
/* GALLERY ALTERNATIVES FOR FEATURED SERIES */
.featured-series-left a,
.featured-series-right a
{box-sizing:border-box;display:inline-block;width:100%;padding:10px;box-shadow:0px 0px 15px rgba(0,0,0,.5);}
.featured-series-left a:hover,
.featured-series-right a:hover
{background:rgba(0,0,0,.15);}
.featured-series-image-right {float:right;width:60%;margin-left:10px;box-sizing:border-box;}
.featured-series-image-left {float:left;width:60%;margin-right:10px;box-sizing:border-box;}
.featured-series-right .featured-series-image-sidebar
{margin-right:calc(60% + 10px);width:calc(40% - 10px);box-sizing:border-box;}
.featured-series-left .featured-series-image-sidebar
{margin-left:calc(60% + 10px);width:calc(40% - 10px);box-sizing:border-box;}
.featured-series-image-sidebar .featured-series-title {font-size:2.5em;line-height:1em;}
.featured-series-image-sidebar .featured-series-excerpt {margin-top:12px;line-height:1.4em;padding:20px;}
@media (max-width: 1020px) {
.featured-series-image-right,
.featured-series-image-left {float:none !important; width:100% !important; margin:0 !important;}
.featured-series-image-sidebar {text-align:center;width:100% !important;margin:0 !important;}
}