ctucx.git: stagit

add new css

diff --git a/style.css b/style.css
@@ -1,257 +1,333 @@
-body {
-	color: #000;
-	background-color: #fff;
-	font-family: sans-serif;
-	max-width: 800px;
-	margin: 8px auto;
-	padding: 5px;
-	line-height: 1.5;
-}
-
-#branches,
-#tags,
-#index,
-#log,
-#files {
+* {
 	font-family: monospace;
+	line-height: 1.25;
 }
 
-#head, #content, .table-container {
-	max-width: 800px;
-	overflow-x: auto;
-	margin: auto;
+*, ::after, ::before {
+    box-sizing: border-box;
 }
 
-#log, #index {
-	min-width: 600px;
-	width: 100%;
-	overflow-x: auto;
+body {
+	margin: 0 auto;
+	max-width: 960px;
 }
 
-pre:not(#about) {
-	overflow-x: auto;
-	border: 1px solid #d2d2d2;
-	border-radius: 4px;
-	padding: 10px;
+img {
+	max-width: 900px;
 }
 
 a {
-	color: #00c;
+	color: black;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
 }
 
-#head table {
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
+header {
+	margin: 10px;
 }
 
-#head table td:first-child {
-	padding: 0 0.4em 0 0;
+header h1 {
+	color: #000;
+	font-size: 2em;
+	font-weight: bold;
+	margin-bottom: 0;
 }
 
-#head table td:last-child {
-	padding: 0 0 0 0.4em;
+header p {
+	color: #777;
+	margin-top: 0;
 }
 
-#head p {
-	margin: 0;
+nav {
+	margin-top: 2em;
+	padding: 0px 1em;
+	vertical-align: bottom;
 }
 
-#files .dir {
-	font-weight: bold;
+nav a {
+	color: #777;
 	text-decoration: none;
+	padding: 2px 0.75em;
+	font-size: 110%;
 }
 
-.url {
-	font-family: monospace;
+nav a.active {
+	color: #000;
+	background-color: #ccc;
+}
+
+main {
+	padding: 1em;
 }
 
-#home h1 {
-	font-size: 1.5em;
+footer {
+	margin-top: 0;
 	text-align: center;
-	margin-top: 1em;
+	font-size: 1em;
+	color: #ccc;
 }
 
-#home h2 {
-	font-size: 1.25em;
-	margin-top: 2.5em;
+dl {
+	margin: 0;
 	margin-bottom: 1em;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	font-size: 1em;
-	margin: 0;
+.breadcrumb {
+	background-color: #ccc;
+	padding: 2px 1em;
 }
 
-.md h1 {
-	font-size: 1.5em;
+
+
+/***
+ *
+ * Tables
+ *
+ ***/
+
+table {
+	width: 100%;
 }
 
-.md h2 {
-	font-size: 1.25em;
+thead {
+	font-weight: bold;
 }
 
-img, svg, h1, h2 {
-	vertical-align: middle;
+table.files > thead > tr > td:nth-of-type(1) {
+	width: 10%;
 }
 
-img, svg {
-	border: 0;
+table.files > thead > tr > td:nth-of-type(2) {
+	width: 70%;
 }
 
-a:target {
-	background-color: #ccc;
+table.files > thead > tr > td:nth-of-type(3),
+table.files > thead > tr > td:nth-of-type(4) {
+	width: 10%;
 }
 
-a.d,
-a.h,
-a.i,
-a.line {
-	text-decoration: none;
+table.repositories > tbody > tr > td:nth-of-type(3),
+table.files > tbody > tr > td:nth-of-type(1) {
+	white-space: nowrap;
 }
 
-#blob a {
-	color: #777;
+
+
+/***
+ *
+ * diffstat
+ *
+ ***/
+
+.diffstat {
+	width: 100%;
+	display: table;
 }
 
-#blob a:hover {
-	color: blue;
-	text-decoration: none;
+.diffstat > div {
+	display: table-row;
 }
 
-table thead td {
-	font-weight: bold;
+.diffstat > div > div {
+	display: table-cell;
 }
 
-table td {
-	padding: 0 0.4em;
+.diffstat > div > div:nth-of-type(1) {
+	padding-right: 12px;
 }
 
-#content table td {
-	vertical-align: top;
-	white-space: nowrap;
+.diffstat > div > div:nth-of-type(3),
+.diffstat > div > div:nth-of-type(4) {
+	padding-right: 5px;
 }
 
-#branches tr:hover td,
-#tags tr:hover td,
-#index tr:hover td,
-#log tr:hover td,
-#files tr:hover td {
-	background-color: #eee;
+.diffstat > div > div:nth-of-type(2) {
+	padding-right: 15px;
 }
 
-#index tr td:nth-child(2),
-#tags tr td:nth-child(3),
-#branches tr td:nth-child(3),
-#log tr td:nth-child(2) {
-	white-space: normal;
+.diffstat > div > div:nth-of-type(1),
+.diffstat > div > div:nth-of-type(2),
+.diffstat > div > div:nth-of-type(3),
+.diffstat > div > div:nth-of-type(4) {
+    width: 1%;
+    white-space: nowrap;
 }
 
-td.num {
-	text-align: right;
+
+
+/***
+ *
+ *  events (e.g. commit)
+ *
+ ***/
+
+.event {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding: .5rem;
+	margin: .5rem 0;
+	background: #f8f9fa;
 }
 
-.desc {
-	color: #777;
+.event :last-child {
+    margin-bottom: 0;
+}
+
+.event pre {
+    padding-left: 0;
+    padding-right: 0;
+    background: 0 0;
+	display: block;
+	font-size: 87.5%;
+	color: #212529;
+}
+
+.event .commit pre {
+	text-overflow: ellipsis;
+    overflow: none;
+}
+
+.log a {
+	text-decoration: none;
 }
 
-hr {
-	border: 0;
-	border-top: 1px solid #777;
-	height: 1px;
+.log div:hover {
+	background-color: #ddd;
 }
 
+
+/***
+ *
+ *  code viewer (blob page)
+ *
+ ***/
+
 pre {
-	font-family: monospace;
+	background-color: #ddd;
+	color: #212529;
+	overflow: auto;
+	margin: 0;
+	padding: .25rem;
+	font-size: 85%;
 }
 
-.A,
-span.i,
-pre a.i {
-	color: #181;
+pre code, pre .line-number {
+	display: block;
 }
 
-.D,
-span.d,
-pre a.d {
-	color: #e02;
+pre .line-number {
+	color: black;
+	float: left;
+	margin: 0 1em 0 -1em;
+	border-right: 1px solid;
+	text-align: right;
 }
 
-pre a.h:hover,
-pre a.i:hover,
-pre a.d:hover {
-	text-decoration: none;
+pre .line-number a {
+	padding: 0 .5em 0 1em;
 }
 
-.md table {
-	border-collapse: collapse;
-	margin: 1em 1em;
-	border: 1px solid #d2d2d2;
+.insertion {
+	color: #080;
 }
 
-.md table td,
-.md table th {
-	padding: 0.25em 1em;
-	border: 1px solid #d2d2d2;
+.deletion {
+	color: #800;
 }
 
-#index .cat td {
+
+/***
+ *
+ *  overview page
+ *
+ ***/
+
+td.sublevel-repo {
+	padding-left: 1.5em;
+}
+
+td.reposection {
+	color: #888;
 	font-style: italic;
 }
 
-#index .repo td:first-child {
-	padding-left: 1.5em;
+
+
+/***
+ *
+ *  grid-system
+ *
+ ***/
+
+.container {
+	width: 100%;
+	margin-left: -2%;
+	margin-right: -2%;
+}
+
+.row {
+	position: relative;
+	width: 100%;
+}
+
+.row [class^="col"] {
+	float: left;
+	margin: 0 2%;
+	min-height: 0.125rem;
+}
+
+.row::after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+	width: 96%;
+}
+
+@media only screen and (min-width: 45em) {  /* 720px */
+	.col-1  { width: 4.33%; }
+	.col-2  { width: 12.66%; }
+	.col-3  { width: 21%; }
+	.col-4  { width: 29.33%; }
+	.col-5  { width: 37.66%; }
+	.col-6  { width: 46%; }
+	.col-7  { width: 54.33%; }
+	.col-8  { width: 62.66%; }
+	.col-9  { width: 71%; }
+	.col-10 { width: 79.33%; }
+	.col-11 { width: 87.66%; }
+	.col-12 { width: 96%; }
+}
+
+
+
+/***
+ *
+ *  helper
+ *
+ ***/
+
+.responsive {
+	width: 100%;
+	overflow: auto;
+}
+
+.center-text {
+	text-align: center;
+}
+
+.right {
+	float: right;
 }
 
-@media (prefers-color-scheme: dark) {
-	body {
-		background-color: #111;
-		color: #ccc;
-	}
-	hr {
-		border-color: #555;
-	}
-	a {
-		color: #4d80b3;
-	}
-	a:target {
-		background-color: #222;
-	}
-	.desc {
-		color: #aaa;
-	}
-	#blob a {
-		color: #555;
-	}
-	#blob a:target {
-		color: #eee;
-	}
-	#blob a:hover {
-		color: #56c8ff;
-	}
-	pre a.h {
-		color: #0bb;
-	}
-	.A,
-	span.i,
-	pre a.i {
-		color: #1a1;
-	}
-	.D,
-	span.d,
-	pre a.d {
-		color: #e44;
-	}
-	#branches tr:hover td,
-	#tags tr:hover td,
-	#index tr:hover td,
-	#log tr:hover td,
-	#files tr:hover td {
-		background-color: #111;
-	}
-	pre:not(#about),
-	.md table,
-	.md table td,
-	.md table th {
-		border-color: #555;
-	}
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
 }