Migration from Rails 2.3.5 to Rails 8.1 successful.

Merging dev branch.

4 files changed, 1456 insertions, 131 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index f95fa18..4b08356 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -2,7 +2,7 @@
 
 body {
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: 1rem;
   margin: 0px;
 }
 
@@ -19,14 +19,24 @@ th {
   text-transform: lowercase;
 }
 
+#metadata,
 #content {
   margin-left: 5px;
 }
 
+@media(min-width:1016px) {
 #wrapper {
-  margin-left: 125px;
-  width: 899px;
+  margin: 0 125px;
 }
+}
+@media(max-width:1015px) {
+#wrapper {
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+}
+
 
 #flash {
   height: 12px;
@@ -106,6 +116,53 @@ input[type=submit],
   text-transform: lowercase;
 }
 
+/* button_to forms: render submit inputs as plain links */
+form.button_to {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+form.button_to input[type="submit"] {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none
+}
+
+form.button_to input[type="submit"]:hover {
+  color: #ffffff;
+  background-color: #ff9600;
+}
+
+#admin_wizard {
+  margin-bottom: 2rem;
+}
+
+#page_submit a,
+.admin_wizard_button a {
+  color: white !important;
+}
+
+#page_submit,
+.admin_wizard_button {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  background-color: green;
+}
+
+#page_submit:hover,
+.admin_wizard_button:hover {
+  background-color: lime !important;
+}
+
 #sub_navigation a {
   color: #969696;
 }
@@ -128,21 +185,27 @@ input[type=submit],
 /* Nodes */
 
 table.node_table {
-  width: 899px;
   border-collapse: collapse;
 }
 
 table.node_table tr {
-  height: 65px;
+  min-height: 2rem;
   border-bottom: 1px solid #000000;
 }
 
+table.node_table th.node_id,
+table.node_table th.revision,
 table.node_table th.title {
-  width: 450px;
+  min-width: 4rem;
+}
+
+table.node_table th.editor,
+table.node_table th.title {
+  min-width: 12rem;
 }
 
 table.node_table tr.header {
-  height: 20px;
+  height: 2rem;
   text-align: left;
 }
 
@@ -151,6 +214,7 @@ table.node_table td {
   padding-bottom: 0px;
   padding-right: 25px;
   padding-left: 0px;
+  min-width: 2rem;
 }
 
 table.node_table .node_id {
@@ -170,6 +234,10 @@ table.node_table .actions {
   text-transform: lowercase;
 }
 
+#admin_sitemap_table .node_id:before {
+  content: "• ";
+}
+
 /* Revisions */
 
 table#revisions {
@@ -212,31 +280,19 @@ table#revisions tr {
 /* Page Editor */
 
 input[type=text], textarea {
-  font-size: 12px;
+  font-size: 1rem;
   font-family: Helvetica;
   border: 1px solid #989898;
 }
 
 select {
-  font-size: 12px;
+  font-size: 1rem;
   border: 1px solid #989898;
 }
 
-input[type=text]#page_title {
-  width: 690px;
-  font-size: 14px;
-  padding-top: 6px;
-  padding-bottom: 4px;
-  padding-left: 5px;
-  padding-right: 5px;
-  font-weight: bold;
-}
-
-input[type=text]#tag_list {
-  padding: 5px;
-}
-
-input[type=text]#node_slug {
+input[type=text]#tag_list,
+input[type=text]#node_staged_slug,
+input#move_to_search_term {
   padding: 5px;
 }
 
@@ -265,6 +321,24 @@ div#login_form input[type=text], div#login_form input[type=password] {
   width: 150px;
 }
 
+
+@media(min-width:1016px) {
+input#tag_list,
+input#node_staged_slug,
+input#move_to_search_term {
+  width: 690px;
+}
+
+input[type=text]#page_title {
+  width: 690px;
+  font-size: 1rem;
+  padding-top: 6px;
+  padding-bottom: 4px;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-weight: bold;
+}
+
 textarea#page_abstract {
   width: 690px;
   height: 150px;
@@ -280,6 +354,56 @@ textarea#page_abstract {
   margin-left: -125px;
 }
 
+}
+
+/* Mobile */
+@media(max-width:1015px) {
+input#tag_list,
+input#node_staged_slug,
+input#move_to_search_term {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#page_editor #content,
+#page_editor #metadata {
+  padding-right: 5px;
+}
+
+#page_editor textarea#page_body {
+  box-sizing: border-box;
+  width: 800px;
+  height: 50rem;
+}
+
+#page_editor textarea#page_abstract {
+  box-sizing: border-box;
+  height: 8rem;
+  width: 100%;
+}
+
+input[type=text]#page_title {
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 2rem;
+  padding-top: 6px;
+  padding-bottom: 4px;
+  padding-left: 5px;
+  font-weight: bold;
+}
+
+input[type=text], textarea {
+  font-size: 1.5rem;
+}
+select {
+  font-size: 1.5rem;
+}
+
+#metadata ul#image_box {
+  width: 100% !important;
+}
+}
+
 #new_node {
   margin-left: -118px;
 }
@@ -296,14 +420,38 @@ td {
   padding-right: 10px;
 }
 
-td.description {
-  width: 100px;
+@media(min-width:1016px) {
+div.node_description {
+  float: left;
+  width: 110px;
+  min-height: 2rem;
   text-align: right;
   text-transform: lowercase;
-  letter-spacing: 1px;
   vertical-align: top;
 }
 
+div.node_content {
+  margin-left: 120px;
+  min-height: 2rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+}
+@media(max-width:1015px) {
+div.node_description {
+  min-height: 2rem;
+  width: 30em;
+  text-transform: lowercase;
+  vertical-align: top;
+}
+
+div.node_content {
+  min-height: 2rem;
+  margin-bottom: 1rem;
+}
+
+}
+
 div#page_editor {
   margin-top: 0px;
   margin-left: 10px;
@@ -381,6 +529,10 @@ table#content th.content {
 
 #menu_item_list {
   border-collapse: collapse;
+  padding: 5px 5px 5px 5px;
+  border: solid 5px lightgrey;
+  background-color: lightgrey;
+  border-radius: 5px;
 }
 
 #menu_item_list tr:hover {
@@ -393,16 +545,24 @@ table#content th.content {
 
 #menu_item_list td.menu_sort_handle div {
   background-color: #989898;
-  height: 10px;
-  width: 10px;
+  height: 26px;
+  width: 26px;
+}
+
+#menu_item_list td.menu_sort_handle div:before {
+  content: "⇳";
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  vertical-align: center;
 }
 
 #menu_item_list td.menu_sort_handle div:hover {
-  cursor: move;
+  cursor: grab;
 }
 
 #menu_item_list td.menu_item_title {
-  width: 100px;
+  width: 200px;
 }
 
 .ui-state-highlight td{
@@ -410,12 +570,11 @@ table#content th.content {
 }
 
 #metadata ul#image_box {
+  box-sizing: border-box;
   margin: 0;
-  padding-left: 0;
+  padding: 10px 5px 10px 5px;
   height: 100px;
-  width: 690px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  width: 702px;
   border: 1px solid #989898;
 }
 
@@ -435,14 +594,6 @@ div#image_browser ul li {
   list-style-type: none;
 }
 
-input#move_to_search_term, input#node_staged_slug {
-  width: 690px;
-}
-
-#tag_list {
-  width: 680px;
-}
-
 table.user_list td.user_login {
   padding-right: 30px;
 }
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index c58e3ae..c4530fa 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -1,28 +1,73 @@
+html {
+  height: 100%;
+  line-height: 1.6rem;
+}
+
 body {
-  background-color: #FFFFFF;
   margin: 0;
   padding: 0;
   text-align: center;
   font-family: Verdana, Helvetica, Arial, sans-serif;
-  font-size: 11px;
-  line-height: 16px;
-  background-color: #ffffff;
-  color: #535353;
+  background-color: Canvas;
+  color: color-mix(in srgb, CanvasText, #808080 25%);
+  hyphens: auto;
+  color-scheme: light dark;
+
+  min-height: 100%;
+  height: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+    body:has(#light-mode:checked) {
+        color-scheme: dark;
+    }
+    #light-mode + label[for=light-mode]:before { content: '🌙'; }
+    #light-mode:checked + label[for=light-mode]:before { content: '☀️'; }
+
+    /* The header images were set in the before times. Let them shine in dark
+       mode, too */
+    body:has(#light-mode:checked) #header img,
+    body:has(#light-mode:checked) div#left_column::before
+    {
+        filter: invert(50%);
+    }
 }
 
-div#header {
-  height: 224px;
+@media (prefers-color-scheme: dark) {
+    body:has(#light-mode:checked) {
+        color-scheme: light;
+    }
+    #light-mode + label[for=light-mode]:before { content: '☀️'; }
+    #light-mode:checked + label[for=light-mode]:before { content: '🌙'; }
+
+    /* The header images were set in the before times. Let them shine in dark
+       mode, too */
+    body:not(:has(#light-mode:checked)) #header img,
+    body:not(:has(#light-mode:checked)) div#left_column::before
+    {
+        filter: invert(50%);
+    }
+}
+
+img {
+  max-width: 100%;
 }
 
 div#header img {
   border: none;
 }
 
-div#wrapper {
-  position: relative;
-  width: 909px;
-  margin-left: 90px;
-  text-align: left;
+@media(min-width:1016px) {
+  div#wrapper {
+    position: relative;
+    width: 909px;
+    margin: 0 auto 0 auto;
+    text-align: left;
+    min-height: 100%;
+  }
+  .break-mobile {
+      display: block;
+  }
 }
 
 pre {
@@ -41,7 +86,8 @@ a {
 }
 
 a:visited {
-  color: #5b8ca7;
+  color: #D1791A;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 a:hover {
@@ -51,23 +97,27 @@ a:hover {
 /*------------------headlines-------------------*/
 
 h2 {
-  font-size: 15px;
-  line-height: 20px;
-  font-family: Helvetica;
+  font-size: 1.5rem;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.75rem;
 }
 
 div#center_column h2 a {
-  color: #535353;
+  color: CanvasText;
   text-decoration: none;
 }
 
 div#center_column h2 a:hover {
-  color: #8e8e8e;
+  color: color-mix(in srgb, CanvasText, #808080 50%);
 }
 
 div#center_column h2.headline {
   margin-top: 10px;
+}
+
+div#center_column .article_partial h2.headline {
   padding-top: 30px;
+  margin-bottom: 0.3rem;
   border-top: 2px solid #cccccc;
 }
 
@@ -76,14 +126,18 @@ div.article_partial h2 a {
 }
 
 h3 {
-  font-size: 13px;
+  font-size: 1.3rem;
   text-decoration: none;
 
 }
 
 h4 {
-  font-size: 11px;
-  text-decoration: bold;
+  font-size: 1.0rem;
+  text-decoration: none;
+}
+
+#left_column {
+  line-height: 1.5em;
 }
 
 /*------------------main-navigation-------------------*/
@@ -91,51 +145,120 @@ h4 {
 div.main_navigation ul {
   margin-left: 0;
   padding-left: 0;
-  line-height: 18px;
+  padding-left: 15px;
+  padding-right: 15px;
+  text-align: left;
 }
 
-div.main_navigation li {
-  list-style-type: none;
+
+@media(max-width:1016px) {
+  div.main_navigation li:not(:first-child):before {
+    content: '•';
+    margin-left: .3rem;
+    margin-right: .6rem;
+  }
+
+  div.main_navigation li {
+    list-style-type: none;
+    display: inline-block;
+    line-height: .75rem;
+  }
+}
+
+@media(min-width:1016px) {
+  div.main_navigation ul {
+    padding: 0;
+    text-align: right;
+  }
+
+  div.main_navigation li {
+    list-style-type: none;
+    line-height: 1.45em;
+  }
 }
 
 div.main_navigation a {
   text-decoration: none;
-  font-size: 14px;
 }
 
-div.main_navigation a.inactive:hover {
-  color: #F8921E;
+div.main_navigation a.inactive:hover, div#left_column span.inactive:hover {
+  color: color-mix(in srgb, CanvasText, #808080 50%);
+}
+
+div.main_navigation a.active:before {
+  content: "▸";
 }
 
 div.main_navigation a.active {
-  color: #000000;
+  color: CanvasText;
   text-decoration: none;
-  font-size: 13px;
 }
 
-div.main_navigation a.inactive {
-  color: #aeadad;
-  font-size: 13px;
+div.main_navigation a.inactive, div.main_navigation span.inactive, div#left_column span.inactive {
+  color: color-mix(in srgb, CanvasText, #808080 25%);
 }
 
 /*------------------calendar-featured-tags-------------------*/
 
 div#frontpage_calendar {
-  margin-top: 30px;
+  display: none;
+  margin-top: 10px;
 }
 
-div#frontpage_calendar h2, div#tags h2, div#featured_articles h2 {
-  color: #aeadad;
-  border-top: 2px solid #aeadad;
-  border-bottom: 2px solid #aeadad;
-  font-size: 16px;
+@media(min-width:1016px) {
+  div#frontpage_calendar {
+    margin-top: 30px;
+  }
+}
+
+div#frontpage_calendar h2, div#tags h2, div#featured_articles h2, div.main_navigation h2 {
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+  font-size: 1.1em;
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
+div#frontpage_calendar h2 {
+  display: none;
+  border-top: none;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-top: 0;
+}
+
+@media(max-width:1016px) {
+  div#tags li {
+    list-style-type: none;
+    display: inline-block;
+  }
+
+  div#tags li:not(:first-child):before {
+    content: '•';
+    margin-left: .3em;
+    margin-right: .6em;
+  }
+}
+
+@media(min-width:1016px) {
+  div#frontpage_calendar h2, div#tags h2, div#featured_articles h2 {
+    font-size: 1rem;
+  }
+
+  div#frontpage_calendar h2 {
+    display: block;
+    border-top: 2px solid #aeadad;
+    padding: 2px 0;
+  }
+
+}
+
 div#frontpage_calendar ul, div#tags ul, div#featured_articles ul {
   padding: 0px;
-  font-size: 11px;
+  font-size: 1rem;
+  line-height: 1.5em;
 }
 
 div#featured_articles #ds_icon img {
@@ -156,54 +279,160 @@ div#frontpage_calendar li, div#tags li, div#featured_articles li {
 
 div#frontpage_calendar li a, div#tags li a, div#featured_articles li a {
   text-decoration: none;
-  color: #535353;
+  color: color-mix(in srgb, CanvasText, #808080 25%);
 }
 
 div#frontpage_calendar li a:hover,
 div#tags li a:hover,
 div#featured_articles li a:hover {
   text-decoration: none;
-  color: #ff9600;
+  color: color-mix(in srgb, CanvasText, #808080 50%);
+}
+
+/* We don't want the only colourful thing on the site to be pointing
+ * somewhere else */
+div#featured_articles img {
+  filter: grayscale(1);
+}
+
+dt {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+dd {
+  margin-bottom: 1em;
 }
 
 /*--------------------------------------------------------------*/
 
 div.author_and_date {
   font-style: italic;
-  padding-left: 15px;
   font-family: Georgia;
+  color: color-mix(in srgb, CanvasText, #808080);
+  padding-top: .2rem;
+  padding-bottom: .8rem;
 }
 
-div#left_column {
-  position: absolute;
-  background-image: url(/images/left_column.png);
-  background-position: top right;
-  background-repeat: no-repeat;
-  left: 0px;
-  width: 115px;
-  min-height: 100px;
-  text-align: right;
-  padding-right: 70px;
+@media(min-width:1016px) {
+  div#left_column::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    background-image: url(/images/left_column.png);
+    background-position: top right;
+    background-repeat: no-repeat;
+        z-index: -10;
+  }
+  div#left_column {
+    position: absolute;
+    left: 0px;
+    width: 135px;
+    min-height: 100px;
+    text-align: right;
+    padding-right: 50px;
+  }
+
+  div#left_column > a {
+    font-size: 0.8rem;
+  }
+}
+
+.menu-checkbox {
+    display: none;
+}
+
+.burger-menu {
+    display: none;
+    cursor: pointer;
+}
+
+#burger-div {
+    position: absolute;
+    right: 54px;
 }
 
+/* Mobile styles */
+@media (max-width: 1016px) {
+    .burger-menu {
+                position: absolute;
+                display: flex;
+                flex-direction: column;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        
+        .burger-menu span {
+            display: inline-flex;
+        width: 26px;
+        height: 4px;
+        background: color-mix(in srgb, CanvasText, #808080 25%);
+        border-radius: 2px;
+        margin: 3px 0;
+            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+    }
+
+        #left_column .main_navigation {
+                width: 100%;
+        position: relative;
+        }
+
+    #toolbox ~ #left_column .main_navigation ul {
+        transition: max-height 0.2s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease;
+        overflow: hidden;
+        text-align: center;
+    }
+
+    #toolbox ~ #left_column .main_navigation:first-of-type ul {
+            transform: translateY(-200px);
+        max-height: 0;
+                opacity: 0;
+        z-index: -10;
+    }
+    
+    /* Show menu when checkbox is checked */
+    #toolbox:has(.menu-checkbox:checked) ~ #left_column .main_navigation ul {
+        max-height: 400px;
+        opacity: 1;
+        transform: translateY(0);
+    }
+        
+    .menu-checkbox:checked + .burger-menu span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
+    .menu-checkbox:checked + .burger-menu span:nth-child(2) { opacity: 0; }
+    .menu-checkbox:checked + .burger-menu span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
+}
 
 div#center_column {
-  position: absolute;
-  background-color: #ffffff;
-  left: 200px;
-  width: 460px;
-  padding-left: 15px;
-  padding-right: 15px;
   padding-bottom: 40px;
 }
 
-div#right_column {
-  position: absolute;
-  background-color: #ffffff;
-  padding-left: 70px;
-  left: 675px;
-  width: 155px;
-  height: 100px;
+@media(max-width: 1016px) {
+div#center_column {
+  padding: 0 15px 40px 15px;
+}
+}
+
+@media(min-width: 1016px) {
+  div#center_column {
+    position: absolute;
+    background-color: Canvas;
+    left: 200px;
+    width: 490px;
+  }
+}
+
+@media(min-width:1016px) {
+  div#right_column {
+    position: absolute;
+    background-color: Canvas;
+    padding-left: 55px;
+    left: 690px;
+    width: 155px;
+    height: 100px;
+  }
 }
 
 div.teaser_ruler {
@@ -219,39 +448,148 @@ div.article_partial {
 
 
 div.article_partial p.excerpt {
-  color: #404040;
+  color: CanvasText;
 }
 
-div#center_column div.body,
-div#center_column div.abstract {
-  font-size: 11px;
-  line-height: 16px;
+/* Search bar */
+@media(min-width:1016px) {
+  div#search {
+    position: absolute;
+    top: 145px;
+    left: 676px;
+    height: 25px;
+    vertical-align: top;
+  }
 }
 
-div#search {
-  position: absolute;
-  top: 145px;
-  left: 676px;
-  height: 20px;
-  vertical-align: top;
+@media(max-width:1016px) {
+  div#search {
+    position: absolute;
+    left: 25px;
+    height: 25px;
+  }
 }
 
-div#search input[type=button] {
-  display: block;
-  height: 20px;
+div#search input {
+  color: CanvasText !important;
 }
-
+div#search input[type=search],
 div#search input[type=text] {
   display: block;
-  padding: 0px;
+  padding: 2px;
   margin: 0px;
-  height: 20px;
+  height: 25px;
   width: 132px;
   line-height: 20px;
-  border: none;
-  background-image: url(/images/search_field.png);
-  background-repeat:no-repeat;
-  padding-right: 5px;
+  border: solid #808080 1px;
+  background-color: Canvas;
+  border-radius: 5px;
   margin-right: 5px;
-  background-position: top top;
-}
\ No newline at end of file
+  text-indent: 0.5rem;
+}
+
+/* Header */
+#header img,
+#header > a {
+  display: block;
+  line-height: 0;
+}
+
+/* Main section */
+.article, .article_partial {
+  text-align: left;
+}
+
+h1, h2, h3 {
+  word-wrap: anywhere;
+  hyphens:auto;
+}
+
+.pagination {
+  margin-bottom: .5rem;
+}
+
+li {
+    line-height: 1.5rem;
+    margin-block-start: 1rem;
+    margin-block-end: 1rem;
+}
+
+#tags ul li {
+    margin-block-start: 0.5rem;
+    margin-block-end: 0.5rem;
+}
+
+/* Footer */
+#footer {
+  border-bottom: 2px solid #aeadad;
+  border-top: 2px solid #aeadad;
+  bottom: 0;
+  color: CanvasText;
+}
+
+#footer > br {
+  display: none;
+}
+
+#footer p {
+  margin: .5rem auto;
+}
+
+#footer a {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  color: CanvasText;   
+}
+
+@media(max-width:1016px) {
+#toolbox {
+    display: relative;
+    height: 30px;
+}
+}
+
+/* Light and dark mode button magic */
+@media(max-width:1016px) {
+  div#light-mode-div {
+    position: absolute;
+    left: 170px;
+  }
+}
+
+@media(min-width:1016px) {
+  div#light-mode-div {
+    position: absolute;
+    top: 145px;
+    left: 816px;
+  }
+}
+input#light-mode[type="checkbox"] {
+    display: none;
+}
+
+label[for=light-mode] {
+    font-size: 25px;
+    user-select: none;
+    cursor: pointer;
+    filter: grayscale(1) contrast(10%);
+}
+
+.hide-me {
+    display: none;
+}
+
+/* Temporary glowing style for easterhegg 22 */
+#eh22_icon img {
+  animation: animate 3s linear infinite;
+}
+
+@keyframes animate {
+  from {
+    filter: sepia(100%) hue-rotate(0deg);
+  }
+  to {
+    filter: sepia(100%) hue-rotate(360deg);
+  }
+}
+
diff --git a/public/stylesheets/ccc.css_ b/public/stylesheets/ccc.css_
new file mode 100644
index 0000000..9c5dbba
--- /dev/null
+++ b/public/stylesheets/ccc.css_
@@ -0,0 +1,579 @@
+html {
+  height: 100%;
+  line-height: 1.6rem;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-family: Verdana, Helvetica, Arial, sans-serif;
+  background-color: Canvas;
+  color: color-mix(in srgb, CanvasText, #808080 25%);
+  hyphens: auto;
+  color-scheme: light dark;
+
+  min-height: 100%;
+  height: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+    body:has(#light-mode:checked) {
+        color-scheme: dark;
+    }
+    #light-mode + label[for=light-mode]:before { content: '🌙'; }
+    #light-mode:checked + label[for=light-mode]:before { content: '☀️'; }
+}
+
+@media (prefers-color-scheme: dark) {
+    body:has(#light-mode:checked) {
+        color-scheme: light;
+    }
+    #light-mode + label[for=light-mode]:before { content: '☀️'; }
+    #light-mode:checked + label[for=light-mode]:before { content: '🌙'; }
+
+    /* The header images were set in the before times. Let them shine in dark
+       mode, too */
+    body:not(:has(#light-mode:checked)) #header img,
+    body:not(:has(#light-mode:checked)) div#left_column::before
+    {
+        filter: invert(50%);
+    }
+}
+
+img {
+  max-width: 100%;
+}
+
+div#header img {
+  border: none;
+}
+
+@media(min-width:1016px) {
+  div#wrapper {
+    position: relative;
+    width: 909px;
+    margin: 0 auto 0 auto;
+    text-align: left;
+    min-height: 100%;
+  }
+  .break-mobile {
+      display: block;
+  }
+}
+
+pre {
+  overflow: auto;
+}
+
+.right {
+  text-align: right;
+}
+
+/*------------------links-------------------*/
+
+a {
+  color: #F8921E;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #D1791A;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+a:hover {
+  color: #5b8ca7;
+}
+
+/*------------------headlines-------------------*/
+
+h2 {
+  font-size: 1.5rem;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.75rem;
+}
+
+div#center_column h2 a {
+  color: CanvasText;
+  text-decoration: none;
+}
+
+div#center_column h2 a:hover {
+  color: color-mix(in srgb, CanvasText, #808080 50%);
+}
+
+div#center_column h2.headline {
+  margin-top: 10px;
+}
+
+div#center_column .article_partial h2.headline {
+  padding-top: 30px;
+  margin-bottom: 0.3rem;
+  border-top: 2px solid #cccccc;
+}
+
+div.article_partial h2 a {
+  text-decoration: none;
+}
+
+h3 {
+  font-size: 1.3rem;
+  text-decoration: none;
+
+}
+
+h4 {
+  font-size: 1.0rem;
+  text-decoration: none;
+}
+
+#left_column {
+  line-height: 1.5em;
+}
+
+/*------------------main-navigation-------------------*/
+
+div.main_navigation ul {
+  margin-left: 0;
+  padding-left: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  text-align: left;
+}
+
+
+@media(max-width:1016px) {
+  div.main_navigation li:not(:first-child):before {
+    content: '•';
+    margin-left: .3rem;
+    margin-right: .6rem;
+  }
+
+  div.main_navigation li {
+    list-style-type: none;
+    display: inline-block;
+    line-height: .75rem;
+  }
+}
+
+@media(min-width:1016px) {
+  div.main_navigation ul {
+    padding: 0;
+    text-align: right;
+  }
+
+  div.main_navigation li {
+    list-style-type: none;
+    line-height: 1.45em;
+  }
+}
+
+div.main_navigation a {
+  text-decoration: none;
+}
+
+div.main_navigation a.inactive:hover, div#left_column span.inactive:hover {
+  color: color-mix(in srgb, CanvasText, #808080 50%);
+}
+
+div.main_navigation a.active:before {
+  content: "▸";
+}
+
+div.main_navigation a.active {
+  color: CanvasText;
+  text-decoration: none;
+}
+
+div.main_navigation a.inactive, div.main_navigation span.inactive, div#left_column span.inactive {
+  color: color-mix(in srgb, CanvasText, #808080 25%);
+}
+
+/*------------------calendar-featured-tags-------------------*/
+
+div#frontpage_calendar {
+  display: none;
+  margin-top: 10px;
+}
+
+@media(min-width:1016px) {
+  div#frontpage_calendar {
+    margin-top: 30px;
+  }
+}
+
+div#frontpage_calendar h2, div#tags h2, div#featured_articles h2, div.main_navigation h2 {
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+  font-size: 1.1em;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+div#frontpage_calendar h2 {
+  display: none;
+  border-top: none;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-top: 0;
+}
+
+@media(max-width:1016px) {
+  div#tags li {
+    list-style-type: none;
+    display: inline-block;
+  }
+
+  div#tags li:not(:first-child):before {
+    content: '•';
+    margin-left: .3em;
+    margin-right: .6em;
+  }
+}
+
+@media(min-width:1016px) {
+  div#frontpage_calendar h2, div#tags h2, div#featured_articles h2 {
+    font-size: 1rem;
+  }
+
+  div#frontpage_calendar h2 {
+    display: block;
+    border-top: 2px solid #aeadad;
+    padding: 2px 0;
+  }
+
+}
+
+div#frontpage_calendar ul, div#tags ul, div#featured_articles ul {
+  padding: 0px;
+  font-size: 1rem;
+  line-height: 1.5em;
+}
+
+div#featured_articles #ds_icon img {
+  padding-top: 10px;
+}
+
+div#featured_articles #events_icon img {
+  padding-left: 10px;
+}
+
+div#frontpage_calendar li {
+  margin-bottom: 20px;
+}
+
+div#frontpage_calendar li, div#tags li, div#featured_articles li {
+  list-style-type: none;
+}
+
+div#frontpage_calendar li a, div#tags li a, div#featured_articles li a {
+  text-decoration: none;
+  color: color-mix(in srgb, CanvasText, #808080 25%);
+}
+
+div#frontpage_calendar li a:hover,
+div#tags li a:hover,
+div#featured_articles li a:hover {
+  text-decoration: none;
+  color: color-mix(in srgb, CanvasText, #808080 50%);
+}
+
+/* We don't want the only colourful thing on the site to be pointing
+ * somewhere else */
+div#featured_articles img {
+  filter: grayscale(1);
+}
+
+dt {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+dd {
+  margin-bottom: 1em;
+}
+
+/*--------------------------------------------------------------*/
+
+div.author_and_date {
+  font-style: italic;
+  font-family: Georgia;
+  color: color-mix(in srgb, CanvasText, #808080);
+  padding-top: 0;
+  padding-bottom: 1rem;
+}
+
+@media(min-width:1016px) {
+  div#left_column::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    background-image: url(/images/left_column.png);
+    background-position: top right;
+    background-repeat: no-repeat;
+        z-index: -10;
+  }
+  div#left_column {
+    position: absolute;
+    left: 0px;
+    width: 135px;
+    min-height: 100px;
+    text-align: right;
+    padding-right: 50px;
+  }
+
+  div#left_column > a {
+    font-size: 0.8rem;
+  }
+}
+
+.menu-checkbox {
+    display: none;
+}
+
+.burger-menu {
+    display: none;
+    cursor: pointer;
+}
+
+/* Mobile styles */
+@media (max-width: 1016px) {
+        .main_navigation {
+                width: 100%;
+        position: relative;
+        }
+
+    .main_navigation ul {
+        transition: max-height 0.5s ease-in-out, transform .4s ease, opacity 0.4s ease;
+        overflow: hidden;
+        text-align: center;
+    }
+
+
+    .burger-menu {
+                position: absolute;
+        top: -48px;
+                right: 30px;
+                display: flex;
+                flex-direction: column;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        
+        .burger-menu span {
+            display: inline-flex;
+        width: 30px;
+        height: 4px;
+        background: color-mix(in srgb, CanvasText, #808080 25%);
+        border-radius: 2px;
+        margin: 3px 0;
+            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+    }
+    .main_navigation .menu-checkbox:not(:checked) ~ ul {
+            transform: translateY(-60px);
+        max-height: 0;
+                opacity: 0;
+    }
+
+    /* Show menu when checkbox is checked */
+    .main_navigation .menu-checkbox ~ ul {
+        max-height: 400px;
+        opacity: 1;
+        transform: translateY(0);
+        text-align: center;
+    }
+        
+    .menu-checkbox:checked + .burger-menu span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
+    .menu-checkbox:checked + .burger-menu span:nth-child(2) { opacity: 0; }
+    .menu-checkbox:checked + .burger-menu span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
+}
+
+div#center_column {
+  padding-bottom: 40px;
+}
+
+@media(max-width: 1016px) {
+div#center_column {
+  padding: 0 15px 40px 15px;
+}
+}
+
+@media(min-width: 1016px) {
+  div#center_column {
+    position: absolute;
+    background-color: Canvas;
+    left: 200px;
+    width: 490px;
+  }
+}
+
+@media(min-width:1016px) {
+  div#right_column {
+    position: absolute;
+    background-color: Canvas;
+    padding-left: 55px;
+    left: 690px;
+    width: 155px;
+    height: 100px;
+  }
+}
+
+div.teaser_ruler {
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px dashed #CCCCCC;
+  height: 3px;
+  margin-top: 30px;
+}
+
+div.article_partial {
+  margin-bottom: 30px;
+}
+
+
+div.article_partial p.excerpt {
+  color: CanvasText;
+}
+
+/* Search bar */
+@media(min-width:1016px) {
+  div#search {
+    position: absolute;
+    top: 145px;
+    left: 676px;
+    height: 25px;
+    vertical-align: top;
+  }
+}
+
+@media(max-width:1016px) {
+  div#search {
+    position: relative;
+    bottom: 5px;
+    left: 0px;
+    margin-left: 25px;
+    height: 25px;
+    vertical-align: top;
+  }
+}
+
+div#search input {
+  color: CanvasText !important;
+}
+div#search input[type=search],
+div#search input[type=text] {
+  display: block;
+  padding: 2px;
+  margin: 0px;
+  height: 25px;
+  width: 132px;
+  line-height: 20px;
+  border: solid #808080 1px;
+  background-color: Canvas;
+  border-radius: 5px;
+  margin-right: 5px;
+  text-indent: 0.5rem;
+}
+
+/* Header */
+#header img,
+#header > a {
+  display: block;
+  line-height: 0;
+}
+
+/* Main section */
+.article, .article_partial {
+  text-align: left;
+}
+
+h1, h2, h3 {
+  word-wrap: anywhere;
+  hyphens:auto;
+}
+
+.pagination {
+  margin-bottom: .5rem;
+}
+
+li {
+    line-height: 1.5rem;
+    margin-block-start: 1rem;
+    margin-block-end: 1rem;
+}
+
+#tags ul li {
+    margin-block-start: 0.5rem;
+    margin-block-end: 0.5rem;
+}
+
+/* Footer */
+#footer {
+  border-bottom: 2px solid #aeadad;
+  border-top: 2px solid #aeadad;
+  bottom: 0;
+  color: CanvasText;
+}
+
+#footer > br {
+  display: none;
+}
+
+#footer p {
+  margin: .5rem auto;
+}
+
+#footer a {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  color: CanvasText;   
+}
+
+/* Light and dark mode button magic */
+@media(max-width:1016px) {
+  div#light-mode-li {
+    position: absolute;
+    top: 145px;
+    left: 25px;
+  }
+}
+
+@media(min-width:1016px) {
+  div#light-mode-li {
+    position: absolute;
+    top: 145px;
+    left: 816px;
+  }
+}
+input#light-mode[type="checkbox"] {
+    display: none;
+}
+
+label[for=light-mode] {
+    font-size: 25px;
+    user-select: none;
+    filter: grayscale(1);
+}
+
+.hide-me {
+    display: none;
+}
+
+/* Temporary glowing style for easterhegg 22 */
+#eh22_icon img {
+  animation: animate 3s linear infinite;
+}
+
+@keyframes animate {
+  from {
+    filter: sepia(100%) hue-rotate(0deg);
+  }
+  to {
+    filter: sepia(100%) hue-rotate(360deg);
+  }
+}
diff --git a/public/stylesheets/ccc.css_old b/public/stylesheets/ccc.css_old
new file mode 100644
index 0000000..93651b9
--- /dev/null
+++ b/public/stylesheets/ccc.css_old
@@ -0,0 +1,257 @@
+body {
+  background-color: #FFFFFF;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-family: Verdana, Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  line-height: 16px;
+  background-color: #ffffff;
+  color: #535353;
+}
+
+div#header {
+  height: 224px;
+}
+
+div#header img {
+  border: none;
+}
+
+div#wrapper {
+  position: relative;
+  width: 909px;
+  margin-left: 90px;
+  text-align: left;
+}
+
+pre {
+  overflow: auto;
+}
+
+.right {
+  text-align: right;
+}
+
+/*------------------links-------------------*/
+
+a {
+  color: #F8921E;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #5b8ca7;
+}
+
+a:hover {
+  color: #5b8ca7;
+}
+
+/*------------------headlines-------------------*/
+
+h2 {
+  font-size: 15px;
+  line-height: 20px;
+  font-family: Helvetica;
+}
+
+div#center_column h2 a {
+  color: #535353;
+  text-decoration: none;
+}
+
+div#center_column h2 a:hover {
+  color: #8e8e8e;
+}
+
+div#center_column h2.headline {
+  margin-top: 10px;
+  padding-top: 30px;
+  border-top: 2px solid #cccccc;
+}
+
+div.article_partial h2 a {
+  text-decoration: none;
+}
+
+h3 {
+  font-size: 13px;
+  text-decoration: none;
+
+}
+
+h4 {
+  font-size: 11px;
+  text-decoration: bold;
+}
+
+/*------------------main-navigation-------------------*/
+
+div.main_navigation ul {
+  margin-left: 0;
+  padding-left: 0;
+  line-height: 18px;
+}
+
+div.main_navigation li {
+  list-style-type: none;
+}
+
+div.main_navigation a {
+  text-decoration: none;
+  font-size: 14px;
+}
+
+div.main_navigation a.inactive:hover {
+  color: #F8921E;
+}
+
+div.main_navigation a.active {
+  color: #000000;
+  text-decoration: none;
+  font-size: 13px;
+}
+
+div.main_navigation a.inactive {
+  color: #aeadad;
+  font-size: 13px;
+}
+
+/*------------------calendar-featured-tags-------------------*/
+
+div#frontpage_calendar {
+  margin-top: 30px;
+}
+
+div#frontpage_calendar h2, div#tags h2, div#featured_articles h2 {
+  color: #aeadad;
+  border-top: 2px solid #aeadad;
+  border-bottom: 2px solid #aeadad;
+  font-size: 16px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+div#frontpage_calendar ul, div#tags ul, div#featured_articles ul {
+  padding: 0px;
+  font-size: 11px;
+}
+
+div#featured_articles #ds_icon img {
+  padding-top: 10px;
+}
+
+div#featured_articles #events_icon img {
+  padding-left: 10px;
+}
+
+div#frontpage_calendar li {
+  margin-bottom: 20px;
+}
+
+div#frontpage_calendar li, div#tags li, div#featured_articles li {
+  list-style-type: none;
+}
+
+div#frontpage_calendar li a, div#tags li a, div#featured_articles li a {
+  text-decoration: none;
+  color: #535353;
+}
+
+div#frontpage_calendar li a:hover,
+div#tags li a:hover,
+div#featured_articles li a:hover {
+  text-decoration: none;
+  color: #ff9600;
+}
+
+/*--------------------------------------------------------------*/
+
+div.author_and_date {
+  font-style: italic;
+  padding-left: 15px;
+  font-family: Georgia;
+}
+
+div#left_column {
+  position: absolute;
+  background-image: url(/images/left_column.png);
+  background-position: top right;
+  background-repeat: no-repeat;
+  left: 0px;
+  width: 115px;
+  min-height: 100px;
+  text-align: right;
+  padding-right: 70px;
+}
+
+
+div#center_column {
+  position: absolute;
+  background-color: #ffffff;
+  left: 200px;
+  width: 460px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 40px;
+}
+
+div#right_column {
+  position: absolute;
+  background-color: #ffffff;
+  padding-left: 70px;
+  left: 675px;
+  width: 155px;
+  height: 100px;
+}
+
+div.teaser_ruler {
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px dashed #CCCCCC;
+  height: 3px;
+  margin-top: 30px;
+}
+
+div.article_partial {
+  margin-bottom: 30px;
+}
+
+
+div.article_partial p.excerpt {
+  color: #404040;
+}
+
+div#center_column div.body,
+div#center_column div.abstract {
+  font-size: 11px;
+  line-height: 16px;
+}
+
+div#search {
+  position: absolute;
+  top: 145px;
+  left: 676px;
+  height: 20px;
+  vertical-align: top;
+}
+
+div#search input[type=button] {
+  display: block;
+  height: 20px;
+}
+
+div#search input[type=text] {
+  display: block;
+  padding: 0px;
+  margin: 0px;
+  height: 20px;
+  width: 132px;
+  line-height: 20px;
+  border: none;
+  background-image: url(/images/search_field.png);
+  background-repeat:no-repeat;
+  padding-right: 5px;
+  margin-right: 5px;
+  background-position: top top;
+}