List Sections
/* list items */
.list-item:hover .list-item-content__button {
background-color: #353C3C!important;
}
.list-item:hover {
transform: scale(1.05) !important;
transition: all ease-in-out .2s !important;
background-color: #DCEFF5!important;
}
.list-item:hover .list-item-media img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
/** Line Outline for List Boxes **/
section[data-section-id="651e09495e6364553861d264"]{.list-item[data-is-card-enabled="true"]{
border-top: 8px solid #225265;
border-bottom: 8px solid #E2504B;
}
}
OR
///*** LISTS ***///
/** Line Outline for List Boxes **/
.list-item[data-is-card-enabled="true"]{
border: 3px solid #225265;
}
/** Different color list boxes **/
.list-item[data-is-card-enabled="true"]:nth-child(2) {background: #F2E3AD!important;}
.list-item:nth-child(3)[data-is-card-enabled="true"] {background: #CEDDE0!important;}
/** Different color list buttons **/
.list-item:nth-child(2){
.list-item-content__button{
background: #005137 !important;
}}
//Special Sections//
/* Auto Scrolling Gallery Grid */
#page {
overflow-x:hidden
}
section[data-section-id="64dbccafeeb3b01668cd1641"] .gallery-grid-wrapper {
display:flex !important;
animation: slideshow 10s linear infinite
}
section[data-section-id="64dbccafeeb3b01668cd1641"] .gallery-grid-wrapper .gallery-grid-item {
min-width: 20%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -60%; }
}
https://www.beatrizcaraballo.com/blog/center-align-bottom-auto-list-items
/* CENTER-ALIGN THE LAST SLIDE OF AN AUTO LIST IN 7.1*/
@media screen and (min-width: 768px) {
.user-items-list-simple[data-num-columns="3"] {
grid-template-columns: repeat(~"3,1fr");
}
.user-items-list-simple[data-num-columns="3"] .list-item {
grid-column: span 1;
}
.user-items-list-simple[data-num-columns="3"] .list-item:nth-child(10) {
grid-column: ~"2/3";
}
}
/* CENTER-ALIGN THE LAST TWO SLIDES OF AN AUTO LIST IN 7.1*/
@media screen and (min-width: 768px) { .user-items-list-simple[data-num-columns="3"] { grid-template-columns: repeat(~"6,1fr"); } .user-items-list-simple[data-num-columns="3"] .list-item { grid-column: span 2; } .user-items-list-simple[data-num-columns="3"] .list-item:nth-child(4) { grid-column: ~"2/4"; } }
/* Round Corners of List Cards /
https://bycrawford.com/blog/round-corners-of-list-section-cards-squarespace
/* Indent List Cards - Simple List - Desktop only /
<style>
@media only screen and (min-width: 960px){.user-items-list-simple {
margin-left: 10vw !important;
margin-right: 10vw !important;
}}
</style>
Hover Effects
/* list items */
.list-item:hover .list-item-content__button {
background-color: #353C3C!important;
}
.list-item:hover {
transform: scale(1.05) !important;
transition: all ease-in-out .2s !important;
background-color: #DCEFF5!important;
}
.list-item:hover .list-item-media img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
2 columns on Mobile
/* List 2 columns on Mobile */
section[#]{@media only screen and (max-width: 480px) {
.user-items-list-simple {
grid-template-columns: 1fr 1fr !important;
}}}