From 4e863b6094f02b32131ad69e92b38a8077cbc6a8 Mon Sep 17 00:00:00 2001 From: Brian Canini <canini.16@osu.edu> Date: Wed, 19 Feb 2020 11:02:57 -0500 Subject: [PATCH] Adding subtitle to mobile slideshow --- .../assets/sass/components/_paragraphs.scss | 8 +- web/themes/asc_bootstrap/css/style.css | 81 ++++++++++--------- 2 files changed, 52 insertions(+), 37 deletions(-) diff --git a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss index f6950ca430..dbd471379f 100644 --- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss +++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss @@ -308,6 +308,7 @@ } .slide-txt-wrapper { + width: 100%; h2 { font-size: 36px; @@ -328,10 +329,15 @@ color: $gray-dark; @media (max-width: 768px) { - display: none; + font-size: 14px; + margin-top: 0; } } + .btn { + white-space: normal; + } + .btn-links-20 { width: 100%; margin: 0 auto; diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css index 4eb3b9d14c..51001a6726 100644 --- a/web/themes/asc_bootstrap/css/style.css +++ b/web/themes/asc_bootstrap/css/style.css @@ -11643,7 +11643,11 @@ article.news-story { justify-content: center; } } -/* line 312, ../assets/sass/components/_paragraphs.scss */ +/* line 310, ../assets/sass/components/_paragraphs.scss */ +.slide-txt-container .slide-txt .slide-txt-wrapper { + width: 100%; +} +/* line 313, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper h2 { font-size: 36px; text-transform: uppercase; @@ -11652,31 +11656,36 @@ article.news-story { line-height: 1.1; } @media (max-width: 768px) { - /* line 312, ../assets/sass/components/_paragraphs.scss */ + /* line 313, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper h2 { font-size: 15px; margin-top: 0; } } -/* line 325, ../assets/sass/components/_paragraphs.scss */ +/* line 326, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper p { font-size: 18px; margin: 25px 0; color: #333333; } @media (max-width: 768px) { - /* line 325, ../assets/sass/components/_paragraphs.scss */ + /* line 326, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper p { - display: none; + font-size: 14px; + margin-top: 0; } } -/* line 335, ../assets/sass/components/_paragraphs.scss */ +/* line 337, ../assets/sass/components/_paragraphs.scss */ +.slide-txt-container .slide-txt .slide-txt-wrapper .btn { + white-space: normal; +} +/* line 341, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 { width: 100%; margin: 0 auto; font-size: 18px; } -/* line 340, ../assets/sass/components/_paragraphs.scss */ +/* line 346, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper { min-width: 25%; margin: 10px; @@ -11686,23 +11695,23 @@ article.news-story { text-transform: uppercase; padding: 5px; } -/* line 349, ../assets/sass/components/_paragraphs.scss */ +/* line 355, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper .btn-primary { background-color: transparent; border-color: transparent; border: 0; border-radius: 0; } -/* line 356, ../assets/sass/components/_paragraphs.scss */ +/* line 362, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper i { padding-top: 1px; } -/* line 360, ../assets/sass/components/_paragraphs.scss */ +/* line 366, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper:hover { background: #8E0101; } @media (max-width: 768px) { - /* line 340, ../assets/sass/components/_paragraphs.scss */ + /* line 346, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper { display: block; width: 100%; @@ -11710,22 +11719,22 @@ article.news-story { font-weight: 700; } } -/* line 372, ../assets/sass/components/_paragraphs.scss */ +/* line 378, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper { background: transparent; color: #4A4A4A; } -/* line 376, ../assets/sass/components/_paragraphs.scss */ +/* line 382, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover { background: transparent; } -/* line 382, ../assets/sass/components/_paragraphs.scss */ +/* line 388, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 { width: 100%; margin: 0 auto; font-size: 18px; } -/* line 387, ../assets/sass/components/_paragraphs.scss */ +/* line 393, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper { min-width: 40%; margin: 10px; @@ -11735,23 +11744,23 @@ article.news-story { text-transform: uppercase; padding: 5px; } -/* line 396, ../assets/sass/components/_paragraphs.scss */ +/* line 402, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper .btn-primary { background-color: transparent; border-color: transparent; border: 0; border-radius: 0; } -/* line 403, ../assets/sass/components/_paragraphs.scss */ +/* line 409, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper i { padding-top: 1px; } -/* line 407, ../assets/sass/components/_paragraphs.scss */ +/* line 413, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper:hover { background: #8E0101; } @media (max-width: 768px) { - /* line 387, ../assets/sass/components/_paragraphs.scss */ + /* line 393, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper { display: block; width: 100%; @@ -11759,22 +11768,22 @@ article.news-story { font-weight: 700; } } -/* line 419, ../assets/sass/components/_paragraphs.scss */ +/* line 425, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper { background: transparent; color: #4A4A4A; } -/* line 423, ../assets/sass/components/_paragraphs.scss */ +/* line 429, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover { background: transparent; } -/* line 429, ../assets/sass/components/_paragraphs.scss */ +/* line 435, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 { width: 100%; margin: 0 auto; font-size: 18px; } -/* line 434, ../assets/sass/components/_paragraphs.scss */ +/* line 440, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper { min-width: 50%; margin: 10px; @@ -11784,23 +11793,23 @@ article.news-story { text-transform: uppercase; padding: 5px; } -/* line 443, ../assets/sass/components/_paragraphs.scss */ +/* line 449, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper .btn-primary { background-color: transparent; border-color: transparent; border: 0; border-radius: 0; } -/* line 450, ../assets/sass/components/_paragraphs.scss */ +/* line 456, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper i { padding-top: 1px; } -/* line 454, ../assets/sass/components/_paragraphs.scss */ +/* line 460, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper:hover { background: #8E0101; } @media (max-width: 768px) { - /* line 434, ../assets/sass/components/_paragraphs.scss */ + /* line 440, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper { display: block; width: 100%; @@ -11808,46 +11817,46 @@ article.news-story { font-weight: 700; } } -/* line 466, ../assets/sass/components/_paragraphs.scss */ +/* line 472, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper { background: transparent; color: #4A4A4A; } -/* line 470, ../assets/sass/components/_paragraphs.scss */ +/* line 476, ../assets/sass/components/_paragraphs.scss */ .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover { background: transparent; } -/* line 487, ../assets/sass/components/_paragraphs.scss */ +/* line 493, ../assets/sass/components/_paragraphs.scss */ .paragraph--type--tagline { margin: 20px 0; float: left; } -/* line 498, ../assets/sass/components/_paragraphs.scss */ +/* line 504, ../assets/sass/components/_paragraphs.scss */ .paragraph--type--tabs .field { padding: 20px; } -/* line 502, ../assets/sass/components/_paragraphs.scss */ +/* line 508, ../assets/sass/components/_paragraphs.scss */ .paragraph--type--tabs .field--name-field-media-file { padding: 0; } -/* line 506, ../assets/sass/components/_paragraphs.scss */ +/* line 512, ../assets/sass/components/_paragraphs.scss */ .paragraph--type--tabs .field--name-field-media-image { padding: 20px 0; } -/* line 517, ../assets/sass/components/_paragraphs.scss */ +/* line 523, ../assets/sass/components/_paragraphs.scss */ .para_1_col .field--name-field-media-twitter { margin: 0 auto; width: 60%; } -/* line 521, ../assets/sass/components/_paragraphs.scss */ +/* line 527, ../assets/sass/components/_paragraphs.scss */ .para_1_col .field--name-field-media-twitter .col-xs-12 { padding: 0; } -/* line 531, ../assets/sass/components/_paragraphs.scss */ +/* line 537, ../assets/sass/components/_paragraphs.scss */ .paragraph--type--video iframe { width: 100% !important; } -- GitLab