All: add banner, version support link, new download button styles

AndreAngelantoni · timmywil · commit 6d4c5364d3ff · 2024-10-12T09:36:05.000-04:00
Closes gh-468
diff --git a/themes/api.jquery.com/style.css b/themes/api.jquery.com/style.css
@@ -34,3 +34,13 @@ a {
 	margin-top: 0;
 	padding-left: 1em;
 }
+
+/* Version support warning at top of API pages */
+
+#version-support-warning {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	padding: 0.5em 0 0.5em 0.5em;
+	line-height: 1.2;
+}
diff --git a/themes/jquery.com/style.css b/themes/jquery.com/style.css
@@ -54,8 +54,7 @@ a,
 	transform: rotate(6.28rad);
 }
 
-.download-options,
-.download-help {
+#banner-secondary .download-main .download-options {
 	margin-top: 1em;
 }
 #banner-secondary .download-options a {
@@ -97,6 +96,47 @@ a,
 	font-size: 12px;
 }
 
+/* New download button */
+#banner-secondary > .download {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	margin-bottom: 1em;
+}
+.download-button-content {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5em;
+}
+.download-button-content .download-icon {
+	background: url('i/download.png') no-repeat 0 5px / 100% 100%;
+	width: 35px;
+	height: 35px;
+	display: inline-block;
+	flex-shrink: 0;
+}
+.download-button-content .download-message {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: 0.25em;
+}
+.download-button-content .download-message .download-version {
+	font-size: 0.7em;
+}
+.download-options .support-notice {
+	margin: 0.5em 0;
+	color: #ccc;
+}
+@media only screen and (max-width: 767px) {
+	#banner-secondary .download {
+		align-items: center;
+	}
+}
+
 .resources {
 	padding-left: 60px;
 }
diff --git a/themes/jquery/css/base.css b/themes/jquery/css/base.css
@@ -103,6 +103,14 @@ body {
   font-weight: normal;
   font-style: normal;
 }
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+	font-size: 1.2em;
+  text-decoration: inherit;
+  display: inline-block;
+  speak: none;
+}
+.icon-info-sign:before { content: "\f05a"; }
 
 /* ==========================================================================
    Links
@@ -881,6 +889,19 @@ iframe {
 	margin: 0;
 }
 
+/* Support message at top of page.
+   ========================================================================== */
+
+#banner {
+	text-align: center;
+	background-color: #dddddd;
+	padding: 0.25em 1.25em;
+	color: #333; /* jQuery Black */
+}
+
+#banner a:hover {
+	text-decoration: none;
+}
 
 /* Global Nav
    ========================================================================== */
@@ -1396,8 +1417,7 @@ pre b {
 
 #content img.full,
 #content img.left,
-#content img.right,
-#banner img.full {
+#content img.right {
 	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.20);
 }
 
@@ -1460,10 +1480,6 @@ pre b {
 	margin-bottom: 20px;
 }
 
-#portfolio.media #banner .embed {
-	margin-bottom: 40px;
-}
-
 .embed iframe,
 .embed_media iframe,
 .embed object,
diff --git a/themes/jquery/header.php b/themes/jquery/header.php
@@ -39,6 +39,12 @@
 </head>
 <body <?php body_class(); ?>>
 
+<?php if ( is_front_page() && defined( "JQUERY_BANNER" ) ) : ?>
+	<div id="banner">
+		<?php echo JQUERY_BANNER ?>
+	</div>
+<?php endif; ?>
+
 <header>
 	<section id="global-nav">
 		<nav>
diff --git a/themes/jquery/menu-header.php b/themes/jquery/menu-header.php
@@ -13,6 +13,7 @@ function menu_header_jquery_com() {
 		'https://blog.jquery.com/' => 'Blog',
 		'https://plugins.jquery.com/' => 'Plugins',
 		'https://jquery.com/browser-support/' => 'Browser Support',
+		'https://jquery.com/support/' => 'Version Support',
 	);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ function menu_header_jquery_com() {`
`13`	`13`	`'https://blog.jquery.com/' => 'Blog',`
`14`	`14`	`'https://plugins.jquery.com/' => 'Plugins',`
`15`	`15`	`'https://jquery.com/browser-support/' => 'Browser Support',`
	`16`	`+ 'https://jquery.com/support/' => 'Version Support',`
`16`	`17`	`);`
`17`	`18`	`}`
`18`	`19`