From f2fb5a3301128f7be1743fa6fc9f5f53251536f0 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Thu, 10 Oct 2024 21:18:05 +0200 Subject: Move styling to separate file, and make prettier. --- index.html.erb | 45 ++------------------------------- ramaskrik-program.rb | 2 ++ styles.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 43 deletions(-) create mode 100644 styles.css diff --git a/index.html.erb b/index.html.erb index 6b3c993..ad3f561 100644 --- a/index.html.erb +++ b/index.html.erb @@ -1,51 +1,10 @@ - + <%= title %> - +

<%= title %>

diff --git a/ramaskrik-program.rb b/ramaskrik-program.rb index 8bda384..cd22839 100755 --- a/ramaskrik-program.rb +++ b/ramaskrik-program.rb @@ -95,3 +95,5 @@ IO.write("build/index.html", t_html.result(binding)) t_ics = ERB.new(IO.read("program.ics.erb"), trim_mode: '<>') IO.write("build/program-ramaskrik-#{year}.ics", t_ics.result(binding).gsub(/\n/, "\r\n")) + +system('cp', 'styles.css', 'build/styles.css') diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..77e05c8 --- /dev/null +++ b/styles.css @@ -0,0 +1,71 @@ +/* Styles for Ramaskrik program generator + * + * SPDX-FileCopyrightText: 2024 Eilertsens Kodeknekkeri + * SPDX-FileContributor: Harald Eilertsen + * + * SPDX-License-Identifier: AGPLv3-or-later + */ +body { + background-color: #242021; + color: #8c99a4; +} +a { + color: #9bbfdf; +} +a:visited { + color: #7293af; +} +a:hover { + color: #9ccfcf; +} +#introduction { + max-width: 50rem; +} +#events-list > h2 { + background-color: #3c4b56; + padding: 0.3rem; +} +.events { + display:flex; + justify-content: space-around; + width: 800px; +} +.event-column { + width: 350px; +} +.time-column { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.event-column-inner, +.time-column-inner { + position: relative; +} +.timestamp { + position: absolute; + font-size: 10px; +} +.event-item { + display: flex; + position: absolute; + background-color: #b8afaf; + border: 1px solid #ccc; + padding: 0.3em; + color: #000; + box-sizing: border-box; + width: 100%; + + font-family: Helvetica; + font-size: small; +} +.event-item.selected { + background-color: #709270; +} +.event-item-image { + float: left; + margin-right: 0.3em; +} +.event-item-image img { + width: 3em; + object-fit: cover; +} -- cgit v1.2.3