Share popup modal separation

assets/sass/patterns/atoms/modal-window.scss

@@ -33,6 +33,16 @@
     padding-top: 0;
   }
 
+  .social-media-sharers {
+    @media only all and (max-width: #{get-rem-from-px($bkpt-site--small - 1)}em) {
+      @include padding(24, "top");
+      display: flex;
+      grid-column: 1/3;
+      grid-row: 4;
+      justify-content: center;
+    }
+  }
+
   .reference {
     font-family: $font-secondary;
     grid-column: 1/3;
@@ -43,15 +53,46 @@
       display: flex;
     }
   }
+
+  .button-collection {
+    display: unset;
+    flex-direction: column;
+    grid-column: 1/3;
+
+    .button-collection__item {
+      float: none;
+    }
+
+    .button {
+      @include margin(12, "bottom");
+      width: 100%;
+    }
+
+    @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) {
+      grid-column: 1/3;
+
+      .button-collection__item {
+        float: left;
+      }
+
+      .button {
+        @include margin(12, "bottom");
+        @include padding(15 24 14 24);
+        line-height: 1.5;
+        text-decoration: none;
+        width: auto;
+      }
+    }
+  }
 }
 
 .modal-content__body {
   display: grid;
   grid-column: 1/3;
 
   .button {
+    @include margin(24, "bottom");
     justify-self: center;
-    margin-bottom: 24px;
   }
 }
 
@@ -74,3 +115,7 @@
 .modal-nojs {
   visibility: hidden;
 }
+
+.modal-content__clipboard-btn {
+  min-width: 189px;
+}

assets/sass/patterns/atoms/social-media-sharers.scss

@@ -11,8 +11,20 @@
 //  Fill: solid
 
 .social-media-sharers {
-  flex-grow: 0;
-  flex-basis: 24px;
+  @include margin(0);
+  @include padding(0);
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+
+  li {
+    list-style: none;
+    margin-right: 6px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .social-media-sharer,
@@ -65,3 +77,28 @@
   fill: #fff;
   stroke: none;
 }
+
+.email {
+  background: url("../img/icons/email-default.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.facebook {
+  background: url("../img/icons/facebook.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.twitter {
+  background: url("../img/icons/twitter.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.linkedin {
+  background: url("../img/icons/linkedin.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.reddit {
+  background: url("../img/icons/reddit.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}

assets/sass/patterns/molecules/article-section.scss

@@ -9,7 +9,8 @@ $arrow-size: 5;
   }
 
   p > a {
-    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
   }
 }
 
@@ -257,3 +258,50 @@ $arrow-size: 5;
     }
   }
 }
+
+.divider {
+  border-bottom: 1px solid $color-text-dividers;
+  grid-column: 2/12;
+  height: 1px;
+  width: 100%;
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) {
+    grid-column: 1/13;
+  }
+}
+
+.main-content-grid {
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) {
+    grid-column: 2/12;
+    grid-row: 2;
+  }
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--wide)}em) {
+    grid-column: 2/9;
+  }
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) {
+    grid-column: 3/10;
+    grid-row: 1;
+    margin-left: 70px;
+    width: 100%;
+  }
+}
+
+.secondary-column-grid {
+  display: grid;
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--wide)}em) {
+    grid-column: 8/12;
+    grid-row: 2;
+    justify-self: end;
+    margin-left: 70px;
+    max-width: 200px;
+  }
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) {
+    grid-column: 10/13;
+    grid-row: 1;
+  }
+}

assets/sass/patterns/molecules/view-selector.scss

@@ -82,9 +82,8 @@
   .view-selector--has-figures {
     display: inline-block;
     width: 100%;
-    @supports (display: flex) {
-      display: flex;
-    }
+    grid-column: 1/13;
+    grid-row: 1;
   }
 
   .view-selector__list {
@@ -151,8 +150,8 @@
   // Applied with js to stop the selector scrolling off the top of the screen.
   .view-selector {
     // Supply what was being provided by the grid now this element has been taken out the flow.
-    @include constrain-width(210, "max");
-    width: 9.625rem;
+    grid-column: 1/3;
+    grid-row: 1;
   }
 
   .view-selector--fixed {

assets/sass/patterns/organisms/content-header.scss

@@ -17,7 +17,6 @@
       border-bottom: 1px solid $color-text-dividers;
       content: "";
       display: block;
-      @include padding($content-header-padding - 1, "top");
       width: 100%;
     }
 

source/_patterns/00-atoms/components/modal-window~citations.json

@@ -1,5 +1,5 @@
 {
   "closeBtnText": "Close",
-  "body": "<div class='reference'><ol class='reference__authors_list'><li class='reference__author'><a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'> Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>Juwayeyi YM</li></ol> <span class='reference__authors_list_suffix'>(1993)</span> Oldest <i>Homo</i> and Pliocene biogeography of the Malawi rift<div class='reference__origin'> <i>Nature</i> <strong>365</strong>:833–836.</div><span class='doi'>https://doi.org/10.1038/365833a0</span></div></div>",
+  "body": "<div class='reference'><ol class='reference__authors_list'><li class='reference__author'><a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'> Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>  Juwayeyi YM</li><li class='reference__author'>  <a href='https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22' class='reference__authors_link'>Schrenk F</a></li><li class='reference__author'>  Bromage TG</li><li class='reference__author'>  Betzler CG</li><li class='reference__author'>  Ring U</li><li class='reference__author'>Juwayeyi YM</li></ol> <span class='reference__authors_list_suffix'>(1993)</span> Oldest <i>Homo</i> and Pliocene biogeography of the Malawi rift<div class='reference__origin'> <i>Nature</i> <strong>365</strong>:833–836.</div><span class='doi'>https://doi.org/10.1038/365833a0</span></div><ol class='button-collection'><li class='button-collection__item'>  <button class='button button--default' type='button' data-behaviour='ButtonClipboard' data-clipboard='Schrenk F Bromage TG Betzler CG Ring U Juwayeyi YM Schrenk F Bromage TG Betzler CG Ring U Juwayeyi YM Schrenk F Bromage TG Betzler CG Ring U Juwayeyi YM Schrenk F Bromage TG Betzler CG Ring U Juwayeyi YM Schrenk F Bromage TG Betzler CG Ring UJuwayeyi YM(1993) Oldest Homo and Pliocene biogeography of the Malawi rift Nature 365:833–836.https://doi.org/10.1038/365833a0'>Copy to clipboard</button></li><li class='button-collection__item'>  <button class='button button--default button--secondary' type='button'>Download Bibtex</button></li><li class='button-collection__item'>  <button class='button button--default button--secondary' type='button'>Download .RIS</button></li></ol>",
   "title": "Cite this article"
 }

source/_patterns/00-atoms/components/modal-window~share.json

@@ -2,5 +2,5 @@
   "smallDeviceOnly": true,
   "title": "Share this article",
   "closeBtnText": " ",
-  "body": "<div class='form-item'><input type='url' class='text-field text-field--url' value='https://doi.org/10.7554/eLife.09560'></div>"
+  "body": "<div class='form-item'><input type='url' class='text-field text-field--url' value='https://doi.org/10.7554/eLife.09560'></div><button class='button button--default' type='submit' id='button-id' data-behaviour='ButtonClipboard' data-clipboard='https://doi.org/10.7554/eLife.09560'>Copy to clipboard</button><ul class='social-media-sharers'><li><a class='social-media-sharer email' href=' target='_blank' rel='noopener noreferrer' aria-label='Share by Email'><span class='visuallyhidden'>Email</span></a></li><li><a class='social-media-sharer facebook' href='https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url' target='_blank' rel='noopener noreferrer' aria-label='Share on Facebook'><span class='visuallyhidden'>Facebook</span></a></li><li><a class='social-media-sharer twitter' href='https://twitter.com/intent/tweet/?text=Some%20article%20title&amp;amp;url=https%3A%2F%2Fexample.com%2Fsome-article-url' target='_blank' rel='noopener noreferrer' aria-label='Tweet a link to this page'><span class='visuallyhidden'>Twitter</span></a></li><li><a class='social-media-sharer linkedin' href='https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url' target='_self' aria-label='Share this page to LinkedIn (opens up email program, if configured on this system)'><span class='visuallyhidden'>LinkedIn</span></a></li><li><a class='social-media-sharer reddit' href='https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url' target='_blank' rel='noopener noreferrer' aria-label='Share this page on Reddit'><span class='visuallyhidden'>Reddit</span></a></li></ul>"
 }

source/_patterns/00-atoms/components/social-media-sharers.json

@@ -1,6 +1,7 @@
 {
+  "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url",
   "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url",
   "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url",
-  "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url",
+  "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url",
   "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url"
 }

source/_patterns/00-atoms/components/social-media-sharers.mustache

@@ -1,38 +1,7 @@
-<div class="social-media-sharers">
-
-  {{! Skeleton autogenerated by http://sharingbuttons.io/
-      See notes in social-media-sharer.scss for more details. }}
-
-  {{! Sharingbutton Facebook }}
-  <a class="social-media-sharer" href="{{facebookUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook">
-    <div class="social-media-sharer__icon_wrapper social-media-sharer__icon_wrapper--facebook social-media-sharer__icon_wrapper--small"><div aria-hidden="true" class="social-media-sharer__icon social-media-sharer__icon--solid">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
-    </div>
-    </div>
-  </a>
-
-  {{! Sharingbutton Twitter }}
-  <a class="social-media-sharer" href="{{twitterUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Tweet a link to this page">
-    <div class="social-media-sharer__icon_wrapper social-media-sharer__icon_wrapper--twitter social-media-sharer__icon_wrapper--small"><div aria-hidden="true" class="social-media-sharer__icon social-media-sharer__icon--solid">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
-    </div>
-    </div>
-  </a>
-
-  {{! Sharingbutton E-Mail }}
-  <a class="social-media-sharer" href="{{emailUrl}}" target="_self" aria-label="Email a link to this page (opens up email program, if configured on this system)">
-    <div class="social-media-sharer__icon_wrapper social-media-sharer__icon_wrapper--email social-media-sharer__icon_wrapper--small"><div aria-hidden="true" class="social-media-sharer__icon social-media-sharer__icon--solid">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
-    </div>
-    </div>
-  </a>
-
-  {{! Sharingbutton Reddit }}
-  <a class="social-media-sharer" href="{{redditUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Share this page on Reddit">
-    <div class="social-media-sharer__icon_wrapper social-media-sharer__icon_wrapper--reddit social-media-sharer__icon_wrapper--small"><div aria-hidden="true" class="social-media-sharer__icon social-media-sharer__icon--solid">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z"/></svg>
-    </div>
-    </div>
-  </a>
-
-</div>
+<ul class="social-media-sharers">
+  <li><a class="social-media-sharer email" href="{{emailURL}}" target="_blank" rel="noopener noreferrer" aria-label="Share by Email"><span class="visuallyhidden">Email</span></a></li>
+  <li><a class="social-media-sharer facebook" href="{{facebookUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook"><span class="visuallyhidden">Facebook</span></a></li>
+  <li><a class="social-media-sharer twitter" href="{{twitterUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Tweet a link to this page"><span class="visuallyhidden">Twitter</span></a></li>
+  <li><a class="social-media-sharer linkedin" href="{{linkedInUrl}}" target="_self" aria-label="Share this page to LinkedIn (opens up email program, if configured on this system)"><span class="visuallyhidden">LinkedIn</span></a></li>
+  <li><a class="social-media-sharer reddit" href="{{redditUrl}}" target="_blank" rel="noopener noreferrer" aria-label="Share this page on Reddit"><span class="visuallyhidden">Reddit</span></a></li>
+</ul>

source/_patterns/00-atoms/components/social-media-sharers.yaml

@@ -1,20 +1,24 @@
 $schema: http://json-schema.org/draft-04/schema#
 type: object
 properties:
+  emailUrl:
+    type: string
+    format: uri
   facebookUrl:
     type: string
     format: uri
   twitterUrl:
     type: string
     format: uri
-  emailUrl:
+  linkedInUrl:
     type: string
     format: uri
   redditUrl:
     type: string
     format: uri
 required:
+  - emailUrl
   - facebookUrl
   - twitterUrl
-  - emailUrl
+  - linkedInUrl
   - redditUrl

source/_patterns/02-organisms/content-headers/content-header~article-1-author.json

@@ -1,9 +1,10 @@
 {
   "title": "<i>Homo naledi</i>, a new species of the genus <i>Homo</i> from the Dinaledi Chamber, South Africa",
   "socialMediaSharers": {
+    "emailUrl": "mailto:?subject=Some%20article%20title&amp;body=https%3A%2F%2Fexample.com%2Fsome-article-url",
     "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url",
     "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&amp;url=https%3A%2F%2Fexample.com%2Fsome-article-url",
-    "emailUrl": "mailto:?subject=Some%20article%20title&amp;body=https%3A%2F%2Fexample.com%2Fsome-article-url",
+    "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url",
     "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url"
   },
   "longTitle": true,