This commit is contained in:
parent
851e05a571
commit
ea0d791657
@ -44,7 +44,25 @@ export default ((opts: Options) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<hr/>
|
||||
<hr />
|
||||
<a className="notice notice-telegram" href="https://t.me/struchkov_dev" target="_blank">
|
||||
<div className="notice__head">
|
||||
<svg className="notice__head-icon" fill="currentColor" viewBox="0 0 190 170">
|
||||
<path
|
||||
d="M152.531 170c-1.48 0-2.95-.438-4.21-1.293l-47.642-32.316-25.552 18.386a7.502 7.502 0 01-11.633-4.174l-12.83-48.622L4.821 84.452a7.501 7.501 0 01-.094-13.975L179.04 1.117a7.503 7.503 0 0110.282 8.408l-29.423 154.379a7.499 7.499 0 01-7.367 6.096zm-47.669-48.897l42.437 28.785 22.894-120.124-82.687 79.566 17.156 11.638c.07.043.135.089.2.135zm-35.327-6.401l5.682 21.53 12.242-8.809-16.03-10.874a7.478 7.478 0 01-1.894-1.847zM28.136 77.306l31.478 12.035a7.5 7.5 0 014.573 5.092l3.992 15.129a7.504 7.504 0 012.26-4.624l78.788-75.814z"></path>
|
||||
</svg>
|
||||
<div className="notice__head-text">Подписывайся</div>
|
||||
</div>
|
||||
<div className="notice__tail">
|
||||
<div className="notice__tail-text">на Struchkov.Dev в Telegram</div>
|
||||
</div>
|
||||
<div className="notice__skin">
|
||||
<svg className="notice__skin-icon" fill="currentColor" viewBox="0 0 448 376">
|
||||
<path
|
||||
d="M446.684 34.522l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1l-236 148.6-101.6-31.8c-22.1-6.9-22.5-22.1 4.6-32.7l397.4-153.1c18.4-6.9 34.5 4.1 28.5 32.2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<div id="remark42" style="margin-top: 2rem"></div>
|
||||
<script dangerouslySetInnerHTML={{ __html: remarkConfig }}></script>
|
||||
<script dangerouslySetInnerHTML={{ __html: embedScript }}></script>
|
||||
|
@ -100,4 +100,135 @@ article strong {
|
||||
|
||||
input[type="checkbox"] {
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.notice {
|
||||
border-radius: 8px;
|
||||
align-items: flex-start;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--default-border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.notice.notice-telegram {
|
||||
background-color: #5381bd
|
||||
}
|
||||
|
||||
.notice.notice-twitter {
|
||||
background-color: #1da1f2
|
||||
}
|
||||
|
||||
.notice.notice-comments {
|
||||
background-color: #2c678d
|
||||
}
|
||||
|
||||
.notice.notice-donate {
|
||||
background-color: #ee5162;
|
||||
background-color: var(--notice-donate)
|
||||
}
|
||||
|
||||
.notice__head {
|
||||
align-items: center;
|
||||
border: 1px dashed rgba(206,226,241,.85);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
padding: .5rem 2rem
|
||||
}
|
||||
|
||||
.notice__head-icon {
|
||||
color: #fff;
|
||||
width: 1.25rem
|
||||
}
|
||||
|
||||
.notice__head-text {
|
||||
color: #fff;
|
||||
font-size: .9375rem;
|
||||
letter-spacing: .0625rem;
|
||||
margin: 0 0 0 1rem
|
||||
}
|
||||
|
||||
.kg-width-wide .notice__head-text {
|
||||
font-size: 1.1rem
|
||||
}
|
||||
|
||||
.notice__tail {
|
||||
margin: .5rem 0 0
|
||||
}
|
||||
|
||||
.notice__tail-left {
|
||||
margin: 0 .5rem
|
||||
}
|
||||
|
||||
.notice__tail-text {
|
||||
color: #fff;
|
||||
font-size: .9375rem;
|
||||
letter-spacing: .03125rem
|
||||
}
|
||||
|
||||
.kg-width-wide .notice__tail-text {
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.notice__skin {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem
|
||||
}
|
||||
|
||||
.notice__skin-icon {
|
||||
color: rgba(206,226,241,.15);
|
||||
width: 10rem
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.notice {
|
||||
align-items:center;
|
||||
flex-direction: row
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.notice {
|
||||
padding:1rem 3rem
|
||||
}
|
||||
|
||||
.kg-width-wide .notice {
|
||||
padding: 2rem 3rem
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.notice__tail {
|
||||
margin:0 0 0 1.25rem
|
||||
}
|
||||
|
||||
.notice__tail-left {
|
||||
margin: 0 1.25rem 0 0
|
||||
}
|
||||
|
||||
.notice__tail-text {
|
||||
font-size: 1.0625rem
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.notice__skin {
|
||||
right:3rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.notice__tail-left {
|
||||
display:none
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.footer-notice .notice {
|
||||
border-radius:0
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user