mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git
synced 2025-12-14 16:56:50 +00:00
🛠 Podcast and Team pages
This commit is contained in:
Dennis Reimann
@@ -1,104 +1,78 @@
|
||||
#updates {
|
||||
position: relative;
|
||||
padding-top: 120px;
|
||||
#podcast {
|
||||
}
|
||||
|
||||
@media (--M_and_up) {
|
||||
padding-bottom: 180px;
|
||||
.episodes {
|
||||
display: grid;
|
||||
grid-gap: var(--space-xl);
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (--up_to_L) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
@media (--up_to_M) {
|
||||
font-size: 36px;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
@media (--M_and_up) {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
& .update + .update {
|
||||
margin-top: var(--space-xxl);
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -65px;
|
||||
bottom: -80px;
|
||||
z-index: -1;
|
||||
background-image: url(../img/bg/updates.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%;
|
||||
background-size: contain;
|
||||
max-width: 55%;
|
||||
width: 369px;
|
||||
height: 344px;
|
||||
|
||||
@media (--up_to_M) {
|
||||
display: none;
|
||||
}
|
||||
@media (--L_and_up) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.update {
|
||||
display: block;
|
||||
text-decoration: none !important;
|
||||
.episodeItem {
|
||||
margin: 0;
|
||||
background-color: var(--color-card-bg);
|
||||
border-radius: var(--space-l);
|
||||
|
||||
@media (--up_to_M) {
|
||||
padding: var(--space-l);
|
||||
}
|
||||
@media (--M_and_up) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 53em;
|
||||
transition-property: background, border, transform;
|
||||
transition-duration: var(--transition-duration-fast);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
& .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-neutral-90);
|
||||
box-shadow: 0px 100px 80px rgba(12, 11, 24, 0.15), 0px 41.7776px 33.4221px rgba(12, 11, 24, 0.107828), 0px 22.3363px 17.869px rgba(12, 11, 24, 0.0894161), 0px 12.5216px 10.0172px rgba(12, 11, 24, 0.075), 0px 6.6501px 5.32008px rgba(12, 11, 24, 0.0605839), 0px 2.76726px 2.21381px rgba(12, 11, 24, 0.0421718);
|
||||
border: 3px solid var(--color-neutral-90);
|
||||
border-radius: var(--space-l);
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& .media {
|
||||
margin-right: var(--space-l);
|
||||
|
||||
& a,
|
||||
& img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
display: block;
|
||||
border-radius: var(--space-s);
|
||||
|
||||
@media (--up_to_M) {
|
||||
width: 100%;
|
||||
height: 195px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@media (--M_and_up) {
|
||||
flex: 1 0 42.5%;
|
||||
height: 275px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
& h4 {
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (--up_to_M) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
opacity: var(--opacity-text);
|
||||
color: var(--color-body-text) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .image {
|
||||
@media not all and (hover: none) {
|
||||
border-color: var(--color-accent);
|
||||
background-image: linear-gradient(45deg, #1A136E 29.26%, #0D0AB7 92.45%);
|
||||
@media (--up_to_M) {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
@media (--M_and_up) {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-family-head);
|
||||
/* color: var(--color-secondary); */
|
||||
}
|
||||
|
||||
& .content {
|
||||
flex: 1;
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: var(--space-s);
|
||||
font-family: var(--font-family-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
#team {
|
||||
& .members {
|
||||
display: grid;
|
||||
grid-gap: var(--space-xxl);
|
||||
grid-gap: var(--space-xl);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
@@ -18,37 +18,26 @@
|
||||
|
||||
& .member {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: var(--color-card-bg);
|
||||
border-radius: var(--space-l);
|
||||
padding: var(--space-xl);
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (--up_to_L) {
|
||||
height: 87px;
|
||||
width: 87px;
|
||||
}
|
||||
@media (--L_and_up) {
|
||||
height: 112px;
|
||||
width: 112px;
|
||||
}
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
& h4 {
|
||||
margin-top: var(--space-m);
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
& a {
|
||||
font-size: var(--font-size-xs);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
& h2 {
|
||||
margin-top: var(--space-l);
|
||||
margin-bottom: var(--space-m);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: var(--space-s) 0 var(--space-l);
|
||||
font-size: var(--font-size-s);
|
||||
opacity: var(--opacity-text);
|
||||
max-width: 30em;
|
||||
margin-bottom: var(--space-l);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user