yojo: Add cute little carets to the navbar v1 REJECTED

Drew DeVault: 1
 Add cute little carets to the navbar

 3 files changed, 30 insertions(+), 2 deletions(-)

[PATCH yojo] Add cute little carets to the navbar Export this patch

---
 static/style.css     | 26 ++++++++++++++++++++++++++
 templates/head.html  |  2 ++
 templates/index.html |  4 ++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/static/style.css b/static/style.css
index 00d243c..445c2fc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -15,11 +15,24 @@ nav {
 }
 
 nav .sourcehut {
+	position: relative;
 	flex-grow: 1;
 	border-bottom: 1px solid #aaa;
 	justify-content: flex-end;
 }
 
+nav .sourcehut .caret {
+	width: 0; 
+	height: 0; 
+	border-top: 10px solid transparent;
+	border-bottom: 10px solid transparent;
+	border-left: 10px solid white;
+	position: absolute;
+	z-index: 999;
+	right: -13px;
+	top: calc(50% - 10px);
+}
+
 nav .sourcehut svg {
 	width: 26px;
 	height: 26px;
@@ -50,6 +63,19 @@ nav .codeberg {
 	background: #2185d0;
 	flex-grow: 1;
 	border-bottom: 1px solid #2185d0;
+	position: relative;
+}
+
+nav .codeberg .caret {
+	width: 0; 
+	height: 0; 
+	border-top: 14px solid transparent;
+	border-bottom: 14px solid transparent;
+	border-right: 14px solid #2185d0;
+	position: absolute;
+	z-index: 999;
+	left: -14px;
+	bottom: calc(50% - 14px);
 }
 
 nav .codeberg a {
diff --git a/templates/head.html b/templates/head.html
index 821dd94..0927f32 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -16,8 +16,10 @@
 					</a>
 				</span>
 			</span>
+			<span class="caret"></span>
 		</div>
 		<div class="codeberg">
+			<span class="caret"></span>
 			<a href="https://codeberg.org">
 			<img width="26" height="26" src="/static/codeberg.svg" />
 			</a>
diff --git a/templates/index.html b/templates/index.html
index 07ec830..b1816e0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,11 +12,11 @@ service is available <a href="https://docs.codeberg.org/integrations/sourcehut/"
 
 <p class="install">
 	{{if .SrhtLoginURL}}
-	<a href="{{.SrhtLoginURL}}" class="install-btn">Login with {{.SrhtName}}</a>
+	<a href="{{.SrhtLoginURL}}" class="install-btn">Log in with {{.SrhtName}}</a>
 	{{end}}
 
 	{{if .GiteaLoginURL}}
-	<a href="{{.GiteaLoginURL}}" class="install-btn">Login with {{.GiteaName}}</a>
+	<a href="{{.GiteaLoginURL}}" class="install-btn">Log in with {{.GiteaName}}</a>
 	{{end}}
 
 	{{if or .SrhtUsername .GiteaUsername}}
-- 
2.43.0

Simon Ser <contact@emersion.fr>

1 year, 28 days ago

Hm, I like the idea of adding a cute little ornament, however the way
this looks right now confuses me a bit. I think the carets are easily
confused with the Codeberg logo. Maybe a slightly different background
color for the space between the carets, some more spacing, and making
the carets a bit smaller would help? I'll try to play a bit with this.