More fanciness

nhunzaker · Feb 22, 2020 · c316006 · c316006
1 parent 305c996
commit c316006
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -7,6 +7,7 @@
     justify-content: center;
     text-align: center;
     transition: 0.25s padding;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%, 0% 0%);
   }
 
   .Brand {
@@ -40,7 +41,7 @@
   .Tagline {
     display: block;
     color: var(--color-fiber);
-    font-size: 18px;
+    font-size: 16px;
     font-style: italic;
     text-align: center;
   }

diff --git a/src/routes/recipes/green-juice.svelte b/src/routes/recipes/green-juice.svelte
@@ -14,6 +14,8 @@
     max-width: 34rem;
     margin: 0 auto;
     padding: 0 24px 16px;
+    position: relative;
+    z-index: 2;
   }
 
   h1 {
@@ -24,6 +26,25 @@
     overflow: auto;
     max-width: 42rem;
   }
+
+  section {
+    background: white;
+    border-radius: 1px;
+    max-width: 768px;
+    margin: -120px auto 100px;
+    padding-top: 10px;
+    position: relative;
+  }
+
+  section:after {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 400px;
+    top: -1px;
+    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2);
+  }
 </style>
 
 <svelte:head>
@@ -35,7 +56,7 @@
       --hero-background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)),
         var(--color-fiber) url(/green-juice.jpg) 50% 20% / cover;
       --hero-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.54);
-      --hero-padding: 128px 0;
+      --hero-padding: 56px 0 180px;
       --brand-background: var(--body-bg);
       --brand-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }

diff --git a/src/routes/recipes/popcorn.svelte b/src/routes/recipes/popcorn.svelte
@@ -23,6 +23,25 @@
   .Content.break {
     max-width: 42rem;
   }
+
+  section {
+    background: white;
+    border-radius: 1px;
+    max-width: 768px;
+    margin: -120px auto 100px;
+    padding-top: 10px;
+    position: relative;
+  }
+
+  section:after {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 400px;
+    top: -1px;
+    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2);
+  }
 </style>
 
 <svelte:head>
@@ -34,7 +53,7 @@
       --hero-background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)),
         var(--color-fiber) url(/popcorn.jpg) 50% 50% / cover;
       --hero-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.24);
-      --hero-padding: 128px 0 128px;
+      --hero-padding: 56px 0 180px;
       --brand-background: white;
       --brand-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     }