new react block

This commit is contained in:
Dan Chadwick
2024-04-10 15:00:10 -07:00
parent 69f2a14f9b
commit 5e16d7687e
9 changed files with 221 additions and 9 deletions

View File

@@ -227,6 +227,7 @@ table.cols-5 td.incorrect {
padding: 2rem;
padding-bottom: 1rem;
background: #31748f;
border-radius: 5px;
color: #f6c177;
}
@@ -244,9 +245,75 @@ table.cols-5 td.incorrect {
margin: 0;
}
#recent-fights {
background: #fffaf3;
border: 2px solid #6e6a86;
padding: 2rem;
}
#recent-fights > div {
grid-gap: 5px;
justify-content: center;
}
#block-dchadwick-recentfightsblock {
margin-top: 100px;
}
#block-dchadwick-recentfightsblock h2 {
background: #191724;
color: #f6c177;
padding: 1rem 0;
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
border-left: 2px solid #6e6a86;
border-right: 2px solid #6e6a86;
border-top: 2px solid #6e6a86;
margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
#block-dchadwick-recentfightsblock .card {
flex: 1 0 21%;
}
}
#block-dchadwick-recentfightsblock .fightcard-img {
height: 60px;
border-radius: 50%;
}
#block-dchadwick-recentfightsblock .card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
#block-dchadwick-recentfightsblock .card-body {
text-align: center;
}
#block-dchadwick-recentfightsblock .card-body h4 {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
#block-dchadwick-recentfightsblock .card-body h4 {
font-size: 0.8rem;
}
}
#block-dchadwick-recentfightsblock .card-footer {
display: flex;
}
#block-dchadwick-recentfightsblock .card-footer button {
background: #fffaf3;
border: 1px solid #6e6a86;
flex-grow: 1;
}
#block-dchadwick-recentfightsblock .card-footer button:hover {
background: #191724;
}
#block-dchadwick-recentfightsblock .card-footer button:hover a {
color: #f6c177;
}
#block-dchadwick-recentfightsblock .card-footer button a {
color: #6e6a86;
}
body {
background: #faf4ed;

View File

@@ -25,6 +25,7 @@
padding: 2rem;
padding-bottom: 1rem;
background: $pine;
border-radius: 5px;
// border: 5px solid $pine;
color: $orangeish;
// opacity: 0.95;

View File

@@ -1,3 +1,82 @@
#recent-fights {
background: $surface;
border: 2px solid $muted;
padding: 2rem;
> div {
grid-gap: 5px;
justify-content: center;
}
}
#block-dchadwick-recentfightsblock {
margin-top: 100px;
h2 {
background: $base_bl;
color: $orangeish;
padding: 1rem 0;
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
border-left: 2px solid $muted;
border-right: 2px solid $muted;
border-top: 2px solid $muted;
margin-bottom: 0;
}
.card {
@media screen and (min-width: 1024px) {
flex: 1 0 21%;
}
}
.fightcard-img {
height: 60px;
border-radius: 50%;
}
.card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
.card-body {
text-align: center;
h4 {
font-size: 1.2rem;
@media screen and (max-width: 767px) {
font-size: 0.8rem;
}
}
}
.card-footer {
display: flex;
button {
background: $surface;
border: 1px solid $muted;
flex-grow: 1;
&:hover {
background: $base_bl;
a {
color: $orangeish;
}
}
a {
color: $muted;
}
}
}
}