make updates

assets/public/css/styles.css

@@ -1,153 +1,146 @@
-* { padding: 0; margin: 0; }
-
+* {
+    padding: 0;
+    margin: 0;
+}
 body {
-	font-family: sans-serif;
-	text-rendering: optimizespeed;
+    font-family: 'Roboto', sans-serif;
+    text-rendering: optimizespeed;
 }
-
 a {
-	color: #006ed3;
-	text-decoration: none;
+    color: #006ed3;
+    text-decoration: none;
 }
-
-a:hover,
-h1 a:hover {
-	color: #319cff;
+a:hover, h1 a:hover {
+    color: #319cff;
 }
-
-header,
-#summary {
-	padding-left: 7%;
-	padding-right: 7%;
+header, #summary {
+    padding-left: 7%;
+    padding-right: 7%;
 }
-
-th:first-child,
-td:first-child {
-	padding-left: 7%;
+th:first-child, td:first-child {
+    padding-left: 1em;
 }
-
-th:last-child,
-td:last-child {
-	padding-right: 5%;
+th:last-child, td:last-child {
+    padding-right: 1em;
 }
-
 header {
-	background-color: #FFC107;
-	padding-top: 1.5em;
-	padding-bottom: 1.5em;
+    background-color: #03A9F4;
+    color: #fff;
+    padding: 1.3em 0;
 }
+header i {
 
+margin: 0 .2em;
+
+color: rgba(255,255,255,0.3);
+
+font-style: normal;
+}
 h1 {
-	font-size: 20px;
-	font-weight: normal;
-	white-space: nowrap;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
+    font-size: 1.5em;
+    font-weight: normal;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
-
 h1 a {
-	color: inherit;
+    color: inherit;
 }
-
 h1 a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
-
 main {
-	display: block;
+    display: block;
 }
-
 .meta {
-	font-size: 12px;
-	font-family: Verdana, sans-serif;
-	/* border-bottom: 1px solid #9C9C9C; */
-	padding-top: 15px;
-	padding-bottom: 15px;
-	background-color: #FFA000;
-	color: #fff;
+    font-size: 12px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: #4FC3F7;
+    color: #fff;
 }
-
 .meta-item {
-	margin-right: 1em;
+    margin-right: 1em;
 }
-
 table {
-	width: 100%;
-	border-collapse: collapse;
+    width: 100%;
+    border-collapse: collapse;
 }
-
 tr {
-	border-bottom: 1px dashed #dadada;
+    border-bottom: 1px dashed #dadada;
 }
-
 tr:not(:first-child):hover {
-	background-color: #ffffec;
+    background-color: #ffffec;
 }
-
-th,
-td {
-	text-align: left;
-	padding: 10px 0;
+th, td {
+    text-align: left;
+    padding: 1em 0;
 }
-
 th {
-	padding-top: 15px;
-	padding-bottom: 15px;
-	font-size: 16px;
-	white-space: nowrap;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 16px;
+    white-space: nowrap;
 }
-
 th a {
-	color: black;
+    color: black;
 }
-
 th svg {
-	vertical-align: middle;
+    vertical-align: middle;
 }
-
 td {
-	font-size: 14px;
+    font-size: 14px;
 }
-
 td:first-child {
-	width: 50%;
+    width: 50%;
 }
-
-th:last-child,
-td:last-child {
-	text-align: right;
+th:last-child, td:last-child {
+    text-align: right;
 }
-
 td:first-child svg {
-	position: absolute;
+    position: absolute;
 }
-
-td .name,
-td .goup {
-	margin-left: 1.75em;
-	word-break: break-all;
-	overflow-wrap: break-word;
-	white-space: pre-wrap;
+td .name, td .goup {
+    margin-left: 1.1em;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    color: #424242;
+    vertical-align: middle;
 }
-
 footer {
-	padding: 40px 20px;
-	font-size: 12px;
-	text-align: center;
+    padding: 40px 20px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.container {
+	margin: 0 auto;
+	width: 95%;
+	max-width: 960px;
+}
+
+
+.listing i {
+  vertical-align: middle;
+}
+
+pre {
+  border: 1px solid #e6e6e6;
+    background-color: #f5f5f5;
+    border-radius: .5em;
+    padding: 1em;
 }
 
 @media (max-width: 600px) {
-	.hideable {
-		display: none;
-	}
-
-	td:first-child {
-		width: auto;
-	}
-
-	th:nth-child(2),
-	td:nth-child(2) {
-		padding-right: 5%;
-		text-align: right;
-	}
+    .hideable {
+        display: none;
+    }
+    td:first-child {
+        width: auto;
+    }
+    th:nth-child(2), td:nth-child(2) {
+        padding-right: 5%;
+        text-align: right;
+    }
 }