fancy responsiveness!
This commit is contained in:
parent
b0580bea23
commit
94ba6a3b21
72
index.php
72
index.php
|
@ -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>
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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. & 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ühne und Technik für eure Ideen, Vorträge, Präsentationen und Workshops bieten zu können.</p>
|
||||
|
|
|
@ -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. & 30.08.2015</b>) seine erste Konferenz.
|
||||
Damit das auch ordentlich Spaß macht und ihr euer Wissen möglichst effizient verbreiten könnt, bieten wir eine Bühne und Raum für Vorträ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. & 30.08.2015</b>) seine erste Konferenz.
|
||||
Damit das auch ordentlich Spaß macht und ihr euer Wissen möglichst effizient verbreiten könnt, bieten wir eine Bühne und Raum für Vorträge, Workshops und Hacking an.
|
||||
</p>
|
||||
<img alt="die A102 bei Nacht" src="/img/chch_nacht.jpg" width="500">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue