crbtc.org/assets/style/pages/index/_events.scss

112 lines
1.8 KiB
SCSS
Raw Normal View History

2023-07-17 19:11:13 +00:00
.events {
display: grid;
grid-template-columns: 1fr 1.5fr .15fr;
padding: 6rem 0;
h4 {
grid-column: 1;
}
.event {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: 1fr .7fr .6fr;
grid-column: 2;
padding: 1rem 2rem;
margin: 1rem 0 0 0;
border: .15rem solid $w-color;
.hide {
display: none;
}
.both { grid-row: 2 }
.bottom { grid-row: 3 }
.attend,
.meetup {
grid-column: 2;
display: inline-block;
font-size: 1rem;
line-height: 1.4rem;
text-align: right;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
.info {
grid-column: 1;
grid-row: 1/4;
h5 {
display: inline-block;
color: $f-color;
font-size: 1.2rem;
line-height: 1.8rem;
&:hover {
color: $fh-color;
text-decoration: underline;
}
}
p {
color: $f-color;
font-size: 1rem;
line-height: 1.4rem;
}
}
}
.past {
opacity: .4;
}
}
@media only screen and (max-width: 600px) {
.events {
grid-template-columns: 1fr;
padding: 4rem 1rem;
h4 {
margin: 0;
}
.event {
grid-column: 1;
padding: .5rem 1rem;
.attend,
.meetup {
font-size: .9rem;
line-height: 1.3rem;
}
.info {
grid-column: 1;
grid-row: 1/4;
h5 {
font-size: 1rem;
line-height: 1.6rem;
}
.location {
width: 80%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
p {
font-size: .9rem;
line-height: 1.3rem;
}
}
}
}
}