mirror of
https://github.com/Digital-Naturalism-Laboratories/Mothbox.git
synced 2026-03-20 22:03:32 +00:00
94 lines
2.6 KiB
Plaintext
94 lines
2.6 KiB
Plaintext
{%- comment -%}
|
|
{% include css/callouts.scss.liquid color_scheme = string %}
|
|
produces SCSS for all the callouts in site.callouts. For the "dark"
|
|
color scheme, the levels of the text and background colors are reversed.
|
|
{%- endcomment -%}
|
|
|
|
{%- assign callout_background_hue = "000" -%}
|
|
{%- assign callout_color_hue = "300" -%}
|
|
{%- if site.callouts_level == "loud" or include.color_scheme == "dark" and site.callouts_level != "quiet" -%}
|
|
{%- assign callout_background_hue = "300" -%}
|
|
{%- assign callout_color_hue = "000" -%}
|
|
{%- endif -%}
|
|
|
|
div.opaque {
|
|
background-color: $body-background-color;
|
|
}
|
|
|
|
{%- for callout in site.callouts %}
|
|
|
|
{%- assign callout_opacity = callout[1].opacity | default: site.callouts_opacity | default: 0.2 -%}
|
|
|
|
p.{{ callout[0] }}, blockquote.{{ callout[0] }} {
|
|
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
|
|
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
|
padding: .8rem;
|
|
{% if callout[1].title %}
|
|
&::before {
|
|
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
|
content: "{{ callout[1].title }}";
|
|
display: block;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: .75em;
|
|
padding-bottom: .125rem;
|
|
}
|
|
{% endif %}
|
|
> .{{ callout[0] }}-title {
|
|
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
|
display: block;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: .75em;
|
|
padding-bottom: .125rem;
|
|
}
|
|
}
|
|
|
|
p.{{ callout[0] }}-title, blockquote.{{ callout[0] }}-title {
|
|
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
|
|
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
|
padding: .8rem;
|
|
> p:first-child {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
|
display: block;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: .75em;
|
|
padding-bottom: .125rem;
|
|
}
|
|
}
|
|
|
|
blockquote.{{ callout[0] }} {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
|
|
> p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
blockquote.{{ callout[0] }}-title {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
|
|
> p:nth-child(2) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
{% endfor -%}
|