responsiveness

zesameri · zesameri · commit b329b822c0ef · 2017-02-22T13:14:30.000-05:00
diff --git a/assets/flower.svg b/assets/flower.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+	<svg width="489pt" height="476pt" viewBox="0 0 489 476" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal0" d=" M 232.19 43.20 C 235.64 40.61 240.59 40.30 244.19 42.79 C 250.55 47.08 254.02 54.36 256.69 61.32 C 263.21 79.68 264.15 99.47 263.66 118.79 C 262.40 151.81 255.22 184.41 244.50 215.60 C 242.58 220.84 241.01 226.25 238.39 231.21 C 223.82 194.58 214.42 155.55 213.26 116.04 C 212.92 98.12 214.06 79.86 219.79 62.75 C 222.42 55.50 225.78 47.89 232.19 43.20 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal1" d=" M 102.47 96.58 C 106.87 95.02 111.70 95.62 116.14 96.72 C 127.01 99.61 136.67 105.72 145.64 112.32 C 160.76 123.73 173.89 137.58 185.65 152.38 C 199.82 170.18 211.97 189.54 222.38 209.76 C 226.16 217.53 230.38 225.12 233.29 233.29 C 224.42 230.06 216.11 225.52 207.68 221.31 C 177.00 205.20 147.99 185.18 124.20 159.82 C 114.82 149.55 106.09 138.43 100.20 125.75 C 97.32 119.27 94.86 112.16 95.91 104.98 C 96.40 101.26 98.88 97.83 102.47 96.58 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal2" d=" M 359.29 97.15 C 363.93 95.84 368.95 94.98 373.69 96.30 C 377.33 97.21 380.17 100.42 380.88 104.07 C 382.27 110.75 380.21 117.54 377.70 123.70 C 372.65 135.48 364.90 145.89 356.60 155.57 C 333.42 181.72 304.48 202.21 273.92 218.87 C 264.01 223.99 254.18 229.39 243.71 233.28 C 245.37 228.34 247.76 223.70 250.02 219.02 C 265.18 187.57 284.40 157.84 308.62 132.59 C 315.46 125.40 322.92 118.80 330.81 112.79 C 339.48 106.26 348.84 100.32 359.29 97.15 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal3" d=" M 67.52 218.31 C 84.97 213.43 103.28 212.77 121.29 213.43 C 155.26 215.09 188.75 222.81 220.71 234.29 C 224.28 235.55 227.86 236.82 231.22 238.60 C 195.97 252.72 158.45 261.74 120.46 263.60 C 101.93 264.19 83.02 263.48 65.18 257.99 C 58.30 255.80 51.39 252.94 45.99 248.00 C 43.27 245.43 40.85 241.98 41.06 238.06 C 41.34 233.74 44.32 230.17 47.60 227.61 C 53.41 223.01 60.47 220.36 67.52 218.31 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal4" d=" M 356.54 213.38 C 375.35 212.79 394.55 213.52 412.61 219.28 C 420.06 221.74 427.72 224.97 432.96 231.05 C 435.89 234.42 437.09 239.62 434.55 243.56 C 430.59 250.15 423.28 253.70 416.39 256.43 C 401.91 261.71 386.38 263.47 371.04 263.75 C 349.15 264.19 327.31 261.46 305.91 256.97 C 285.41 252.49 265.18 246.54 245.75 238.60 C 249.59 236.56 253.73 235.18 257.82 233.75 C 289.57 222.48 322.83 214.95 356.54 213.38 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal5" d=" M 175.57 274.54 C 193.88 262.66 213.07 251.94 233.30 243.70 C 230.24 252.11 225.95 259.99 222.00 268.00 C 206.86 297.13 188.15 324.62 164.94 347.93 C 152.72 359.71 139.39 370.87 123.71 377.71 C 116.87 380.40 108.96 382.96 101.77 380.11 C 96.70 378.02 95.16 371.97 95.71 366.99 C 96.78 355.55 102.72 345.33 109.01 335.99 C 126.54 311.06 150.40 291.35 175.57 274.54 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0" id="petal6" d=" M 243.74 243.73 C 252.59 246.98 260.91 251.46 269.31 255.70 C 293.37 268.29 316.27 283.31 336.56 301.42 C 348.16 311.51 358.68 322.88 367.60 335.41 C 373.69 344.42 379.42 354.17 381.08 365.09 C 381.90 370.39 381.13 377.11 375.82 379.83 C 369.56 382.75 362.33 380.92 356.11 378.82 C 342.30 373.51 330.27 364.50 319.32 354.71 C 296.32 333.86 277.84 308.45 262.41 281.64 C 255.58 269.33 248.84 256.87 243.74 243.73 Z" />
+<path stroke-width="7" stroke="floralwhite" fill-opacity="0"  id="petal7" d=" M 228.99 272.08 C 231.96 263.24 234.49 254.17 238.62 245.77 C 248.48 270.30 255.69 295.91 259.98 321.99 C 263.26 342.11 264.70 362.59 263.19 382.94 C 262.07 396.29 259.79 409.82 254.00 422.02 C 251.15 427.46 247.52 433.30 241.45 435.47 C 237.59 436.93 233.41 435.07 230.50 432.50 C 225.97 428.36 223.09 422.77 220.85 417.14 C 216.40 405.59 214.55 393.22 213.65 380.93 C 211.44 344.08 218.04 307.17 228.99 272.08 Z" />
+	</svg>
diff --git a/assets/maybe.jpg b/assets/maybe.jpg
diff --git a/css/about.css b/css/about.css
diff --git a/css/hero.css b/css/hero.css
@@ -4,12 +4,12 @@
   justify-content: center;
   height: 100vh;
   background: linear-gradient(
-      rgba(255, 99, 71, 0.60),
-      rgba(255, 99, 71, 0.60)
-    ), url('../assets/elsa.png');
+      rgba(255, 99, 71, 0.50),
+      rgba(255, 99, 71, 0.50)
+    ), url('../assets/maybe.jpg');
   background-position: center;
     background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
 }
 .hero h1 {
   width: 100%;
@@ -24,8 +24,8 @@
 	animation-name: rotate;
 	-webkit-animation-name: rotate;
 
-	animation-duration: 2.5s;
-	-webkit-animation-duration: 2.5s;
+	animation-duration: 3s;
+	-webkit-animation-duration: 3s;
 
 	animation-iteration-count: infinite;
 	-webkit-animation-iteration-count: infinite;
diff --git a/css/main.css b/css/main.css
@@ -26,11 +26,12 @@ html, body {
   width: 100%;
   color: #1A1110;
   background-color: floralwhite;
+  justify-content: space-around;
 }
 section {
 	height: 100vh;
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 }
 
 section > div{
@@ -40,3 +41,9 @@ section > div{
 a:link, a:visited, a:hover, a:active {
     text-decoration: none;
 }
+
+@media only screen and (max-width: 900px) {
+  section > div {
+    width: 100vw;
+  }
+}
diff --git a/index.html b/index.html
@@ -32,14 +32,14 @@
 
 <body>
   <!-- Main Menu –––––––––––––––––––––––––––––––––––––––––––– -->
-
   <section id="main">
     <div class="hero" id="home">
       <div>
         <img class="rotate" src="assets/black.svg">
         <h1> meredith hoo </h1>
       </div>
     </div>
+    
     <!-- Projects Landsape Mode ––––––––––––––––––––––––––––––––– -->
     <div id="projects">
       <div class="flex-parent landscape">
