diff options
| author | Harald Eilertsen <haraldei@anduin.net> | 2024-10-10 21:18:05 +0200 |
|---|---|---|
| committer | Harald Eilertsen <haraldei@anduin.net> | 2024-10-10 21:18:05 +0200 |
| commit | f2fb5a3301128f7be1743fa6fc9f5f53251536f0 (patch) | |
| tree | 1596c572322c06fdadb47915cdee74c25430b27a | |
| parent | 0cb1be00f695b45453965bf5c3344f788308d850 (diff) | |
| download | ramaskrik-program-f2fb5a3301128f7be1743fa6fc9f5f53251536f0.tar.gz ramaskrik-program-f2fb5a3301128f7be1743fa6fc9f5f53251536f0.tar.bz2 ramaskrik-program-f2fb5a3301128f7be1743fa6fc9f5f53251536f0.zip | |
Move styling to separate file, and make prettier.
| -rw-r--r-- | index.html.erb | 45 | ||||
| -rwxr-xr-x | ramaskrik-program.rb | 2 | ||||
| -rw-r--r-- | styles.css | 71 |
3 files changed, 75 insertions, 43 deletions
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 @@ <!DOCTYPE html> <html> <head> - <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <title><%= title %></title> -<style> -.events { - display:flex; - justify-content: space-around; - width: 800px; -} -.event-column { - width: 350px; -} -.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; -} -</style> + <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1><%= title %></h1> 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; +} |