feat(landing): add prominent article and carousel sections
This commit is contained in:
parent
abfd55d14e
commit
2feeb04a14
8 changed files with 514 additions and 12 deletions
|
|
@ -12,3 +12,68 @@
|
|||
|
||||
.article {
|
||||
}
|
||||
|
||||
.prominent-article {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.article__background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
z-index: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.article__background-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(1, 1, 1, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article__content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
padding: 2rem 0;
|
||||
|
||||
.article__title {
|
||||
color: white;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.article__summary {
|
||||
}
|
||||
.article__meta {
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.article__bottom {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.article__readmore {
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.article__background {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.less-prominent-articles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
background-color: $accent;
|
||||
color: white;
|
||||
padding: 1rem 2.5rem;
|
||||
font-weight: lighter;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
min-width: 10rem;
|
||||
font-size: 1.2rem;
|
||||
|
|
@ -24,3 +24,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button.button-transparent {
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
241
assets/sass/carousel.scss
Normal file
241
assets/sass/carousel.scss
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
// FROM https://css-tricks.com/css-only-carousel/
|
||||
|
||||
@keyframes tonext {
|
||||
75% {
|
||||
left: 0;
|
||||
}
|
||||
95% {
|
||||
left: 100%;
|
||||
}
|
||||
98% {
|
||||
left: 100%;
|
||||
}
|
||||
99% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tostart {
|
||||
75% {
|
||||
left: 0;
|
||||
}
|
||||
95% {
|
||||
left: -300%;
|
||||
}
|
||||
98% {
|
||||
left: -300%;
|
||||
}
|
||||
99% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snap {
|
||||
96% {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
97% {
|
||||
scroll-snap-align: none;
|
||||
}
|
||||
99% {
|
||||
scroll-snap-align: none;
|
||||
}
|
||||
100% {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
scrollbar-color: transparent transparent; /* thumb and track color */
|
||||
scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
$height: 30rem;
|
||||
|
||||
.carousel {
|
||||
ol, li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
filter: drop-shadow(0 0 10px #0003);
|
||||
perspective: 100px;
|
||||
|
||||
// define the height of the whole carousel
|
||||
height: $height;
|
||||
|
||||
}
|
||||
|
||||
.carousel__viewport {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
counter-reset: item;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
.carousel__slide {
|
||||
position: relative;
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
background-color: #f99;
|
||||
counter-increment: item;
|
||||
}
|
||||
|
||||
.carousel__slide:nth-child(even) {
|
||||
background-color: #99f;
|
||||
}
|
||||
|
||||
.carousel__slide:before {
|
||||
content: counter(item);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%,-40%,70px);
|
||||
color: #fff;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.carousel__snapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
// @media (hover: hover) {
|
||||
// .carousel__snapper {
|
||||
// animation-name: tonext, snap;
|
||||
// animation-timing-function: ease;
|
||||
// animation-duration: 4s;
|
||||
// animation-iteration-count: infinite;
|
||||
// }
|
||||
|
||||
// .carousel__slide:last-child .carousel__snapper {
|
||||
// animation-name: tostart, snap;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.carousel__snapper {
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel:hover .carousel__snapper,
|
||||
.carousel:focus-within .carousel__snapper {
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
.carousel__navigation {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.carousel__navigation-list,
|
||||
.carousel__navigation-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel__navigation-button {
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-color: #333;
|
||||
background-clip: content-box;
|
||||
border: 0.25rem solid transparent;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel::after,
|
||||
.carousel__prev,
|
||||
.carousel__next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
transform: translateY($height/2 - 2rem);
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel__prev {
|
||||
left: .5rem;
|
||||
}
|
||||
|
||||
.carousel::after,
|
||||
.carousel__next {
|
||||
right: .5rem;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel::after {
|
||||
content: '';
|
||||
z-index: 1;
|
||||
background-color: #333;
|
||||
background-size: 1.5rem 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.carousel::before {
|
||||
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");
|
||||
}
|
||||
|
||||
.carousel::after {
|
||||
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");
|
||||
}
|
||||
|
||||
.carousel__navigation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel__navigation-item.enabled {
|
||||
.carousel__navigation-button {
|
||||
opacity: 0.5;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,6 +32,7 @@ $accent: #F2A71B;
|
|||
@import 'single_image.scss';
|
||||
@import 'footer.scss';
|
||||
@import 'sections.scss';
|
||||
@import 'carousel.scss';
|
||||
|
||||
// components
|
||||
@import 'tags.scss';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container-large {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-full {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue