| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| div#comments { | ||
| margin-top: 10px; | ||
|
|
||
| h3#comment-count, h2 { | ||
| padding: 8px; | ||
| } | ||
|
|
||
| img.avatar { | ||
| border-radius: 4px; | ||
| float: left; | ||
| width: 48px; | ||
| height: 48px; | ||
| } | ||
|
|
||
| #comments-list { | ||
| list-style-type: none; | ||
|
|
||
| li { | ||
| padding: 8px; | ||
| clear: both; | ||
| min-height: 48px; | ||
| font-size: 15px; | ||
| line-height: 21px; | ||
| margin-top: 8px; | ||
|
|
||
| blockquote { | ||
| margin-left: 60px; | ||
|
|
||
| cite { | ||
| font-style: normal; | ||
| font-size: 12px; | ||
|
|
||
| span.author { | ||
| font-weight: 700; | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| a.muted { | ||
| color: #656c7a; | ||
| font-size: 12px; | ||
| } | ||
| } | ||
|
|
||
| div.comment-body { | ||
| line-height: 21px; | ||
| font-size: 15px; | ||
| } | ||
| } | ||
|
|
||
| &.byauthor { | ||
| border-radius: 4px; | ||
| background-color: #fcf9eb; | ||
| } | ||
| } | ||
|
|
||
| .bullet { | ||
| padding: 0; | ||
| color: #c2c6cc; | ||
| line-height: 1.4; | ||
| } | ||
| } // #comments-list | ||
|
|
||
| form#commentform { | ||
| padding: 8px; | ||
|
|
||
| input { | ||
| transition: all .2s linear; | ||
| padding: 5px 9px; | ||
| margin: 10px 0 0 0; | ||
| font-size: 13px; | ||
| border-radius: 4px; | ||
| height: 32px; | ||
| } | ||
|
|
||
| input:focus, div.textarea:focus, button#commentbutton:active, button#commentbutton:focus { | ||
| outline:none; | ||
| box-shadow: 0 0 8px rgba(230, 210, 180, 1); | ||
| border-color: #aaa; | ||
| } | ||
|
|
||
| div.textarea, div.status { | ||
| border-radius: 4px; | ||
| height: auto; | ||
| line-height: 1.4; | ||
| font-size: 14px; | ||
| font-family: "Helvetica Neue",arial,sans-serif; | ||
| padding: 6px 10px 8px; | ||
| } | ||
|
|
||
| div.textarea { | ||
| width: 100%; | ||
| transition: all .15s ease-in-out; | ||
| overflow: auto; | ||
| word-wrap: break-word; | ||
| color: #2a2e2e; | ||
| cursor: text; | ||
| display: block; | ||
| padding: 6px 10px 8px; | ||
| min-height: 100px; | ||
| } | ||
|
|
||
| div.status:not(:empty) { | ||
| margin-bottom: 10px; | ||
| border: solid 1px #eaa; | ||
| background-color: #ecc; | ||
| } | ||
|
|
||
| div.status:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| [contenteditable=PLAINTEXT-ONLY]:empty:not(:focus):before { | ||
| color: #687a86; | ||
| line-height: 30px; | ||
| font-size: 18px; | ||
| content: attr(aria-label); | ||
| display: block; /* For Firefox */ | ||
| } | ||
|
|
||
| div#commenttext { | ||
| margin-left: 60px; | ||
| } | ||
|
|
||
| div#comment-box { | ||
| min-height: 48px; | ||
| } | ||
|
|
||
| div#comment-author { | ||
| margin-left: 60px; | ||
| } | ||
|
|
||
| button#commentbutton, input, div.textarea { | ||
| border: 1px solid #caced3; | ||
| } | ||
|
|
||
| button#commentbutton { | ||
| margin: 10px 0 0 0; | ||
| padding: 5px 9px; | ||
| height: 44px; | ||
| color: #505050; | ||
| border-radius: 4px; | ||
| -webkit-appearance: none; | ||
| apperance: none; | ||
| background-color: 1px solid #dbdfe4; | ||
| background-image: linear-gradient(-180deg, #eceff5 0%, #dbdfe4 90%); | ||
|
|
||
| &:hover { | ||
| border: 1px solid #b0b0c0; | ||
| background-color: 1px solid #dbdfe4; | ||
| background-image: linear-gradient(-180deg, #eceff5 0%, #dbdfe4 90%); | ||
| } | ||
|
|
||
| &:active { | ||
| border: 1px solid #a8acc2; | ||
| background-color: 1px #cbcfd4; | ||
| background-image: none; | ||
| } | ||
|
|
||
| &.confirm-button { | ||
| background-color: 1px solid #ffffee; | ||
| background-image: linear-gradient(-180deg, #ffffee 0%, #eeeedd 90%) | ||
| } | ||
| } | ||
|
|
||
| #remember-me { | ||
| display: inline-block; | ||
| padding: 10px 6px; | ||
|
|
||
| input { | ||
| margin: auto; | ||
| padding: auto; | ||
| height: auto; | ||
| } | ||
| } | ||
| } // form#commentForm | ||
|
|
||
| #comment-count, cite, #remember-me { | ||
| font-family: "Helvetica Neue",arial,sans-serif; | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,3 +6,4 @@ | |
| @import "screen"; | ||
| @import "code"; | ||
| @import "carbon"; | ||
| @import "comments"; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| Haack.ready(function() { | ||
|
|
||
| let form = Haack.get('commentform') | ||
|
|
||
| if (form) { | ||
| var emailRegex = /[^@\s]+@[^@\s]+\.[^@\s]+$/ | ||
| var avatarPreview = Haack.get('avatarPreview') | ||
| avatarPreview.onerror = (e) => { tryLoad(e.target, 1) } | ||
|
|
||
| function changeAvatar() { | ||
| let image = avatarPreview | ||
| image.possible = buildPossibleAvatars(Haack.get('identity').value) | ||
| image.currentIndex = 0 | ||
| tryLoad(image) | ||
| } | ||
|
|
||
| function tryLoad(image, increment) { | ||
| if (increment) { | ||
| image.currentIndex += increment | ||
| } | ||
|
|
||
| if (image.currentIndex < image.possible.length) { | ||
| image.src = image.possible[image.currentIndex] | ||
| } | ||
| else { | ||
| image.onerror = null | ||
| image.src = image.dataset.fallbacksrc; | ||
| } | ||
| } | ||
|
|
||
| function buildPossibleAvatars(identity) { | ||
| let possibleAvatars = [] | ||
|
|
||
| if (identity.match(emailRegex)) { | ||
| possibleAvatars.push('https://secure.gravatar.com/avatar/' + md5(identity) + '?s=80&d=identicon&r=pg') | ||
| } else { | ||
| possibleAvatars.push('https://github.com/' + identity + '.png') | ||
| possibleAvatars.push('https://avatars.io/twitter/' + identity + '/medium') | ||
| } | ||
|
|
||
| return possibleAvatars | ||
| } | ||
|
|
||
| Haack.get('comment-div').oninput = (e) => { | ||
| Haack.get('message').value = e.target.innerText | ||
| } | ||
|
|
||
| Haack.get('identity').onchange = () => { | ||
| changeAvatar() | ||
| } | ||
|
|
||
| function storeUser(name, identity) { | ||
| window.localStorage.name = name; | ||
| window.localStorage.identity = identity; | ||
| } | ||
|
|
||
| function retrieveUser(nameInput, identityInput, rememberCheckbox) { | ||
| var rememberMe = false | ||
| if (window.localStorage.name) { | ||
| nameInput.value = window.localStorage.name; | ||
| rememberMe = true | ||
| } | ||
| if (window.localStorage.identity) { | ||
| identityInput.value = window.localStorage.identity; | ||
| rememberMe = true | ||
| } | ||
| if (rememberMe) { | ||
| rememberCheckbox.checked = true | ||
| } | ||
| } | ||
|
|
||
| Haack.get('commentbutton').onclick = (e) => { | ||
| let status = Haack.get('commentstatus') | ||
| status.innerText = '' | ||
|
|
||
| let missing = Array.from(form.querySelectorAll('[data-required]')).filter(el => el.value === '').map(el => el.name) | ||
| if (missing.length > 0) { | ||
| status.innerText = 'Some required fields are missing - (' + missing.join(', ') + ')' | ||
| return | ||
| } | ||
| let button = e.target | ||
| if (button.innerText != 'Confirm comment') { | ||
| button.innerText = 'Confirm comment' | ||
| button.title = 'Click the button again to confirm the comment' | ||
| button.classList.add('confirm-button') | ||
| return | ||
| } | ||
| let name = Haack.get('name') | ||
| let identity = Haack.get('identity') | ||
|
|
||
| if (Haack.get('remember').checked) { | ||
| storeUser(name.value, identity.value) | ||
| } | ||
| else { | ||
| storeUser('', '') | ||
| } | ||
| Haack.get('avatarInput').value = avatarPreview.src | ||
|
|
||
| button.disabled = true | ||
| button.innerText = 'Posting...' | ||
| identity.value = "" | ||
| form.action = form.dataset.action | ||
| form.submit() | ||
| } | ||
|
|
||
| // Load values from Local Storage. | ||
| retrieveUser(Haack.get('name'), Haack.get('identity'), Haack.get('remember')) | ||
| changeAvatar() // initial load of avatar | ||
| } | ||
| }) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| Haack.ready(function() { | ||
| var images = document.querySelectorAll('.post-content img') | ||
| images.forEach(function(img) { | ||
| var alt = img.alt | ||
| var parent = img.parentElement | ||
|
|
||
| if (alt && alt != '') { | ||
| var element = img | ||
| if (parent.tagName == 'A') { | ||
| element = parent; | ||
| } | ||
| element.insertAdjacentHTML('afterend', '<span class="caption">' + alt + '</span>'); | ||
|
|
||
| /* if (!parent.is('a')) { | ||
| $(this).wrap('<a href="'+this.src+'" title="'+alt+'" />'); | ||
| }*/ | ||
| } | ||
| }) | ||
| }) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| var Haack = (function() { | ||
| // NodeList foreach Polyfill | ||
| if (window.NodeList && !NodeList.prototype.forEach) { | ||
| NodeList.prototype.forEach = function (callback, thisArg) { | ||
| thisArg = thisArg || window | ||
| for (var i = 0; i < this.length; i++) { | ||
| callback.call(thisArg, this[i], i, this) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Haack namespace object. | ||
| return { | ||
| ready: function(init) { | ||
| if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) { | ||
| window.setTimeout(init) | ||
| } | ||
| else { | ||
| var completed = function() { | ||
| document.removeEventListener("DOMContentLoaded", completed) | ||
| window.removeEventListener("load", completed) | ||
| init() | ||
| } | ||
| document.addEventListener("DOMContentLoaded", completed) | ||
| window.addEventListener("load", completed) | ||
| } | ||
| }, | ||
| get: function(elementId) { | ||
| return document.getElementById(elementId) | ||
| } | ||
| }; | ||
| })(); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| layout: page | ||
| title: "Thank you!" | ||
| description: "Thank you for your comment" | ||
| date: 2018-06-11 -0800 | ||
| comments: false | ||
| categories: [personal] | ||
| sharing: false | ||
| --- | ||
|
|
||
| I appreciate all the feedback. | ||
|
|
||
| __Please note!__ It may take a while to display as I moderate comments. Thanks for understanding! |
