work on mobile site

dist/www-bootstrap/header.tpl

@@ -12,7 +12,8 @@
 
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link rel="stylesheet" href="@@WWW_URL@@static/style.css">
+    <link rel="stylesheet" media="(max-width: 767px)" href="@@WWW_URL@@static/style-mobile.css">
+    <link rel="stylesheet" media="(min-width: 768px)" href="@@WWW_URL@@static/style.css">
     <!-- Custom styles for this template -->
     <style>
       body {
@@ -48,7 +49,14 @@
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
       <div class="container">
-        <a class="navbar-brand" href="@@WWW_URL@@"><img class="img-responsive2" src="@@WWW_URL@@static/header.png" /></a>
+        <a class="navbar-brand" href="@@WWW_URL@@">
+        <picture>
+			    <source srcset="@@WWW_URL@@static/header-m.png" media="(max-width: 767px)">
+			    <source srcset="@@WWW_URL@@static/header.png">
+			    <img src="@@WWW_URL@@static/header.png" alt="Magicka BBS" />
+		    </picture>	
+
+        </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>

dist/www-bootstrap/static/style-mobile.css

@@ -0,0 +1,370 @@
+@font-face {
+    font-family: 'pxplus_ibm_vga8regular';
+    src: url('/static/fonts/pxplus_ibm_vga8-webfont.woff2') format('woff2'),
+		 url('static/fonts/pxplus_ibm_vga8-webfont.svg') format('svg'),
+         url('/static/fonts/pxplus_ibm_vga8-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+.navbar-brand img {
+  max-width: 200px;
+}
+
+.footer {
+	font-size: small;
+}
+
+.div-table {
+	background-color: #eee;
+	border: 1px solid #666666;
+	border-spacing: 5px;
+}
+
+.email-summary-seen {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+	background-color: #eee;
+}
+
+.email-summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+	background-color: #b2ffb0;
+}
+
+.email-id {
+  font-weight: bold;
+  float: left;
+  width: 15px;
+  padding-left: 5px;
+}
+
+.email-subject {
+  float: left;
+  font-size: large;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+
+
+}
+
+.email-from {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.email-date {
+  font-size: small;
+  font-weight: bold;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 80%;
+    flex: 0 0 80%;
+    max-width: 80%;
+
+}
+
+.email-delete {
+  float: right;
+  position: relative;
+  width: 24px;
+  min-height: 24px;
+  top: -24px;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  background: url('/static/delete.png');
+}
+
+.email-view-header {
+	background-color: #eee;
+	border: 1px solid #666666;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.email-view-subject {
+	font-size: xx-large;
+}
+
+.email-view-from {
+	color: #222;
+}
+
+.email-view-date {
+	color: #222;
+}
+
+.conference-list-item {
+    background-color: #333333;
+    color: white;
+    padding: 5px;
+}
+
+.area-list-item {
+	padding: 5px 0 5px 15px;
+}
+
+.area-list-new {
+	padding: 5px 0 5px 15px;
+	background-color: #b2ffb0;	
+}
+
+.msg-summary-seen {
+        background-color: #eee;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+}
+
+.msg-summary {
+	background-color: #b2ffb0;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+}
+.msg-summary-id {
+  font-size: xx-small;
+  font-weight: bold;
+  float: left;
+  width: 15px;
+  padding-left: 2px;
+}
+
+.msg-summary-subject {
+  float: left;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-from {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-to {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-date {
+  font-size: small;
+  font-weight: bold;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 30px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 80%;
+    flex: 0 0 80%;
+    max-width: 80%;
+
+}
+
+.msg-view-header {
+	background-color: #eee;
+	border: 1px solid #666666;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.msg-view-subject {
+	font-size: xx-large;
+}
+
+.msg-view-from {
+	color: #222;
+}
+
+.msg-view-to {
+	color: #222;
+}
+
+.msg-view-date {
+	color: #222;
+}
+
+.menu ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333333;
+}
+
+.menu li {
+    float: left;
+}
+
+.menu li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+.menu li a:hover {
+    background-color: #111111;
+}
+
+.email-reply-form {
+	margin-left: 20px;
+}
+.button {
+	padding-bottom:10px;
+}
+.button a {
+	width: auto;
+	padding: 5px;
+	color: white;
+	background-color: #333;
+	text-decoration: none;
+}
+
+.button a:hover {
+	background-color: #111111;
+}
+
+.last10-row {
+	background-color: #eee;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+}
+
+.last10-name {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.last10-location {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.last10-date {
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+#msgbody {
+	background-color: black;
+  color: gray;
+  font-size: xx-small;
+	font-family: 'pxplus_ibm_vga8regular';
+	line-height: 1;
+  padding: 5px;
+  overflow-x: scroll;
+}
+
+.msg-reply-form {
+  max-width: 100%;
+}
+
+.msg-reply-form textarea {
+  padding: 0px;
+  max-width: 100%;
+}
+
+.email-reply-form {
+  max-width: 100%;
+}
+
+.email-reply-form textarea {
+  padding: 0px;
+  max-width: 100%;
+}

dist/www-bootstrap/static/style.css

@@ -93,8 +93,8 @@
 
 .email-delete {
   position: relative;
-  width: 100%;
+  width: 24px;
-  min-height: 1px;
+  min-height: 24px;
   padding-right: 15px;
   padding-left: 15px;
 
@@ -102,7 +102,7 @@
     -ms-flex: 0 0 5%;
     flex: 0 0 5%;
     max-width: 5%;
-
+    background: url('/static/delete.png') no-repeat;
 }
 
 .email-view-header {

dist/www/static/style.css

@@ -62,6 +62,8 @@
 	float: left;
 	display: table-column;
 	width: 30px;
+	height: 24px;
+	background: url('/static/delete.png') no-repeat;
 }
 
 .email-view-header {

src/www_email.c

@@ -618,7 +618,7 @@ sqlite3_busy_timeout(db, 5000);
 		date = (time_t)sqlite3_column_int(res, 4);
 		localtime_r(&date, &msg_date);
 		if (seen == 0) {
-			sprintf(buffer, "<div class=\"email-summary\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><div class=\"email-delete\"><a href=\"%semail/delete/%d\"><img src=\"%sstatic/delete.png\" alt=\"delete\" /></a></div></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id, conf.www_url);
+			sprintf(buffer, "<div class=\"email-summary\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><a href=\"%semail/delete/%d\"><div class=\"email-delete\"></div></a></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id);
 			if (len + strlen(buffer) > max_len - 1) {
 				max_len += 4096;
 				page = (char *)realloc(page, max_len);
@@ -626,7 +626,7 @@ sqlite3_busy_timeout(db, 5000);
 			strcat(page, buffer);
 			len += strlen(buffer);
 		} else {
-			sprintf(buffer, "<div class=\"email-summary-seen\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><div class=\"email-delete\"><a href=\"%semail/delete/%d\"><img src=\"%sstatic/delete.png\" alt=\"delete\" /></a></div></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id, conf.www_url);
+			sprintf(buffer, "<div class=\"email-summary-seen\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><a href=\"%semail/delete/%d\"><div class=\"email-delete\"></div></a></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id);
 			if (len + strlen(buffer) > max_len - 1) {
 				max_len += 4096;
 				page = (char *)realloc(page, max_len);