From 63dc9e71d17f08574a02ccfd4c8bfb38b471068f Mon Sep 17 00:00:00 2001
From: bcanini <canini.16@osu.edu>
Date: Wed, 6 Feb 2019 15:09:50 -0500
Subject: [PATCH] asc_bootstrap - sass for making portrait opic images
responsive squares
---
.../assets/sass/components/_people.scss | 26 ++++++++++
web/themes/asc_bootstrap/css/style.css | 48 +++++++++++++++----
2 files changed, 64 insertions(+), 10 deletions(-)
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_people.scss b/web/themes/asc_bootstrap/assets/sass/components/_people.scss
index 8eeeec3950..c430585ca3 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_people.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_people.scss
@@ -135,6 +135,32 @@
}
}
+.square-opic {
+ max-width: 220px;
+ max-height: 220px;
+ overflow: hidden;
+ position: relative;
+
+ &:after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+ }
+
+ @media (max-width: 768px) {
+ max-width: 100%;
+ max-height: 630px;
+ }
+}
+
+.square-opic-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+
+
// --------------------------------------------------
//## Bio.
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 14a255b0fc..24cb0db827 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -11283,50 +11283,78 @@ article.news-story {
margin-bottom: 5px;
}
-/* line 142, ../assets/sass/components/_people.scss */
+/* line 138, ../assets/sass/components/_people.scss */
+.square-opic {
+ max-width: 220px;
+ max-height: 220px;
+ overflow: hidden;
+ position: relative;
+}
+/* line 144, ../assets/sass/components/_people.scss */
+.square-opic:after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+}
+@media (max-width: 768px) {
+ /* line 138, ../assets/sass/components/_people.scss */
+ .square-opic {
+ max-width: 100%;
+ max-height: 630px;
+ }
+}
+
+/* line 156, ../assets/sass/components/_people.scss */
+.square-opic-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+/* line 168, ../assets/sass/components/_people.scss */
.path-user .page-header {
display: none;
}
-/* line 146, ../assets/sass/components/_people.scss */
+/* line 172, ../assets/sass/components/_people.scss */
.bio-header-top {
background: #F9F9F9;
}
-/* line 151, ../assets/sass/components/_people.scss */
+/* line 177, ../assets/sass/components/_people.scss */
.bio-header-top .bio-top-right img {
padding: 15px 0;
width: 100%;
}
-/* line 159, ../assets/sass/components/_people.scss */
+/* line 185, ../assets/sass/components/_people.scss */
.bio-header-top .field--name-field-google-map-location .field--item {
padding: 20px 0;
}
-/* line 162, ../assets/sass/components/_people.scss */
+/* line 188, ../assets/sass/components/_people.scss */
.bio-header-top .field--name-field-google-map-location .field--item .geolocation-formatter-map-wrapper {
border: solid 2px #979797;
}
-/* line 169, ../assets/sass/components/_people.scss */
+/* line 195, ../assets/sass/components/_people.scss */
.bio-header {
width: 100%;
float: left;
margin: 0 0 20px;
}
-/* line 175, ../assets/sass/components/_people.scss */
+/* line 201, ../assets/sass/components/_people.scss */
.bio-btm-left {
margin-bottom: 40px;
}
-/* line 178, ../assets/sass/components/_people.scss */
+/* line 204, ../assets/sass/components/_people.scss */
.bio-btm-left h2 {
font-size: 22px;
}
-/* line 182, ../assets/sass/components/_people.scss */
+/* line 208, ../assets/sass/components/_people.scss */
.bio-btm-left .bio-exp {
padding-left: 0;
}
-/* line 188, ../assets/sass/components/_people.scss */
+/* line 214, ../assets/sass/components/_people.scss */
.bio-btm-right h3 {
font-size: 18px;
padding-top: 20px;
--
GitLab