Fix responsiveness of css (#543)

* fix responsiveness of css * fix exit code for grep * fix exit code for grep
cloudposse · Feb 24, 2024 · 5715d93 · 5715d93
1 parent ea13089
commit 5715d93
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/.github/workflows/vhs.yaml b/.github/workflows/vhs.yaml
@@ -39,12 +39,11 @@ jobs:
           if [[ "${{ steps.labeled.outputs.labeled }}" == "true" ]]; then
             echo "files=$(find . -path './build-harness' -prune -o -type f -name '*.tape' ! -name 'style.tape' ! -name 'defaults.tape' -print | cut -d/ -f2-)" >> $GITHUB_OUTPUT
           else
-            files=$(gh pr diff --name-only ${{ github.event.pull_request.number }} | grep '\.tape$')
+            files=$(gh pr diff --name-only ${{ github.event.pull_request.number }} | (grep '\.tape$' | grep -v '(style|defaults)\.tape$' || true) | cut -d/ -f2-)
             echo "files=$files" >> $GITHUB_OUTPUT
           fi
 
       - name: Set up matrix
-        if: steps.labeled.outputs.labeled == 'true'
         id: create-matrix
         run: |
           echo "matrix=$(echo -n ${{ steps.tapes.outputs.files }} | jq -R -s -c 'split(" ")')" >> $GITHUB_OUTPUT

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -327,7 +327,8 @@ html.plugin-pages body, html[data-theme='dark'].plugin-pages body{
 
 .landing-page .section__description {
     font-size: 1em;
-    margin-left: 3em;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
     display: flex;
     flex-direction: column;
 }
@@ -356,6 +357,7 @@ html[data-theme='dark'] .landing-page .section__description > h2 {
 
 .landing-page main section {
   max-width: 1600px;
+  overflow: hidden;
 }
 
 .landing-page main {
@@ -386,6 +388,7 @@ html[data-theme='dark'] .landing-page .section__description > h2 {
 .landing-page header {
   display: flex;
   max-height: 90vh;
+  min-height: 700px;
   height: 100vh;
   width: 100vw;
   justify-content: center;
@@ -430,7 +433,7 @@ html[data-theme='dark'] .landing-page .section__description > h2 {
 
 .hero__cta {
   gap: 1rem;
-  align-items: center;  
+  justify-content: center;
   display: flex;
 
 }
@@ -459,24 +462,24 @@ html[data-theme='dark'] .landing-page main h2.section {
 }
 
 .landing-page main h3 {
-  text-align: center;
+    text-align: center;
 }
 
-.landing-page main footer h3 {
-  font-size: 2em;
+.landing-page footer h3 {
+    font-size: 2em;
+    line-height: 1.7em;
+    color: #7c7b7b;
+    text-align: center;
 }
 
-.landing-page main footer {
+.landing-page footer {
     background: #0a1922;
     min-width: 100vw;
     padding: 3em;
+    text-align: center;
 }
 
-.landing-page main footer h3 {
-    color: #7c7b7b;
-}
-
-html[data-theme='dark'] .landing-page main footer {
+html[data-theme='dark'] .landing-page footer {
     background: rgb(0 0 0 / 21%);
 }
 
@@ -493,7 +496,7 @@ html[data-theme='dark'] .landing-page main footer {
 }
 
 .landing-page .alternate-section .terminal {
-    max-width: 52vw;
+    max-width: 52%;
 }
 
 .landing-page .terminal pre.screengrab {
@@ -503,6 +506,19 @@ html[data-theme='dark'] .landing-page main footer {
 
 @media screen and (max-width: 996px)
 {
+    .landing-page header {
+        justify-content: flex-start;
+        max-width: 100vw;
+        overflow: hidden;;
+    }
+
+    .hero__cta {
+        gap: 1rem;
+        display: flex;
+        max-width: 100vw;
+        flex-wrap: wrap;
+    }
+
     .alternate-section {
         flex-wrap: wrap;
     }
@@ -522,7 +538,7 @@ html[data-theme='dark'] .landing-page main footer {
         margin-bottom: 0;
     }
 
-    .landing-page main footer h2 {
+    .landing-page footer h2 {
         display: flex;
         flex-direction: column;
     }
@@ -634,12 +650,11 @@ strong.underline::after {
 
 /* Terminal Styling */
 .terminal {
-    min-width: 45vw;
+    min-width: 100%;
     color: #ccc;
     /*background: #171717; */
     background: #070e12;
     margin-top: 10px;
-    margin-left: 20px;  
     line-height: 0.8em;
     border-radius: 10px;
     padding: 0.5em;

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -59,14 +59,14 @@ function Home() {
               <Link to="/cli/commands/terraform/usage" class="button button--lg button--outline button--primary ml20"><p>Learn More</p></Link>
             </div>
           </section>
-          <footer>
+        </main>
+        <footer>
             <h2>What are you waiting for? <strong class="atmos__text">It's FREE and Open Source</strong></h2>
             <h3><strong class="underline">Your team can succeed</strong> with Terraform today.</h3>
             <section class="cta-section">
               <Link to="/quick-start/" class="button button--lg button--primary"><p>Try the Quick Start</p></Link>
             </section>
-          </footer>
-        </main>
+        </footer>
       </Layout>
     </div>
   );