Skip to content

Commit

Permalink
Refactor author cards slightly.
Browse files Browse the repository at this point in the history
  • Loading branch information
@bstopp
bstopp committed Jan 22, 2024
1 parent 761b221 commit 49914ec
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 247 deletions.
325 changes: 132 additions & 193 deletions cigaradvisor/blocks/author-card/author-card.css
View file
Original file line number Diff line number Diff line change
@@ -1,224 +1,163 @@
.author-card-container {
background: url('/cigaradvisor/images/author-card/media_17501a5f7bf5b4aebcf109765ead7cb5956480cbe.png');
margin-top: 50px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
padding: 0 40px;
background-size: 900px 500px;
margin-bottom: 40px;
}

.author-card-wrapper::after {
display: block;
clear: both;
}

.author-card-wrapper {
display: flex;
padding-left: 0;
padding-right: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}

.author-card.block {
display: flex;
position: relative;
display: flex;
padding: 60px 10px;
flex-direction: column;
overflow: hidden;
}

.author-card.block .left-column,
.right-column {
display: flex;
float: none;
width: 50%;
align-items: center;
justify-content: flex-start;
padding: 10px;
.author-card.block .background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
max-width: 900px;
max-height: 500px;
background-color: #ede8e3;
z-index: -1000;
}

.author-card.block .left-column h2 {
font-family: var(--ff-alfaslabone);
font-size: var(--heading-font-size-xl);
color: var(--deep-reddish-brown);
margin-top: 0;
padding-bottom: 10px;
border-image-source: url('/cigaradvisor/images/author-card/media_176afb26345b78f372ca811cf0e842c7ff75875a5.png');
border-image-slice: 50;
border-bottom: 30px solid;
.author-card.block .content-wrapper {
display: flex;;
flex-direction: column;
align-items: stretch;
}

.author-card.block .left-column h2:first-child {
font-size: var(--heading-font-size-l);
border-bottom: none;
}


.author-card.block .left-column p {
font-family: var(--ff-opensans);
font-weight: var(--font-weight-semibold);
color: var(--dark-grey);
font-size: var(--body-font-size-xs);
cursor: default;
margin-top: 30px;
}

.author-card.block .left-column .button {
background-color: var(--clr-black);
border: 2px solid;
font-family: var(--ff-montserrat);
font-weight: var(--font-weight-bold);
color: var(--clr-white);
text-transform: uppercase;
border-color: var(--tan);
display: inline-block;
line-height: 26px;
height: 50px;
width: 250px;
max-height: 50px;
max-width: 250px;
min-height: 2.85rem;
padding-top: .8em;
padding-bottom: .8em;
cursor: pointer;
text-decoration: none;
text-align: center;
margin: 2px 0;
padding-left: 1em;
border-radius: 0;
font-size: var(--body-font-size-s);
outline: none;
vertical-align: middle;
}

.author-card.block .button:hover {
transition: .5s;
background-color: var(--subdued-gold);
border-color: var(--subdued-gold);
text-decoration: none;
}

.author-card.block .right-column .author-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.author-card.block .content-wrapper h2 {
font-family: var(--ff-alfaslabone);
color: var(--deep-reddish-brown);
margin-top: 0;
text-align: center;
}

.author-card.block .author-content {
flex: 0 0 50%;
padding: 3px;
.author-card.block .content-wrapper h2 {
font-size: var(--heading-font-size-s);
line-height: var(--line-height-m);
}

.author-card.block .author-content .overlay-image {
margin-right: -100%;
background-image: none;
width: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
position: relative;
height: auto;
.author-card.block .content-wrapper h2:last-of-type {
font-size: var(--heading-font-size-l);
line-height: var(--line-height-m);
border-image-slice: 50;
border-image-source: url('/cigaradvisor/styles/images/author-underline.png');
border-bottom-style: solid;
border-bottom-color: var(--deep-reddish-brown);
border-bottom-width: 30px;
}

.author-card.block .author-content .overlay-image img {
display: block;
.author-card.block .content-wrapper p.button-container {
font-family: var(--ff-opensans);
font-weight: var(--font-weight-semibold);
color: var(--dark-grey);
font-size: var(--body-font-size-xs);
margin-top: 30px;
}

.author-card.block .right-column p {
color: var(--clr-white);
text-transform: uppercase;
background-color: transparent;
font-family: var(--ff-montserrat);
text-align: center;
cursor: default;

.author-card.block .author-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
}

.author-card.block .right-column p>a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
color: var(--clr-white);
font-weight: var(--font-weight-bold);
font-size: var(--body-font-size-xl);
.author-card.block .author-item {
position: relative;
flex-basis: calc(50% - 3px);
}

.author-card.block .right-column p>a:hover {
transition: .8s;
text-decoration: none;

.author-card.block .author-item picture {
display: block;
height: 100%;
width: 100%;
position: relative;
}

.author-card.block .author-item picture img {
object-position: center center;
object-fit: cover;
height: 100%;
width: 100%;
}

.author-card.block .overlay-image:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0 0 0 / 60%);
.author-card.block .author-item .overlay-content {
display: flex;
margin: 0;
padding: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
}

.author-card.block .author-item:hover .overlay-content {
background-color: rgb(0 0 0 / 60%);
}

.author-card.block .author-item .overlay-content p {
display: none;
text-align: center;
font-family: var(--ff-montserrat);
font-size: var(--body-font-size-xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-m);
color: var(--clr-white);
text-transform: uppercase;
background-color: transparent;
}

.author-card.block .align-center {
.author-card.block .author-item:hover .overlay-content p {
display: block;
}

@media screen and (min-width: 900px) {
.author-card.block {
flex-direction: row;
padding: 60px;
}

.author-card.block .background {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
max-width: 900px;
max-height: 500px;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
color: var(--clr-white);
text-align: center;
}

.author-card.block .overlay-image:hover .align-center {
opacity: 1;
}

@media (max-width: 768px) {
.author-card-container {
padding: 60px 10px;
background: none #ece8e3;
background-size: auto 150%;
}

.author-wrapper {
display: flex;
width: 100%;
}

.author-card.block {
flex-flow: column wrap;
width: 100%;
}

.author-card.block .author-content {
flex: 0 0 100%;
}

.author-card.block .left-column,
.right-column {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
}

.author-card.block .overlay-image {
flex: 0 0 100%;
width: 100%;
}

.author-card.block .author-content .overlay-image img {
display: block;
width: 100%;
}
background-color: #ede8e3;
z-index: -1000;
}

.author-card.block .content-wrapper,
.author-card.block .author-wrapper {
flex-basis: 50%;
}

.author-card.block .content-wrapper {
align-items: flex-start;
justify-content: center;
}

.author-card.block .content-wrapper h2 {
margin: 0;
font-size: var(--heading-font-size-l);
text-align: left;
}


.author-card.block .content-wrapper h2:last-of-type {
font-size: var(--heading-font-size-xl);
}

.author-card.block .content-wrapper p.button-container {
padding: 0;
}
}
Loading

0 comments on commit 49914ec

Please sign in to comment.