Remove background from main hero text, reduce padding in hero section

josh-wong · josh-wong · commit 0488ae0104d3 · 2025-06-18T14:50:08.000+09:00
Remove background from hero text and reduce padding around hero section, according to feedback at: https://scalar-labs.slack.com/archives/CDSFWGSTZ/p1750218637894259?thread_ts=1750041895.129159&cid=CDSFWGSTZ Also fix spacing issue around video on mobile after changing the padding mentioned.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -114,7 +114,6 @@ table, pre, code, img, iframe {
 
 .hero-section {
   align-items: center;
-  background-color: #f3f2f1;
   display: flex;
   flex-wrap: wrap;
   font-size: 13.5pt;
@@ -127,7 +126,7 @@ table, pre, code, img, iframe {
   color: var(--ifm-font-color-base);
   flex: 1;
   min-width: 250px;
-  padding: 2rem;
+  padding: 0 2rem 0 0;
   /* padding-right: 35rem; */
 }
 
@@ -153,7 +152,7 @@ table, pre, code, img, iframe {
   justify-content: center;
   max-width: 640px;
   min-width: 400px;
-  padding: 2rem;
+  padding: 1rem;
 }
 
 .link {
@@ -287,8 +286,8 @@ table, pre, code, img, iframe {
 
   .youtube-embed {
     flex: 1;
+    margin-top: 1rem;
     min-width: 100%;
-    padding-top: 0;
   }
 }
 
@@ -303,7 +302,7 @@ table, pre, code, img, iframe {
   overflow: visible;
 }
 
-html[data-theme="dark"] .hero-section, html[data-theme="dark"] .youtube-embed {
+html[data-theme="dark"] .youtube-embed {
   background-color: #252526;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,6 @@ table, pre, code, img, iframe {`
`114`	`114`
`115`	`115`	`.hero-section {`
`116`	`116`	`align-items: center;`
`117`		`- background-color: #f3f2f1;`
`118`	`117`	`display: flex;`
`119`	`118`	`flex-wrap: wrap;`
`120`	`119`	`font-size: 13.5pt;`
`@@ -127,7 +126,7 @@ table, pre, code, img, iframe {`
`127`	`126`	`color: var(--ifm-font-color-base);`
`128`	`127`	`flex: 1;`
`129`	`128`	`min-width: 250px;`
`130`		`- padding: 2rem;`
	`129`	`+ padding: 0 2rem 0 0;`
`131`	`130`	`/* padding-right: 35rem; */`
`132`	`131`	`}`
`133`	`132`
`@@ -153,7 +152,7 @@ table, pre, code, img, iframe {`
`153`	`152`	`justify-content: center;`
`154`	`153`	`max-width: 640px;`
`155`	`154`	`min-width: 400px;`
`156`		`- padding: 2rem;`
	`155`	`+ padding: 1rem;`
`157`	`156`	`}`
`158`	`157`
`159`	`158`	`.link {`
`@@ -287,8 +286,8 @@ table, pre, code, img, iframe {`
`287`	`286`
`288`	`287`	`.youtube-embed {`
`289`	`288`	`flex: 1;`
	`289`	`+ margin-top: 1rem;`
`290`	`290`	`min-width: 100%;`
`291`		`- padding-top: 0;`
`292`	`291`	`}`
`293`	`292`	`}`
`294`	`293`
`@@ -303,7 +302,7 @@ table, pre, code, img, iframe {`
`303`	`302`	`overflow: visible;`
`304`	`303`	`}`
`305`	`304`
`306`		`-html[data-theme="dark"] .hero-section, html[data-theme="dark"] .youtube-embed {`
	`305`	`+html[data-theme="dark"] .youtube-embed {`
`307`	`306`	`background-color: #252526;`
`308`	`307`	`}`
`309`	`308`