fancy responsiveness!

This commit is contained in:
/jdi/ 2015-07-21 23:50:47 +02:00
parent b0580bea23
commit 94ba6a3b21
6 changed files with 57 additions and 306 deletions

View File

@ -23,39 +23,47 @@ Array("name"=>"kontakt","url"=>"/kontakt","title"=>"Kontakt")
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr><td id="marx"></td>
<td id="main">
<header id="header">
<h1>INTERFUG #1//2015</h1>
</header>
<nav id="nav">
<ul>
<?php
foreach($pages as $p)
echo "<li><a href=\"".$p["url"]."\"".($pageId==$p["name"]?" class=\"active\"":"")."><span>".$p["title"]."</span></a></li>\n";
?>
</ul>
</nav>
<div>
<article>
<?php
foreach($pages as $p){
if($pageId==$p["name"]){
$c="if15".substr(base_convert(md5("if15".rand()), 16, 36), 0, 9);
echo str_replace("#code#",$c,file_get_contents("text/".$p["name"].".html"));
<div id="header" class="container">
<header id="title">
<h1>INTERFUG #1//2015</h1>
</header>
<nav id="nav">
<ul>
<?php
foreach($pages as $p)
echo "<li><a href=\"".$p["url"]."\"".($pageId==$p["name"]?" class=\"active\"":"")."><span>".$p["title"]."</span></a></li>\n";
?>
</ul>
</nav>
<div class="border">
</div>
</div>
<div id="main" class="container">
<article id="content" class="box">
<div id="navplaceholder"></div>
<?php
foreach($pages as $p){
if($pageId==$p["name"]){
$c="if15".substr(base_convert(md5("if15".rand()), 16, 36), 0, 9);
echo str_replace("#code#",$c,file_get_contents("text/".$p["name"].".html"));
}
}
}
?>
<!--footer id="footer" class="box" style="color:#C0C0C0">
<ul class="links">
<li><a href="https://chaoschemnitz.de/ChaosChemnitz:Impressum">Impressum</a></li>
<li>Design by ... + <a href="https://jdi.li/">/jdi/</a>.</li>
</ul>
</footer-->
</article>
</div>
</td><td id="line"></td>
/*
<!--footer id="footer" class="box" style="color:#C0C0C0">
<ul class="links">
<li><a href="https://chaoschemnitz.de/ChaosChemnitz:Impressum">Impressum</a></li>
<li>Design by ... + <a href="https://jdi.li/">/jdi/</a>.</li>
</ul>
</footer-->
*/
?>
</article>
</div>
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="marx"></td>
<td class="container"></td>
<td id="line"></td>
</tr>
</table>
</body>

View File

@ -1,6 +1,4 @@
<?php
//header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
//header("Pragma: no-cache"); //HTTP 1.0
header("Expires: ".gmdate("D, d M Y H:i:s", time() + 180) ." GMT"); // Date in the past
header('Content-type: text/css');
@ -17,253 +15,5 @@ color:#ffde00;
*
*/
$color=$colors[rand(0, 2)];
include "raw.css";
?>
@charset 'UTF-8';
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
@font-face {
font-family: 'OCR';
font-style: normal;
font-weight: 300;
src: url(/misc/ocr_a_regular.ttf);
}
*{
margin:0;
padding:0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html{
height:100%;
}
body, input, textarea, select, option
{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: #222;
}
strong, b{
font-weight: 400;
color: #363636;
}
h1, h2, h3, h4,h5, h6{
font-family: 'OCR';
font-weight: 400;
color: #363636;
margin-bottom:0.5em;
}
h2{
padding-bottom:0.5em;
}
h3{
text-transform:uppercase;
}
a{
color:inherit;
}
blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
em, i
{
font-style: italic;
}
hr
{
border: 0;
border-top: solid 1px #ddd;
padding: 1.5em 0 0 0;
margin: 1.75em 0 0 0;
clear:both;
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}
table
{
width: 100%;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table, blockquote, form
{
margin-bottom: 2em;
}
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#container{
width: 100%;
height:100%;
margin:0;
background:#F8F8F8;
}
#marx{
min-width:130px;
width:*;
background: url("/img/marx_<?php echo $color["name"]; ?>.png") no-repeat right;
background-size:cover;
}
#line{
min-width:130px;
width:*;
background: url("/img/line_<?php echo $color["name"]; ?>.png") right;
background-size:contain;
}
#main{
background: #FFF;
width:700px;
height: 100vh;
min-width:500px;
border-right: 4px solid <?php echo $color["rgb"]; ?>;
border-left: 4px solid <?php echo $color["rgb"]; ?>;
position: relative;
}
#main>div{
padding-top:130px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
#main article{
padding-top:12px;
padding-left:100px;
padding-right:20px;
height:100%;
overflow-x: hidden;
overflow-y: auto;
}
.box{
margin:10px;
overflow:hidden;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#header
{
position:absolute;
top:30px;
height:100px;
left:-120px;
right:-70px;
padding-left:50px;
text-align:center;
}
#header h1
{
font-size:64px;
}
#nav
{
position:absolute;
top:142px;
left:-120px;
width:200px;
}
#nav ul
{
list-style-type:none;
}
#nav li, header
{
border: 4px solid <?php echo $color["rgb"]; ?>;
background: white;
margin-bottom:12px;
padding:4px;
}
#nav a{
display: inline-block;
width:100%
}
#nav a span
{
/*text-transform:*/
background:url("/img/texture_<?php echo $color["name"]; ?>.png") no-repeat right bottom;
background-size:70%;
font-family:'OCR';
display: inline-block;
color: #000;
font-size:1.3em;
width:100%;
line-height: 1.5em;
padding-right:60px;
}
#nav .active span
{
text-decoration:underline;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
font-family:'OCR';
}

View File

@ -1,4 +1,3 @@
<div id="content" class="box">
<h2>Was ist der Interfug?</h2>
<p>Wir, der <a href="https://chaoschemnitz.de/Hauptseite" title="Chaostreff Chemnitz">Chaostreff Chemnitz</a> veranstalten am letzten August-Wochenende (29. &amp; 30.08.2015) unsere erste Konferenz. Dies ist unser Einstand in die Organisation chaosnaher Veranstaltungen und das erste derartige Event in der ehemaligen Industriemetropole und heutigen "Stadt der Moderne" Chemnitz (ehemals Karl-Marx-Stadt).
<br />Wir freuen uns daher, euch erstmals eine B&uuml;hne und Technik f&uuml;r eure Ideen, Vortr&auml;ge, Pr&auml;sentationen und Workshops bieten zu k&ouml;nnen.</p>

View File

@ -1,8 +1,6 @@
<div id="content" class="box">
<h2>Interfug 2015</h2>
<p>
Der <a href="https://chaoschemnitz.de" title="Chaostreff Chemnitz">Chaostreff Chemnitz</a> veranstaltet am letzten Augustwochenende (<b>29. &amp; 30.08.2015</b>) seine erste Konferenz.
Damit das auch ordentlich Spaß macht und ihr euer Wissen m&ouml;glichst effizient verbreiten k&ouml;nnt, bieten wir eine B&uuml;hne und Raum für Vortr&auml;ge, Workshops und Hacking an.
</p>
<img alt="die A102 bei Nacht" src="/img/chch_nacht.jpg" width="500">
</div>
<h2>Interfug 2015</h2>
<p>
Der <a href="https://chaoschemnitz.de" title="Chaostreff Chemnitz">Chaostreff Chemnitz</a> veranstaltet am letzten Augustwochenende (<b>29. &amp; 30.08.2015</b>) seine erste Konferenz.
Damit das auch ordentlich Spaß macht und ihr euer Wissen m&ouml;glichst effizient verbreiten k&ouml;nnt, bieten wir eine B&uuml;hne und Raum für Vortr&auml;ge, Workshops und Hacking an.
</p>
<img alt="die A102 bei Nacht" src="/img/chch_nacht.jpg" width="500">

View File

@ -1,5 +1,3 @@
<div id="content" class="box">
<h2>Kontakt</h2>
<p>Solltest du noch Fragen haben, melde dich einfach unter <a href="mailto:kontakt@interfug.de">kontakt@interfug.de</a></p>
<p>Für weitere Kontaktmöglichkeiten schaue bitte in unser <a href="https://chaoschemnitz.de/ChaosChemnitz:Impressum">Impressum</a>.</p>
</div>

View File

@ -1,12 +1,10 @@
<div id="content" class="box">
<h2>Tickets</h2>
<p>
Der Ticketverkauf ist noch nicht gestartet.
</p>
<p>
Um Dich anzumelden sende eine Mail an <a href="mailto:tickets@interfug.de?subject=Anmeldung%20Intrefug15&body=Id:%20#code#"><b>tickets@interfug.de</b></a>.
</p><p>
<b>Betreff:</b> Anmeldung Intrefug15<br>
<b>Inhalt:</b> Id: #code#
</p>
</div>
<h2>Tickets</h2>
<p>
Der Ticketverkauf ist noch nicht gestartet.
</p>
<p>
Um Dich anzumelden sende eine Mail an <a href="mailto:tickets@interfug.de?subject=Anmeldung%20Intrefug15&body=Id:%20#code#"><b>tickets@interfug.de</b></a>.
</p><p>
<b>Betreff:</b> Anmeldung Intrefug15<br>
<b>Inhalt:</b> Id: #code#
</p>