kopia lustrzana https://github.com/shoelace-style/shoelace
add ks banner
rodzic
2a4b3ee2e9
commit
3451ec753c
|
@ -95,6 +95,23 @@
|
||||||
</sl-dropdown>
|
</sl-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="ks-banner{% if toc %} with-toc{% endif %}"
|
||||||
|
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#f36944" d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
<strong style="white-space: nowrap;">Get ready for more awesome!</strong>
|
||||||
|
Web Awesome, the next iteration of Shoelace, is on Kickstarter.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span class="faux-button">Read Our Story</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<aside id="sidebar" data-preserve-scroll>
|
<aside id="sidebar" data-preserve-scroll>
|
||||||
<header>
|
<header>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
|
|
|
@ -1413,3 +1413,95 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
||||||
grid-column-start: span 6;
|
grid-column-start: span 6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ks-banner {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
width: 950px;
|
||||||
|
left: calc(50% - 475px);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #1a3256;
|
||||||
|
border-radius: var(--sl-border-radius-large);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
color: #fdfdfd;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.4;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-banner:hover {
|
||||||
|
color: #fdfdfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-banner > span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-banner svg {
|
||||||
|
flex: 0 0 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-banner .faux-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
background: white;
|
||||||
|
border: solid 1px #d4d4d4;
|
||||||
|
border-radius: var(--sl-border-radius-medium);
|
||||||
|
font-size: 0.8375rem;
|
||||||
|
color: #353439;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-banner.with-toc {
|
||||||
|
width: 1100px;
|
||||||
|
left: calc(50% - 550px);
|
||||||
|
margin-left: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1650px) {
|
||||||
|
.ks-banner,
|
||||||
|
.ks-banner.with-toc {
|
||||||
|
width: 540px !important;
|
||||||
|
top: 50px;
|
||||||
|
left: calc(50% - 270px);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-top: 140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.ks-banner,
|
||||||
|
.ks-banner.with-toc {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 680px) {
|
||||||
|
.ks-banner,
|
||||||
|
.ks-banner.with-toc {
|
||||||
|
width: calc(100% - 2rem) !important;
|
||||||
|
left: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-top: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue