110 lines
2.0 KiB
SCSS
110 lines
2.0 KiB
SCSS
.biglogocontainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: var(--black1);
|
|
margin: 1rem 0;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow0);
|
|
svg {
|
|
min-width: 192px;
|
|
min-height: 192px;
|
|
@media screen and (max-width: 800px) {
|
|
display: none;
|
|
}
|
|
}
|
|
article {
|
|
background: rgba(white, 5%);
|
|
border-radius: 8px;
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
@media screen and (max-width: 800px) {
|
|
border-radius: 8px;
|
|
}
|
|
padding: 0.5rem 1rem;
|
|
h1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
svg {
|
|
display: inline;
|
|
min-width: initial;
|
|
min-height: initial;
|
|
@media screen and (min-width: 801px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
margin: 6px 0;
|
|
}
|
|
}
|
|
}
|
|
.persons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
@media screen and (max-width: 800px) {
|
|
justify-content: center;
|
|
}
|
|
margin-top: 1rem;
|
|
gap: 1.5rem;
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
article {
|
|
--radius: 6px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: var(--black1);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow0);
|
|
transition-duration: 100ms;
|
|
img {
|
|
width: 128px;
|
|
max-width: 156px;
|
|
flex: 1;
|
|
border-top-left-radius: var(--radius);
|
|
border-bottom-left-radius: var(--radius);
|
|
// for alt text
|
|
color: var(--grey);
|
|
// for mollin's vertical picture to display well
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
object-position: 50% 35%;
|
|
}
|
|
div {
|
|
min-width: 14rem;
|
|
padding: 0 1rem;
|
|
position: relative;
|
|
.devBadge {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 8px;
|
|
background: rgba(violet, 0.18);
|
|
font-family: var(--fonts-bold);
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
&:hover {
|
|
background: var(--black2);
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
article {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
img {
|
|
margin: 1rem auto;
|
|
border-radius: 8px;
|
|
}
|
|
div {
|
|
padding-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|