Worked on padding for cards, moved charts to be side-by-side

fioritto · Jul 18, 2024 · f2ef6ab · f2ef6ab
1 parent afa1f05
commit f2ef6ab
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 47 deletions.
diff --git a/_data/homicides.json b/_data/homicides.json
@@ -550,7 +550,7 @@
       "BEAT": "222",
       "AGE": "40-49",
       "SEX": "male",
-      "RACE": "WHI",
+      "RACE": "white",
       "VICTIMIZATION_FBI_CD": "01A",
       "INCIDENT_FBI_CD": "01A",
       "VICTIMIZATION_FBI_DESCR": "HOMICIDE - 1ST OR 2ND DEGREE (INDEX)",
@@ -1042,7 +1042,7 @@
       "BEAT": "234",
       "AGE": "60-69",
       "SEX": "male",
-      "RACE": "WHI",
+      "RACE": "white",
       "VICTIMIZATION_FBI_CD": "01A",
       "INCIDENT_FBI_CD": "01A",
       "VICTIMIZATION_FBI_DESCR": "HOMICIDE - 1ST OR 2ND DEGREE (INDEX)",
@@ -1452,7 +1452,7 @@
       "BEAT": "234",
       "AGE": "60-69",
       "SEX": "female",
-      "RACE": "WHI",
+      "RACE": "white",
       "VICTIMIZATION_FBI_CD": "01A",
       "INCIDENT_FBI_CD": "01A",
       "VICTIMIZATION_FBI_DESCR": "HOMICIDE - 1ST OR 2ND DEGREE (INDEX)",
@@ -6659,7 +6659,7 @@
       "BEAT": "235",
       "AGE": "40-49",
       "SEX": "male",
-      "RACE": "WHI",
+      "RACE": "white",
       "VICTIMIZATION_FBI_CD": "01A",
       "INCIDENT_FBI_CD": "01A",
       "VICTIMIZATION_FBI_DESCR": "HOMICIDE - 1ST OR 2ND DEGREE (INDEX)",

diff --git a/index.html b/index.html
@@ -39,8 +39,8 @@ <h3>Lives lost in Kenwood and Hyde Park</h3>
 <div class="row" data-masonry='{"percentPosition": true }'>
   {% for obj in homicides %}
   <div class="col-sm-6 col-lg-4 mb-4">
-  <div class-"card">  
-      <div class="card body">
+  <div class="card">  
+      <div class="card-body">
         <strong>
           <h5 class="card-title">{{ obj.HOMICIDE_VICTIM_FIRST_NAME }} {{ obj.HOMICIDE_VICTIM_LAST_NAME }}</h5>
         </strong>

diff --git a/styles/app.scss b/styles/app.scss
@@ -10,56 +10,79 @@
 // YOUR CODE
 // Starting writing your stuff below here
 .container {
-    max-width: 630px;
-    margin: 30px auto;
-    line-height: 1.4;
-    @media (max-width: 767px) {
-        padding: 0 15px;
-    }
+  max-width: 630px;
+  margin: 30px auto;
+  line-height: 1.4;
+  @media (max-width: 767px) {
+    padding: 0 15px;
+  }
 }
 
 h1 {
-    font-family: fonts.$font-family-headline;
-    font-weight: fonts.$font-weight-headline;
-    font-size: 26px;
+  font-family: fonts.$font-family-headline;
+  font-weight: fonts.$font-weight-headline;
+  font-size: 26px;
 }
 
 p {
-    font-family: fonts.$font-family-body;
-    font-weight: fonts.$font-weight-body;
-    &.byline {
-        text-transform: uppercase;
-        font-size: 14px;
-    }
-    &.prose {
-        margin: 18px 0;
-        font-size: 18px;
-    }
+  font-family: fonts.$font-family-body;
+  font-weight: fonts.$font-weight-body;
+  &.byline {
+    text-transform: uppercase;
+    font-size: 14px;
+  }
+  &.prose {
+    margin: 18px 0;
+    font-size: 18px;
+  }
 }
 
 .table {
-    font-family: fonts.$font-family-table;
-    border-collapse: collapse;
-    width: 100%;
-    caption {
-        text-align: left;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 18px;
-    }
-    td, th {
-        border: 1px solid #ddd;
-        padding: 8px;
-    }
-    tr:nth-child(even) {
-        background-color: colors.$gray;
-    }
-    tr:hover {
-        background-color: #ddd;
+  font-family: fonts.$font-family-table;
+  border-collapse: collapse;
+  width: 100%;
+  caption {
+    text-align: left;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 18px;
+  }
+  td,
+  th {
+    border: 1px solid #ddd;
+    padding: 8px;
+  }
+  tr:nth-child(even) {
+    background-color: colors.$gray;
+  }
+  tr:hover {
+    background-color: #ddd;
+  }
+  th {
+    text-align: left;
+    background-color: colors.$black;
+    color: white;
+  }
+}
+
+.graphics-container {
+  display: flex;
+  justify-content: space-between;
+  @media (max-width: 500px) {
+    display: block;
+  }
+  .graphic {
+    flex: 0 1 48%;
+    @media (max-width: 500px) {
+      display: block;
+      margin-bottom: 15px;
     }
-    th {
-      text-align: left;
-      background-color: colors.$black;
-      color: white;
+    iframe {
+      min-height: 360px;
     }
+  }
+}
+
+.card-body {
+  padding: 30px; /* Adjust the value (e.g., 10px, 30px) as needed */
 }