Merge pull request #205 from HackMelbourne/fix/hero-title-removing-tailwind

flatplum · web-flow · commit 2bc444fb4f08 · 2025-09-15T22:09:49.000+10:00
feat: apply various cosmetic changes
diff --git a/src/features/TitleHero/TitleHero.css b/src/features/TitleHero/TitleHero.css
@@ -18,7 +18,7 @@
   color: transparent;
   -webkit-text-stroke: 1px #767676;
   font-weight: 900;
-  font-size: 9rem;
+  font-size: 16rem; /* md:text-[256px] */
   white-space: nowrap;
   line-height: 1;
   margin-bottom: -100px;
@@ -27,9 +27,10 @@
   mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
 }
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   .hero-background {
-    font-size: 16rem; /* md:text-[256px] */
+    font-size: 8rem;
+    margin-bottom: -50px;
   }
 }
 
@@ -66,10 +67,11 @@
 .hero-description {
   max-width: 40%;
   margin-top: 2rem;
+  text-align: center;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .hero-description {
-    max-width: 100%;
+    max-width: 80%;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`color: transparent;`
`19`	`19`	`-webkit-text-stroke: 1px #767676;`
`20`	`20`	`font-weight: 900;`
`21`		`- font-size: 9rem;`
	`21`	`+ font-size: 16rem; /* md:text-[256px] */`
`22`	`22`	`white-space: nowrap;`
`23`	`23`	`line-height: 1;`
`24`	`24`	`margin-bottom: -100px;`
`@@ -27,9 +27,10 @@`
`27`	`27`	`mask-image: linear-gradient(to bottom, black 50%, transparent 100%);`
`28`	`28`	`}`
`29`	`29`
`30`		`-@media (min-width: 768px) {`
	`30`	`+@media (max-width: 768px) {`
`31`	`31`	`.hero-background {`
`32`		`- font-size: 16rem; /* md:text-[256px] */`
	`32`	`+ font-size: 8rem;`
	`33`	`+ margin-bottom: -50px;`
`33`	`34`	`}`
`34`	`35`	`}`
`35`	`36`
`@@ -66,10 +67,11 @@`
`66`	`67`	`.hero-description {`
`67`	`68`	`max-width: 40%;`
`68`	`69`	`margin-top: 2rem;`
	`70`	`+ text-align: center;`
`69`	`71`	`}`
`70`	`72`
`71`		`-@media (max-width: 767px) {`
	`73`	`+@media (max-width: 768px) {`
`72`	`74`	`.hero-description {`
`73`		`- max-width: 100%;`
	`75`	`+ max-width: 80%;`
`74`	`76`	`}`
`75`	`77`	`}`