4 files changed, 77 insertions, 18 deletions
diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css
index 6774a7d5..bd838df5 100644
--- a/website/resources/css/custom.css
+++ b/website/resources/css/custom.css
@@ -1,39 +1,94 @@
 .importantNotification {
-        background-color: #FFEBCD;
-        border-radius: 20px;
-        padding: 10px;
-        margin: 10px;
+	background-color: #FFEBCD;
+	border-radius: 20px;
+	padding: 10px;
+	margin: 10px;
 }
 
-#clickForVideo {
-	padding: 20px 30px;
-	background-color: #DDD;
-	cursor: pointer;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 40px;
+.tidelift-link-inline {
+	border-radius: 18px;
+	background-color: #626980;
+	background-color: #626980;
+	background-image: url('/img/tidelift-mark.png');
+	background-repeat: no-repeat;
+	background-position: 6px;
+	background-size: 12px;
+	padding: 2px 8px 2px 26px;
+	color: white;
 }
 
-.tidelift-para {
-	margin-top: 10px;
+.tidelift-link {
+	border-bottom-left-radius: 18px;
+	border-top-left-radius: 18px;
+	background-color: #626980;
+	box-sizing: border-box;
+	color: white;
+	display: flex;
+	top: 46px;
+	right: 0px;
+	position: absolute;
+	background-image: url('/img/tidelift-mark.png');
+	background-repeat: no-repeat;
+	background-position: 10px;
+	background-size: 12px;
+	padding: 6px 12px 6px 28px;
+}
+
+.tidelift-link:hover, .tidelift-link-inline:hover {
+	color: white;
 }
 
 #tideliftlink {
 	margin-left: 2px;
 	padding: 4px 6px 4px 20px;
-	background-image: url('/img/tidelift-mark.png');
-	background-repeat: no-repeat;
-	background-position: 4px;
-	background-size: 12px;
 	background-color: #4b5168;
 	border-radius: 5px;
 	color: white;
 }
 
+#clickForVideo {
+	padding: 20px 30px;
+	background-color: #DDD;
+	cursor: pointer;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 40px;
+}
+
 pre {
 	text-align: left;
 }
 
+.tideliftb {
+	border-radius: 4px;
+	border: 2px solid #D9230F;
+	font-size: 28px;
+	width: 330px;
+	line-height: 48px;
+	display: inline-block;
+	margin: 16px 0;
+	text-align: center;
+}
+
+.tideliftb1 {
+	background-color: white;
+	float: left;
+	color: #D9230F;
+}
+
+.tideliftb1:hover {
+	color: #D9230F;
+}
+
+.tideliftb2 {
+	background-color: #D9230F;
+	color: #FCFCFC;
+}
+
+.tideliftb2:hover {
+	color: #FCFCFC;
+}
+
 .buttonLike {
 	cursor: pointer;
 	background: -webkit-linear-gradient(top, #FFFEF7, #CFCEC7);
@@ -63,6 +118,10 @@ pre {
 	margin-top: 20px;
 }
 
+.tidelift {
+	font-size: 16px;
+}
+
 .formErr {
 	color: #FF7777;
 }
diff --git a/website/resources/img/projectlombok-tidelift-mix-orig.png b/website/resources/img/projectlombok-tidelift-mix-orig.png
new file mode 100644
index 00000000..c3521b35
--- /dev/null
+++ b/website/resources/img/projectlombok-tidelift-mix-orig.png
diff --git a/website/resources/img/projectlombok-tidelift-mix.png b/website/resources/img/projectlombok-tidelift-mix.png
new file mode 100644
index 00000000..082570d3
--- /dev/null
+++ b/website/resources/img/projectlombok-tidelift-mix.png
diff --git a/website/resources/js/main.js b/website/resources/js/main.js
index eaaf2df5..3d18b996 100644
--- a/website/resources/js/main.js
+++ b/website/resources/js/main.js
@@ -37,7 +37,7 @@
 		if (self.data("clc")) return;
 		var href = self.attr("href");
 		self.data("clc", true);
-		if (!href || href.substr(0, 4) === "http" || href === "/api/" || href === "/" || href === "/supporters" || href === "/order-license") return;
+		if (!href || href.substr(0, 4) === "http" || href.substr(0, 1) === "#" || href === "/api/" || href === "/" || href === "/supporters" || href === "/order-license") return;
 		var ext = href.substr(href.length - 4, 4);
 		if (ext === ".xml" || ext === ".jar" || ext === ".pdf") return;
 		self.on("click", function(evt) {