symposion_app Changeset - 99ba4c177004

Changeset - 99ba4c177004

Parent rev.

Child rev.

[Not reviewed]

0 3 0

Christopher Neugebauer - 8 years ago 2016-10-05 17:25:44
chrisjrn@gmail.com

1) Fixes list display
2) Lets us put links in category descriptions

3 files changed with 3 insertions and 3 deletions:

pinaxcon/templates/registrasion/guided_registration.html

pinaxcon/templates/registrasion/product_category.html

static/src/lca2017/css/app.css

0 comments (0 inline, 0 general)

pinaxcon/templates/registrasion/guided_registration.html

➞

Show inline comments

 {% extends "registrasion/base.html" %}
 {% load bootstrap %}
 {% load lca2017_tags %}
 {% block header_title %}Buy Your Ticket{% endblock %}
 {% block header_paragraph %}Step {{ current_step }} of {{ total_steps|add:1 }} &ndash; {{ title }} {% endblock %}
 {% block header_inset_image %}{% illustration "tuz.svg" %}{% endblock %}
 {% block scripts_extra %}
   {% for section in sections %}
     {{ section.form.media.js }}
   {% endfor %}
 {% endblock %}
 {% block content %}
   <form method="post" action="">
     {% csrf_token %}
     {% for section in sections %}
       <h2>{{ section.title }}</h2>
       {% if section.description %}
         <blockquote>{{ section.description }}</blockquote>
+        <blockquote>{{ section.description|safe }}</blockquote>
       {% endif %}
       <fieldset>
         {% if section.discounts %}
           {% include "registrasion/discount_list.html" with discounts=section.discounts %}
           <blockquote><small>
             You must select a product to receive any discounts.<br/>
             Applicable discounts will be applied automatically when you check out.
           </small></blockquote>
           <hr />
         {% endif %}
         <h3>Available options</h3>
         {% include "_form_snippet.html" with form=section.form %}
       </fieldset>
       <br />
     {% endfor %}
     <div class="btn-group">
       <input class="btn btn-primary" type="submit" value="Next Step" />
     </div>
   </form>
 {% endblock %}

pinaxcon/templates/registrasion/product_category.html

➞

Show inline comments

 {% extends "registrasion/base.html" %}
 {% load bootstrap %}
 {% load registrasion_tags %}
 {% load lca2017_tags %}
 {% block header_title %}Product Category: {{ category.name }}{% endblock %}
 {% block header_inset_image %}{% illustration "lavender.svg" %}{% endblock %}
 {% block scripts_extra %}
   {{ voucher_form.media.js }}
   {{ form.media.js }}
   <script type="text/javascript">
     function showVoucherForm() {
       $("#voucher-form").show();
       $("#voucher-form-button").hide();
+    }
   </script>
 {% endblock %}
 {% block content %}
   <button id="voucher-form-button" class="btn" onclick="showVoucherForm()">Enter voucher code</button>
   <form method="post" action="">
     {% csrf_token %}
     <fieldset id="voucher-form" style="display: none;">
       {% include "_form_snippet.html" with form=voucher_form %}
       <div class="btn-group" />
         <input class="btn btn-primary" type="submit" value="Add voucher" />
       </div>
     </fieldset>
     <div class="vertical-bigger"></div>
     {% items_purchased category as items %}
     {% if items %}
       <h3>Paid items</h3>
       <p>You have already paid for the following items:</p>
       {% include "registrasion/_items_list.html" with items=items %}
     {% endif %}
     <h2>{{ category.name }}</h2>
     <blockquote>{{ category.description }}</blockquote>
+    <blockquote>{{ category.description|safe }}</blockquote>
     <fieldset>
       {% if discounts %}
         <h3>Discounts and Complimentary Items</h3>
         <div class="vertical-small"></div>
         {% include "registrasion/discount_list.html" with discounts=discounts %}
         <blockquote><small>Any applicable discounts will be applied automatically when you check out.</small></blockquote>
         <hr />
       {% endif %}
       <h3>Make a selection</h3>
       {% include "_form_snippet.html" with form=form %}
       <br />
       <div class="btn-group">
           <input class="btn btn-primary" type="submit" value="Add to cart" />
           <a href="{% url "dashboard" %}" class="btn btn-default">Return to dashboard</a>
       </div>
     </fieldset>
   </form>
 {% endblock %}

static/src/lca2017/css/app.css

➞

Show inline comments

 @charset "UTF-8";
 /**
  * Media Queries - *Try* and make everything fit within these - use @from/to/between
  */
 /**
  * Font definitions
  */
 /**
  * Transitions
  */
 /**
  * Padding
  * Usage: padding: $padding-rythm*2
  */
 /*
 * Colours
 */
 /**
  * Purpose-based colors
  */
 /**
  * z-index stack
  */
 /**
  * Misc
  */
 /* ---------------------------------------------------------------------------
 	Content-first media queries
 	===========================
 	Taken from Dominic Whittle with permission by Jonny Scholes
 	@TODO make these media query wrappers work as described.
 	from( n ) { ... }
 		Styles elements from (and inclusive) of n.
 		Useful for adding complexity as viewport size increases.
 	to( n ) { ... }
 		Styles elements up to but not including n.
 		Effectively, max-width n-1
 		Useful for the occasional small screen only style.
 	n must be unitless CSS pixels; e.g., 768 or 1024
 	It gets converted to em.
 	from-to( x, y ) { ... }
 	All take an additional $legacy parameter.
 	// Examples
 	@include to( $BreakpointSmall ) {
 		// max-width( 320/16em )
 		.nav {}
+	}
 	@include from-to( $BreakpointMedium, 1280, legacy ) {
 		// min-width( 320/16em ), max-width( 1280-1  )
 		.nav {}
+	}
 	@include from( 1280 ) {
 		// min-width 1280
 		.nav {}
+	}
 --------------------------------------------------------------------------- */
 .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
   max-width: 1746px;
   margin: 0 40px;
+}
 @media (min-width: 48em) {
   .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 70px;
+  }
+}
 @media (min-width: 64em) {
   .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 160px;
+  }
+}
 @media (min-width: 80em) {
   .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 200px;
+  }
+}
 @media (min-width: 1946px) {
   .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
     margin: 0 auto;
+  }
+}
 .panel--content, .l-speaker-page {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: start;
   align-items: flex-start;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -ms-flex-direction: column;
   flex-direction: column;
+}
 @media (min-width: 48em) {
   .panel--content, .l-speaker-page {
     -ms-flex-direction: row;
     flex-direction: row;
     -ms-flex-pack: justify;
     justify-content: space-between;
+  }
+}
 .panel--1-3, .l-speaker-page--portrait, .l-footer--logos {
   -ms-flex-order: 1;
   order: 1;
   width: 100%;
+}
 @media (min-width: 48em) {
   .panel--1-3, .l-speaker-page--portrait, .l-footer--logos {
     -ms-flex-order: 0;
     order: 0;
     width: auto;
     -ms-flex-preferred-size: calc((100% / 3) - 1.25rem * 2);
     flex-basis: calc((100% / 3) - 1.25rem * 2);
+  }
+}
 .panel--2-3, .l-speaker-page--content, .l-footer--text {
   -ms-flex-order: 2;
   order: 2;
   width: 100%;
+}
 @media (min-width: 48em) {
   .panel--2-3, .l-speaker-page--content, .l-footer--text {
     -ms-flex-order: 0;
     order: 0;
     width: auto;
     -ms-flex-preferred-size: calc(((100% / 3) * 2) - 1.25rem * 2);
     flex-basis: calc(((100% / 3) * 2) - 1.25rem * 2);
+  }
+}
 /*! normalize.css v2.1.2 | MIT License | git.io/normalize */
 /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */
 /**
  * Correct `block` display not defined in IE 8/9.
  */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
   display: block;
+}
 /**
  * Correct `inline-block` display not defined in IE 8/9.
  */
 audio,
 canvas,
 video {
   display: inline-block;
+}
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 audio:not([controls]) {
   display: none;
   height: 0;
+}
 /**
  * Address styling not present in IE 8/9.
  */
 [hidden] {
   display: none;
+}
 /* ==========================================================================
    Base
    ========================================================================== */
 /**
  * 1. Set default font family to sans-serif.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 html {
   font-family: sans-serif;
   /* 1 */
   -ms-text-size-adjust: 100%;
   /* 2 */
   -webkit-text-size-adjust: 100%;
   /* 2 */
+}
 /**
  * Remove default margin.
  */
 body {
   margin: 0;
+}
 /* ==========================================================================
    Links
    ========================================================================== */
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
 a:focus {
   outline: none;
+}
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 a:active,
 a:hover {
   outline: 0;
+}
 /* ==========================================================================
    Typography
    ========================================================================== */
 /**
  * Address variable `h1` font-size and margin within `section` and `article`
  * contexts in Firefox 4+, Safari 5, and Chrome.
  */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
+}
 /**
  * Address styling not present in IE 8/9, Safari 5, and Chrome.
  */
 abbr[title] {
   border-bottom: 1px dotted;
+}
 /**
  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  */
 b,
 strong {
   font-weight: bold;
+}
 /**
  * Address styling not present in Safari 5 and Chrome.
  */
 dfn {
   font-style: italic;
+}
 /**
  * Address differences between Firefox and other browsers.
  */
 hr {
   box-sizing: content-box;
   height: 0;
+}
 /**
  * Address styling not present in IE 8/9.
  */
 mark {
   background: #ff0;
   color: #000;
+}
 /**
  * Correct font family set oddly in Safari 5 and Chrome.
  */
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, serif;
   font-size: 1em;
+}
 /**
  * Improve readability of pre-formatted text in all browsers.
  */
 pre {
   white-space: pre-wrap;
+}
 /**
  * Set consistent quote types.
  */
 q {
   quotes: "\201C" "\201D" "\2018" "\2019";
+}
 /**
  * Address inconsistent and variable font size in all browsers.
  */
 small {
   font-size: 80%;
+}
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
+}
 sup {
   top: -0.5em;
+}
 sub {
   bottom: -0.25em;
+}
 /* ==========================================================================
    Embedded content
    ========================================================================== */
 /**
  * Remove border when inside `a` element in IE 8/9.
  */
 img {
   border: 0;
+}
 /**
  * Correct overflow displayed oddly in IE 9.
  */
 svg:not(:root) {
   overflow: hidden;
+}
 /* ==========================================================================
    Figures
    ========================================================================== */
 /**
  * Address margin not present in IE 8/9 and Safari 5.
  */
 figure {
   margin: 0;
+}
 /* ==========================================================================
    Forms
    ========================================================================== */
 /**
  * Define consistent border, margin, and padding.
  */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
+}
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  */
 legend {
   border: 0;
   /* 1 */
   padding: 0;
   /* 2 */
+}
 /**
  * 1. Correct font family not being inherited in all browsers.
  * 2. Correct font size not being inherited in all browsers.
  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
  */
 button,
 input,
 select,
 textarea {
   font-family: inherit;
   /* 1 */
   font-size: 100%;
   /* 2 */
   margin: 0;
   /* 3 */
+}
 /**
  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 button,
 input {
   line-height: normal;
+}
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
  * Correct `select` style inheritance in Firefox 4+ and Opera.
  */
 button,
 select {
   text-transform: none;
+}
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  */
 button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
   cursor: pointer;
   /* 3 */
+}
 /**
  * Re-set default cursor for disabled elements.
  */
 button[disabled],
 html input[disabled] {
   cursor: default;
+}
 /**
  * 1. Address box sizing set to `content-box` in IE 8/9.
  * 2. Remove excess padding in IE 8/9.
  */
 input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */
+}
 /**
  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  *    (include `-moz` to future-proof).
  */
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   /* 2 */
   box-sizing: content-box;
+}
 /**
  * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
+}
 /**
  * Remove inner padding and border in Firefox 4+.
  */
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
+}
 /**
  * 1. Remove default vertical scrollbar in IE 8/9.
  * 2. Improve readability and alignment in all browsers.
  */
 textarea {
   overflow: auto;
   /* 1 */
   vertical-align: top;
   /* 2 */
+}
 /* ==========================================================================
    Tables
    ========================================================================== */
 /**
  * Remove most spacing between table cells.
  */
 table {
   border-collapse: collapse;
   border-spacing: 0;
   margin-top: 1em;
   margin-bottom: 1em;
+}
 /* ==========================================================================
    Custom Defaults
    ========================================================================== */
 *,
 *:before,
 *:after {
   box-sizing: border-box;
+}
 .form-field {
   border: 1px solid #3ab1c9;
+}
 .form-field input[type='text'], .form-field input[type='tel'], .form-field input[type='number'], .form-field input[type='password'], .form-field input[type='email'], textarea {
   color: #0c486c;
   padding: 10px;
   width: 100%;
   border: 0;
+}
 .form-field input[type='text']:focus::-webkit-input-placeholder, .form-field input[type='tel']:focus::-webkit-input-placeholder, .form-field input[type='number']:focus::-webkit-input-placeholder, .form-field input[type='password']:focus::-webkit-input-placeholder, .form-field input[type='email']:focus::-webkit-input-placeholder {
   opacity: 0.2;
+}
 .form-field input[type='text']:focus::-moz-placeholder, .form-field input[type='tel']:focus::-moz-placeholder, .form-field input[type='number']:focus::-moz-placeholder, .form-field input[type='password']:focus::-moz-placeholder, .form-field input[type='email']:focus::-moz-placeholder {
   opacity: 0.2;
+}
 .form-field input[type='text']:focus:-ms-input-placeholder, .form-field input[type='tel']:focus:-ms-input-placeholder, .form-field input[type='number']:focus:-ms-input-placeholder, .form-field input[type='password']:focus:-ms-input-placeholder, .form-field input[type='email']:focus:-ms-input-placeholder {
   opacity: 0.2;
+}
 .form-field input[type='text']:focus::placeholder, .form-field input[type='tel']:focus::placeholder, .form-field input[type='number']:focus::placeholder, .form-field input[type='password']:focus::placeholder, .form-field input[type='email']:focus::placeholder {
   opacity: 0.2;
+}
 .form-field input[type='text']::-webkit-input-placeholder, .form-field input[type='tel']::-webkit-input-placeholder, .form-field input[type='number']::-webkit-input-placeholder, .form-field input[type='password']::-webkit-input-placeholder, .form-field input[type='email']::-webkit-input-placeholder {
   opacity: 1;
   color: #0c486c;
+}
 .form-field input[type='text']::-moz-placeholder, .form-field input[type='tel']::-moz-placeholder, .form-field input[type='number']::-moz-placeholder, .form-field input[type='password']::-moz-placeholder, .form-field input[type='email']::-moz-placeholder {
   opacity: 1;
   color: #0c486c;
+}
 .form-field input[type='text']:-ms-input-placeholder, .form-field input[type='tel']:-ms-input-placeholder, .form-field input[type='number']:-ms-input-placeholder, .form-field input[type='password']:-ms-input-placeholder, .form-field input[type='email']:-ms-input-placeholder {
   opacity: 1;
   color: #0c486c;
+}
 .form-field input[type='text']::placeholder, .form-field input[type='tel']::placeholder, .form-field input[type='number']::placeholder, .form-field input[type='password']::placeholder, .form-field input[type='email']::placeholder {
   opacity: 1;
   color: #0c486c;
+}
 .form-field + .form-field {
   margin-top: 20px;
   margin-top: 1.25rem;
+}
 body {
   font-size: 16px;
   font-family: "Roboto", sans-serif;
   line-height: 1.4;
   color: #0c486c;
   font-size: 4vw;
+}
 @media (min-width: 25em) {
   body {
     font-size: 2.2vw;
+  }
+}
 @media (min-width: 64em) {
   body {
     font-size: 2vw;
+  }
+}
 @media (min-width: 80em) {
   body {
     font-size: 28px;
+  }
+}
 .lede {
   margin: 30px 0;
   margin: 1.875rem 0;
   font-size: 4.2vw;
+}
 @media (min-width: 25em) {
   .lede {
     font-size: 3vw;
+  }
+}
 @media (min-width: 64em) {
   .lede {
     font-size: 2vw;
     margin: 3.375rem 0;
+  }
+}
 @media (min-width: 80em) {
   .lede {
     font-size: 28px;
+  }
+}
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: "Titillium Web", sans-serif;
   font-weight: 900;
   text-transform: uppercase;
   margin: 0;
   line-height: 0.9;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
 a {
   color: inherit;
   text-decoration: none;
   border-bottom: 1px solid #3ab1c9;
   transition: color 300ms;
+}
 a:hover, a:focus, a:active {
   color: #3ab1c9;
+}
 ul,
 ol {
   padding: 0;
   /* margin: 0; */
+}
 ul > li,
 ol > li {
-  list-style-position: inside;
+  list-style-position: outside;
   margin-left: 1em;
+}
 blockquote {
   margin-left: 0;
   padding-left: 20px;
   padding-left: 1.25rem;
   font-style: italic;
   border-left: 1px solid #3ab1c9;
+}
 table th {
   font-family: "Titillium Web", sans-serif;
   font-weight: 900;
   text-transform: uppercase;
+}
 table th, table td {
   padding: 10px;
   padding: 0.625rem;
   text-align: left;
+}
 table th:not(:first-of-type), table td:not(:first-of-type) {
   border-left: 1px solid #0c486c;
+}
 table tr:not(:last-of-type) {
   border-bottom: 1px solid #0c486c;
+}
 table.alt th {
   font-family: "Titillium Web", sans-serif;
   font-weight: 900;
   text-transform: uppercase;
+}
 table.alt th, table.alt td {
   padding: 10px;
   padding: 0.625rem;
   text-align: left;
+}
 table.alt th:not(:first-of-type), table.alt td:not(:first-of-type) {
   border-left: 1px solid #3ab1c9;
+}
 table.alt tr:not(:last-of-type) {
   border-bottom: 1px solid #3ab1c9;
+}
 /*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */
 .visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   width: 1px;
+}
 .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   position: static;
   width: auto;
+}
 .btn {
   display: inline-block;
   background: transparent;
   color: #0c486c;
   text-decoration: none;
   border: 1px solid #3ab1c9;
   padding: 10px 20px;
   padding: 0.625rem 1.25rem;
   border-radius: 0.625rem;
   transition: all 300ms ease-in-out;
   line-height: normal;
+}
 .btn:hover, .btn:focus, .btn:active {
   color: #3ab1c9;
   border-color: #3ab1c9;
   cursor: pointer;
+}
 .btn__white {
   color: white;
   border-color: white;
+}
 .btn__white:hover {
   background-color: white;
   border-color: white;
   color: #0c486c;
+}
 @media (min-width: 48em) {
   .btn {
     border: 3px solid #0c486c;
+  }
   .btn__white {
     border-color: white;
+  }
+}
 @media (min-width: 64em) {
   .btn {
     padding: 0.625rem 2.5rem;
+  }
+}
 .btn__compact {
   padding: 0.625rem 1.25rem;
   border: 1px solid #3ab1c9;
+}
 .btn__active {
   border: solid #3ab1c9;
+}
 .btn-group {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
+}
 .btn-group > .btn,
 .btn-group > .btn-svg {
   display: inline-block;
   margin-right: 20px;
   margin-right: 1.25rem;
+}
 .btn-svg {
   width: 2em;
   height: 2em;
   position: relative;
   border-bottom: 0;
   display: block;
+}
 .btn-svg > svg {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
+}
 .btn-svg__alt {
   color: #3ab1c9;
+}
 .btn-svg__alt:hover {
   color: #0c486c;
+}
 .select {
   position: relative;
+}
 .select select {
   outline: 0;
   border: 0;
   width: 100%;
   background-color: white;
   color: #0c486c;
   padding: 10px;
   padding-right: 35px;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
+}
 .select select:active {
   background-color: whitesmoke;
+}
 .select select::-ms-expand {
   display: none;
+}
 .select:after {
   content: ' ';
   display: block;
   position: absolute;
   border-right: 1px solid #3ab1c9;
   border-bottom: 1px solid #3ab1c9;
   right: 15px;
   top: 9px;
   width: 15px;
   height: 15px;
   transform: rotate(45deg);
+}
 .boolean-group {
   border: 0;
   list-style: none;
   margin-bottom: 0;
+}
 .boolean-group--row {
   display: block;
+}
 .boolean-group--row + .boolean-group--row {
   margin-top: 6.666px;
   margin-top: 0.41667rem;
+}
 .boolean-group--row > label {
   position: relative;
   padding-left: 17px;
   display: block;
   vertical-align: top;
+}
 .boolean-group--row > label:before {
   content: '';
   width: 12px;
   height: 12px;
   display: block;
   position: absolute;
   border: 1px solid #3ab1c9;
   top: calc(50% - 12px / 2);
   left: 0;
+}
 .boolean-group--row > label:after {
   transition: all 300ms ease-in-out;
   background-color: #0c486c;
   content: '';
   display: block;
   position: absolute;
   width: 0;
   height: 0;
   left: 6px;
   top: calc(50% - 12px / 2 + 4px * 1.5);
+}
 .boolean-group--row > input {
   display: none;
+}
 .boolean-group--row > input:checked ~ label:after {
   width: calc(12px - 4px);
   height: calc(12px - 4px);
   left: 2px;
   top: calc(50% - 12px / 2 + (4px / 2));
+}
 .boolean-group--row > input[type="radio"] ~ label:before, .boolean-group--row > input[type="radio"] ~ label:after {
   border-radius: 100%;
+}
 .panel {
   padding: 40px 0;
   padding: 2.5rem 0;
   /*
 	*	Tabbed panel styles
 	*/
+}
 .panel--content {
   position: relative;
   z-index: 1;
+}
 .panel--section-title {
   margin: 4px 0;
   margin: 0.25rem 0;
+}
 .panel--1-2 {
   margin: 20px 0;
   margin: 1.25rem 0;
   width: 100%;
+}
 .panel__bg {
   background-color: #0c486c;
   color: white;
   position: relative;
+}
 .panel--bg {
   position: absolute;
   opacity: 0.3;
   background-position: center;
   background-size: cover;
   background-blend-mode: multiply;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+}
 .panel--tabs {
   display: block;
+}
 .panel--tab-title {
   margin: 20px 0;
   margin: 1.25rem 0;
+}
 .panel--tab-content {
   display: none;
   -ms-flex-item-align: start;
   align-self: flex-start;
+}
 .panel--tab-content > *:first-child {
   margin-top: 0;
+}
 .panel--tab-content.is-active {
   display: block;
+}
 .panel--tab-controls {
   margin-bottom: 20px;
   margin-bottom: 1.25rem;
   display: block;
   width: 100%;
+}
 .panel--tab-controls-title {
   margin-top: 0;
+}
 .panel--tab-switch {
   margin-right: 20px;
   margin-right: 1.25rem;
   border-bottom: 0;
+}
 .panel--tab-switch:hover, .panel--tab-switch.is-active {
   cursor: pointer;
   border-bottom: 1px solid #3ab1c9;
+}
 .panel__compact {
   padding-top: 10px 0;
   padding-top: 0.625rem 0;
+}
 .panel__compact.panel__first {
   padding-top: 0 0;
   padding-top: 0 0;
+}
 .panel__compact.panel__last {
   padding-bottom: 10px;
   padding-bottom: 0.625rem;
+}
 .panel__compact .panel--content {
   -ms-flex-align: start;
   -ms-grid-row-align: flex-start;
   align-items: flex-start;
+}
 .panel__compact .panel--1-3 {
   width: 100%;
   margin-bottom: 2em;
+}
 @media (min-width: 48em) {
   .panel {
     padding: 0;
+  }
   .panel--section-title {
     margin: 3.75rem 0;
+  }
   .panel--1-2 {
     margin: 0.625rem 0;
     -ms-flex-preferred-size: 46%;
     flex-basis: 46%;
+  }
   .panel--1-3, .panel--2-3, .panel--1-2 {
     margin: 0;
+  }
   .panel--content {
     height: 700px;
     -ms-flex-align: center;
     -ms-grid-row-align: center;
     align-items: center;
+  }
   .panel__compact {
     padding-top: 5rem;
+  }
   .panel__compact.panel__first {
     padding-top: 0rem;
+  }
   .panel__compact.panel__last {
     padding-bottom: 2.5rem;
+  }
   .panel__compact .panel--content {
     height: auto;
+  }
+}
 .illustration {
   width: 35%;
   padding-top: 35%;
   position: relative;
   border-radius: 100%;
   box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5);
   margin-bottom: 20px;
   margin-bottom: 1.25rem;
+}
 .illustration > svg {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
 .illustration > img {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
 @media (min-width: 48em) {
   .illustration {
     width: 100%;
     padding-top: 100%;
     margin-bottom: 0;
     box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5);
+  }
+}
 .link-list {
   list-style: none;
   margin-top: 20px;
   margin-top: 1.25rem;
+}
 .link-list--item + .link-list--item {
   margin-top: 10px;
   margin-top: 0.625rem;
+}
 .link-list--link {
   font-weight: 600;
+}
 @media (min-width: 48em) {
   .link-list {
     margin-top: 0;
+  }
   .link-list--item + .link-list--item {
     margin-top: 1.25rem;
+  }
+}
 @media (min-width: 48em) {
   .right-floating-image {
     width: 30%;
     float: right;
     margin: 4rem;
     margin-right: 0;
+  }
+}
 .portrait {
   position: relative;
   overflow: hidden;
   width: 35%;
   border-radius: 100%;
   box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5);
   margin-bottom: 20px;
   margin-bottom: 1.25rem;
+}
 .portrait:before {
   content: "";
   display: block;
   padding-top: 100%;
+}
 .portrait--img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
+}
 @media (min-width: 48em) {
   .portrait {
     width: 100%;
     margin-bottom: 0;
     box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5);
+  }
+}
 .menu-dropdown {
   position: absolute;
   left: 0;
   padding-top: 20px;
   padding-top: 1.25rem;
   display: none;
   z-index: 50;
+}
 .menu-dropdown:before {
   position: absolute;
   content: '';
   background: linear-gradient(45deg, #89d0de 50%, transparent 50%);
   width: 20px;
   width: 1.25rem;
   height: 20px;
   height: 1.25rem;
   top: 0;
   left: 0;
+}
 .menu-dropdown__last {
   right: 0;
   left: auto;
+}
 .menu-dropdown__last:before {
   background: linear-gradient(-45deg, #89d0de 50%, transparent 50%);
   left: auto;
   right: 0;
+}
 .menu-dropdown .link-list {
   font-size: 0.8em;
   background-color: #89d0de;
   padding-top: 20px;
   padding-top: 1.25rem;
+}
 .menu-dropdown .link-list--item {
   margin: 0;
   display: block;
+}
 .menu-dropdown .link-list--item:hover {
   background-color: #0c486c;
   color: white;
+}
 .menu-dropdown .link-list--link {
   font-weight: normal;
   border: 0;
   padding: 6.666px 40px 6.666px 20px;
   padding: 0.41667rem 2.5rem 0.41667rem 1.25rem;
   width: 100%;
   height: 100%;
   display: block;
   white-space: nowrap;
+}
 .menu-dropdown .link-list--link:hover {
   color: white;
+}
 .mobile-menu {
   position: absolute;
   width: 100%;
   height: auto;
   background-color: white;
   left: 0;
   top: 0;
   bottom: 0;
   opacity: 0;
   will-change: opacity;
   transition: all 300ms ease-in-out;
   pointer-events: none;
   z-index: 100;
   display: block;
   margin-bottom: -150%;
+}
 .mobile-menu--list {
   margin: auto;
   text-align: center;
   margin-top: 20%;
   list-style: none;
+}
 .mobile-menu--item > a {
   font-size: 2em;
   border: 0;
+}
 .mobile-menu--item__primary > a {
   font-size: 2.5em;
   font-family: "Titillium Web", sans-serif;
   font-weight: 900;
   text-transform: uppercase;
+}
 .mobile-menu.is-active {
   opacity: 1;
   pointer-events: all;
+}
 @media (min-width: 48em) {
   .mobile-menu {
     display: none !important;
+  }
+}
 .l-header {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 50px;
   margin-top: 3.125rem;
+}
 .l-header--logo {
   display: inline-block;
   width: 65%;
+}
 .l-header--logo > svg {
   display: block;
   width: 100%;
   height: 100%;
+}
 .l-header--logo > a {
   border: 0;
+}
 .l-header--menu-opener {
   float: right;
   width: 22px;
   height: 22px;
   position: relative;
   -ms-flex-item-align: start;
   align-self: flex-start;
   border: 0;
   z-index: 101;
+}
 .l-header--menu-opener:after, .l-header--menu-opener:before {
   transition: all 300ms ease-in-out;
   content: '';
   width: 100%;
   height: 4.4px;
   display: block;
   position: absolute;
   left: 0;
   transform-origin: center;
   background-color: #0c486c;
+}
 .l-header--menu-opener:before {
   top: 0;
   box-shadow: 0 8.8px #0c486c;
+}
 .l-header--menu-opener:after {
   bottom: 0;
+}
 .l-header--menu-opener.is-active:before {
   transform: translateY(8.8px) rotate(45deg);
   box-shadow: 0 8.8px rgba(12, 72, 108, 0);
+}
 .l-header--menu-opener.is-active:after {
   transform: translateY(-8.8px) rotate(-45deg);
+}
 .l-header--links {
   height: 100%;
   -ms-flex-item-align: start;
   align-self: flex-start;
   display: none;
   list-style: none;
   white-space: nowrap;
+}
 .l-header--nav {
   display: inline-block;
   margin-right: 10px;
   margin-right: 0.625rem;
   vertical-align: top;
   position: relative;
+}
 .l-header--nav:hover > .menu-dropdown {
   display: block;
+}
 .l-header--nav > a {
   vertical-align: top;
   border: 0;
   font-size: 0.8em;
+}
 @media (min-width: 25em) {
   .l-header--logo {
     width: 200px;
     margin-right: 2.5rem;
+  }
+}
 @media (min-width: 48em) {
   .l-header {
     /*margin-top: 6.25rem;  /* issue #44. We don't like this. */
+  }
   .l-header--menu-opener {
     display: none !important;
+  }
   .l-header--links {
     display: inline-block;
+  }
   .l-header--logo {
     width: 255px;
+  }
+}
 @media (min-width: 64em) {
   .l-header--logo {
     width: 300px;
+  }
   .l-header--nav {
     margin-right: 1.25rem;
+  }
+}
 .l-speaker-page {
   margin-top: 60px;
   margin-top: 3.75rem;
+}
 .l-speaker-page--portrait {
   width: 100%;
+}
 @media (min-width: 48em) {
   .l-speaker-page {
     -ms-flex-wrap: nowrap;

0 comments (0 inline, 0 general)