Skip to content

Commit 5b4610b

Browse files
Thomas StrombergThomas Stromberg
Thomas Stromberg
authored and
Thomas Stromberg
committed
more mobile opts
1 parent f89916b commit 5b4610b

File tree

2 files changed

+216
-28
lines changed

2 files changed

+216
-28
lines changed

‎src/assets/css/style.css‎

Lines changed: 215 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -882,7 +882,9 @@ button,
882882
/* Responsive */
883883
@media (max-width: 768px) {
884884
.nav {
885-
height: 32px;
885+
height: 34px;
886+
min-height: 34px;
887+
margin-bottom: 8px;
886888
}
887889

888890
.nav-logo {
@@ -893,29 +895,36 @@ button,
893895
}
894896

895897
.nav-logo a {
896-
font-size: 17px;
897-
letter-spacing: 1px;
898-
transform: skewX(-20deg);
898+
font-size: 16px;
899+
letter-spacing: 0.5px;
900+
transform: skewX(-10deg);
901+
min-height: 34px;
902+
display: flex;
903+
align-items: center;
899904
}
900905

901906
.nav-accent-angle {
902-
width: 8em;
903-
height: 2em;
907+
width: 8.5em;
908+
height: 34px;
904909
}
905910

906911
.nav-links {
907912
position: relative;
908913
right: auto;
909-
gap: 8px;
910-
font-size: 11px;
914+
gap: 4px;
915+
font-size: 12px;
911916
margin-left: auto;
912-
margin-right: 10px;
913-
height: 32px;
917+
margin-right: 8px;
918+
height: 34px;
914919
}
915920

916921
.nav-links a {
917-
padding: 4px 8px;
918-
min-height: 32px;
922+
padding: 8px 12px;
923+
min-height: 34px;
924+
min-width: 44px;
925+
display: flex;
926+
align-items: center;
927+
justify-content: center;
919928
}
920929

921930
.nav-links .bracket {
@@ -924,13 +933,17 @@ button,
924933

925934
.hero {
926935
justify-content: center;
927-
padding: 60px 20px 40px;
936+
padding: 46px 16px 46px;
937+
min-height: 100vh;
938+
display: flex;
939+
align-items: center;
928940
}
929941

930942
.hero-content {
931943
margin: 0;
932-
padding: 24px;
944+
padding: 20px;
933945
max-width: 100%;
946+
border-width: 4px;
934947
}
935948

936949
.hero-title {
@@ -956,31 +969,49 @@ button,
956969
}
957970

958971
.content-hero {
959-
padding: 60px 20px 40px;
972+
padding: 54px 16px 40px;
960973
}
961974

962975
.content-hero h1 {
963976
font-size: 40px;
977+
margin-bottom: 16px;
964978
}
965979

966980
.content-hero h2 {
967-
font-size: 28px;
981+
font-size: 26px;
982+
margin: 32px 0 16px;
983+
}
984+
985+
.content-hero p {
986+
margin-bottom: 16px;
968987
}
969988

970989
.content-page {
971-
padding: 100px 20px 40px;
990+
padding: 80px 16px 40px;
972991
}
973992

974993
.content-page h1 {
975994
font-size: 36px;
995+
margin-bottom: 32px;
996+
}
997+
998+
.content-page h2 {
999+
font-size: 28px;
1000+
margin: 32px 0 16px;
1001+
}
1002+
1003+
.product-hero {
1004+
padding: 80px 16px 40px;
9761005
}
9771006

9781007
.product-hero h1 {
9791008
font-size: 40px;
1009+
margin-bottom: 16px;
9801010
}
9811011

9821012
.product-hero .subtitle {
9831013
font-size: 20px;
1014+
margin-bottom: 32px;
9841015
}
9851016

9861017
.founder-section {
@@ -996,19 +1027,82 @@ button,
9961027

9971028
.pricing-grid {
9981029
grid-template-columns: 1fr;
999-
gap: 20px;
1030+
gap: 16px;
1031+
margin: 32px 0;
10001032
}
10011033

10021034
.screenshot-grid {
1003-
gap: 20px;
1035+
gap: 16px;
1036+
margin: 32px 0;
10041037
}
10051038

10061039
.groove-card {
10071040
padding: 20px;
1041+
margin-bottom: 20px;
1042+
}
1043+
1044+
/* Button and CTA optimizations */
1045+
.cta-button,
1046+
.hero-button,
1047+
[role="button"] {
1048+
padding: 12px 24px;
1049+
font-size: 16px;
1050+
min-height: 44px;
1051+
}
1052+
1053+
.content-hero a[style*="padding: 16px 32px"] {
1054+
padding: 12px 24px !important;
1055+
font-size: 16px !important;
1056+
}
1057+
1058+
/* Info box optimizations */
1059+
.info-box {
1060+
padding: 20px;
1061+
margin-bottom: 20px;
1062+
}
1063+
1064+
.info-box-highlight {
1065+
font-size: 18px;
1066+
}
1067+
1068+
/* Feature grid and card optimizations */
1069+
.feature-grid {
1070+
grid-template-columns: 1fr;
1071+
gap: 24px;
1072+
margin: 40px 0;
1073+
}
1074+
1075+
.feature-card {
1076+
padding: 24px;
1077+
}
1078+
1079+
.feature-card h3 {
1080+
font-size: 22px;
1081+
margin-bottom: 12px;
1082+
}
1083+
1084+
.feature-card p {
1085+
font-size: 15px;
1086+
}
1087+
1088+
/* Pricing tier body optimization */
1089+
.pricing-tier-body {
1090+
padding: 20px;
1091+
}
1092+
1093+
.pricing-tier-description {
1094+
font-size: 15px;
1095+
margin-bottom: 16px;
1096+
}
1097+
1098+
.pricing-features li {
1099+
font-size: 14px;
1100+
margin-bottom: 10px;
10081101
}
10091102

10101103
/* Override inline styles on mobile for R2R page boxes */
1011-
.content-hero-inner > div[style*="padding: 30px"] {
1104+
.content-hero-inner > div[style*="padding: 30px"],
1105+
.content-hero-inner > div[style*="padding: 40px"] {
10121106
padding: 20px !important;
10131107
}
10141108

@@ -1017,19 +1111,114 @@ button,
10171111
}
10181112

10191113
.content-hero-inner div[style*="gap: 30px"] {
1020-
gap: 20px !important;
1114+
gap: 16px !important;
10211115
}
10221116

1023-
.content-hero-inner img[style*="width: 150px"] {
1024-
width: 120px !important;
1025-
height: 120px !important;
1117+
/* Responsive image sizing */
1118+
.content-hero-inner img[style*="width: 150px"],
1119+
.content-hero-inner picture + div img {
1120+
width: 100px !important;
1121+
height: 100px !important;
1122+
max-width: 100px !important;
1123+
}
1124+
1125+
/* Responsive font sizing - more aggressive scaling */
1126+
.content-hero-inner p[style*="font-size: 32px"] {
1127+
font-size: 24px !important;
1128+
}
1129+
1130+
.content-hero-inner p[style*="font-size: 24px"] {
1131+
font-size: 18px !important;
1132+
}
1133+
1134+
.content-hero-inner p[style*="font-size: 20px"] {
1135+
font-size: 17px !important;
1136+
}
1137+
1138+
.content-hero-inner p[style*="font-size: 18px"],
1139+
.content-hero-inner ul[style*="font-size: 16px"] li {
1140+
font-size: 15px !important;
1141+
}
1142+
1143+
/* Fix min-width constraints */
1144+
.content-hero-inner div[style*="min-width: 250px"] {
1145+
min-width: 0 !important;
1146+
flex: 1 1 100%;
1147+
}
1148+
1149+
/* Border adjustments for mobile */
1150+
.content-hero-inner div[style*="border: 8px"] {
1151+
border-width: 4px !important;
1152+
}
1153+
1154+
/* Pricing tier font scaling */
1155+
.pricing-tier-name {
1156+
font-size: 24px !important;
1157+
}
1158+
1159+
.pricing-price-amount {
1160+
font-size: 40px !important;
1161+
}
1162+
1163+
.pricing-price-currency,
1164+
.pricing-price-period {
1165+
font-size: 16px !important;
1166+
}
1167+
}
1168+
1169+
/* Extra small screens (iPhone SE, etc) */
1170+
@media (max-width: 374px) {
1171+
.nav-logo a {
1172+
font-size: 16px;
1173+
}
1174+
1175+
.nav-accent-angle {
1176+
width: 8em;
1177+
}
1178+
1179+
.nav-links {
1180+
gap: 2px;
1181+
font-size: 11px;
1182+
margin-right: 4px;
1183+
}
1184+
1185+
.nav-links a {
1186+
padding: 8px 10px;
1187+
}
1188+
1189+
.hero-content {
1190+
padding: 16px;
1191+
}
1192+
1193+
.content-hero-inner > div[style*="padding: 30px"],
1194+
.content-hero-inner > div[style*="padding: 20px"],
1195+
.content-hero-inner > div[style*="padding: 40px"] {
1196+
padding: 16px !important;
1197+
}
1198+
1199+
.content-hero-inner img[style*="width: 150px"],
1200+
.content-hero-inner picture + div img {
1201+
width: 80px !important;
1202+
height: 80px !important;
1203+
}
1204+
1205+
.content-hero-inner p[style*="font-size: 32px"] {
1206+
font-size: 22px !important;
10261207
}
10271208

10281209
.content-hero-inner p[style*="font-size: 24px"] {
1029-
font-size: 20px !important;
1210+
font-size: 17px !important;
10301211
}
10311212

1032-
.content-hero-inner p[style*="font-size: 18px"] {
1213+
.content-hero-inner p[style*="font-size: 20px"] {
10331214
font-size: 16px !important;
10341215
}
1216+
1217+
.pricing-tier-name {
1218+
font-size: 22px !important;
1219+
}
1220+
1221+
.pricing-price-amount {
1222+
font-size: 36px !important;
1223+
}
10351224
}

‎src/opensource/index.njk‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ title: Open Source
2222
<div style="background: var(--black); border: 8px solid var(--yellow); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);">
2323
<h2 style="margin-top: 0;">WHY WE DO THIS</h2>
2424
<p style="margin: 0 0 10px 0;">You're already donating your time. We eliminate the context-switching overhead that kills your flow state—so you can spend more time shipping code, less time chasing PR status.</p>
25-
<p style="margin: 0 0 10px 0;">We commit 10% of our profits to the open-source projects that power our stack. When you succeed, the entire ecosystem benefits. If you're interested in our support, contact us at <a href="mailto:go-open@codegroove.dev">go-open@codegroove.dev</a>.</p>
26-
<p style="margin: 0;">We proudly donate to and support open-source projects such as: <a href="https://projectbluefin.io/">Bluefin Linux</a>, <a href="https://freebsd.org/">FreeBSD</a>, <a href="https://ghostbsd.org/">GhostBSD</a>, <a href="https://github.com/golangci/golangci-lint">golangci-lint</a>, <a href="https://www.netbsd.org/">NetBSD</a>, and <a href="https://osuosl.org/">OSU Open Source Lab</a>.</p>
25+
<p style="margin: 0;">We proudly donate to and support: <a href="https://projectbluefin.io/">Bluefin Linux</a>, <a href="https://freebsd.org/">FreeBSD</a>, <a href="https://ghostbsd.org/">GhostBSD</a>, <a href="https://github.com/golangci/golangci-lint">golangci-lint</a>, <a href="https://www.netbsd.org/">NetBSD</a>, and <a href="https://osuosl.org/">OSU Open Source Lab</a>. Need support? <a href="mailto:go-open@codegroove.dev">go-open@codegroove.dev</a></p>
2726
</div>
2827

2928
<div style="background: var(--black); border: 8px solid var(--cyan); border-radius: 20px; padding: 30px; margin: 40px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);">

0 commit comments

Comments
 (0)