update style

website/css/styles.css

@@ -1,8 +1,207 @@
-#github-card {
+* {
-    background-color: gray;
+   box-sizing: border-box;   
 }
 
-#github-card a{
+html {
-    text-decoration : none;
+	overflow-y: scroll;
-    color : white; 
+}
+
+body {
+	background-color: #212830;
+	color: #fff;
+	font-family: sans-serif;
+	padding: 0;
+	margin: 0;
+}
+
+img {
+   width: 5%;
+   height: auto;
+}
+
+/* link */
+a {
+    text-decoration: none;
+}
+
+    a:link,
+    a:visited,
+    th a:visited {
+        color: #78b2c3;
+    }
+
+    a:hover,
+    a:focus,
+    a:visited,
+    a:visited:hover {
+        color: #78b2c3;
+        text-decoration: underline;
+    }
+
+#header a, #menu a {
+	text-decoration: none;
+}
+
+#header {
+	background-color: #2e2e3b;
+	clear: both;
+	color: #555;
+	font-size: 1.78em;
+	padding: 0.7ex 0.7ex 0.7ex 0.7em;
+}
+
+#headerLink {
+	color: #ffffff;
+	margin-left: 5px;
+}
+
+#menu {
+	clear: both;
+	color: #069;
+	overflow: hidden;
+	background-color: #587397;
+	padding: 0.7ex;
+}
+
+#menu a {
+	padding: 0.5ex 1ex;
+	color: #fff;
+}
+
+#menu a:hover {
+	background-color: #a4cad8;
+}
+
+#intro {
+   background-color: #0d1117;
+   margin: 0 0 0 0;
+   font-size: 1.0em;
+   text-align: left;
+   padding: 0.4em 1.1em 0.9em;
+}
+
+/* general layout */
+#main-content {
+    width: 97%;
+    margin: 0 auto;
+    text-align: left;
+}
+
+#content-left-wrapper {
+    float: left;
+    width: 100%; /* req to keep content above sidebar in source code */
+}
+
+#content-left {
+    margin: 0 340px 0 0;
+}
+
+#content-right {
+    float: left;
+    width: 300px;
+    margin-left: -300px;
+}
+
+div.nav-border {
+    margin-bottom: 1.5em;
+    padding: 0.65em;
+    border-left: 1px solid #bcd;
+}
+
+/* home: sidebar */
+#nav-sidebar ul {
+    list-style: none;
+    margin: 0.5em 0 0.5em 1em;
+    padding: 0;
+}
+
+.right {
+	float: right;
+	margin: 0;
+	padding: 0;
+}
+
+code {
+  font-size: 105%;
+  color: #e0e6ec;
+  background-color: #151b23;
+  border-radius: 3px;
+  padding: 0 3px;
+}
+
+pre {
+   font-family: monospace, monospace;
+   margin: 1em;
+}
+
+pre code {
+   padding:10px;
+   display: block;
+   overflow: auto;
+}
+
+div.quicklink {
+   height: 200vh;
+   position: sticky;
+   z-index: 1;
+   top: 0;
+   left: 0;
+   background-color: #111;
+	float: left;
+	margin: 0 1px 0 0;
+	padding: 20px 10px;
+	border-right: 1px dotted #ccc;
+	width: 200px;
+   overflow: auto;
+}
+
+div.install {
+   margin-left: 200px;
+}
+
+/* responsive */
+@media only screen and (max-width: 768px) {
+   #content-right {
+      border-top: 1px solid #bcd;
+      width: 100%;
+      margin-left: 0px;
+   }
+
+   #content-left {
+      margin: 0 0 0 0;
+   }
+
+   div.nav-border {
+      border-left: 0px;
+   }
+}
+
+@media only screen and (max-width: 600px) {
+   #header {
+      font-size: 6vw;
+   }
+
+}
+
+#driver {
+   border-collapse: collapse;
+   width: 80%;
+}
+
+th {
+   text-align: center;
+   height:45px;
+}
+
+tr:nth-child(even) {
+   background-color: #313840;
+}
+
+td {
+   height: 40px;
+   padding-left: 7px;
+}
+
+th, td {
+   border: 1px solid white;
 }