~ols/yeet: change styling

4 files changed, 49 insertions(+), 55 deletions(-)

M go.mod
M go.sum
M views/header.html
M views/style.css

M go.mod => go.mod +3 -0

@@ 4,9 4,12 @@ go 1.13
 
 require (
 	github.com/andybalholm/cascadia v1.2.0
+	github.com/aofei/cameron v1.2.0
+	github.com/cespare/xxhash/v2 v2.1.2
 	github.com/gorilla/mux v1.8.0
 	github.com/ipsn/go-adorable v1.0.0
 	github.com/mattn/go-runewidth v0.0.9
+	github.com/mcbattirola/avatargen v0.0.0-20201215234306-5459476bc021
 	golang.org/x/crypto v0.0.0-20201016220609-9e8e0b390897
 	golang.org/x/image v0.0.0-20200927104501-e162460cd6b5 // indirect
 	golang.org/x/net v0.0.0-20201110031124-69a78807bb2b

M go.sum => go.sum +6 -0

@@ 1,5 1,9 @@
 github.com/andybalholm/cascadia v1.2.0 h1:vuRCkM5Ozh/BfmsaTm26kbjm0mIOM3yS5Ek/F5h18aE=
 github.com/andybalholm/cascadia v1.2.0/go.mod h1:YCyR8vOZT9aZ1CHEd8ap0gMVm2aFgxBp0T0eFw1RUQY=
+github.com/aofei/cameron v1.2.0 h1:vr9iVSQ35hfje9bAc1OzB14bprki1xgz+IO5t0XAl0k=
+github.com/aofei/cameron v1.2.0/go.mod h1:JtZPYqiOYbhDAI4xBlcc2Tv6dcHAugJW6vSqwNoQDO4=
+github.com/cespare/xxhash/v2 v2.1.2 h1:YRXhKfTDauu4ajMg1TPgFO5jnlC2HCbmLXMcTG5cbYE=
+github.com/cespare/xxhash/v2 v2.1.2/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
 github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
 github.com/ipsn/go-adorable v1.0.0 h1:bIyOri2h+p3hIlxcgcGRI9yt1wQQlCo3LysIA7LQqqo=


@@ 8,6 12,8 @@ github.com/lucasb-eyer/go-colorful v0.0.0-20181028223441-12d3b2882a08 h1:5MnxBC1
 github.com/lucasb-eyer/go-colorful v0.0.0-20181028223441-12d3b2882a08/go.mod h1:NXg0ArsFk0Y01623LgUqoqcouGDB+PwCCQlrwrG6xJ4=
 github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0=
 github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
+github.com/mcbattirola/avatargen v0.0.0-20201215234306-5459476bc021 h1:oRv6ztydRzjAAim9GLMl7F7FGHxuqM8vtv63ONR7M8s=
+github.com/mcbattirola/avatargen v0.0.0-20201215234306-5459476bc021/go.mod h1:02aJRGQLLkousX8Z5Viyu+Q6apl9Dpq5USLfqcwsnP4=
 github.com/yuin/goldmark v1.3.0/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190424203555-c05e17bb3b2d h1:adrbvkTDn9rGnXg2IJDKozEpXXLZN89pdIA+Syt4/u0=

M views/header.html => views/header.html +14 -15

@@ 20,28 20,27 @@
 </head>
 <body>
 <header>
-	<div class="mast"><img src="/logo.svg"><p>yeet</p></div>
+	<div class="mast"><p>yeet&trade;</p></div>
 	<nav>
-		<a id="homelink" href="/"><i class="fas fa-home"></i></a>
+		<a id="homelink" href="/">home</a> &bull;
 {{ if .UserInfo }}
-<a id="atmelink" href="/atme"><i class="fas fa-at"></i></a>
-<a href="/chatter"><i class="fas fa-inbox"></i></a>
-<a id="savedlink" href="/saved"><i class="fas fa-save"></i></a>
-<a href="/honkers"><i class="fas fa-user-friends"></i></a>
-<a href="/hfcs"><i class="fas fa-filter"></i></a>
-<a href="/c"><i class="fas fa-layer-group"></i></a>
+<a id="atmelink" href="/atme">mentions</a> &bull;
+<a id="savedlink" href="/saved">saved</a> &bull;
+<a href="/honkers">people</a> &bull;
+<a href="/hfcs">filter</a> &bull;
+<a href="/c">combos</a> &bull;
 {{ end }}
-<a href="/o"><i class="fas fa-tags"></i></a>
-<a href="/events"><i class="fas fa-calendar-week"></i></a>
-<a href="/about"><i class="fas fa-info-circle"></i></a>
+<a href="/o">tags</a> &bull;
+<a href="/events">events</a> &bull;
+<a href="/about">about</a> &bull;
 {{ if .ShowRSS }}
-<a href="/rss"><i class="fas fa-rss"></i></a>
+<a href="/rss">rss</a> &bull;
 {{ end }}
 {{ if .UserInfo }}
-<a href="/{{ .UserSep }}/{{ .UserInfo.Username }}"><i class="fas fa-address-card"></i></a>
-<a href="/account"><i class="fas fa-user-cog"></i></a>
+<a href="/{{ .UserSep }}/{{ .UserInfo.Username }}">{{ .UserInfo.Username }}</a> &bull;
+<a href="/account">settings</a>
 {{ else }}
-<a href="/login"><i class="fas fa-sign-in-alt"></i></a>
+<a href="/login">login</a>
 {{ end }}
 	</nav>
 </header>

M views/style.css => views/style.css +26 -40

@@ 1,19 1,19 @@
-/* html { */
-/* 	--bg-page: #fff; */
-/* 	--bg-dark: #000; */
-/* 	--fg: #000; */
-/* 	--hl: #0f0; */
-/* 	--fg-subtle: #ff0; */
-/* 	--fg-limited: #f00; */
-/* } */
+html { 	--bg-page: #fff7f3;
+ 	--bg-dark: #ffe;
+ 	--bg-subtle: #ddd;
+ 	--fg: #111;
+ 	--hl: #d20000;
+ 	--fg-subtle: #111;
+ 	--fg-limited: #aaa2a0;
+}
 
 html {
-	--bg-page: #192734;
+/*pleroma	--bg-page: #192734;
 	--bg-dark: #15202B;
 	--fg: #FFF;
 	--hl: #556;
-	--fg-subtle: rgba(185, 185, 186, 0.8);
-	--fg: #FEF6E4;--bg-dark: rgba(0,0,0,0.2); --bg-page:#104E8B;--hl:rgba(0,0,0,0.2);--accent:#F582AE;--fg-limited:#F582AE;--fg-subtle:rgba(254,246,228, 0.7);
+	--fg-subtle: rgba(185, 185, 186, 0.8);*/
+/*blue	--fg: #FEF6E4;--bg-dark: rgba(0,0,0,0.2); --bg-page:#104E8B;--hl:rgba(0,0,0,0.2);--accent:#F582AE;--fg-limited:#F582AE;--fg-subtle:rgba(254,246,228, 0.7);*/
 	padding:3em 1em;
 }
 


@@ 26,7 26,7 @@ body {
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	font-size: 1.1rem;
+	font-size: 1rem;
 	line-height: 1.6rem;
 	overscroll-behavior-y: contain;
 	max-width:70em; margin: 0 auto;


@@ 49,7 49,7 @@ table {
 	overflow-x: auto;
 }
 a {
-	color: var(--fg);
+	/*color: var(--fg);*/
 }
 p {
 	margin-top: 1em;


@@ 68,17 68,15 @@ input {
 
 body > header {
 	color: var(--fg);
+	display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;flex-direction:row;align-items:center;
 }
 
 body > header .mast {
 	display:flex;align-items:center;gap:1em;
 }
 .mast img{width:50px;height:50px;border-radius:50%;}
-.mast p{flex:1 auto;font-weight:bold;}
+.mast p{flex:1 auto;font-weight:bold;border-bottom:solid 3px var(--fg);}
 
-body > header nav {
-	margin-top:2em;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
-}
 
 body > header ul {
 	list-style: none;


@@ 86,20 84,9 @@ body > header ul {
 	padding: 0;
 }
 
-body > header li {
-	padding: 0 0.2rem;
-}
-
-body > header a {
-	color: var(--fg);
-	text-decoration: none;
-	font-weight: bold;
-	border-bottom: solid 3px var(--accent);
-	padding:0.3rem 0.8rem;
-}
-
+body > header a{color:blue;}
 body > header a:hover {
-	color:var(--bg-page);border-color:var(--fg);background:var(--accent);
+	color:var(--hl);
 }
 
 main {


@@ 113,7 100,7 @@ hr {
 	margin: 0 auto;
 	max-width: 640px;
 	background: var(--bg-dark);
-	border: 1px solid var(--hl);
+	border: 1px solid var(--bg-subtle);
 	margin-bottom: 1em;
 	padding: 0em 1em 0em 1em;
 }


@@ 126,14 113,14 @@ label {
 }
 label.button, button, select {
 	font-size: 16px;
-	color: var(--fg);
+	color: blue;
 	background: var(--bg-page);
-	border: 1px solid var(--hl);
+	border: 1px solid var(--bg-subtle);
 	padding: 0.5em;
 	white-space: nowrap;
 }
 button.yeet {
-	background: var(--accent);
+	background: var(--hl);
 	font-weight: bold;
 	color: var(--bg-page);
 }


@@ 183,14 170,14 @@ input[type=file] {
 }
 
 .glow {
-	box-shadow: 0px 0px 16px var(--hl);
+	box-shadow: 0px 0px 16px var(--bg-subtle);
 }
 
 .honk {
 	max-width:640px;
 	margin: auto;
 	background: var(--bg-dark);
-	border: 1px solid var(--hl);
+	border: 1px solid var(--bg-subtle);
 	margin-bottom: 1em;
 	padding-left: 1em;
 	padding-right: 1em;


@@ 218,7 205,7 @@ input[type=file] {
 		border: 1px solid var(--fg);
 	}
 .honk	a {
-		color: var(--fg);
+		color: blue;
 	}
 .honk	header {
 		white-space: nowrap;


@@ 235,12 222,10 @@ input[type=file] {
 		}
 .honk	header	img {
 			float: left;
-			background: var(--fg);
 			margin-right: 1em;
+			background: var(--bg-subtle);
 			width: 47px;
 			height: 47px;
-			border-radius:50%;
-			border: solid 3px var(--accent);
 			padding:5px;
 		}
 .honk	header	p {


@@ 273,6 258,7 @@ input[type=file] {
 .limited {
 	border: 1px solid var(--fg-limited);
 	color: var(--fg-limited);
+	
 }
 .limited	.glow {
 		box-shadow: 0px 0px 16px var(--fg-limited);