telegram

quartz/components/_Remark.tsx

@@ -45,6 +45,24 @@ export default ((opts: Options) => {
     return (
       <>
         <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>

quartz/styles/custom.scss

@@ -101,3 +101,134 @@ 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
+  }
+}