From 2355d39b234705afc1e6a7d7fd36ead930f4fd47 Mon Sep 17 00:00:00 2001
From: Matt Singleton <matt@xcolour.net>
Date: Tue, 6 Feb 2024 16:36:56 -0600
Subject: update use instructions

---
 README.md           | 17 ++++++++++++++---
 cgit-main.css       |  2 ++
 cgit-responsive.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 cgit.css            | 48 ------------------------------------------------
 4 files changed, 64 insertions(+), 51 deletions(-)
 create mode 100644 cgit-main.css
 create mode 100644 cgit-responsive.css
 delete mode 100644 cgit.css

diff --git a/README.md b/README.md
index 4ea7a0b..ff86531 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,20 @@ changes for my own use.
 
 # How to use:
 
-Beyond switching original CSS file with the one in this repository you should also add `head-include` line in your `cgitrc` file.
-For example:
+Place `cgit-main.css`, `cgit-responsive.css`, and `head.html` alongside your
+existing `cgit.css` file. These responsive css rules are _additive_ to the
+default `cgit.css`.
+
+Update your `cgitrc` to set the `css` and `head-include` directives. For example:
+
+```
+css=/cgit-main.css
+head-include=/usr/share/cgit/head.html
+```
+
+If you already have a `head-include` set, just make sure to include the
+appropriate viewport meta tag:
 
 ```
-head-include=/usr/share/webapps/cgit/head.html
+<meta name="viewport" content="width=device-width initial-scale=1.0"/>
 ```
diff --git a/cgit-main.css b/cgit-main.css
new file mode 100644
index 0000000..c174dad
--- /dev/null
+++ b/cgit-main.css
@@ -0,0 +1,2 @@
+@import "/cgit.css";
+@import "/cgit-responsive.css";
diff --git a/cgit-responsive.css b/cgit-responsive.css
new file mode 100644
index 0000000..514f54b
--- /dev/null
+++ b/cgit-responsive.css
@@ -0,0 +1,48 @@
+@media only screen and (max-width: 800px) {
+  /* HEADER */
+  /* remove logo (save space) */
+  div#cgit table#header td.logo {
+    display: none;
+  }
+  /* wrap title text */
+  div#cgit table#header td.main {
+    white-space: normal;
+  }
+  /* td as block */
+  div#cgit table#header td {
+    display: block;
+  }
+  /* move branch switcher to left */
+  div#cgit table#header td.form {
+    text-align: left;
+  }
+  /* Don't display author (save space) */
+  div#cgit table#header td.sub.right {
+    display: none;
+  }
+
+  /* TABS */
+  /* both tabs and form are blocks */
+  div#cgit table.tabs td {
+    display: block;
+  }
+  /* every tab is block */
+  div#cgit table.tabs td a {
+    display: block;
+    text-align: right;
+  }
+
+  /* CONTENT */
+  div#cgit div.content {
+    overflow-x: auto;
+    padding: 0.5em;
+  }
+  td.ls-mode {
+    white-space: nowrap;
+  }
+
+  /* PANEL ALIGNMENT */
+  div#cgit div.cgit-panel {
+    float: left;
+  }
+}
diff --git a/cgit.css b/cgit.css
deleted file mode 100644
index 514f54b..0000000
--- a/cgit.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@media only screen and (max-width: 800px) {
-  /* HEADER */
-  /* remove logo (save space) */
-  div#cgit table#header td.logo {
-    display: none;
-  }
-  /* wrap title text */
-  div#cgit table#header td.main {
-    white-space: normal;
-  }
-  /* td as block */
-  div#cgit table#header td {
-    display: block;
-  }
-  /* move branch switcher to left */
-  div#cgit table#header td.form {
-    text-align: left;
-  }
-  /* Don't display author (save space) */
-  div#cgit table#header td.sub.right {
-    display: none;
-  }
-
-  /* TABS */
-  /* both tabs and form are blocks */
-  div#cgit table.tabs td {
-    display: block;
-  }
-  /* every tab is block */
-  div#cgit table.tabs td a {
-    display: block;
-    text-align: right;
-  }
-
-  /* CONTENT */
-  div#cgit div.content {
-    overflow-x: auto;
-    padding: 0.5em;
-  }
-  td.ls-mode {
-    white-space: nowrap;
-  }
-
-  /* PANEL ALIGNMENT */
-  div#cgit div.cgit-panel {
-    float: left;
-  }
-}
-- 
cgit v1.2.3