~emersion/public-inbox

yojo: Add cute little carets to the navbar v1 PROPOSED

Drew DeVault: 1
 Add cute little carets to the navbar

 3 files changed, 30 insertions(+), 2 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/public-inbox/patches/47875/mbox | git am -3
Learn more about email & git

[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
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.