Minor improvements

new/features.html

@@ -33,55 +33,31 @@
 				<p>
 					Caddy sports a powerful and flexible HTTP reverse proxy, on-line configuration API, and a robust, production-ready static file server, and serves all sites over HTTPS by default with automagic TLS certificates.
 				</p>
+				
+				<h3 class="green">High-level technical specifications</h3>
+
 				<div class="cols">
 					<div class="col">
-						<h3 class="green">Dynamically provision certificates</h3>
+						<h4>Language</h4>
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
 					</div>
 					<div class="col">
-						<h3 class="purple">Dynamically provision certificates</h3>
+						The language choice is crucial for a web server. Most servers (NGINX, Apache, HAProxy, etc.) are written in C, which are vulnerable to catastrophic memory safety bugs.
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
 					</div>
 					<div class="col">
-						<h3 class="blue">Dynamically provision certificates</h3>
+						Go
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
 					</div>
 				</div>
 
-
+				<!-- <div class="datagrid">
-				<h2>
+					<div class="datagrid-item">
-					Production-grade static file server
+						<h4>Language</h4>
-				</h2>
+						Go
-				<p>
-					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
-					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
-				</p>
-				<div class="cols">
-					<div class="col">
-						<h3 class="green">Dynamically provision certificates</h3>
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
 					</div>
-					<div class="col">
+					<div class="datagrid-item">
-						<h3 class="purple">Dynamically provision certificates</h3>
+						<h4>Build artifacts</h4>
-						<p>
+						Single static binary
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
 					</div>
-					<div class="col">
+				</div> -->
-						<h3 class="blue">Dynamically provision certificates</h3>
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-						</p>
-					</div>
-				</div>
 			</div>
 		</section>
 

new/resources/css/features.css

@@ -1,4 +1,20 @@
 .hero-content {
 	margin-bottom: 0;
 	padding-bottom: 50px;
-}
+}
+
+.datagrid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2em;
+	margin-top: 50px;
+}
+
+.datagrid h4 {
+	color: #668591;
+	font-size: 12px;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	margin-bottom: .5em;
+	min-width: 200px;
+}

new/resources/css/home.css

@@ -1,3 +1,7 @@
+h1 {
+	-webkit-text-fill-color: inherit;
+}
+
 .bgtext,
 .demobox {
 	font-family: Poppins, ui-rounded;
@@ -196,6 +200,9 @@ div.ap-wrapper:fullscreen div.ap-player {
 	font-weight: normal;
 	font-size: 18px;
 	margin-bottom: 2em;
+	border-left: 0;
+	margin-left: 0;
+	padding-left: 0;
 }
 
 .sponsor-logos {
@@ -288,7 +295,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 	background: white;
 	max-width: 1600px;
 	margin: -350px auto 0;
-	padding: 50px 100px 0;
+	padding: 50px 50px 0;
 	border-radius: 20px;
 	z-index: 0;
 	position: relative;

new/resources/css/marketing.css

@@ -55,7 +55,7 @@ h2 {
 }
 
 .feature h2:not(:first-child) {
-	margin-top: 100px;
+	margin-top: 150px;
 }
 
 
@@ -238,12 +238,14 @@ section.gray {
 }
 
 
+.cols, h3 {
+	--gap: 50px;
+}
 
 .cols {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content:space-around;
-	--gap: 50px;
 	gap: var(--gap);
 	color: #424242;
 	margin-top: 4em;
@@ -263,7 +265,7 @@ section.dark .cols {
 	min-width: 450px;
 }
 
-.col h3 {
+h3 {
 	font-weight: 600;
 	font-size: 20px;
 	border-left: 2px solid;
@@ -276,17 +278,17 @@ section.dark .cols {
 	padding-left: calc(1em - 2px);
 }
 
-.col p + h3 {
+p + h3 {
 	margin-top: var(--gap);
 }
 
-.col h3.plain {
+h3.plain {
 	border-left: none;
 	margin-left: 0;
 	padding-left: 0;
 }
 
-.hero .col h3 {
+.hero h3 {
 	color: white;
 }
 
@@ -301,22 +303,22 @@ section.dark .cols {
 	color: rgb(255 255 255 / .8);
 }
 
-.col .green {
+h3.green {
 	color: #23a460; border-color: #23a460;
 }
-.col .purple {
+h3.purple {
 	color: rgb(151, 39, 151); border-color: rgb(151, 39, 151);
 }
-.col .blue {
+h3.blue {
 	color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
 }
-section.dark .col .green {
+section.dark h3.green {
 	color: #41e68f; border-color: #41e68f;
 }
-section.dark .col .purple {
+section.dark h3.purple {
 	color: rgb(204, 82, 204); border-color: rgb(204, 82, 204);
 }
-section.dark .col .blue {
+section.dark h3.blue {
 	color: rgb(81, 165, 234); border-color: rgb(81, 165, 234);
 }
 
@@ -413,6 +415,9 @@ section.dark .col .blue {
 	color: white;
 	font-size: 150%;
 	font-weight: normal;
+	border: none;
+	padding-left: 0;
+	margin-left: 0;
 }
 
 .sponsorship-primer p {