147 lines
2.9 KiB
Text
147 lines
2.9 KiB
Text
---
|
|
export interface Props {
|
|
title: string
|
|
titlehidden?: boolean
|
|
displayLine?: boolean
|
|
}
|
|
const { title, titlehidden, displayLine } = Astro.props
|
|
const display = titlehidden ? "display: none" : ""
|
|
const line = displayLine ? "flex" : "none"
|
|
---
|
|
|
|
<section>
|
|
<h1 style={display}>{title}</h1>
|
|
<div class="wrapper">
|
|
<div class="start hightlighter"></div>
|
|
<div class="line"></div>
|
|
<slot />
|
|
<div class="drop hightlighter"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<style define:vars={{ line }}>
|
|
section {
|
|
padding-left: 0.25em;
|
|
padding-right: 0.25em;
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
.hightlighter {
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
position: absolute;
|
|
visibility: visible;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.drop {
|
|
bottom: -5rem;
|
|
border-radius: 0% 50% 50% 50%;
|
|
transform: rotate(45deg);
|
|
background-color: var(--c-accent-1);
|
|
}
|
|
|
|
.start {
|
|
top: -2rem;
|
|
border-radius: 40%;
|
|
border-style: solid;
|
|
border-width: 0.25rem;
|
|
border-color: var(--c-secondary-background);
|
|
background-color: var(--c-accent-1);
|
|
}
|
|
|
|
.line {
|
|
display: flex;
|
|
position: absolute;
|
|
visibility: visible;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: var(--c-accent-1);
|
|
height: calc(100% + 5rem);
|
|
translate: 0% 2rem;
|
|
width: 0.25rem;
|
|
z-index: -1;
|
|
}
|
|
h1 {
|
|
line-height: 48px;
|
|
letter-spacing: -1px;
|
|
color: var(--c-primary-text);
|
|
font-size: 1.6rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: max-content;
|
|
background-color: var(--c-primary-background);
|
|
padding: 0.25rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
.wrapper {
|
|
margin: 2rem 2rem 0.5rem 2rem;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
row-gap: 1em;
|
|
column-gap: 1em;
|
|
align-self: center;
|
|
align-items: stretch;
|
|
align-content: center;
|
|
justify-content: space-around;
|
|
padding: 1em 0px;
|
|
color: var(--c-primary-text);
|
|
font-size: 1em;
|
|
position: relative;
|
|
}
|
|
@media (min-width: 900px) {
|
|
.drop {
|
|
margin-left: 1.5rem;
|
|
}
|
|
.start {
|
|
margin-left: 1.25rem;
|
|
}
|
|
.line {
|
|
margin-left: 2.1rem;
|
|
}
|
|
h1 {
|
|
margin-left: 3rem;
|
|
font-size: 1.85rem;
|
|
}
|
|
.wrapper {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
@media (min-width: 1100px) {
|
|
.wrapper {
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
flex-direction: row;
|
|
}
|
|
section {
|
|
padding-bottom: unset;
|
|
}
|
|
.drop, .start, .line {
|
|
display: var(--line);
|
|
margin-left: 2rem;
|
|
}
|
|
.start {
|
|
margin-left: 1.75rem;
|
|
}
|
|
.line {
|
|
margin-left: 2.6rem;
|
|
height: calc(100% + 6rem);
|
|
translate: 0px -2rem;
|
|
}
|
|
h1 {
|
|
margin-left: 15rem;
|
|
margin-right: 15rem;
|
|
}
|
|
}
|
|
</style>
|