Skip to content

Commit daabf9f

Browse files
phantomicsphantomics
committed
cover styling revision
1 parent c849577 commit daabf9f

File tree

2 files changed

+268
-25
lines changed

2 files changed

+268
-25
lines changed

‎layouts/shortcodes/blocks/cover.html

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,41 @@
3333
</style>
3434
{{ end -}}
3535

36-
<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height -}}
37-
{{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover
38-
{{- end }} td-overlay td-overlay--dark -bg-{{ $col_id }}">
39-
<div class="col-12 hero-content-column"
40-
style="background-image: url(./Resources/logoWindows.svg)">
41-
<div class="container td-overlay__inner">
42-
<!-- <img id="banner-hero-logo" class="hero-logo" alt="Interlisp Medley logotype" src="Resources/logoWindows.svg"> -->
36+
<section class="carousel" aria-label="Gallery">
37+
<ol class="carousel__viewport">
38+
<li id="carousel__slide1"
39+
tabindex="0"
40+
class="carousel__slide">
41+
<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height -}}
42+
{{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover
43+
{{- end }} td-overlay td-overlay--dark -bg-{{ $col_id }}">
44+
<div class="col-12 hero-content-column"
45+
style="background-image: url(./Resources/logoWindows.svg)">
46+
<div class="container td-overlay__inner">
47+
<!-- <img id="banner-hero-logo" class="hero-logo" alt="Interlisp Medley logotype" src="Resources/logoWindows.svg"> -->
48+
<div class="text-center">
49+
{{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
50+
{{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
51+
<div class="pt-3 lead">
52+
{{ if eq .Page.File.Ext "md" }}
53+
{{ .Inner | markdownify }}
54+
{{ else }}
55+
{{ .Inner | htmlUnescape | safeHTML }}
56+
{{ end }}
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
{{ with .Get "byline" | default "" -}}
62+
<div class="byline">{{ . }}</div>
63+
{{- end }}
64+
</section>
65+
{{/**/ -}}
66+
67+
</li>
68+
</ol>
69+
</section>
70+
4371
<!-- ><section class="carousel" aria-label="Gallery">
4472
<ol class="carousel__viewport">
4573
<li id="carousel__slide1"
@@ -54,21 +82,3 @@
5482
</li>
5583
</ol>
5684
</section> -->
57-
<div class="text-center">
58-
{{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
59-
{{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
60-
<div class="pt-3 lead">
61-
{{ if eq .Page.File.Ext "md" }}
62-
{{ .Inner | markdownify }}
63-
{{ else }}
64-
{{ .Inner | htmlUnescape | safeHTML }}
65-
{{ end }}
66-
</div>
67-
</div>
68-
</div>
69-
</div>
70-
{{ with .Get "byline" | default "" -}}
71-
<div class="byline">{{ . }}</div>
72-
{{- end }}
73-
</section>
74-
{{/**/ -}}

‎static/css/custom.css

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,236 @@
1+
/* Carousel styles*/
2+
3+
@keyframes tonext {
4+
75% {
5+
left: 0;
6+
}
7+
95% {
8+
left: 100%;
9+
}
10+
98% {
11+
left: 100%;
12+
}
13+
99% {
14+
left: 0;
15+
}
16+
}
17+
18+
@keyframes tostart {
19+
75% {
20+
left: 0;
21+
}
22+
95% {
23+
left: -300%;
24+
}
25+
98% {
26+
left: -300%;
27+
}
28+
99% {
29+
left: 0;
30+
}
31+
}
32+
33+
@keyframes snap {
34+
96% {
35+
scroll-snap-align: center;
36+
}
37+
97% {
38+
scroll-snap-align: none;
39+
}
40+
99% {
41+
scroll-snap-align: none;
42+
}
43+
100% {
44+
scroll-snap-align: center;
45+
}
46+
}
47+
48+
/*body {
49+
max-width: 37.5rem;
50+
margin: 0 auto;
51+
padding: 0 1.25rem;
52+
font-family: 'Lato', sans-serif;
53+
}
54+
55+
* {
56+
box-sizing: border-box;
57+
scrollbar-color: transparent transparent;
58+
scrollbar-width: 0px;
59+
}*/
60+
61+
*::-webkit-scrollbar {
62+
width: 0;
63+
}
64+
65+
*::-webkit-scrollbar-track {
66+
background: transparent;
67+
}
68+
69+
*::-webkit-scrollbar-thumb {
70+
background: transparent;
71+
border: none;
72+
}
73+
74+
* {
75+
-ms-overflow-style: none;
76+
}
77+
78+
.carousel ol, .carousel li {
79+
list-style: none;
80+
margin: 0;
81+
padding: 0;
82+
}
83+
84+
.carousel {
85+
position: relative;
86+
padding-top: 75%;
87+
filter: drop-shadow(0 0 10px #0003);
88+
perspective: 100px;
89+
}
90+
91+
.carousel__viewport {
92+
position: absolute;
93+
top: 0;
94+
right: 0;
95+
bottom: 0;
96+
left: 0;
97+
display: flex;
98+
overflow-x: scroll;
99+
counter-reset: item;
100+
scroll-behavior: smooth;
101+
scroll-snap-type: x mandatory;
102+
}
103+
104+
.carousel__slide {
105+
position: relative;
106+
flex: 0 0 100%;
107+
width: 100%;
108+
background-color: #f99;
109+
counter-increment: item;
110+
}
111+
112+
.carousel__slide:nth-child(even) {
113+
background-color: #99f;
114+
}
115+
116+
.carousel__slide:before {
117+
content: counter(item);
118+
position: absolute;
119+
top: 50%;
120+
left: 50%;
121+
transform: translate3d(-50%,-40%,70px);
122+
color: #fff;
123+
font-size: 2em;
124+
}
125+
126+
.carousel__snapper {
127+
position: absolute;
128+
top: 0;
129+
left: 0;
130+
width: 100%;
131+
height: 100%;
132+
scroll-snap-align: center;
133+
}
134+
135+
@media (hover: hover) {
136+
.carousel__snapper {
137+
animation-name: tonext, snap;
138+
animation-timing-function: ease;
139+
animation-duration: 4s;
140+
animation-iteration-count: infinite;
141+
}
142+
143+
.carousel__slide:last-child .carousel__snapper {
144+
animation-name: tostart, snap;
145+
}
146+
}
147+
148+
@media (prefers-reduced-motion: reduce) {
149+
.carousel__snapper {
150+
animation-name: none;
151+
}
152+
}
153+
154+
.carousel:hover .carousel__snapper,
155+
.carousel:focus-within .carousel__snapper {
156+
animation-name: none;
157+
}
158+
159+
.carousel__navigation {
160+
position: absolute;
161+
right: 0;
162+
bottom: 0;
163+
left: 0;
164+
text-align: center;
165+
}
166+
167+
.carousel__navigation-list,
168+
.carousel__navigation-item {
169+
display: inline-block;
170+
}
171+
172+
.carousel__navigation-button {
173+
display: inline-block;
174+
width: 1.5rem;
175+
height: 1.5rem;
176+
background-color: #333;
177+
background-clip: content-box;
178+
border: 0.25rem solid transparent;
179+
border-radius: 50%;
180+
font-size: 0;
181+
transition: transform 0.1s;
182+
}
183+
184+
.carousel::before,
185+
.carousel::after,
186+
.carousel__prev,
187+
.carousel__next {
188+
position: absolute;
189+
top: 0;
190+
margin-top: 37.5%;
191+
width: 4rem;
192+
height: 4rem;
193+
transform: translateY(-50%);
194+
border-radius: 50%;
195+
font-size: 0;
196+
outline: 0;
197+
}
198+
199+
.carousel::before,
200+
.carousel__prev {
201+
left: -1rem;
202+
}
203+
204+
.carousel::after,
205+
.carousel__next {
206+
right: -1rem;
207+
}
208+
209+
.carousel::before,
210+
.carousel::after {
211+
content: '';
212+
z-index: 1;
213+
background-color: #333;
214+
background-size: 1.5rem 1.5rem;
215+
background-repeat: no-repeat;
216+
background-position: center center;
217+
color: #fff;
218+
font-size: 2.5rem;
219+
line-height: 4rem;
220+
text-align: center;
221+
pointer-events: none;
222+
}
223+
224+
.carousel::before {
225+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
226+
}
227+
228+
.carousel::after {
229+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
230+
}
231+
232+
/* Main styles */
233+
1234
.text-center.py-2 .text-white {
2235
display: none;
3236
}

0 commit comments

Comments
 (0)