add css

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;
+}