Misc tweaks and fixes

Madelena · Madelena · commit d808e3ee9295 · 2024-11-24T03:24:15.000Z
diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss
@@ -899,6 +899,13 @@ a.material-card:hover {
       text-transform: uppercase;
     }
 
+    .getting-started-grid {
+      display: flex;
+      padding: 48px 0 48px 24px;
+      align-items: flex-start;
+      gap: 24px;
+    }
+
     .getting-started-device {
       .content {
         display: flex;
@@ -952,12 +959,17 @@ a.material-card:hover {
     }
     
     @media only screen and (max-width: $palm-end) {
+      .getting-started-grid {
+        flex-direction: column;
+      }
+
       .getting-started-device {
         padding-bottom: 64px;
       }
 
       #HA_Yellow, #Raspberry_Pi {
         padding-top: 0;
+        order: 2;
       }
     }
   }
diff --git a/sass/homeassistant/homepage/_hero_unit.scss b/sass/homeassistant/homepage/_hero_unit.scss
@@ -4,7 +4,7 @@
 .hero {
   position: relative;
   background: rgb(24,188,242);
-  background: linear-gradient(0deg, hsl(195, 89%, 52%) 0%, hsla(195, 89%, 52%, 0.8) 100%);
+  background: linear-gradient(340deg, hsl(200deg, 100%, 50%) 0%, hsl(195deg, 100%, 50%) 50%, hsl(185deg, 100%, 50%) 100%);
   padding-bottom: 0;
   margin-top: -88px;
   margin-bottom: 48px;
@@ -57,7 +57,7 @@
     display: flex;
     margin: 8px 0px 24px 0px;
     align-items: center;
-    gap: 24px;
+    gap: 12px;
 
     a {
       font-size: 1.1rem;
@@ -66,7 +66,7 @@
       display: inline-block;
       font-weight: 600;
       padding: 8px 0 8px 0;
-      margin: 0 24px 0 4px;
+      margin: 0 12px 0 12px;
       border-radius: 32px;
 
       &.primary {
diff --git a/source/_includes/custom/getting-started.html b/source/_includes/custom/getting-started.html
@@ -4,40 +4,44 @@ <h2 class="sub-title">Let's get started.</h2>
     <p class="lead">A variety of options for pragmatists and tinkerers alike.</p>
   </div>
 
-  <div class="getting-started-device grid__item one-third palm-one-whole" id="HA_Yellow">
-    <div class="content">
-      <div class="badge">Intermediate</div>
-      <img src="/images/frontpage/ha-yellow.png" alt="Home Assistant Yellow"/>
-      <div>
-        <h3>Home Assistant Yellow</h3>
-        <p>The powerful way to run and customize Home Assistant to your needs</p>
+  <div class="getting-started-grid grid__item one-whole">
+
+    <div class="getting-started-device" id="HA_Yellow">
+      <div class="content">
+        <div class="badge">Intermediate</div>
+        <img src="/images/frontpage/ha-yellow.png" alt="Home Assistant Yellow"/>
+        <div>
+          <h3>Home Assistant Yellow</h3>
+          <p>The powerful way to run and customize Home Assistant to your needs</p>
+        </div>
+        <a class="button" aria-label="Learn more about Home Assistant Yellow" href="/yellow">Learn more</a>
       </div>
-      <a class="button" aria-label="Learn more about Home Assistant Yellow" href="/yellow">Learn more</a>
     </div>
-  </div>
 
-  <div class="getting-started-device grid__item one-third palm-one-whole" id="HA_Green">
-    <div class="content">
-      <div class="badge">Easiest</div>
-      <img src="/images/frontpage/ha-green.png" alt="Home Assistant Green"/>
-      <div>
-        <h3>Home Assistant Green</h3>
-        <p>The easiest way to get started with Home Assistant</p>
+    <div class="getting-started-device" id="HA_Green">
+      <div class="content">
+        <div class="badge">Easiest</div>
+        <img src="/images/frontpage/ha-green.png" alt="Home Assistant Green"/>
+        <div>
+          <h3>Home Assistant Green</h3>
+          <p>The easiest way to get started with Home Assistant</p>
+        </div>
+        <a class="button" aria-label="Learn more about Home Assistant Green" href="/green">Learn more</a>
       </div>
-      <a class="button" aria-label="Learn more about Home Assistant Green" href="/green">Learn more</a>
     </div>
-  </div>
 
-  <div class="getting-started-device grid__item one-third palm-one-whole" id="Raspberry_Pi">
-    <div class="content">
-      <div class="badge">Advanced</div>
-      <img src="/images/frontpage/raspberry-pi.png" alt="Raspberry Pi"/>
-      <div>
-        <h3>Raspberry Pi</h3>
-        <p>A low-cost DIY solution to get started with Home Assistant</p>
+    <div class="getting-started-device" id="Raspberry_Pi">
+      <div class="content">
+        <div class="badge">Advanced</div>
+        <img src="/images/frontpage/raspberry-pi.png" alt="Raspberry Pi"/>
+        <div>
+          <h3>Raspberry Pi</h3>
+          <p>A low-cost DIY solution to get started with Home Assistant</p>
+        </div>
+        <a class="button" aria-label="Learn more about installing Home Assistant on Raspberry Pi" href="/installation/raspberrypi">Learn more</a>
       </div>
-      <a class="button" aria-label="Learn more about installing Home Assistant on Raspberry Pi" href="/installation/raspberrypi">Learn more</a>
     </div>
+
   </div>
 
   <div class="grid__item one-half palm-one-whole">

Original file line number	Diff line number	Diff line change
`@@ -899,6 +899,13 @@ a.material-card:hover {`
`899`	`899`	`text-transform: uppercase;`
`900`	`900`	`}`
`901`	`901`
	`902`	`+ .getting-started-grid {`
	`903`	`+ display: flex;`
	`904`	`+ padding: 48px 0 48px 24px;`
	`905`	`+ align-items: flex-start;`
	`906`	`+ gap: 24px;`
	`907`	`+ }`
	`908`	`+`
`902`	`909`	`.getting-started-device {`
`903`	`910`	`.content {`
`904`	`911`	`display: flex;`
`@@ -952,12 +959,17 @@ a.material-card:hover {`
`952`	`959`	`}`
`953`	`960`
`954`	`961`	`@media only screen and (max-width: $palm-end) {`
	`962`	`+ .getting-started-grid {`
	`963`	`+ flex-direction: column;`
	`964`	`+ }`
	`965`	`+`
`955`	`966`	`.getting-started-device {`
`956`	`967`	`padding-bottom: 64px;`
`957`	`968`	`}`
`958`	`969`
`959`	`970`	`#HA_Yellow, #Raspberry_Pi {`
`960`	`971`	`padding-top: 0;`
	`972`	`+ order: 2;`
`961`	`973`	`}`
`962`	`974`	`}`
`963`	`975`	`}`