michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(style): prevent page overflow

Browse source 
Pages with wide horizontal content could horizontally scroll on mobile due to `.page-wrapper` not having fixed width in f851142fb2

Re-add overflow-wrap which was removed in e6dba41f3d (in attempt to simplify logic).

Add horizontal scroll to unresponsive Plotly charts.

Also, refactor chart style and refactor callout styles into dedicated file.

This commit attempts to fix https://discord.com/channels/722225264733716590/742863504515793149/774343154949816350
This commit is contained in:
George Cushen 2020-11-06 21:50:12 +00:00
commit eb76e56841
6 changed files with 81 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

66
wowchemy/assets/scss/wowchemy/_callouts.scss Normal file
View file

@ -0,0 +1,66 @@
// Callout styles for the Callout shortcode
/* Style asides as Bootstrap alerts. */
.article-style aside {
@extend .alert;
}
/* Asides use <p> block element whereas alerts use <div>. */
.article-style aside p,
div.alert > div {
position: relative;
display: block;
font-size: 1rem;
margin-left: 2rem;
margin-top: 0;
margin-bottom: 0;
}
div.alert div > * {
margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */
}
div.alert div > :last-child {
margin-bottom: 0;
}
.article-style aside p::before,
div.alert > div:first-child::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-size: 1.5rem;
color: #209cee;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f05a';
width: 1.5rem;
text-align: center;
}
div.alert-warning > div:first-child::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #ff3860;
content: '\f071';
}
.article-style aside a,
div.alert a {
color: currentColor;
text-decoration: none;
border-bottom: solid 1px currentColor;
}
.article-style aside,
.alert-note {
color: #12537e;
background-color: #f6fbfe;
border-color: #209cee;
}
.alert-warning {
color: #cd0930;
background-color: #fff5f7;
border-color: #ff3860;
}

2
wowchemy/assets/scss/wowchemy/_content.scss
View file

@ -137,7 +137,7 @@ article .article-metadata {
@mixin word-wrap() {
// Break very long words such as pasted URL strings.
//overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
//-ms-word-break: break-all;
//word-break: break-all;

12
wowchemy/assets/scss/wowchemy/_integrations.scss
View file

@ -1,6 +1,16 @@
/* Mermaid.js div */
// Mermaid.js diagram div
div.mermaid {
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
// Plotly chart
div.chart {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
// Add horizontal scroll on mobile since Plotly
overflow-x: auto;
}

70
wowchemy/assets/scss/wowchemy/_root.scss
View file

@ -41,6 +41,7 @@ body.no-navbar {
min-height: calc(100vh - 70px);
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100vw;
}
@include media-breakpoint-down(md) {
.page-wrapper {
@ -570,72 +571,3 @@ table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
background-color: #e5e5e5;
}
/*************************************************
* Article Alerts (Shortcode) and Asides (Mmark)
**************************************************/
/* Style asides as Bootstrap alerts. */
.article-style aside {
@extend .alert;
}
/* Asides use <p> block element whereas alerts use <div>. */
.article-style aside p,
div.alert > div {
position: relative;
display: block;
font-size: 1rem;
margin-left: 2rem;
margin-top: 0;
margin-bottom: 0;
}
div.alert div > * {
margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */
}
div.alert div > :last-child {
margin-bottom: 0;
}
.article-style aside p::before,
div.alert > div:first-child::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-size: 1.5rem;
color: #209cee;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f05a';
width: 1.5rem;
text-align: center;
}
div.alert-warning > div:first-child::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #ff3860;
content: '\f071';
}
.article-style aside a,
div.alert a {
color: currentColor;
text-decoration: none;
border-bottom: solid 1px currentColor;
}
.article-style aside,
.alert-note {
color: #12537e;
background-color: #f6fbfe;
border-color: #209cee;
}
.alert-warning {
color: #cd0930;
background-color: #fff5f7;
border-color: #ff3860;
}

1
wowchemy/assets/scss/wowchemy/wowchemy.scss
View file

@ -6,6 +6,7 @@
**************************************************/
@import "root";
@import "callouts";
@import "icons";
@import "footer";
@import "nav";

2
wowchemy/layouts/shortcodes/chart.html
View file

@ -1,6 +1,6 @@
{{ $json := printf "./%s.json" (.Get "data") }}
{{ $id := delimit (shuffle (seq 1 9)) "" }}
<div id="chart-{{$id}}" class="chart pb-3" style="max-width: 100%; margin: auto;"></div>
<div id="chart-{{$id}}" class="chart"></div>
<script>
(function() {
let a = setInterval( function() {