tweak style of detail aside for better visual balance

tweak style of pull quote for better visual balance new link or duo minor copy tweaks
leebert · Dec 9, 2020 · f838788 · f838788
1 parent bf3d7f2
commit f838788
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 35 deletions.
diff --git a/assets/leebrenner-resume.pdf b/assets/leebrenner-resume.pdf
diff --git a/css/b-details.css b/css/b-details.css
@@ -50,8 +50,8 @@ header {
     display: flex;
     flex-direction: column;
     font-size: var(--text-size-header);
-    margin-bottom: var(--padding-xlarge);
     grid-area: header;
+    margin-bottom: var(--padding-xlarge);
 }
 
 .header__learn-more {
@@ -142,14 +142,13 @@ nav a, nav a:active, nav a:hover, nav a:visited {
 
 /* Right Content - Big Picture */
 aside {
-    background-color: #f7f7f7;
-    border-radius: var(--padding-medium);
+    border-left: solid 1px #f0f0f0;
     display: flex;
     flex-direction: column;
     font-family: var(--text-font-name-secondary), sans-serif;
     grid-area: aside;
     height: auto;
-    padding: var(--padding-medium) var(--padding-medium) 0 var(--padding-medium);
+    padding: var(--padding-medium) var(--padding-medium) 0 var(--padding-xlarge);
     position: fixed;
     right: calc(var(--padding) * 12);
     top: calc(var(--padding-xlarge) + var(--padding-large));
@@ -201,7 +200,7 @@ aside li {
 .clipper {
     margin-right: var(--padding);
     overflow: hidden;
-    width: calc(var(--padding) * 13);
+    width: calc(var(--padding) * 11);
 }
 
 .detailsIn {

diff --git a/css/h-details.css b/css/h-details.css
@@ -13,8 +13,9 @@
     float: right;
     font-size: var(--text-size-subheader);
     font-weight: var(--font-weight-bold);
-    line-height: 110%;
-    margin-left: calc(var(--padding) * 6);
+    line-height: 120%;
+    margin-bottom: var(--padding-medium);
+    margin-left: calc(var(--padding) * 5);
     padding-bottom: calc(var(--padding) * 2);
 	padding-left: var(--padding-medium);
 	position: relative;
@@ -27,10 +28,11 @@
     float: left;
     font-size: var(--text-size-subheader);
     font-weight: var(--font-weight-bold);
-    line-height: 110%;
-    margin-right: calc(var(--padding) * 6);
+    line-height: 120%;
+    margin-bottom: var(--padding-medium);
+    margin-right: calc(var(--padding) * 5);
     padding-bottom: calc(var(--padding) * 2);
-    padding-right: var(--padding);
+    padding-right: var(--padding-medium);
 	position: relative;
     width: 50%;
 }
diff --git a/css/m-details.css b/css/m-details.css
@@ -21,12 +21,16 @@
     }
 
     aside {
+        background-color: #f2f2f2;
+        border-radius: var(--padding-medium);
+        border-left: none;
         column-gap: var(--padding-xlarge);
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto;
         margin-bottom: var(--padding-large) !important;
         margin-top: var(--padding-medium);
+        padding: var(--padding-large);
         position: relative !important;
         right: 0;
         row-gap: var(--padding-medium);
@@ -68,6 +72,29 @@
     body {
         grid-template-columns: calc(var(--padding) * 7) auto calc(var(--padding) * 7);
     }
+
+    .h-has-pull-quote__right:before {
+        display: block;
+        float: none;
+        margin-left: 0;
+        margin-right: 0;
+        padding-bottom: calc(var(--padding) * 4);
+        position: relative;
+        width: auto;
+    }
+
+    .h-has-pull-quote__left:before {
+        border-left: solid 2px var(--color-gray);
+        border-right: none;
+        display: block;
+        float: none;
+        margin-left: 0;
+        margin-right: 0;
+        padding-bottom: calc(var(--padding) * 4);
+        padding-left: var(--padding-medium);
+        position: relative;
+        width: auto;
+    }
 }
 
 @media only screen and (max-width: 450px) {
@@ -98,28 +125,6 @@
     .header__learn-more a {
         margin-bottom: var(--padding);
     }
-
-    .h-has-pull-quote__right:before {
-        border-left: none;
-        display: block;
-        float: none;
-        margin-left: 0;
-        padding-bottom: calc(var(--padding) * 4);
-        padding-left: 0;
-        position: relative;
-        width: auto;
-    }
-
-    .h-has-pull-quote__left:before {
-        border-right: none;
-        display: block;
-        float: none;
-        margin-right: 0;
-        padding-bottom: calc(var(--padding) * 4);
-        padding-right: 0;
-        position: relative;
-        width: auto;
-    }
 
     .article__double-image {
         align-items: flex-start;

diff --git a/duo-ueba.html b/duo-ueba.html
@@ -57,7 +57,7 @@
             <h1>Trust Monitor</h1>
             <div class="header__learn-more">
                 <a href="https://duo.com/docs/trust-monitor" target="_blank">Product Website</a>
-                <a href="https://duo.com/blog/clear-and-simple-monitoring-access-with-duo-trust-monitor" target="_blank">About Trust Monitor</a>
+                <a href="https://duo.com/blog/duo-trust-monitor-is-here-to-make-risk-detection-easy" target="_blank">About Trust Monitor</a>
                 <a href="https://duo.com/blog/threat-detection-what-is-user-and-entity-behavior-analytics-ueba" target="_blank">About UEBA</a>
             </div>    
         </header>

diff --git a/js/js-core.js b/js/js-core.js
@@ -2,14 +2,14 @@
 var js_c_data = [
     {title: "An iOS Scouting App for Directors & Cinematographers", type: "page", url: "cinescope.html", design: true, code: true, words: false, year: 2020},
     {title: "A SaaS Platform for Data Scientists", type: "page", url: "alegion-saas.html", design: true, code: false, words: true, year: 2020},
-    {title: "A web-based Video Annotation Tool for Data Labelers", type: "page", url: "alegion-va.html", design: true, code: false, words: false, year: 2020},
+    {title: "A Video Annotation Tool for Data Labelers", type: "page", url: "alegion-va.html", design: true, code: false, words: false, year: 2020},
     // {title: "A Video Timeline Prototype", type: "page", url: "alegion-proto.html", design: false, code: true, words: false, year: 2020},
     // {title: "Lots Marketing Content", type: "page", url: "alegion-marketing.html", design: true, code: true, words: true, year: 2020},
     // {title: "A Case Study for Data Labeling", type: "page", url: "alegion-case-study.html", design: false, code: false, words: true, year: 2020},
     // {title: "A Content Review Portal for Data Scientists", type: "page", url: "alegion-qc-portal.html", design: true, code: false, words: false, year: 2019},
     {title: "A Design Token Plugin for Figma", type: "external", url: "https://www.figma.com/community/plugin/767048666042724266/Design-Tokenizer", design: true, code: true, words: true, year: 2019},
     {title: "An iOS Art Experiment Using AR", type: "external", url: "https://medium.com/@leebert/augmented-art-cards-475689e877bd", design: true, code: true, words: false, year: 2019},
-    {title: "A web-based Machine Learning Product for Cybersecurity Analysts", type: "page", url: "duo-ueba.html", design: true, code: false, words: false, year: 2019},
+    {title: "A Machine Learning Product for Cybersecurity Analysts", type: "page", url: "duo-ueba.html", design: true, code: false, words: false, year: 2019},
     {title: "An Introduction to Computer Science Course for UT Austin", type: "page", url: "ut-cs.html", design: false, code: true, words: true, year: 2018},
     // {title: "A Building Maintenance App Using AR", type: "page", url: "honeywell-building.html", design: true, code: true, words: false, year: 2018},
     // {title: "A Thermostat Upgrade Assistant App Using AR", type: "page", url: "honeywell-upgrade.html", design: true, code: false, words: true, year: 2018},