From 6ff204e8e85c5b5e28b39a7f57beddae6e074ffa Mon Sep 17 00:00:00 2001
From: Nathan Dennler <dennler@usc.edu>
Date: Wed, 28 Feb 2024 18:18:59 -0800
Subject: [PATCH] overhauls about page

---
 _includes/author-profile.html        |   2 +-
 _sass/minimal-mistakes/_archive.scss |   4 +-
 about.md                             | 131 +++++++++++++++++++++++----
 3 files changed, 118 insertions(+), 19 deletions(-)

diff --git a/_includes/author-profile.html b/_includes/author-profile.html
index 3e2cf86..f181020 100644
--- a/_includes/author-profile.html
+++ b/_includes/author-profile.html
@@ -23,7 +23,7 @@ <h3 class="author__name p-name" itemprop="name">
   </div>
 
   <div class="author__urls-wrapper">
-    <button class="btn btn--inverse">{{ site.data.ui-text[site.locale].follow_label | remove: ":" | default: "Follow" }}</button>
+    <button class="btn btn--inverse">Dataset</button>
     <ul class="author__urls social-icons">
       {% if author.location %}
         <li itemprop="homeLocation" itemscope itemtype="https://schema.org/Place">
diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
index 9f57632..cb8437a 100644
--- a/_sass/minimal-mistakes/_archive.scss
+++ b/_sass/minimal-mistakes/_archive.scss
@@ -9,12 +9,12 @@
   @include breakpoint($large) {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
-    padding-right: $right-sidebar-width-narrow;
+    // padding-right: $right-sidebar-width-narrow;
   }
 
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
-    padding-right: $right-sidebar-width;
+    // padding-right: $right-sidebar-width;
   }
 }
 
diff --git a/about.md b/about.md
index 62c4313..d4703f6 100644
--- a/about.md
+++ b/about.md
@@ -3,19 +3,118 @@ layout: home
 author_profile: true
 ---
 
-This dataset contains a collection of 165 robots. For each robot we collected:
-
-* A composite image of the robot from a front and side view
-* A set of 52 design features: 43 binary features, 4 ordinal features, and 5 continuous features
-* Three user-reported design metaphors to describe each robot
-* The levels of abstraction for each metaphor
-* User-Reported Social Expectation Metrics:
-    * Warmth, Competence, Discomfort (RoSAS Scale)
-    * Masculinity and Femininity
-    * Social Role
-    * Identity Closeness
-    * Likeability
-* User-Reported Functional Expectations:
-    * Shared Perception and Interpretation, Tactile Interaction and Mobility, Non-verbal Expressiveness (EmCorp Scale)
-    * Design Ambiguity
-    * Design Atypicality
+<style>
+.image-row {
+  display: flex;
+  justify-content: space-around; /* Center images horizontally */
+  align-items: center; /* Center images vertically */
+}
+
+.image-container {
+  text-align: center; /* Center image and caption */
+  margin: 1.5vw; /* Adjust spacing between images */
+  width: 25vw;
+}
+
+.caption {
+  margin-top: 5px; /* Adjust spacing between image and caption */
+}
+</style>
+
+This dataset contains a collection of 165 robots. For each robot we collected descriptions of the robot, design metaphors, social expectations, and functional expectations. Download the dataset using the download button on the left side of this page. 
+
+
+<div style="text-align:center;">
+<h2>Robot Descriptors</h2>
+</div>
+
+<div class="image-row">
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/robot_slide.PNG" alt="Image of a soft knitted rabbit-shaped robot.">
+    <div class="caption">A composite image of the robot from a front and side view</div>
+  </div>
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/feature_graphic.png" alt="Image describing the features that a robot has">
+    <div class="caption">A set of 52 design features:<br>43 binary features, 4 ordinal features, and 5 continuous features</div>
+  </div>
+</div>
+
+The robot descriptors were collected by a group of researchers. The researchers hand-labeled each design feature, which corresponds to physical elements present on the robot.
+
+<div style="text-align:center;">
+<h2>Design Metaphors</h2>
+</div>
+
+<div class="image-row">
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/metaphors.png" alt="Text saying: like a dog, like a rabbit, like a tricycle.">
+    <div class="caption">Three user-reported design metaphors to describe each robot</div>
+  </div>
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/abstraction.png" alt="A set of progress bars showing how abstract each of these metahpors are.">
+    <div class="caption">The levels of abstraction for each metaphor</div>
+  </div>
+  <!-- Add more image-container elements as needed -->
+</div>
+
+Design metaphors are people, animals, things, or concepts that participants are reminded of when viewing the design of the robot. The level of abstraction corresponds to how literal or abstractly this idea implemented in the robot's design.
+
+<div style="text-align:center;">
+<h2>Social Expectations</h2>
+</div>
+
+<div class="image-row">
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/7.png" alt="A set of logos: a smiley face, a brain, and a uncertain face, reading warmth, competence, discomfort from left to right.">
+    <div class="caption">The RoSAS Scale</div>
+  </div>
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/8.png" alt="an image of two axes, saying femininity and masculinity.">
+    <div class="caption">Masculinity and Femininity</div>
+  </div>
+  <!-- Add more image-container elements as needed -->
+</div>
+
+<div class="image-row">
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/9.png" alt="A ticker moving between low social role and high social role">
+    <div class="caption">Social Role</div>
+  </div>
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/10.png" alt="A logo of two people hugging eachother.">
+    <div class="caption">Identity Closeness</div>
+  </div>
+
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/11.png" alt="A thumbs up.">
+    <div class="caption">Likeability</div>
+  </div>
+  <!-- Add more image-container elements as needed -->
+</div>
+
+Social expectations describe the robot's identity and ability for social interaction, as determined by the robot's embodiment. These attributes encapsulate how a participant relates to and interacts with the robot.
+
+<div style="text-align:center;">
+<h2>Functional Expectations</h2>
+</div>
+
+<div class="image-row">
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/12.png" alt="three logos of an eye, a hand touching something, and a hand waving.">
+    <div class="caption">EmCorp Scale</div>
+  </div>
+  </div>
+<div class="image-row">
+
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/13.png" alt="a blob with a question mark in it.">
+    <div class="caption">Design Ambiguity</div>
+  </div>
+
+  <div class="image-container">
+    <img src="{{ site.baseurl }}/assets/images/14.png" alt="A dog with two feathers growing out of its head.">
+    <div class="caption">Design Atypicality</div>
+  </div>
+</div>
+
+Functional Expectations describe what the robot is physically expected to do. Participants also evaluated how well-aligned the robots design is with the tasks they expected it to perform.
\ No newline at end of file