basic styling

diff --git a/index.cgi b/index.cgi
index fe324147c3ac60ce75dfd95067ec6ca7aece9862..1a8914de810937ad190990855392245b46bd86ba 100755 (executable)
--- a/index.cgi
+++ b/index.cgi
@@ -20,22 +20,26 @@ yield_page(){
   printf '%s\r\n' 'Content-Type: text/html; charset=utf-8' \
                   "Content-Security-Policy: script-src 'none'" \
                   ''
-  { printf '[html
-    [head
-      [meta name="viewport" content="width=device-width"]
-      [link rel="stylesheet" type="text/css" href="%s/cgilite/common.css"]
-      [link rel="stylesheet" type="text/css" href="%s/rawnet.css"]
-      [title %s]
-    ] [body class="%s"
-  ' "$_BASE" "$_BASE" "$(HTML "$title")" "$page"
-  printf '
-      [header
-        [form method=POST action="%s/search/"
-          [input name=search placeholder="Search"]
-        ]
-      ]' "$_BASE"
+  { cat <<-EOF
+       [!DOCTYPE HTML]
+       [html [head
+         [meta name="viewport" content="width=device-width"]
+         [link rel="stylesheet" type="text/css" href="$_BASE/cgilite/common.css"]
+         [link rel="stylesheet" type="text/css" href="$_BASE/rawnet.css"]
+         [title . $(HTML "$title")]
+       ] [body class="$page"
+         [header
+           [form method=POST action="$_BASE/search/"
+             [input name=search placeholder="Search"]
+           ]
+           $( [ ! "$USER_ID" ] \
+               && printf '[div #user_login [a href="%s/login/" Login]]' "$_BASE" \
+               || w_user_login
+            )
+         ][main
+       EOF
   cat
-  printf '] ]'
+  printf ']]]'
   } |"$_EXEC/cgilite/html-sh.sed" -u
 }
 

diff --git a/page_channel.sh b/page_channel.sh
old mode 100644 (file)
new mode 100755 (executable)

diff --git a/rawnet.css b/rawnet.css
new file mode 100644 (file)
index 0000000..68fa629
--- /dev/null
+++ b/rawnet.css
@@ -0,0 +1,56 @@
+body {
+  background-size: 4pt 4pt;
+  background-image: /* #6AF #6FF */
+    linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
+    linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%);
+}
+
+header {
+  background-color: rgba(0,0,0,.75);
+  padding: .25em;
+  border-bottom: 1pt solid;
+  box-shadow: #000 0 .25em .5em;
+  text-align: center;
+}
+header > * {
+  display: inline-block;
+}
+
+header #user_login {
+  float: right;
+  margin: .125em .5em;
+}
+header #user_login > p {
+  display: inline-block;
+  color: #EEE;
+  font-size: .875em; line-height: 1.125em;
+  max-width: 12em;
+}
+
+main {
+  background-color: rgba(255,255,255,.75);
+  margin: 1em; padding: 1em;
+  box-shadow: #000 .125em .125em 1em;
+}
+
+body.channel main h1.name {
+  text-align: center;
+}
+body.channel main .description {
+  max-width: 40em;
+  margin: auto;
+}
+
+body.channels main .channel {
+  border: 1pt solid;
+  border-radius: 4pt;
+  padding: .5em;
+  margin-bottom: .5em;
+}
+
+body.channels main .channel > h2,
+body.channels main .channel > .description {
+  margin: 0;
+  width: 140pt;
+  background-color: #FFF;
+}