aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--static/ctimeline.css192
1 files changed, 192 insertions, 0 deletions
diff --git a/static/ctimeline.css b/static/ctimeline.css
new file mode 100644
index 0000000..0df312a
--- /dev/null
+++ b/static/ctimeline.css
@@ -0,0 +1,192 @@
+/*
+Copyright (c) 2021 by Nils Wittler (https://codepen.io/NilsWe/pen/FemfK)
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"),
+to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+/* ================ The Timeline ================ */
+
+.timeline {
+ position: relative;
+ width: 660px;
+ margin: 0 auto;
+ margin-top: 20px;
+ padding: 1em 0;
+ list-style-type: none;
+
+ font-family: monospace;
+ font-size: 112.5%;
+ line-height: 1.6em;
+}
+
+.timeline:before {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ content: ' ';
+ display: block;
+ width: 6px;
+ height: 100%;
+ margin-left: -3px;
+ background: rgb(80,80,80);
+ background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
+ background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
+ background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
+ background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
+ background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
+ z-index: 5;
+}
+
+.timeline li {
+ padding: 1em 0;
+}
+
+.timeline li:after {
+ content: "";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+.direction-left {
+ position: relative;
+ width: 300px;
+ float: left;
+ text-align: right;
+}
+
+.direction-right {
+ position: relative;
+ width: 300px;
+ float: right;
+}
+
+.flag-wrapper {
+ position: relative;
+ display: inline-block;
+ text-align: center;
+}
+
+.flag {
+ position: relative;
+ display: inline;
+ background: rgb(248,248,248);
+ padding: 6px 10px;
+ border-radius: 5px;
+
+ font-weight: 600;
+ text-align: left;
+}
+
+.direction-left .flag {
+ -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+ -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+ box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+}
+
+.direction-right .flag {
+ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+ -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+ box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+}
+
+.direction-left .flag:before,
+.direction-right .flag:before {
+ position: absolute;
+ top: 50%;
+ right: -40px;
+ content: ' ';
+ display: block;
+ width: 12px;
+ height: 12px;
+ margin-top: -10px;
+ background: #fff;
+ border-radius: 10px;
+ border: 4px solid rgb(255,80,80);
+ z-index: 10;
+}
+
+.direction-right .flag:before {
+ left: -40px;
+}
+
+.direction-left .flag:after {
+ content: "";
+ position: absolute;
+ left: 100%;
+ top: 50%;
+ height: 0;
+ width: 0;
+ margin-top: -8px;
+ border: solid transparent;
+ border-left-color: rgb(248,248,248);
+ border-width: 8px;
+ pointer-events: none;
+}
+
+.direction-right .flag:after {
+ content: "";
+ position: absolute;
+ right: 100%;
+ top: 50%;
+ height: 0;
+ width: 0;
+ margin-top: -8px;
+ border: solid transparent;
+ border-right-color: rgb(248,248,248);
+ border-width: 8px;
+ pointer-events: none;
+}
+
+.time-wrapper {
+ display: inline;
+
+ line-height: 1em;
+ font-size: 0.66666em;
+ color: rgb(250,80,80);
+ vertical-align: middle;
+}
+
+.direction-left .time-wrapper {
+ float: left;
+}
+
+.direction-right .time-wrapper {
+ float: right;
+}
+
+.time {
+ display: inline-block;
+ padding: 4px 6px;
+ background: rgb(248,248,248);
+}
+
+.desc {
+ margin: 1em 0.75em 0 0;
+
+ font-size: 0.77777em;
+ font-style: italic;
+ line-height: 1.5em;
+}
+
+.direction-right .desc {
+ margin: 1em 0 0 0.75em;
+}