Merge branch 'feature/staticman-commenting' into develop

This commit is contained in:
Michael Rose 2016-08-11 10:22:58 -04:00
commit 9706f6e201
10 changed files with 564 additions and 155 deletions

View file

@ -24,7 +24,7 @@ The theme includes responsive layouts (`single`, `archive`, and `splash` pages)
- Several layout options (single, archive, splash pages)
- SEO optimized with support for [Twitter Cards](https://dev.twitter.com/cards/overview) and [Open Graph](http://ogp.me/) data
- Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), and custom).
- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), static-based via [Staticman](https://staticman.net/), and custom).
- Optional analytics ([Google Analytics](https://www.google.com/analytics/) and custom).
- UI localized text: English (default), Spanish, French, and Turkish.

View file

@ -18,7 +18,7 @@ teaser : # filename of teaser fallback teaser image placed in
# breadcrumbs : false # true, false (default)
words_per_minute : 200
comments:
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", custom"
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
disqus:
shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
discourse:
@ -28,6 +28,21 @@ comments:
appid :
num_posts : # 5 (default)
colorscheme : # "light" (default), "dark"
staticman:
allowedFields : ['name', 'email', 'url', 'message']
branch : # "master", "gh-pages"
commitMessage : "New comment."
format : "yml"
moderation : true
path : "_data/comments/{options.slug}"
requiredFields : ['name', 'email', 'message']
transforms:
email : "md5"
generatedFields:
date:
type : "date"
options:
format : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
atom_feed:
path : # blank (default) uses feed.xml

View file

@ -3,30 +3,45 @@
# English (default)
# -----------------
en: &DEFAULT_EN
page : "Page"
pagination_previous : "Previous"
pagination_next : "Next"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "On This Page"
ext_link_label : "Direct Link"
less_than : "less than"
minute_read : "minute read"
share_on_label : "Share on"
meta_label :
tags_label : "Tags:"
categories_label : "Categories:"
date_label : "Updated:"
comments_label : "Leave a Comment"
more_label : "Learn More"
related_label : "You May Also Enjoy"
follow_label : "Follow:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Website"
email_label : "Email"
recent_posts : "Recent Posts"
undefined_wpm : "Undefined parameter words_per_minute at _config.yml"
page : "Page"
pagination_previous : "Previous"
pagination_next : "Next"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "On This Page"
ext_link_label : "Direct Link"
less_than : "less than"
minute_read : "minute read"
share_on_label : "Share on"
meta_label :
tags_label : "Tags:"
categories_label : "Categories:"
date_label : "Updated:"
comments_label : "Leave a Comment"
comments_title : "Comments"
more_label : "Learn More"
related_label : "You May Also Enjoy"
follow_label : "Follow:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Website"
email_label : "Email"
recent_posts : "Recent Posts"
undefined_wpm : "Undefined parameter words_per_minute at _config.yml"
comment_form_info : "Your email address will not be published. Required fields are marked"
comment_form_comment_label : "Comment"
comment_form_md_info : "Markdown is supported."
comment_form_name_label : "Name"
comment_form_email_label : "Email address"
comment_form_website_label : "Website (optional)"
comment_btn_submit : "Submit Comment"
comment_btn_submitted : "Submitted"
comment_success_title : "Comment submitted"
comment_success_msg : "Thanks for your comment! It will show on the site once it has been approved."
comment_error_title : "Error"
comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
close_btn_label : "close"
loading_label : "Loading..."
en-US:
<<: *DEFAULT_EN
en-CA:
@ -39,30 +54,45 @@ en-AU:
# Spanish
# --------------
es: &DEFAULT_ES
page : "Página"
pagination_previous : "Anterior"
pagination_next : "Siguiente"
breadcrumb_home_label : "Inicio"
breadcrumb_separator : "/"
toc_label : "Contenidos"
ext_link_label : "Enlace"
less_than : "menos de"
minute_read : "minuto de lectura"
share_on_label : "Compartir"
meta_label :
tags_label : "Etiquetas:"
categories_label : "Categorías:"
date_label : "Actualizado:"
comments_label : "Comentar"
more_label : "Ver más"
related_label : "Podrías ver también"
follow_label : "Seguir:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Sitio web"
email_label : "Email"
recent_posts : "Entradas recientes"
undefined_wpm : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
page : "Página"
pagination_previous : "Anterior"
pagination_next : "Siguiente"
breadcrumb_home_label : "Inicio"
breadcrumb_separator : "/"
toc_label : "Contenidos"
ext_link_label : "Enlace"
less_than : "menos de"
minute_read : "minuto de lectura"
share_on_label : "Compartir"
meta_label :
tags_label : "Etiquetas:"
categories_label : "Categorías:"
date_label : "Actualizado:"
comments_label : "Comentar"
comments_title :
more_label : "Ver más"
related_label : "Podrías ver también"
follow_label : "Seguir:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Sitio web"
email_label : "Email"
recent_posts : "Entradas recientes"
undefined_wpm : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
comment_form_info :
comment_form_comment_label :
comment_form_md_info :
comment_form_name_label :
comment_form_email_label :
comment_form_website_label :
comment_btn_submit :
comment_btn_submitted :
comment_success_title :
comment_success_msg :
comment_error_title :
comment_error_msg :
close_btn_label :
loading_label :
es-ES:
<<: *DEFAULT_ES
es-CO:
@ -71,30 +101,45 @@ es-CO:
# French
# -----------------
fr: &DEFAULT_FR
page : "Page"
pagination_previous : "Précédent"
pagination_next : "Suivant"
breadcrumb_home_label : "Accueil"
breadcrumb_separator : "/"
toc_label : "Sur cette page"
ext_link_label : "Lien direct"
less_than : "plus petit que"
minute_read : "minute de lecture"
share_on_label : "Partager sur"
meta_label :
tags_label : "Tags :"
categories_label : "Catégories :"
date_label : "Mis à jour :"
comments_label : "Laisser un commentaire"
more_label : "Lire plus"
related_label : "Vous pourriez aimer"
follow_label : "Suivez moi"
feed_label : "Flux"
powered_by : "Propulsé par"
website_label : "Site"
email_label : "Email"
recent_posts : "Posts récents"
undefined_wpm : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
page : "Page"
pagination_previous : "Précédent"
pagination_next : "Suivant"
breadcrumb_home_label : "Accueil"
breadcrumb_separator : "/"
toc_label : "Sur cette page"
ext_link_label : "Lien direct"
less_than : "plus petit que"
minute_read : "minute de lecture"
share_on_label : "Partager sur"
meta_label :
tags_label : "Tags :"
categories_label : "Catégories :"
date_label : "Mis à jour :"
comments_label : "Laisser un commentaire"
comments_title :
more_label : "Lire plus"
related_label : "Vous pourriez aimer"
follow_label : "Suivez moi"
feed_label : "Flux"
powered_by : "Propulsé par"
website_label : "Site"
email_label : "Email"
recent_posts : "Posts récents"
undefined_wpm : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
comment_form_info :
comment_form_comment_label :
comment_form_md_info :
comment_form_name_label :
comment_form_email_label :
comment_form_website_label :
comment_btn_submit :
comment_btn_submitted :
comment_success_title :
comment_success_msg :
comment_error_title :
comment_error_msg :
close_btn_label :
loading_label :
fr-FR:
<<: *DEFAULT_FR
fr-BE:
@ -105,60 +150,90 @@ fr-CH:
# Turkish
# -----------------
tr: &DEFAULT_TR
page : "Sayfa"
pagination_previous : "Önceki"
pagination_next : "Sonraki"
breadcrumb_home_label : "Ana Sayfa"
breadcrumb_separator : "/"
toc_label : "İçindekiler"
ext_link_label : "Doğrudan Bağlantı"
less_than : "Şu süreden az: "
minute_read : "dakika tahmini okuma süresi"
share_on_label : "Paylaş"
meta_label :
tags_label : "Etiketler:"
categories_label : "Kategoriler:"
date_label : "Güncelleme tarihi:"
comments_label : "Yorum yapın"
more_label : "Daha fazlasını öğrenin"
related_label : "Bunlar ilginizi çekebilir:"
follow_label : "Takip et:"
feed_label : "RSS"
powered_by : "Emeği geçenler: "
website_label : "Web sayfası"
email_label : "E-posta"
recent_posts : "Son yazılar"
undefined_wpm : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
page : "Sayfa"
pagination_previous : "Önceki"
pagination_next : "Sonraki"
breadcrumb_home_label : "Ana Sayfa"
breadcrumb_separator : "/"
toc_label : "İçindekiler"
ext_link_label : "Doğrudan Bağlantı"
less_than : "Şu süreden az: "
minute_read : "dakika tahmini okuma süresi"
share_on_label : "Paylaş"
meta_label :
tags_label : "Etiketler:"
categories_label : "Kategoriler:"
date_label : "Güncelleme tarihi:"
comments_label : "Yorum yapın"
comments_title :
more_label : "Daha fazlasını öğrenin"
related_label : "Bunlar ilginizi çekebilir:"
follow_label : "Takip et:"
feed_label : "RSS"
powered_by : "Emeği geçenler: "
website_label : "Web sayfası"
email_label : "E-posta"
recent_posts : "Son yazılar"
undefined_wpm : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
comment_form_info :
comment_form_comment_label :
comment_form_md_info :
comment_form_name_label :
comment_form_email_label :
comment_form_website_label :
comment_btn_submit :
comment_btn_submitted :
comment_success_title :
comment_success_msg :
comment_error_title :
comment_error_msg :
close_btn_label :
loading_label :
tr-TR:
<<: *DEFAULT_TR
# Brazilian Portguese
# -----------------
pt: &DEFAULT_PT
page : "Página"
pagination_previous : "Anterior"
pagination_next : "Próxima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "Nesta página"
ext_link_label : "Link direto"
less_than : "meno que"
minute_read : "minutos de leitura"
share_on_label : "Compartilhe em"
meta_label :
tags_label : "Tags:"
categories_label : "Categorias:"
date_label : "Atualizado em:"
comments_label : "Deixe um comentário"
more_label : "Aprenda Mais"
related_label : "Você Talvez Goste Também"
follow_label : "Acompanhe em"
feed_label : "Feed"
powered_by : "Feito com"
website_label : "Site"
email_label : "Email"
recent_posts : "Postagens recentes"
undefined_wpm : "Parâmetro indefinido em word_per_minute no _config.yml"
page : "Página"
pagination_previous : "Anterior"
pagination_next : "Próxima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "Nesta página"
ext_link_label : "Link direto"
less_than : "meno que"
minute_read : "minutos de leitura"
share_on_label : "Compartilhe em"
meta_label :
tags_label : "Tags:"
categories_label : "Categorias:"
date_label : "Atualizado em:"
comments_label : "Deixe um comentário"
comments_title :
more_label : "Aprenda Mais"
related_label : "Você Talvez Goste Também"
follow_label : "Acompanhe em"
feed_label : "Feed"
powered_by : "Feito com"
website_label : "Site"
email_label : "Email"
recent_posts : "Postagens recentes"
undefined_wpm : "Parâmetro indefinido em word_per_minute no _config.yml"
comment_form_info :
comment_form_comment_label :
comment_form_md_info :
comment_form_name_label :
comment_form_email_label :
comment_form_website_label :
comment_btn_submit :
comment_btn_submitted :
comment_success_title :
comment_success_msg :
comment_error_title :
comment_error_msg :
close_btn_label :
loading_label :
pt-BR:
<<: *DEFAULT_PT
pt-PT:
@ -167,30 +242,45 @@ pt-PT:
# Italian
# -----------------
it: &DEFAULT_IT
page : "Pagina"
pagination_previous : "Precedente"
pagination_next : "Prossima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "Indice della pagina"
ext_link_label : "Link"
less_than : "meno di"
minute_read : "minuto/i di lettura"
share_on_label : "Condividi"
meta_label :
tags_label : "Tags:"
categories_label : "Categorie:"
date_label : "Aggiornato:"
comments_label : "Scrivi un commento"
more_label : "Scopri di più"
related_label : "Potrebbe Piacerti Anche"
follow_label : "Segui:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Website"
email_label : "Email"
recent_posts : "Articoli Recenti"
undefined_wpm : "Parametro words_per_minute non definito in _config.yml"
page : "Pagina"
pagination_previous : "Precedente"
pagination_next : "Prossima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
toc_label : "Indice della pagina"
ext_link_label : "Link"
less_than : "meno di"
minute_read : "minuto/i di lettura"
share_on_label : "Condividi"
meta_label :
tags_label : "Tags:"
categories_label : "Categorie:"
date_label : "Aggiornato:"
comments_label : "Scrivi un commento"
comments_title :
more_label : "Scopri di più"
related_label : "Potrebbe Piacerti Anche"
follow_label : "Segui:"
feed_label : "Feed"
powered_by : "Powered by"
website_label : "Website"
email_label : "Email"
recent_posts : "Articoli Recenti"
undefined_wpm : "Parametro words_per_minute non definito in _config.yml"
comment_form_info :
comment_form_comment_label :
comment_form_md_info :
comment_form_name_label :
comment_form_email_label :
comment_form_website_label :
comment_btn_submit :
comment_btn_submitted :
comment_success_title :
comment_success_msg :
comment_error_title :
comment_error_msg :
close_btn_label :
loading_label :
it-IT:
<<: *DEFAULT_IT

22
_includes/comment.html Normal file
View file

@ -0,0 +1,22 @@
<article id="comment{{ include.index }}" class="js-comment comment">
<div class="comment__avatar-wrapper">
<img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80">
</div>
<div class="comment__content-wrapper">
<h3 class="comment__author">
{% if (include.url) and (include.url != '@url') %}
<a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
{% else %}
{{ include.name }}
{% endif %}
</h3>
<p class="comment__date">
{% if include.date %}
{% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
<time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
{% if include.index %}</a>{% endif %}
{% endif %}
</p>
{{ include.message | markdownify }}
</div>
</article>

View file

@ -9,6 +9,8 @@
{% include /comments-providers/facebook.html %}
{% when "google-plus" %}
{% include /comments-providers/google-plus.html %}
{% when "staticman" %}
{% include /comments-providers/staticman.html %}
{% when "custom" %}
{% include /comments-providers/custom.html %}
{% endcase %}

View file

@ -0,0 +1,53 @@
{% if site.repository and site.staticman.branch %}
<!-- Start comment form modal -->
<article class="modal">
<h2 class="modal__title js-modal-title"></h2>
<div class="modal__supporting-text js-modal-text"></div>
<div class="modal__actions">
<button class="btn btn--danger js-close-modal">{{ site.data.ui-text[site.locale].close_btn_label | default: "close" }}</button>
</div>
</article>
<!-- End comment form modal -->
<script>
(function ($) {
var $comments = $('.js-comments');
$('.js-form').submit(function () {
var form = this;
$(form).addClass('form--loading');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
$(form).removeClass('form--loading');
$('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
},
error: function (err) {
console.log(err);
showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
$(form).removeClass('form--loading');
}
});
return false;
});
$('.js-close-modal').click(function () {
$('body').removeClass('show-modal');
});
function showModal(title, message) {
$('.js-modal-title').text(title);
$('.js-modal-text').html(message);
$('body').addClass('show-modal');
}
})(jQuery);
</script>
{% endif %}

View file

@ -1,14 +1,75 @@
{% include base_path %}
<div class="page__comments">
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
{% capture comments_label %}{{ site.data.ui-text[site.locale].comments_label | default: "Comments" }}{% endcapture %}
{% case site.comments.provider %}
{% when "disqus" %}
<h4 class="page__comments-title">{{ comments_label }}</h4>
<section id="disqus_thread"></section>
{% when "facebook" %}
<h4 class="page__comments-title">{{ comments_label }}</h4>
<section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
{% when "google-plus" %}
<h4 class="page__comments-title">{{ comments_label }}</h4>
<section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
{% when "staticman" %}
<section id="comments">
{% if site.repository and site.staticman.branch %}
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
<!-- Start new comment form -->
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<p class="small help-block">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
<form id="new_comment" class="page__comments-form js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
<div class="form__spinner">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
</div>
<fieldset>
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label>
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
<div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
</fieldset>
<fieldset>
<label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label>
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
</fieldset>
<fieldset>
<label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label>
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
</fieldset>
<fieldset>
<label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label>
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
</fieldset>
<fieldset class="hidden">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<input type="hidden" name="fields[hidden]"/>
</fieldset>
<fieldset>
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset>
</form>
<!-- End new comment form -->
{% endif %}
</section>
{% when "custom" %}
<section id="comments"></section>
{% endcase %}

View file

@ -2,7 +2,7 @@
Forms
========================================================================== */
btnform {
form {
margin: 0 0 5px 0;
fieldset {
@ -51,17 +51,20 @@ input,
button,
select,
textarea {
font-family: $sans-serif;
box-sizing: border-box;
font-family: $sans-serif;
}
label {
display: block;
margin-bottom: 10px / 8;
font-weight: bold;
margin-bottom: 0.25em;
color: $text-color;
cursor: pointer;
small {
font-size: $type-size-6;
}
input,
textarea,
select {
@ -74,11 +77,13 @@ textarea,
select {
display: inline-block;
width: 100%;
padding: 4px;
margin-bottom: 5px / 4;
padding: 0.25em;
margin-bottom: 0.5em;
color: $text-color;
background-color: #fff;
border: 1px solid mix(#fff, #000, 80%);
color: $text-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
&:hover {
border-color: mix(#fff, $primary-color, 50%);
@ -165,6 +170,10 @@ input[type="hidden"] {
display: none;
}
.form {
position: relative;
}
.radio,
.checkbox {
padding-left: 18px;
@ -315,6 +324,38 @@ select:focus {
}
/*
.form--loading
========================================================================== */
.form--loading:before {
content: '';
}
.form--loading .form__spinner {
display: block;
}
.form:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 10;
}
.form__spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
}
/*
Google search form
========================================================================== */

View file

@ -300,6 +300,66 @@
text-transform: uppercase;
}
.page__comments-form {
padding: 1em;
background: $lighter-gray;
}
.comment {
margin: 2em 0;
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
}
.comment__avatar-wrapper {
display: table-cell;
vertical-align: top;
width: 60px;
height: 60px;
@include breakpoint($large) {
width: 100px;
height: 100px;
}
}
.comment__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
@include breakpoint($large) {
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid $border-color;
}
}
.comment__content-wrapper {
display: table-cell;
vertical-align: top;
}
.comment__author {
margin: 0;
a {
text-decoration: none;
}
}
.comment__date {
@extend .page__meta;
margin: 0;
a {
text-decoration: none;
}
}
/*
Related

View file

@ -377,6 +377,61 @@ body:hover .visually-hidden button {
}
/*
Modals
========================================================================== */
.show-modal {
overflow: hidden;
position: relative;
&:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(255, 255, 255, 0.85);
}
.modal {
display: block;
}
}
.modal {
display: none;
position: fixed;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
min-height: 0;
z-index: 9999;
background: #fff;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
&__title {
margin: 0;
padding: 0.5em 1em;
}
&__supporting-text {
padding: 0 1em 0.5em 1em;
}
&__actions {
padding: 0.5em 1em;
border-top: 1px solid $border-color;
}
}
/*
Footnotes
========================================================================== */
@ -402,4 +457,14 @@ a.reversefootnote {
&:hover {
text-decoration: underline;
}
}
}
/*
Required
========================================================================== */
.required {
color: $danger-color;
font-weight: bold;
}