feat: add color block shortcode

pull/103/head
nevfy 2024-01-30 15:07:44 +04:00
parent ea587cf193
commit 80fbc259aa
2 changed files with 49 additions and 0 deletions

View File

@ -204,4 +204,36 @@ a.nav-link.sp-coming-soon::after {
margin-left: .5rem;
padding: .1rem;
border-radius: .1rem;
}
.sp-docs-colorblock-card {
background: #FFFFFF;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
border: none;
}
.sp-colorblock {
display: block;
height: 6rem;
width: auto;
}
.sp-colorblock-text {
margin: 1rem;
}
.sp-colorblock-text h4 {
font-weight: 600;
margin-bottom: 1rem;
}
.sp-colorblock-text p {
margin-bottom: .5rem;
}
.sp-colorblock-hex {
font-weight: 600;
font-size: x-large;
margin-left: .5rem;
color: $white
}

View File

@ -0,0 +1,17 @@
{{ $name := .Get 0 }}
{{ $hex := .Get 1 }}
{{ $rgb := .Get 2 }}
{{ $cmyk := .Get 3 }}
<div class="sp-docs-colorblock-card d-flex flex-column">
<div class="sp-colorblock d-flex align-items-end" style="background-color: {{ $hex }}">
<h3 class="sp-colorblock-hex">{{ $hex }}</h3>
</div>
<div class="sp-colorblock-text">
<h4>{{ $name }}</h4>
<h5>RGB: </h5>
<p>{{ $rgb }}<p></p>
<h5>CMYK: </h5>
<p>{{ $cmyk }}<p>
{{ .Inner }}
</div>
</div>