summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAbdus <gh@abdus.net>2020-11-05 16:20:34 +0530
committerAbdus <gh@abdus.net>2020-11-05 16:20:34 +0530
commit102960b372db6d51c36d598ed35f541e02fed7c7 (patch)
tree206cbeb927b893f7c518a71513f28dbef45e2ee0
parent9a4d9b408fe11eaa97155ef54c5cdea785a54e72 (diff)
downloadabdus.net-102960b372db6d51c36d598ed35f541e02fed7c7.tar.bz2
abdus.net-102960b372db6d51c36d598ed35f541e02fed7c7.zip
add commento
-rw-r--r--themes/bronn/layouts/partials/comments.html69
-rw-r--r--themes/bronn/static/css/layout.css85
2 files changed, 2 insertions, 152 deletions
diff --git a/themes/bronn/layouts/partials/comments.html b/themes/bronn/layouts/partials/comments.html
index fee24bf..338ba90 100644
--- a/themes/bronn/layouts/partials/comments.html
+++ b/themes/bronn/layouts/partials/comments.html
@@ -1,67 +1,2 @@
-<aside id="comments">
- <h2 class="font-eczar color-accent margin-0">Discussion</h2>
- <div class="error">
- As of now, comment system does not work. I am building my own commenting
- system which may take some time to finish :)
- <br />
- <br />
- Real Devsā„¢ Code in Production!
- </div>
- <form id="comment-form">
- <div>
- <label>
- <small>Name (optional)</small>
- <input type="text" placeholder="Jon Snow" />
- </label>
- <label>
- <small>Email (optional)</small>
- <input type="text" placeholder="jon@google.com" />
- </label>
- <label>
- <small>Website (optionsl)</small>
- <input type="text" placeholder="www.example.com" />
- </label>
- </div>
- <div>
- <label>
- <small>Comment</small>
- <textarea placeholder="Start Typing..." rows="5"></textarea>
- </label>
- </div>
- <input class="btn" type="submit" value="Comment" />
- </form>
-
- <div id="comments-listing">
- <div class="comment card">
- <h3 class="font-eczar author">
- <span class="color-accent">The Unknown</span>
- <span class="date">on 22 January, 2020</span>
- </h3>
- <div class="content">
- Ipsum saepe praesentium laborum cumque illo quos. Illo rem laborum nulla
- rerum placeat, in Repudiandae in velit quia distinctio voluptatem Porro
- tempore architecto eius earum eos. Esse voluptate nesciunt nostrum.
-
- <br />
- <br />
-
- <div class="comment card">
- <h3 class="font-eczar author">
- <span class="color-accent">The Unknown</span>
- <span class="date">on 22 January, 2020</span>
- </h3>
- <div class="content">
- Ipsum saepe praesentium laborum cumque illo quos. Illo rem laborum
- nulla rerum placeat, in Repudiandae in velit quia distinctio
- voluptatem Porro tempore architecto eius earum eos. Esse voluptate
- nesciunt nostrum.
- </div>
- </div>
- </div>
- </div>
- </div>
-</aside>
-
-<script>
- const form = document.querySelector("#comment-form");
-</script>
+<script defer src="https://commento.host.abdus.net/js/commento.js"></script>
+<div id="commento"></div>
diff --git a/themes/bronn/static/css/layout.css b/themes/bronn/static/css/layout.css
index 750ac52..05054f3 100644
--- a/themes/bronn/static/css/layout.css
+++ b/themes/bronn/static/css/layout.css
@@ -529,88 +529,3 @@ footer a {
padding: 1rem !important;
}
}
-
-/*comments */
-#comments {
- margin-top: 5rem;
-}
-
-#comments form,
-#comments label {
- width: 100%;
- display: flex;
- flex-direction: column;
-}
-
-#comments label:not(:last-child) {
- margin-right: 0.4rem;
-}
-
-#comments form > div {
- display: flex;
-}
-
-#comments input,
-#comments textarea {
- font: inherit;
- border: 1px solid #5465ff70;
- padding: 0.5rem 0.7rem;
- border-radius: 0.3rem;
- resize: none;
-}
-
-#comments .btn {
- margin-top: 0.7rem;
-}
-
-#comments input::placeholder,
-#comments textarea::placeholder {
- color: #5465ff70;
-}
-
-#comments small {
- font-weight: bold;
- margin-top: 0.3rem;
- margin-bottom: 0.3rem;
-}
-
-#comments-listing {
- margin-top: 2rem;
- font-size: 0.9em;
-}
-
-#comments-listing .card {
- padding: 1rem;
-}
-
-#comments-listing .author {
- font-weight: bold;
- font-size: 1.15em;
- margin: 0.3rem 0;
-}
-
-#comments-listing .author span:nth-child(2) {
- color: #18344670;
- font-weight: bold;
- font-family: lato, sans-serif;
-}
-
-#comments-listing .content {
- color: #183446;
-}
-
-@media (max-width: 900px) {
- #comments form > div {
- display: flex;
- flex-direction: column;
- }
-}
-
-.error {
- padding: 0.8rem 1rem;
- color: red;
- border: 1px solid red;
- border-radius: 0.4rem;
- margin: 1.5rem 0;
- font-size: 0.9em;
-}