229 lines
3.8 KiB
CSS
229 lines
3.8 KiB
CSS
/* Rounded border radius classes */
|
|
.border-round-1 {
|
|
--border-radius: 40%;
|
|
}
|
|
.border-round-2 {
|
|
--border-radius: 85%;
|
|
}
|
|
.border-round-tl {
|
|
border-top-left-radius: var(--border-radius);
|
|
}
|
|
.border-round-tr {
|
|
border-top-right-radius: var(--border-radius);
|
|
}
|
|
.border-round-bl {
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
.border-round-br {
|
|
border-bottom-right-radius: var(--border-radius);
|
|
}
|
|
.border-round {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/* Fill color classes */
|
|
.fill-teal {
|
|
--fill-color: rgba(var(--teal), 0.86);
|
|
}
|
|
.fill-teal:hover,
|
|
.fill-teal:active {
|
|
--fill-color: rgba(var(--teal), 0.96);
|
|
}
|
|
.fill-black {
|
|
--fill-color: rgba(var(--black), 0.86);
|
|
}
|
|
.fill-black:hover,
|
|
.fill-black:active {
|
|
--fill-color: rgba(var(--black), 0.96);
|
|
}
|
|
.fill-lightblue {
|
|
--fill-color: rgba(var(--lightblue), 0.86);
|
|
}
|
|
.fill-lightblue:hover,
|
|
.fill-lightblue:active {
|
|
--fill-color: rgba(var(--lightblue), 0.96);
|
|
}
|
|
.fill-brown {
|
|
--fill-color: rgba(var(--brown), 0.86);
|
|
}
|
|
.fill-brown:hover,
|
|
.fill-brown:active {
|
|
--fill-color: rgba(var(--brown), 0.96);
|
|
}
|
|
.fill-tan {
|
|
--fill-color: rgba(var(--tan), 0.86);
|
|
}
|
|
.fill-tan:hover,
|
|
.fill-tan:active {
|
|
--fill-color: rgba(var(--tan), 0.96);
|
|
}
|
|
|
|
.fill {
|
|
color: var(--fill-color);
|
|
}
|
|
.fill-background {
|
|
background-color: var(--fill-color);
|
|
}
|
|
|
|
/* Shape classes */
|
|
.diamond {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
margin: auto;
|
|
animation: spin-in 1s forwards;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.diamond::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(100% / sqrt(2)); /* Shrink so rotated square fits inside wrapper */
|
|
aspect-ratio: 1 / 1;
|
|
background: var(--fill-color);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.circle {
|
|
border-radius: 75%;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
main > * {
|
|
padding: 3rem;
|
|
}
|
|
main > :nth-child(2n) {
|
|
background-color: rgba(var(--brown), 0.21);
|
|
}
|
|
main > :last-child {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.home-text {
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
.home-text > div > * {
|
|
margin: 2rem 0;
|
|
}
|
|
.home-text h1 {
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.featured,
|
|
.about {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.featured img {
|
|
object-fit: cover;
|
|
object-position: center;
|
|
width: 100%;
|
|
}
|
|
.featured > h1,
|
|
.about > h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
color: rgba(var(--black), 0.86);
|
|
}
|
|
.featured > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 2rem;
|
|
width: 100%;
|
|
}
|
|
.featured p, .featured a {
|
|
margin-top: 1rem;
|
|
display: inline-block;
|
|
}
|
|
.featured > div > * {
|
|
text-align: center;
|
|
}
|
|
.featured h2 {
|
|
font-size: 2.25rem;
|
|
font-weight: 300;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.about > div {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.about * {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Grid Pattern */
|
|
.home-grid-container {
|
|
padding: 0 15% 2rem 15%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.home-grid {
|
|
display: grid;
|
|
aspect-ratio: 1 / 1;
|
|
width: 30rem;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
box-sizing: border-box;
|
|
}
|
|
.home-grid > * {
|
|
animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
|
|
}
|
|
.home-grid > *:hover,
|
|
.home-grid > *:active {
|
|
animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
|
|
}
|
|
.home-grid svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
@keyframes spin-in {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes spin-out {
|
|
from {
|
|
transform: rotate(360deg);
|
|
}
|
|
to {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* -md */
|
|
@media (min-width: 992px) {
|
|
.home-grid-container {
|
|
padding: 0;
|
|
}
|
|
.home-text {
|
|
padding: 0 2rem;
|
|
}
|
|
.home-text h1 {
|
|
font-size: 3rem;
|
|
}
|
|
.featured > h1 {
|
|
font-size: 3rem;
|
|
}
|
|
.featured > div {
|
|
flex-direction: row;
|
|
}
|
|
.featured > div > * {
|
|
text-align: end;
|
|
padding-left: 2rem;
|
|
}
|
|
} |