From 4ca2bf5424307cd83dfc01d3a0e05ec6a194ae6b Mon Sep 17 00:00:00 2001 From: Joursoir Date: Fri, 21 May 2021 09:44:26 +0000 Subject: move css to root dir --- ctimeline.c | 2 +- ctimeline.css | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++ static/ctimeline.css | 237 --------------------------------------------------- 3 files changed, 238 insertions(+), 238 deletions(-) create mode 100644 ctimeline.css delete mode 100644 static/ctimeline.css diff --git a/ctimeline.c b/ctimeline.c index 31c0e1b..e09887c 100644 --- a/ctimeline.c +++ b/ctimeline.c @@ -15,7 +15,7 @@ static void prepare_context() { memset(&ctx, 0, sizeof(ctx)); ctx.head_title = string_alloc(NULL, "Timeline browser"); - ctx.css = string_alloc(NULL, "static/ctimeline.css"); + ctx.css = string_alloc(NULL, "ctimeline.css"); ctx.header_title = string_alloc(NULL, "CTimeline"); ctx.header_desc = string_alloc(NULL, "Web frontend for timelines written in C"); diff --git a/ctimeline.css b/ctimeline.css new file mode 100644 index 0000000..806eea9 --- /dev/null +++ b/ctimeline.css @@ -0,0 +1,237 @@ +/* +Copyright (c) 2021 by Nils Wittler (https://codepen.io/NilsWe/pen/FemfK) +and Joursoir (joursoir.net) + +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. +*/ + +#ctimeline { + width: 660px; + margin-left: auto; + margin-right: auto; + + font-family: monospace; + font-size: 10pt; +} + +.header { + font-size: 250%; + color: black; +} + +table { + border-spacing: 1em 0em; +} + +tr.sub_text { + color: #777; +} + +table td { + width: 50%; + /*border: 1px solid #a52a2a;*/ +} + +td.right_column { + vertical-align: top; + text-align: right; +} + +td.form { + vertical-align: center; + text-align: right; + white-space: nowrap; +} + +td.form form, +td.form input { + display: inline; + font-size: 85%; +} + +.footer { + text-align: center; + font-size: 70%; + color: #ccc; +} + +/* ================ The Timeline ================ */ + +.timeline { + position: relative; + padding: 1em; + line-height: 1.6em; + list-style-type: none; +} + +.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: -26px; + 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: -26px; +} + +.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; +} diff --git a/static/ctimeline.css b/static/ctimeline.css deleted file mode 100644 index 806eea9..0000000 --- a/static/ctimeline.css +++ /dev/null @@ -1,237 +0,0 @@ -/* -Copyright (c) 2021 by Nils Wittler (https://codepen.io/NilsWe/pen/FemfK) -and Joursoir (joursoir.net) - -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. -*/ - -#ctimeline { - width: 660px; - margin-left: auto; - margin-right: auto; - - font-family: monospace; - font-size: 10pt; -} - -.header { - font-size: 250%; - color: black; -} - -table { - border-spacing: 1em 0em; -} - -tr.sub_text { - color: #777; -} - -table td { - width: 50%; - /*border: 1px solid #a52a2a;*/ -} - -td.right_column { - vertical-align: top; - text-align: right; -} - -td.form { - vertical-align: center; - text-align: right; - white-space: nowrap; -} - -td.form form, -td.form input { - display: inline; - font-size: 85%; -} - -.footer { - text-align: center; - font-size: 70%; - color: #ccc; -} - -/* ================ The Timeline ================ */ - -.timeline { - position: relative; - padding: 1em; - line-height: 1.6em; - list-style-type: none; -} - -.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: -26px; - 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: -26px; -} - -.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; -} -- cgit v1.2.3-18-g5258