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

133 lines
2.1 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;
background: $b-color;
2023-07-17 19:11:13 +00:00
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;
text-align: right;
a {
display: inline-block;
font-size: 1rem;
line-height: 1.4rem;
&:hover {
cursor: pointer;
text-decoration: underline;
}
2023-07-17 19:11:13 +00:00
}
}
.info {
grid-column: 1;
grid-row: 1/4;
2023-12-06 05:31:53 +00:00
a {
display: inline-block;
}
2023-07-17 19:11:13 +00:00
h5 {
2023-12-06 05:31:53 +00:00
width: 100%;
2023-07-17 19:11:13 +00:00
color: $f-color;
font-size: 1.2rem;
line-height: 1.8rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
2023-07-17 19:11:13 +00:00
&:hover {
color: $fh-color;
text-decoration: underline;
}
}
p {
color: $f-color;
font-size: 1rem;
line-height: 1.4rem;
}
}
}
.past {
border-color: #666666;
div {
opacity: .4;
}
2023-07-17 19:11:13 +00:00
}
}
@media only screen and (max-width: 768px) {
2023-07-17 19:11:13 +00:00
.events {
grid-template-columns: 1fr;
padding: 4rem 1rem;
h4 {
margin: 0;
}
.event {
2023-07-18 01:04:18 +00:00
grid-template-columns: 3fr 2fr;
2023-07-17 19:11:13 +00:00
grid-column: 1;
padding: .5rem 1rem;
.attend,
.meetup {
font-size: .9rem;
line-height: 1.3rem;
}
.info {
grid-column: 1;
grid-row: 1/4;
2023-07-18 01:04:18 +00:00
min-width: 0;
2023-12-06 05:31:53 +00:00
a {
display: block;
}
2023-07-17 19:11:13 +00:00
h5 {
2023-11-26 18:46:09 +00:00
font-size: 1.15rem;
2023-07-17 19:11:13 +00:00
line-height: 1.6rem;
}
.location {
2023-07-18 01:04:18 +00:00
width: 95%;
2023-07-17 19:11:13 +00:00
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
p {
font-size: .9rem;
line-height: 1.3rem;
}
}
}
}
}