From f3f74a53c3d6c178e729aeb5bba014750b9867fc Mon Sep 17 00:00:00 2001 From: echo532 <84986609+echo532@users.noreply.github.com> Date: Sat, 2 Sep 2023 17:17:59 -0400 Subject: [PATCH 01/12] Create .gitignore --- .gitignore | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..65ddb07f --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ + +node_modules/.bin/mime +node_modules/.bin/mime.cmd +node_modules/.bin/mime.ps1 +node_modules/.package-lock.json +node_modules/mime/CHANGELOG.md +node_modules/mime/cli.js +node_modules/mime/index.js +node_modules/mime/LICENSE +node_modules/mime/lite.js +node_modules/mime/Mime.js +node_modules/mime/package.json +node_modules/mime/README.md +node_modules/mime/types/other.js +node_modules/mime/types/standard.js +package-lock.json From bf9b5437c28fbf9c3cf10dea51f7c2f9eb1adc47 Mon Sep 17 00:00:00 2001 From: echo532 <84986609+echo532@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:07:48 -0400 Subject: [PATCH 02/12] created timeline baseline --- public/css/main.css | 4 +- public/css/timeline.css | 136 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 15 +++++ public/js/main.js | 11 ++++ public/js/timeline.js | 37 +++++++++++ public/test.html | 10 +++ public/timeline.html | 34 ++++++++++ server.improved.js | 3 +- 8 files changed, 247 insertions(+), 3 deletions(-) create mode 100644 public/css/timeline.css create mode 100644 public/js/timeline.js create mode 100644 public/test.html create mode 100644 public/timeline.html diff --git a/public/css/main.css b/public/css/main.css index 7cf6207b..485b75bb 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,4 +1,4 @@ body { - background:black; - color:white; + background:gray; + color:black; } \ No newline at end of file diff --git a/public/css/timeline.css b/public/css/timeline.css new file mode 100644 index 00000000..3ecbd11b --- /dev/null +++ b/public/css/timeline.css @@ -0,0 +1,136 @@ + + +* { + box-sizing: border-box; + } + + /* Set a background color */ + body { + background-color: #474e5d; + font-family: Helvetica, sans-serif; + } + + /* The actual timeline (the vertical ruler) */ + .timeline { + position: relative; + max-width: 500px; + margin: 0 auto; + } + + /* The actual timeline (the vertical ruler) */ + .timeline::after { + content: ''; + position: absolute; + width: 6px; + background-color: black; + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; + } + + /* Container around content */ + .container { + padding: 10px 40px; + position: relative; + background-color: inherit; + width: 50%; + } + + /* The circles on the timeline */ + .container::after { + content: ''; + position: absolute; + width: 25px; + height: 25px; + right: -17px; + background-color: white; + border: 4px solid #FF9F55; + top: 15px; + border-radius: 50%; + z-index: 1; + } + + /* Place the container to the left */ + .left { + left: 0; + } + + /* Place the container to the right */ + .right { + left: 50%; + } + + /* Add arrows to the left container (pointing right) */ + .left::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + right: 30px; + border: medium solid white; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent white; + } + + /* Add arrows to the right container (pointing left) */ + .right::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + left: 30px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; + } + + /* Fix the circle for containers on the right side */ + .right::after { + left: -16px; + } + + /* The actual content */ + .content { + padding: 20px 30px; + background-color: white; + position: relative; + border-radius: 6px; + } + + /* Media queries - Responsive timeline on screens less than 600px wide */ + @media screen and (max-width: 600px) { + /* Place the timelime to the left */ + .timeline::after { + left: 31px; + } + + /* Full-width containers */ + .container { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + + /* Make sure that all arrows are pointing leftwards */ + .container::before { + left: 60px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; + } + + /* Make sure all circles are at the same spot */ + .left::after, .right::after { + left: 15px; + } + + /* Make all right containers behave like the left ones */ + .right { + left: 0%; + } + } \ No newline at end of file diff --git a/public/index.html b/public/index.html index b6de0443..31ea11e8 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,14 @@
Hello its my first HTML page
+