94 lines
1.8 KiB
CSS
94 lines
1.8 KiB
CSS
/* Rounded border radius classes */
|
|
.border-round-1 {
|
|
--border-radius: 40%;
|
|
}
|
|
.border-round-2 {
|
|
--border-radius: 75%;
|
|
}
|
|
.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-color: rgba(var(--teal), 0.96);
|
|
}
|
|
.fill-black {
|
|
--fill-color: rgba(var(--black), 0.86);
|
|
}
|
|
.fill-black:hover {
|
|
--fill-color: rgba(var(--black), 0.96);
|
|
}
|
|
.fill-lightblue {
|
|
--fill-color: rgba(var(--lightblue), 0.86);
|
|
}
|
|
.fill-lightblue:hover {
|
|
--fill-color: rgba(var(--lightblue), 0.96);
|
|
}
|
|
.fill-brown {
|
|
--fill-color: rgba(var(--brown), 0.86);
|
|
}
|
|
.fill-brown:hover {
|
|
--fill-color: rgba(var(--brown), 0.96);
|
|
}
|
|
.fill-tan {
|
|
--fill-color: rgba(var(--tan), 0.86);
|
|
}
|
|
.fill-tan:hover {
|
|
--fill-color: rgba(var(--tan), 0.96);
|
|
}
|
|
|
|
.fill {
|
|
color: var(--fill-color);
|
|
}
|
|
.fill-background {
|
|
background-color: var(--fill-color);
|
|
}
|
|
|
|
/* Shape classes */
|
|
.diamond {
|
|
width: calc(100% / sqrt(2)); /* ≈ 100% / √2 (100% because square width = 1, which translates to 100%) */
|
|
aspect-ratio: 1 / 1;
|
|
transform: rotate(45deg);
|
|
margin: auto;
|
|
}
|
|
|
|
/* Grid Pattern */
|
|
.home-grid-container {
|
|
padding: 0 15% 2rem 15%;
|
|
}
|
|
.home-grid {
|
|
display: grid;
|
|
aspect-ratio: 1 / 1;
|
|
width: 100%;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
box-sizing: border-box;
|
|
}
|
|
.home-grid svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* -md */
|
|
@media (min-width: 992px) {
|
|
.home-grid-container {
|
|
padding: 0;
|
|
}
|
|
} |