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

View File

@ -1,6 +1,4 @@
<?php <?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("Expires: ".gmdate("D, d M Y H:i:s", time() + 180) ." GMT"); // Date in the past
header('Content-type: text/css'); header('Content-type: text/css');
@ -17,253 +15,5 @@ color:#ffde00;
* *
*/ */
$color=$colors[rand(0, 2)]; $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> <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). <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> <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>
<h2>Interfug 2015</h2> <p>
<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.
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.
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>
</p> <img alt="die A102 bei Nacht" src="/img/chch_nacht.jpg" width="500">
<img alt="die A102 bei Nacht" src="/img/chch_nacht.jpg" width="500">
</div>

View File

@ -1,5 +1,3 @@
<div id="content" class="box">
<h2>Kontakt</h2> <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>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> <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>
<h2>Tickets</h2> <p>
<p> Der Ticketverkauf ist noch nicht gestartet.
Der Ticketverkauf ist noch nicht gestartet. </p>
</p> <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>.
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>
</p><p> <b>Betreff:</b> Anmeldung Intrefug15<br>
<b>Betreff:</b> Anmeldung Intrefug15<br> <b>Inhalt:</b> Id: #code#
<b>Inhalt:</b> Id: #code# </p>
</p>
</div>