✨ footer, subheader and github button (#10)

* ✨ 'by tjdev.de' subheader * ✨ add github button * ✨ add footer * 🩹 fix unfitting scrollbar color * 📦 compile html * 📦 compile jhtml
2021-05-07 17:41:30 +02:00 · 2021-05-07 17:41:30 +02:00 · c3a664f4e2
commit c3a664f4e2
parent 2e1d1f3cdd
8 changed files with 109 additions and 27 deletions
--- a/ui/html/index.css
+++ b/ui/html/index.css
@ -7,14 +7,19 @@ html, body {
  color: #d3d7de;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
  margin: 0;
-  padding: 0;
  overflow-x: hidden;
+  padding: 0;
+  scrollbar-color: #4d5765 #21252b !important;
 }

 input, button {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
 }

+#content {
+  min-height: calc(100vh - 9rem);
+}
+
 #header {
  height: 4rem;
  padding: 0.5rem;
@ -35,6 +40,9 @@ input, button {
  background-color: #2c3139;
  color: #99a2b2;
 }
+#header button.spaceleft {
+  margin-left: 1rem;
+}

 #title {
  margin-bottom: 5rem;
@ -44,10 +52,17 @@ input, button {
 #title h1 {
  font-size: 4rem;
  font-weight: 200;
+  margin-bottom: 1rem;
 }
 #title h1 span {
  color: #4c5666;
 }
+#title span {
+  color: #7c889c;
+}
+#title span a {
+  color: #7c889c;
+}

 #search {
  text-align: center;
@ -213,6 +228,16 @@ input, button {
  width: 1.2rem;
 }

+#footer {
+  color: #7c889c;
+  height: 9rem;
+  padding-top: 5rem;
+  text-align: center;
+}
+#footer a {
+  color: #7c889c;
+}
+
 .uncolored-svg {
  filter: invert(0.8);
 }
--- a/ui/html/index.css.map
+++ b/ui/html/index.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;EACA;;;AAED;EACC,aAhBU;;;AAkBX;EACC;;;AAED;EACC;EACA;EACA;;AACA;EACC,kBAhCS;EAiCT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACF;EACC;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAvEQ;EAwER;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA9FM;;AA+FR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA3HQ;EA4HR;;AAEF;EACC,OA3HS;EA4HT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA5JM;;AA6JP;EACC,OA5JM;;AA6JP;EACC,OAlKM;;AAmKP;EACC,OAjKM;;AAkKR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA1KM;;AA2KP;EACC,OAhLM;;AAiLR;EACC;EACA;;AACA;EACC,kBAtLM;EAuLN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAEF;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
--- a/ui/html/index.html
+++ b/ui/html/index.html
@ -6,4 +6,4 @@
 <meta content="utf-8" http-equiv="encoding">
 <script src="index.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-<div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div><script src="feather.js"></script>
+<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div><script src="feather.js"></script>
--- a/ui/jhtml-compat/index.css
+++ b/ui/jhtml-compat/index.css
@ -8,14 +8,19 @@ html, body {
  color: #d3d7de;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
  margin: 0;
-  padding: 0;
  overflow-x: hidden;
+  padding: 0;
+  scrollbar-color: #4d5765 #21252b !important;
 }

 input, button {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
 }

+#content {
+  min-height: calc(100vh - 9rem);
+}
+
 #header {
  height: 4rem;
  padding: 0.5rem;
@ -36,6 +41,9 @@ input, button {
  background-color: #2c3139;
  color: #99a2b2;
 }
+#header button.spaceleft {
+  margin-left: 1rem;
+}

 #title {
  margin-bottom: 5rem;
@ -45,10 +53,17 @@ input, button {
 #title h1 {
  font-size: 4rem;
  font-weight: 200;
+  margin-bottom: 1rem;
 }
 #title h1 span {
  color: #4c5666;
 }
+#title span {
+  color: #7c889c;
+}
+#title span a {
+  color: #7c889c;
+}

 #search {
  text-align: center;
@ -214,6 +229,16 @@ input, button {
  width: 1.2rem;
 }

+#footer {
+  color: #7c889c;
+  height: 9rem;
+  padding-top: 5rem;
+  text-align: center;
+}
+#footer a {
+  color: #7c889c;
+}
+
 .uncolored-svg {
  filter: invert(0.8);
 }
--- a/ui/jhtml-compat/index.css.map
+++ b/ui/jhtml-compat/index.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;EACA;;;AAED;EACC,aAhBU;;;AAkBX;EACC;;;AAED;EACC;EACA;EACA;;AACA;EACC,kBAhCS;EAiCT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACF;EACC;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAvEQ;EAwER;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA9FM;;AA+FR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA3HQ;EA4HR;;AAEF;EACC,OA3HS;EA4HT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA5JM;;AA6JP;EACC,OA5JM;;AA6JP;EACC,OAlKM;;AAmKP;EACC,OAjKM;;AAkKR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA1KM;;AA2KP;EACC,OAhLM;;AAiLR;EACC;EACA;;AACA;EACC,kBAtLM;EAuLN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAEF;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
--- a/ui/jhtml-compat/index.php
+++ b/ui/jhtml-compat/index.php
@ -5,4 +5,4 @@
 *js("///index.js")
 *js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js")
 *postjs("///feather.js")
-<div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div>
+<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div>
--- a/ui/raw/index.pug
+++ b/ui/raw/index.pug
@ -1,22 +1,35 @@
-#header
-	button: i( data-feather='globe' )
-	button: i( data-feather='sun' )
+#content

-#title
-	h1 dns-watch<span>.org</span>
+	#header
+		a( href='https://github.com/tjdev-de/dns-watch' )
+			button.spaceleft: i( data-feather='github' )
+		button: i( data-feather='globe' )
+		button: i( data-feather='sun' )
 		
-#search
-	#searchbar
-		.buttonspacer
-		input#dnswatch-search( type='text' placeholder='Search...' autofocus )
-		button#dnswatch-search-submit: i( data-feather='search' )
-		button#help: i( data-feather='help-circle' )
-	small Try "gnu.org", "wikipedia.org", "s.to" or your own website!
-	#loadani
-		#spinner
-		span loading...
-	#invaliddomain
-		i( data-feather='x' )
-		span invalid domain.
+	#title
+		h1 dns-watch
+			span .org
+		span by 
+			a( href='https://www.tjdev.de' ) tjdev.de

-#results
+	#search
+		#searchbar
+			.buttonspacer
+			input#dnswatch-search( type='text' placeholder='Search...' autofocus )
+			button#dnswatch-search-submit: i( data-feather='search' )
+			button#help: i( data-feather='help-circle' )
+		small Try "gnu.org", "wikipedia.org", "s.to" or your own website!
+		#loadani
+			#spinner
+			span loading...
+		#invaliddomain
+			i( data-feather='x' )
+			span invalid domain.
+
+	#results
+
+#footer
+	span dns-watch.org by 
+	a( href='https://www.tjdev.de' ) tjdev.de
+	span  | 
+	a( href='/imprint' ) imprint
--- a/ui/raw/index.sass
+++ b/ui/raw/index.sass
@ -16,12 +16,16 @@ html, body
 	color: $c-fg
 	font-family: $f-sans
 	margin: 0
-	padding: 0
 	overflow-x: hidden
+	padding: 0
+	scrollbar-color: lighten($c-bg, 20%) $c-bg !important

 input, button
 	font-family: $f-sans

+#content
+	min-height: calc(100vh - 9rem)
+
 #header
 	height: 4rem
 	padding: .5rem
@ -39,6 +43,8 @@ input, button
 		&:hover
 			background-color: lighten($c-bg, 5%)
 			color: darken($c-fg, 20%)
+		&.spaceleft
+			margin-left: 1rem

 #title
 	margin-bottom: 5rem
@ -47,8 +53,13 @@ input, button
 	h1
 		font-size: 4rem
 		font-weight: 200
+		margin-bottom: 1rem
 		span
 			color: darken($c-fg, 50%)
+	span
+		color: darken($c-fg, 30%)
+		a
+			color: darken($c-fg, 30%)

 #search
 	text-align: center
@ -187,6 +198,14 @@ input, button
 						vertical-align: -.2rem
 						width: 1.2rem

+#footer
+	color: darken($c-fg, 30%)
+	height: 9rem
+	padding-top: 5rem
+	text-align: center
+	a
+		color: darken($c-fg, 30%)
+
 .uncolored-svg
 	filter: invert(.8)