Add timeline styles

4 years ago · f1e201fc38
2 changed files with 30 additions and 2 deletions
--- a/client/public/styles.css
+++ b/client/public/styles.css
@ -1,3 +1,30 @@
-button {
-  background-color: aqua;
+ul.timeline {
+  list-style-type: none;
+  position: relative;
+}
+ul.timeline:before {
+  content: " ";
+  background: #d4d9df;
+  display: inline-block;
+  position: absolute;
+  left: 29px;
+  width: 2px;
+  height: 100%;
+  z-index: 400;
+}
+ul.timeline > li {
+  margin: 20px 0;
+  padding-left: 20px;
+}
+ul.timeline > li:before {
+  content: " ";
+  background: white;
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  border: 3px solid #22c0e8;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+  z-index: 400;
 }
--- a/client/views/layouts/Main.jsx
+++ b/client/views/layouts/Main.jsx
@ -7,6 +7,7 @@ export default function ({ user, children }) {
    <UserContext.Provider value={user}>
      <head>
        <link rel="stylesheet" href="/bootstrap.min.css"></link>
+        <link rel="stylesheet" href="/styles.css"></link>
        <script src="/jquery.min.js"></script>
        <script src="/bootstrap.min.js"></script>
      </head>