From: Paul Hänsch <paul@plutz.net>
Date: Wed, 29 Sep 2021 00:03:35 +0000 (+0200)
Subject: basic styling
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=341ec352cbf076d540bec623037f26084cadca81;p=rawnet

basic styling
---

diff --git a/index.cgi b/index.cgi
index fe32414..1a8914d 100755
--- 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
new mode 100755
diff --git a/rawnet.css b/rawnet.css
new file mode 100644
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;
+}