Mercurial > hg > fapweb

changeset 181:21109b309c6a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add stylesheet files for mobile and desktop. Mobile version is very broken at the moment.
author Matti Hamalainen <ccr@tnsp.org>
date Thu, 07 Nov 2013 11:17:59 +0200
parents a3f0f2a3551a
children e227e6a3d46b
files desktop.css img/gridsm.png mobile.css
diffstat 3 files changed, 291 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/desktop.css	Thu Nov 07 11:17:59 2013 +0200
@@ -0,0 +1,184 @@
+body {
+	background: black url(img/grid.png);
+}
+
+a.logo {
+	background: url(img/fap.png) no-repeat center;
+	height: 10em;
+	display: block;
+}
+
+
+#header {
+	position: fixed;
+	top: 0em;
+	left: 0em;
+	right: 0em;
+	height: 4em;
+	margin: 0em;
+	padding: 0.25em;
+}
+
+
+#sponsors {
+	position: fixed;
+	top: auto;
+	bottom: 1em;
+	left: 0.5em;
+	right: 1em;
+	margin: 0em;
+	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 {
+	position: fixed;
+	top: 10em;
+	left: 0.5em;
+	right: 1em;
+	min-height: 10em;
+	margin: 0em;
+	padding: 0.25em;
+	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: 1.25em;
+
+	border-radius: 5pt;
+	box-shadow: 8px 8px 16px #000;
+}
+
+
+#menu div {
+	text-align: center;
+	font-size: 1.25em;
+}
+
+#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.2em;
+	left: 11em;
+	min-width: 10em;
+
+	margin: 0em;
+	padding: 5pt;
+
+	z-index: 15;
+
+	font-family: Impact;
+	font-size: 1.3em;
+	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 {
+	position: absolute;
+	right: 0.5em;
+	top: 1.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;
+
+	text-align: right;
+	color: white;
+	font-size: 1.2em;
+	font-family: Impact;
+	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
+}
+
+#maincontent {
+	position: fixed;
+	left: 13em;
+	right: 1em;
+	top: 12em;
+	bottom: 1em;
+	padding: 1em;
+	margin: 0em;
+	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;
+}
Binary file img/gridsm.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mobile.css	Thu Nov 07 11:17:59 2013 +0200
@@ -0,0 +1,107 @@
+body {
+	background: black url(img/gridsm.png);
+	font-size: 10px;
+}
+
+a.logo {
+	display: none;
+}
+
+
+#header {
+	display: none;
+}
+
+
+#menu {
+	position: fixed;
+	top: 0.5em;
+	left: 0.5em;
+	right: 0.5em;
+	margin: 0em;
+	width: auto;
+	height: auto;
+	padding: 0.1em;
+
+	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: 1em;
+
+	border-radius: 5pt;
+	box-shadow: 8px 8px 16px #000;
+}
+
+
+#menu div {
+	display: none;
+}
+
+#menu a {
+	float: left;
+	display: inline;
+	text-decoration: none;
+	padding: 5pt;
+	margin: 3pt;
+	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;
+
+	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;
+}
+
+#date {
+	display: none;
+}
+
+#maincontent {
+	position: fixed;
+	top: 4em;
+	left: 1em;
+	right: 1em;
+	bottom: 1em;
+	padding: 1em;
+	margin: 0em;
+	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;
+}
+