changeset 180:a3f0f2a3551a

Split stylesheets into separate files for different platforms and also split certain page-specifics into their own files.
author Matti Hamalainen <ccr@tnsp.org>
date Thu, 07 Nov 2013 11:17:15 +0200
parents 9c20703a7a61
children 21109b309c6a
files admin.css admin.php img/fap.png img/fapsm.png main.css mconfig.inc.php.example msitegen.inc.php show.css show.php site.css
diffstat 10 files changed, 345 insertions(+), 507 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/admin.css	Thu Nov 07 11:17:15 2013 +0200
@@ -0,0 +1,52 @@
+#pageTabs {
+	margin-top: 10pt;
+	margin-bottom: 0px;
+	border-bottom: 5pt solid #595F23;
+}
+
+#pageTabs a {
+	text-decoration: none;
+	padding: 5pt;
+	margin: 5pt;
+	background: #595F23;
+	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
+	border-top-left-radius: 5pt;
+	border-top-right-radius: 5pt;
+}
+
+#pageTabs a:hover {
+	background: #C8D286;
+}
+
+#pageTabs a:active {
+	background: #C8D286;
+}
+
+#pageTabs a.admin {
+	position: relative;
+	right: -2em;
+}
+
+#admCont {
+	position: absolute;
+	top: 1em;
+	bottom: 1em;
+	left: 1em;
+	right: 1em;
+	padding: 1em;
+	border-radius: 10pt;
+	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
+	background: rgba(0,0,0,0.7);
+	color: #0f0;
+}
+
+#admin {
+	position: absolute;
+	left: 0em;
+	right: 0em;
+	top: 4em;
+	bottom: 0em;
+	padding: 1em;
+	margin: 0px;
+	color: #0f0;
+}
--- a/admin.php	Thu Nov 07 07:07:22 2013 +0200
+++ b/admin.php	Thu Nov 07 11:17:15 2013 +0200
@@ -10,6 +10,8 @@
 require_once "msession.inc.php";
 require_once "majax.php";
 
+$pageCSS["admin.css"] = "";
+
 cmLocaleInit();
 
 // Switch to https first, if needed
Binary file img/fap.png has changed
Binary file img/fapsm.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/main.css	Thu Nov 07 11:17:15 2013 +0200
@@ -0,0 +1,201 @@
+html {
+	-webkit-backface-visibility: hidden;
+}
+
+body {
+	font-family: monospace;
+	color: #0d0;
+	margin: 0em;
+	padding: 0em;
+}
+
+img {
+	border: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:active {
+	outline: none;
+}
+
+a:focus {
+	outline-style: none;
+}
+
+a, a:visited, a:active {
+	text-decoration: underline;
+	color: white;
+}
+
+#contents {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+#header h1 {
+	margin: 0em;
+}
+
+#maincontent h1, #maincontent h2 {
+	margin: 0em;
+	margin-top: 1em;
+	padding: 2pt;
+	padding-left: 1em;
+	background: rgba(0,255,0,0.3);
+	border-bottom: 2px solid rgba(0,0,0,0.2);
+	-moz-border-radius: 8pt;
+	border-radius: 8pt;
+}
+
+
+#maincontent h1 {
+	margin: 0em;
+}
+
+
+div.newsitem {
+}
+
+
+div.newsitem div.text {
+	margin-top: 0.5em;
+	margin-left: 1.5em;
+	margin-right: 1.5em;
+	padding-bottom: 1em;
+	border-bottom: 1px dotted white;
+}
+
+div.newsitem div.sig {
+	padding: 5pt;
+	font-family: Impact;
+	text-align: right;
+}
+
+
+
+
+table.attendees,table.misc,table.vote {
+	width: 100%;
+	font-size: 1em;
+}
+
+table td, table th {
+	-moz-border-radius: 2pt;
+	border-radius: 2pt;
+	overflow-x: hidden;
+}
+
+table th {
+	background: rgba(0,255,0,0.25);
+}
+
+table.attendees th.regtime, table.attendees td.regtime {
+	width: 10%;
+	display: none;
+}
+
+table.attendees th.oneliner {
+	width: 50%;
+}
+
+table.attendees th.name {
+	width: 10%;
+}
+
+table.attendees th.groups {
+	width: 10%;
+}
+
+tr.rodd td {
+	background: rgba(0,255,0,0.05);
+	-moz-border-radius: 2pt;
+	border-radius: 2pt;
+}
+
+tr.reven td {
+	background: rgba(0,255,0,0.15);
+}
+
+table.misc, table.vote {
+	padding-top: 1em;
+}
+
+table.misc tr:hover td, table.vote tr:hover td {
+	background: rgba(0,50,0,0.50);
+}
+
+div.reglink {
+	text-align: center;
+	padding: 0.5em;
+	font-size: 1.25em;
+	color: red;
+	border: 2pt solid rgba(0,0,0,0.35);
+	margin: 5pt;
+	-moz-border-radius: 8pt;
+	border-radius: 8pt;
+}
+
+.notice {
+	color: red;
+	text-align: center;
+	font-size: 1.25em;
+}
+
+.quote {
+	font-size: 1.5em;
+	color: #0f0;
+	text-shadow: 2px 2px 3px #0f0;
+}
+
+.overbooked {
+	color: red;
+}
+
+table.vote th.vvalue {
+	width: 1%;
+	min-width: 2.5em;
+}
+
+table.vote td.vvalue {
+	text-align: center;
+}
+
+td.vactive, td.vid {
+	text-align: center;
+}
+
+td.vid {
+	padding-right: 1em;
+	padding-left: 1em;
+}
+
+td.vkey {
+	width: 25%;
+}
+
+table.attendees th.rname {
+	width: 15%;
+}
+
+tr.vactive td.vkey, tr.vactive td.vactive {
+	background: rgba(0,255,0,0.7);
+}
+
+div.votectrl {
+	padding: 1em;
+}
+
+
+.mblink {
+	animation: mblink 1s steps(5, start) infinite;
+}
+
+@keyframes mblink {
+	to {
+		visibility: hidden;
+	}
+}
--- a/mconfig.inc.php.example	Thu Nov 07 07:07:22 2013 +0200
+++ b/mconfig.inc.php.example	Thu Nov 07 11:17:15 2013 +0200
@@ -23,14 +23,18 @@
 date_default_timezone_set("Europe/Helsinki");
 
 $securePages = array(
-  "/fap2012/admin" => true,
-  "/fap2012/register" => true,
-  "/fap2012/vote" => false,
+  "/fap2013/admin" => true,
+  "/fap2013/register" => true,
+  "/fap2013/vote" => false,
 );
 
 
-$pageTitle = "Finnish Amiga Party 2022";
+$pageTitle = "Finnish Amiga Party 2013";
 $pageCharset = "utf-8";
-$pageCSS = "site.css";
+$pageCSS = array(
+  "main.css" => "",
+  "desktop.css" => "only screen and (min-width: 801px)",
+  "mobile.css" => "only screen and (max-width: 799px), only screen and (max-device-width: 799px)"
+);
 
 ?>
\ No newline at end of file
--- a/msitegen.inc.php	Thu Nov 07 07:07:22 2013 +0200
+++ b/msitegen.inc.php	Thu Nov 07 11:17:15 2013 +0200
@@ -428,9 +428,11 @@
 }
 
 
-function cmPrintCSSLine($uri)
+function cmPrintCSSLine($uri, $media = "")
 {
-  echo " <link rel=\"stylesheet\" href=\"".$uri."\" type=\"text/css\" />\n";
+  echo
+    " <link rel=\"stylesheet\" href=\"".$uri.
+    "\" type=\"text/css\" ".($media != "" ? "media=\"".$media."\"": "")." />\n";
 }
 
 
@@ -446,8 +448,8 @@
 
   if (is_array($pageCSS))
   {
-    foreach ($pageCSS as $uri)
-      cmPrintCSSLine($uri);
+    foreach ($pageCSS as $uri => $media)
+      cmPrintCSSLine($uri, $media);
   }
   else
   {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/show.css	Thu Nov 07 11:17:15 2013 +0200
@@ -0,0 +1,73 @@
+div.showView {
+	position: absolute;
+	top: 2em;
+	bottom: 2em;
+	left: 2em;
+	right: 2em;
+	
+	background: rgba(0,0,0,0.5);
+	border-radius: 2em;
+	border: 5pt dashed rgba(0,255,0,0.7);
+}
+
+div.showHeader, div.compoHeader {
+	padding: 10pt;
+	z-index: 0;
+	text-align: center;
+	color: #0f0;
+}
+
+div.showHeader .title, div.compoHeader .title {
+	font-size: 32pt;
+}
+
+div.showText, div.compoNext {
+	z-index: 5;
+	font-size: 64pt;
+	text-align: center;
+	color: #0f0;
+}
+
+div.compoNext .entryIndex {
+	position: absolute;
+	top: 1.5em;
+	left: 20pt;
+	font-size: 128pt;
+	color: rgba(0,255,0,0.3);
+}
+
+div.compoNext .entryInfo {
+	position: absolute;
+	top: 50%;
+	right: 20pt;
+	width: 10em;
+	font-size: 24pt;
+	padding: 5pt;
+	border-radius: 10pt;
+	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
+}
+
+
+div.compoPrev {
+	position: absolute;
+	left: 1em;
+	bottom: 1em;
+	min-width: 30%;
+	color: #0f0;
+	font-size: 16pt;
+	font-weight: bold;
+
+	padding: 10pt;
+	border-radius: 10pt;
+	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
+	
+	text-align: right;
+}
+
+div.compoPrev .title {
+	border-bottom: 2px solid #0f0;
+	text-align: left;
+}
+
+
+
--- a/show.php	Thu Nov 07 07:07:22 2013 +0200
+++ b/show.php	Thu Nov 07 11:17:15 2013 +0200
@@ -8,6 +8,8 @@
 require_once "msite.inc.php";
 require_once "majax.php";
 
+$pageCSS["show.css"] = "";
+
 cmLocaleInit();
 stSetupCacheControl();
 
--- a/site.css	Thu Nov 07 07:07:22 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,498 +0,0 @@
-html {
-	-webkit-backface-visibility: hidden;
-}
-
-body {
-	font-family: monospace;
-	font-size: 12pt;
-	color: #0f0;
-	margin: 0px;
-	padding: 0px;
-	background: black url(img/grid.png);
-}
-
-img {
-	border: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:active {
-	outline: none;
-}
-
-a:focus {
-	outline-style: none;
-}
-
-a, a:visited, a:active {
-	text-decoration: underline;
-	color: white;
-}
-
-#contents {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-#header h1 {
-	margin: 0px;
-}
-
-#header {
-	position: fixed;
-	top: 0em;
-	left: 0em;
-	right: 0em;
-	height: 4em;
-	margin: 0px;
-	padding: 0.25em;
-
-	color: white;
-
-	font-family: Impact;
-	font-size: 20pt;
-	text-align: center;
-	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
-
-	border-radius: 5pt;
-	border: 5pt dashed rgba(0,0,0,0.2);
-}
-
-.logo {
-	font-size: 30pt;
-}
-
-#menu {
-	position: fixed;
-	top: 10em;
-	left: 0.5em;
-	right: 1em;
-	min-height: 10em;
-	margin: 0px;
-	padding: 5pt;
-	width: 8em;
-
-	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	font-family: Impact;
-	font-size: 15pt;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
-}
-
-
-#sponsors {
-	position: fixed;
-	top: auto;
-	bottom: 1em;
-	left: 0.5em;
-	right: 1em;
-	margin: 0px;
-	padding: 5pt;
-	width: 8em;
-
-	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	font-family: Impact;
-	font-size: 15pt;
-
-	text-align: center;
-
-	background: rgba(0,0,0,0.7);
-	border-radius: 5pt;
-}
-
-
-#menu div {
-	text-align: center;
-	font-size: 20pt;
-}
-
-#menu a {
-	text-decoration: none;
-	padding: 5pt;
-	margin: 5pt;
-	background: rgba(0,50,0,0.7);
-
-	color: #0d0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-
-	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
-	border-top-right-radius: 10pt;
-	border-bottom-left-radius: 10pt;
-	display: block;
-
-	transition: all 0.3s;
-}
-
-#menu a:hover {
-	background: rgba(0,50,0,0.4);
-	color: #fff;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
-	margin-left: 1pt;
-	margin-right: 1pt;
-}
-
-#infobox {
-	position: fixed;
-	top: 8.5em;
-	left: 12em;
-	min-width: 10em;
-
-	margin: 0px;
-	padding: 5pt;
-
-	z-index: 15;
-
-	font-family: Impact;
-	font-size: 15pt;
-	text-align: center;
-	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
-}
-
-#date {
-	font-size: 15pt;
-	text-align: right;
-	position: absolute;
-	right: 0.5em;
-	top: 0.5em;
-	
-	padding: 5pt;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
-}
-
-#maincontent {
-	position: fixed;
-	left: 13em;
-	right: 1em;
-	top: 12em;
-	bottom: 1em;
-	padding: 1em;
-	margin: 0px;
-	background: rgba(0,0,0,0.8);
-
-	border: 1pt solid #0f0;
-
-	box-shadow: 4px 4px 4px rgba(0,255,0,0.7), -4px -4px 4px rgba(0,255,0,0.7), 8px 8px 32px rgba(0,255,0,0.4) inset;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-	-moz-border-radius: 8pt;
-	border-radius: 8pt;
-	color: white;
-}
-
-#maincontent > div, #admin > div {
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-}
-
-#maincontent h1, #maincontent h2 {
-	margin: 0px;
-	margin-top: 1em;
-	padding: 2pt;
-	padding-left: 1em;
-	background: rgba(0,255,0,0.3);
-	border-bottom: 2px solid rgba(0,0,0,0.2);
-	-moz-border-radius: 8pt;
-	border-radius: 8pt;
-}
-
-#maincontent h1 {
-	margin: 0px;
-}
-
-div.newsitem {
-}
-
-div.newsitem div.text {
-	margin-top: 0.5em;
-	margin-left: 1.5em;
-	margin-right: 1.5em;
-	padding-bottom: 1em;
-	border-bottom: 1px dotted white;
-}
-
-div.newsitem div.sig {
-	padding: 5pt;
-	font-family: Impact;
-	text-align: right;
-}
-
-
-
-
-table.attendees,table.misc,table.vote {
-	width: 100%;
-	font-size: 10pt;
-}
-
-table td, table th {
-	-moz-border-radius: 2pt;
-	border-radius: 2pt;
-}
-
-table th {
-	background: rgba(0,255,0,0.25);
-}
-
-table.attendees th.regtime {
-	width: 20%;
-}
-
-table.attendees th.oneliner {
-	width: 50%;
-}
-
-tr.rodd td {
-	background: rgba(0,255,0,0.05);
-	-moz-border-radius: 2pt;
-	border-radius: 2pt;
-}
-
-tr.reven td {
-	background: rgba(0,255,0,0.15);
-}
-
-table.misc, table.vote {
-	padding-top: 1em;
-}
-
-table.misc tr:hover td, table.vote tr:hover td {
-	background: rgba(0,50,0,0.50);
-}
-
-div.reglink {
-	text-align: center;
-	padding: 0.5em;
-	font-size: 15pt;
-	color: red;
-	border: 2pt solid rgba(0,0,0,0.35);
-	margin: 5pt;
-	-moz-border-radius: 8pt;
-	border-radius: 8pt;
-}
-
-.notice {
-	color: red;
-	text-align: center;
-	font-size: 15pt;
-}
-
-.quote {
-	font-size: 20pt;
-	color: #0f0;
-	text-shadow: 2px 2px 3px #0f0;
-}
-
-.overbooked {
-	color: red;
-}
-
-table.vote th.vvalue {
-	width: 1%;
-	min-width: 2.5em;
-}
-
-table.vote td.vvalue {
-	text-align: center;
-}
-
-td.vactive, td.vid {
-	text-align: center;
-}
-
-td.vid {
-	padding-right: 1em;
-	padding-left: 1em;
-}
-
-td.vkey {
-	width: 25%;
-}
-
-table.attendees th.rname {
-	width: 15%;
-}
-
-tr.vactive td.vkey, tr.vactive td.vactive {
-	background: rgba(0,255,0,0.7);
-}
-
-div.votectrl {
-	padding: 1em;
-}
-
-
-.mblink {
-	animation: mblink 1s steps(5, start) infinite;
-}
-
-@keyframes mblink {
-	to {
-		visibility: hidden;
-	}
-}
-
-
-div.showView {
-	position: absolute;
-	top: 2em;
-	bottom: 2em;
-	left: 2em;
-	right: 2em;
-	
-	background: rgba(0,0,0,0.5);
-	border-radius: 2em;
-	border: 5pt dashed rgba(0,255,0,0.7);
-}
-
-div.showHeader, div.compoHeader {
-	padding: 10pt;
-	z-index: 0;
-	text-align: center;
-	color: #0f0;
-}
-
-div.showHeader .title, div.compoHeader .title {
-	font-size: 32pt;
-}
-
-div.showText, div.compoNext {
-	z-index: 5;
-	font-size: 64pt;
-	text-align: center;
-	color: #0f0;
-}
-
-div.compoNext .entryIndex {
-	position: absolute;
-	top: 1.5em;
-	left: 20pt;
-	font-size: 128pt;
-	color: rgba(0,255,0,0.3);
-}
-
-div.compoNext .entryInfo {
-	position: absolute;
-	top: 50%;
-	right: 20pt;
-	width: 10em;
-	font-size: 24pt;
-	padding: 5pt;
-	border-radius: 10pt;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
-}
-
-
-div.compoPrev {
-	position: absolute;
-	left: 1em;
-	bottom: 1em;
-	min-width: 30%;
-	color: #0f0;
-	font-size: 16pt;
-	font-weight: bold;
-
-	padding: 10pt;
-	border-radius: 10pt;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
-	
-	text-align: right;
-}
-
-div.compoPrev .title {
-	border-bottom: 2px solid #0f0;
-	text-align: left;
-}
-
-
-
-#pageTabs {
-	margin-top: 10pt;
-	margin-bottom: 0px;
-	border-bottom: 5pt solid #595F23;
-}
-
-#pageTabs a {
-	text-decoration: none;
-	padding: 5pt;
-	margin: 5pt;
-	background: #595F23;
-	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
-	border-top-left-radius: 5pt;
-	border-top-right-radius: 5pt;
-}
-
-#pageTabs a:hover {
-	background: #C8D286;
-}
-
-#pageTabs a:active {
-	background: #C8D286;
-}
-
-#pageTabs a.admin {
-	position: relative;
-	right: -2em;
-}
-
-#admCont {
-	position: absolute;
-	top: 1em;
-	bottom: 1em;
-	left: 1em;
-	right: 1em;
-	padding: 1em;
-	border-radius: 10pt;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
-	background: rgba(0,0,0,0.7);
-}
-
-#admin {
-	position: absolute;
-	left: 0em;
-	right: 0em;
-	top: 4em;
-	bottom: 0em;
-	padding: 1em;
-	margin: 0px;
-}