working on alignment of items in footer

[gitweb-theme-danix.git] / gitweb-danixland / gitweb.css

diff --git a/gitweb-danixland/gitweb.css b/gitweb-danixland/gitweb.css
index 279553f..fc87875 100644 (file)
--- a/gitweb-danixland/gitweb.css
+++ b/gitweb-danixland/gitweb.css
@@ -1,3 +1,7 @@
+/* Fonts
+------------------------------------------------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');
+
 /* Reset
 ------------------------------------------------------------------------- */
 
@@ -47,8 +51,24 @@ a { outline: none; }
   --bg: #D8D9CF;
   --bg-alt: #F0EEED;
   --fg: #393E46;
-  --link: #CF4DCE;
+  --link: #FF8B13;
+  --link-visited: #e7b788;
   --border: 34,40,49,0.035;
+  --accent: #FD7014;
+  --dark-grey: #393E46;
+/* Icons */
+  --file-icon: url("file-dark.svg");
+  --dir-icon: url("folder-dark.svg");
+  --ref-icon: url("commit-dark.svg");
+  --tag-icon: url("tag-dark.svg");
+  --branch-icon: url("merge-dark.svg");
+  --rss-icon:url("rss-dark.svg");
+  --opml-icon:url("opml-dark.svg");
+/* social colors */
+  --twitter: #1DA1F2;
+  --instagram: #E4405F;
+  --spotify: #1ed760;
+  --github: #6e5494;
 }
 @media screen and (prefers-color-scheme: dark) {
   :root {
@@ -56,11 +76,18 @@ a { outline: none; }
     --bg-alt: #222831;
     --fg: #D8D9CF;
     --border: 216,217,207,0.2;
+  --file-icon: url("file.svg");
+  --dir-icon: url("folder.svg");
+  --ref-icon: url("commit.svg");
+  --tag-icon: url("tag.svg");
+  --branch-icon: url("merge.svg");
+  --rss-icon:url("rss.svg");
+  --opml-icon:url("opml.svg");
   }
 }
 
 
-/* General - light theme
+/* General
 ---------------------------------------------------------------------------- */
 
 html {
@@ -69,7 +96,7 @@ html {
 }
 
 body {
-  font: 13px Helvetica,arial,freesans,clean,sans-serif;
+  font: 13px 'Montserrat',Helvetica,arial,freesans,clean,sans-serif;
   line-height: 1.4;
   margin: 0 0 105px;
   background-color: var(--bg);
@@ -78,32 +105,41 @@ body {
 
 /* Monospaced Fonts */
 .sha1, .mode, .diff_tree .list, .pre, .diff, .patchset {
-  font-family: 'Consolas','Bitstream Vera Sans Mono',monospace;
+  font-family: 'Red Hat Mono','Consolas','Bitstream Vera Sans Mono',monospace;
 }
 
 a:link, a:visited {
-  color: var(--link);
   text-decoration: none;
 }
 
+a:link {
+  color: var(--link);
+}
+
+a:visited {
+  color: var(--link-visited);
+}
+
 a:hover {
   text-decoration: underline;
 }
 
 td.list a[href*='tree'], td.list a[href*='blob'] {
-  padding-left: 20px;
+  padding-left: 40px;
   display: block;
   float: left;
-  height: 16px;
-  line-height: 16px;
+  height: 32px;
+  line-height: 32px;
 }
 
+/* Folder Icon */
 td.list a[href*='tree'] {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABq0lEQVQ4y8WTu4oUQRSGv+rtGVuxhwVFdFEEE2c3d0HYTEMTn8DEVxADQTDUF9DMwMxQMBMx8AEWzRQ3cBHd9TI91+2urjq/QbczY2IygSep4nD+79yqnCRWsYQVbWVACvDh5ZXdrLe15dwyT1TjT/sxFFeB6i+VA2B6+cb7kAI4Jf0LO087zjlQI8Y5Qvnj0sHug321XoC1bk+K9eHk6+s7wPMUgKAS88eqb4+Jfg2SHs7lZBvX2Nh+2EUCDGSAcMnJsx9f7NxfAGqXyDzRd5EJO/pMPT1gcviGTnYOVIN5pAAE8v7dLrKL8xnglFk4ws9Afko9HpH3b5Gd2mwb/lOBmgrSdYhJugDUCenxM6xv3p4HCsP8F0LxCsUhCkMURihOyM7fg0osASTFEpu9a4LjGIUCqwcoDiEUrX+E4hRUQb20RiokC1j9vckUhygU7X3QZh7NAVKYL7YBeMkRUfjVCotF2XGIwnghtrJpMywB5G0QZj9P1JNujuWJ1AHLQadRrACPkuZ0SSSWpeStWgDK6tHek5vbiOs48n++XQHurcf0rFng//6NvwG+iB9/4duaTgAAAABJRU5ErkJgggo=) center left no-repeat;
+  background: var(--dir-icon) center left no-repeat;
 }
 
+/* File Icon */
 td.list a[href*='blob'] {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA6ElEQVQoFQXBMW5TQRgGwNnHnoE0QbiCjoIooUmTU3AuS1BwIoTSUdJBigg3GCWOg9/++zHTop078wIAsPMrE4SL5/1aIyMjIyMjz/m0tbFECFdrPeaQQw75mz/5nZH7fN7aWILmauSYfznmmIfss8vIUx7zZWsTTXM5vpWvTk5Wq9VHQP/gtgOLa0Qpw940vAQdaG6thpOhlOkG0AEuAVGmEkAH+G4YSikxXQM6wDsAMRFAB/ihDNNUmN4DOsAbBAEAdICfpmmaAt4COoj2GgCASbIkZh1NAACznhQt2itnFgAAlF3u/gMDtJXPzQxoswAAAABJRU5ErkJgggo=) center left no-repeat;
+  background: var(--file-icon) center left no-repeat;
 }
 
 i {
@@ -120,7 +156,7 @@ td, th {
 
 #generating_info {
   font-size: 10px;
-  color: #aaa;
+  color: var(--fg);
   text-align: center;
 }
 
@@ -138,7 +174,7 @@ td, th {
   padding: 0 27px;
   margin-bottom: 20px;
   font-size: 20px;
-  font-family: Helvetica, Arial, Freesans, Clean, sans-serif;
+  font-family: 'Montserrat', Helvetica, Arial, Freesans, Clean, sans-serif;
   background: var(--bg); /* old browsers */
   background: -moz-linear-gradient(top, var(--bg) 0%, var(--bg-alt) 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--bg)), color-stop(100%,var(--bg-alt))); /* webkit */
@@ -172,61 +208,88 @@ td, th {
 /* Page Footer
 ---------------------------------------------------------------------------- */
 
-.page_footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.page_footer,
+.site-footer {
   width: 100%;
-  height: 80px;
-  line-height: 80px;
-  margin-top: 15px;
-  background: var(--bg);
+  background: var(--bg-alt);
+  margin: 0;
+}
+
+.page_footer {
+  height: 40px;
+  line-height: 40px;
   border-top: 2px solid var(--border);
   border-bottom: 1px solid var(--border);
 }
 
 .page_footer_text {
   color: var(--fg);
+  text-align: right;
+  padding-right: 2em;
   display: inline;
-  float: left;
-  margin-left: 25px;
-  width: 80%;
+  float: right;
+  width: calc(100% - 2em);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-a.rss_logo {
-  float: right;
-  padding: 3px 1px;
-  width: 35px;
-  line-height: 10px;
-  border: 1px solid;
-  border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
-  color: #ffffff;
-  background-color: #ff6600;
-  font-weight: bold;
-  font-family: sans-serif;
-  font-size: 80%;
-  text-align: center;
-  text-decoration: none;
-  margin-top: 30px;
-  margin-left: 5px;
+.site-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: stretch;
+}
+
+.site-footer .columns {
+  display: block;
+  flex-grow: 1;
+  flex-basis: auto;
+  align-self: stretch;
+  order: 0;
 }
 
-a.rss_logo:hover {
-  background-color: #ee5500;
+.social-links ul li {
+  display: inline-block;
+  margin: 1em;
+  padding: 0.5em;
 }
 
-.rss_logo {
-  margin-right: 25px;
-  background: yellow;
+.social-links ul li a {
+  height: 32px;
+  text-align: center;
+}
+.social-links ul li.spotify a {
+  color: var(--spotify);
+}
+.social-links ul li.twitter a {
+  color: var(--twitter);
+}
+.social-links ul li.instagram a {
+  color: var(--instagram);
+}
+.social-links ul li.github a {
+  color: var(--github);
 }
 
-.rss_logo:last-child {
-  margin-right: 5px;
+a.rss_logo {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
+
 /* Index include
 ---------------------------------------------------------------------------- */
 
@@ -251,7 +314,7 @@ a.rss_logo:hover {
 .history {
   width: 95%;
   margin: 0 auto 15px auto;
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--border);
   -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
   box-shadow: 0 0 3px rgba(0,0,0,0.2);
@@ -399,13 +462,13 @@ th .header {
 }
 
 .readme pre {
-  font-family: monospace;
+  font-family: 'Red Hat Mono', monospace;
   margin: 1em 0;
   white-space: pre;
 }
 
 .readme tt, .readme code, .readme kbd, .readme samp {
-  font-family: monospace;
+  font-family: 'Red Hat Mono', monospace;
 }
 
 .readme blockquote {
@@ -514,8 +577,8 @@ span.refs span {
   color: #707070;
   display: inline-block;
   margin: 0;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
   border-radius: 3px;
   height: 18px;
   padding: 0 6px;
@@ -526,13 +589,14 @@ span.refs span.ref {
   color: #707070;
   display: inline-block;
   margin: 0;
-  background-color: #c4c4ff;
-  border: 1px solid #7878ff;
+  background-color: var(--bg-alt);
+  border: 1px solid var(--link);
   border-radius: 3px;
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSUnpolg7AAAAHJQTFRFAAAAVVWqZmbMVVXVYGDgbW3td3fuc3PzdHT0cHD1d3f6dHT6dnb7dHT7dnb8dnb8dnb9d3f9dnb+eHj+d3f+eHj+d3f+d3f+d3f+eHj+d3f+eHj+d3f+eHj+d3f+d3f+eHj+d3f+d3f+d3f+eHj/////V9oQhQAAACR0Uk5TAAIEBQcNDhMVGCotNTZAT217i5CgobvExtjZ4eLr7vP09ff7uqQ6cgAAAAFiS0dEJcMByQ8AAABUSURBVBjTpc43AoAwDENRh95bgNBM1f3PyOpslD++RSJ61YgH5M2IbIkn4GocSR1MZVBL4t2n4FgkbaxI8Sqph041WknZCWAIrcmEUbpf3lNe0N9u59YFYHnZ78gAAAAASUVORK5CYII=);
+/* Node vertical */
+  background-image: var(--ref-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -547,7 +611,8 @@ span.refs span.tag {
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSUZZ+h9RwAAAGZQTFRFAAAAtrYkwMBAwMBAx8c4yso11NQ71NQ51dU52Ng71tY519c719c719c62Ng719c719c62Ng72dk62Ng62Ng72Ng72dk62Ng72Ng62dk62dk72dk62Ng62dk72Ng72Ng72dk7////ou/AnQAAACB0Uk5TAAYHCxESLjRCWWlqa4uNkpissbrO19jc3ufs8vf6/f7atAU2AAAAAWJLR0QhxGwNFgAAAF1JREFUGFeNy0cOgCAABVGw94rY5d//lC7omhhn+ZIh5Gf1xPk0Zi5dAABROIQjSU/fsAXhDkCUljAv8jW2wlQpaixpo4Nj+dtatVpjkSJjLNaizRVpvhBCu/4h391jzw1lU12Z7wAAAABJRU5ErkJggg==);
+/* tag icon */
+  background-image: var(--tag-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -562,7 +627,8 @@ span.refs span.head {
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSYDsafX/gAAAUpJREFUOMvVkjFLA0EQhd/s7l06MSCihbV/wC5/QBDEIFYWprRIIQQJFqKFQi4kUbBQsFSwtrUQLQULUTBFLCzVIgimCXe7z0q5yIWcqfRVwzDzMTNvgL8mSUqWw3JOtFQJdsIwLDYyjdYgkEmkazl2oVtQWk36nn8AYBYASmFpxmizGtnoqO7Vb+M9KglEkASdpWU872nvVCiPRpuTnz2JIHGyqX3d0kZfR1G0Ht+g/do+FIhOBbLW3n/FNb/28D0puZ+dyL44ur1UoH5yzt2JyIj6UGdDgwrPhYzSagNEszJaeU/lWlylbmnaeGZZICsAppxzi6nt73HK85oQCMknOuarpno+FIjglVjZDXaCS2yDv3rIHlCb88FY0BlUl3hs7ektkhckb5DFWhoz+n12zr7ZPLpYUqLm0oBMn8NUzLhpAgjpWMS/1CcSJ3ykD7Rk1QAAAABJRU5ErkJggg==);
+/* git branch */
+  background-image: var(--branch-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -780,3 +846,21 @@ td.pre, div.pre, div.diff {
 .kwc    { color:#d4663d; }
 .kwd    { color:#2928ff; }
 
+/*
+ * Styling for my custom added sections
+ */
+
+/* Header */
+div.site-header {
+  background-color: var(--bg-alt);
+  color: var(--fg);
+  padding: 1em;
+}
+div.site-header h1 {
+  text-transform: uppercase;
+  font-size: 2em;
+}
+div.site-header h1 span.evident {
+  background-color: var(--accent);
+  color: var(--bg);
+}