Skip to content

jity-bootstrap
jity-bootstrap
Commit 35267612 authored by jack's avatar jack
Browse files
Options

Cleanups for responsive design.

parent eed56656
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 375 deletions
css/jity.css
View file @ 35267612
/**********************************
* Layout
*********************************/
html, body {
height: 100%;
}
......@@ -8,22 +10,16 @@ footer {
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -163px;
}
.push {
height: 163px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 20px;
padding-bottom: 20px;
}
/* responsive footer fix by Aalaap Ghag */
@media (max-width: 767px) {
body {
padding-right: 0px;
......@@ -36,71 +32,47 @@ footer {
}
}
/* .container { */
/* max-width: 960px; */
/* } */
/* end responsive footer fix */
.center {
margin:0 auto;
float:none;
margin: 0 auto;
text-align: center;
}
.middle {
margin: 0 auto;
}
.cell {
width: 160px;
}
/**********************************
* Coloring and Styling
*********************************/
html, body {
background-color: #201f1d;
/* background-color: #201f1d; */
background-color: #151515;
}
.hero-unit {
background-color: #b0aca6;
}
/* .wrapper { */
/* padding-top: 20px; */
/* min-height: 100%; */
/* height: auto !important; */
/* height: 100%; */
/* margin: 0 auto -165px; */
/* } */
.wrapper {
background-color: #201f1d;
}
.wrapper > .container, .wrapper > .container-fluid {
color: #8F8F8F;
}
/* footer, .push { */
/* height: 160px; */
/* } */
footer {
color: #666;
/* background: #151515; */
background: #151515;
border-top: 5px solid #4A4539;
}
/* footer > .container { */
/* padding-top: 20px; */
/* */
/* } */
/* */
/* .wrapper > #theaser { */
/* margin-top: 40px; */
/* } */
.table-striped tbody tr:nth-child(2n+1) td, .table-striped tbody tr:nth-child(2n+1) th {
background-color: #989289;
border: none;
......@@ -171,18 +143,12 @@ p {
margin-top: 10px;
}
/* @media (max-width: 767px) { */
/* .wrapper { */
/* padding-right: 20px; */
/* padding-left: 20px; */
/* } */
/* } */
@media (max-width: 767px) {
#sidebar {
border-left: none;
padding-left: 0px;
margin-left: 0px;
}
}
index.html
View file @ 35267612
......@@ -123,14 +123,15 @@
<div class="row">
<div class="span2">
<img src="img/signature.png" alt="" class="center"/>
<p><small class="center">&copy; Hermann Mayer 2012</small></p>
<div class="span2 center">
<img src="img/signature.png" alt=""/>
<p class="center"><small class="">&copy; Hermann Mayer 2012</small></p>
</div>
<div class="span6">
<h5>Über das Projekt</h5>
<p><small>
<br>Diese Website wurde mit <a target="_blank" href="http://symfony.com">Symfony 2</a> und
Diese Website wurde mit <a target="_blank" href="http://symfony.com">Symfony 2</a> und
der <a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> realisiert.
Die Icons wurden zur Verfügung gestellt von <a href="http://glyphicons.com">Glyphicons</a>. Der Quellcode
des Projekts ist Open
......@@ -140,28 +141,42 @@
</small></p>
</div>
<div class="span2">
<h5>Services</h5>
<small>
<ul>
<li><a target="_blank" href="http://gitorious.hermann-mayer.net">Gitorious</a></li>
<li><a target="_blank" href="http://projects.hermann-mayer.net/">Chiliprojects</a></li>
<li><a target="_blank" href="http://ebay-tool.hermann-mayer.net/">eBay Tool</a></li>
</ul>
</small>
</div>
<div class="span2">
<h5>Allgemeines</h5>
<small>
<ul>
<li>Impressum</li>
<li>Über mich</li>
<li>Kontakt</li>
</ul>
</small>
<div class="span4">
<h5>Services und Allgemeines</h5>
<p><small>
Unter anderem biete ich folgende Diensten an:
<a target="_blank" href="http://gitorious.hermann-mayer.net">Gitorious</a>,
<a target="_blank" href="http://projects.hermann-mayer.net/">Chiliprojects</a> und
<a target="_blank" href="http://ebay-tool.hermann-mayer.net/">eBay Tool</a>.
Allgemeine Informationen können sie aus folgenden Quellen beziehen:
<a target="_blank" href="http://gitorious.hermann-mayer.net">Gitorious</a>,
<a target="_blank" href="http://projects.hermann-mayer.net/">Chiliprojects</a> und
<a target="_blank" href="http://ebay-tool.hermann-mayer.net/">eBay Tool</a>.
</small></p>
</div>
<!---->
<!-- <div class="span2">-->
<!-- <h5>Services</h5>-->
<!-- <small>-->
<!-- <ul>-->
<!-- <li><a target="_blank" href="http://gitorious.hermann-mayer.net">Gitorious</a></li>-->
<!-- <li><a target="_blank" href="http://projects.hermann-mayer.net/">Chiliprojects</a></li>-->
<!-- <li><a target="_blank" href="http://ebay-tool.hermann-mayer.net/">eBay Tool</a></li>-->
<!-- </ul>-->
<!-- </small>-->
<!-- </div>-->
<!---->
<!-- <div class="span2">-->
<!-- <h5>Allgemeines</h5>-->
<!-- <small>-->
<!-- <ul>-->
<!-- <li>Impressum</li>-->
<!-- <li>Über mich</li>-->
<!-- <li>Kontakt</li>-->
<!-- </ul>-->
<!-- </small>-->
<!-- </div>-->
</div>
</div>
</footer>
......
js/jity.js
View file @ 35267612
$('.wrapper').css(
'min-height',
parseInt($('.wrapper').css('min-height')) - 110
);
// $('.wrapper').css(
// 'min-height',
// parseInt($('.wrapper').css('min-height')) - 110
// );
old/sticky.css deleted 100644 → 0
View file @ eed56656
html, body, .container, .content {
height: 100%;
}
.container, .content {
position: relative;
}
.proper-content {
padding-top: 40px; /* >= navbar height */
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* same as the footer */
}
.push {
height: 50px; /* same as the footer */
}
.footer-wrapper {
position: relative;
height: 50px;
width: 100%;
}
footer {
color: #666;
background: #151515;
border-top: 5px solid #4A4539;
}
old/template.html deleted 100644 → 0
View file @ eed56656
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="sticky.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">EngineerGio's Sticky Bootstrap</a>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="wrapper">
<div class="proper-content">
<div class="row">
<div class="span12">
Content
</div>
</div>
</div><!-- /.proper-content -->
<div class="push"></div>
</div><!-- /.wrapper -->
</div>
</div> <div class="footer-wrapper">
<footer>That's the sticky footer</footer>
</div>
</body>
</html>
old/test.html deleted 100644 → 0
View file @ eed56656
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Aalaap Ghag" />
<title>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer and Aalaap Ghag&rsquo;s Responsive Padding Fix</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
/* responsive footer fix by Aalaap Ghag */
@media (max-width: 767px) {
body {
padding-right: 0px;
padding-left: 0px;
}
footer, .wrapper {
padding-left: 20px;
padding-right: 20px;
}
}
/* .container { */
/* max-width: 960px; */
/* } */
/* end responsive footer fix */
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="span8">
<img class="img-polaroid pull-left" alt="" src="img/myself-cc3-300px.png">
<p>
Meine Name ist Hermann Mayer, ich wurde am 02. August im Jahre 1992 in
Berlin geboren und bin in einem kleinen Örtchen Namens Augsdorf, dass
im ehemaligen Mansfelder Land liegt, aufgewachsen.
</p>
<p>
Heute heißt dieser Landkreis, in Sachsen-Anhalt, Mansfeld-Südharz. Eine
frohe und aufgeschlossene Natur wurde mir in die Wiege gelegt und diese
habe ich mir bis heute erhalten können, nicht zuletzt auch durch die Art
und Weise wie ich manche Dinge bewerte und durch die Fähigkeit mich
selbst nicht immer zu ernst zu nehmen.
</p>
<p>
Verschiedene Hobbys haben sich im Laufe meines Lebens heraus kristallisiert,
dazu gehört das leidenschaftliche Motorradfahren, das Programmieren und
Verwirklichen von Projekten in meiner Freizeit, sowie der Drang meine
Kreativität durch Gedichte oder Digitale Kunst auszudrücken. Ich habe
die Angewohnheit meine Umwelt genau zu beobachten und zu analysieren,
auch völlig unbewusst. Dies ist oftmals auch eine Quelle für Inspirationen,
jeglicher Art.
</p>
<p>
Des Weiteren bin ich ein Mensch der Musik liebt, und sie braucht. Ich habe
fast immer Musik an, egal ob Radio oder Alben meiner Lieblings Interpreten,
sei es Unterwegs per N900 oder zu Hause mit der dortigen Workstation. Musik
trägt zu meiner Entspannung bei, fördert aber auch die Konzentrationsfähigkeit
in meinem Falle. Eine weitere Eigenheit von mir ist der unerschöpfliche Wunsch
nach Wissen, wenn mich etwas interessiert erkunde ich es tiefgründig. Ich
verbringe dadurch viele Stunden meines Tages mit dem Lesen von Büchern (digitaler
oder gedruckter Art) oder dem recherchieren im Internet.
</p>
<p>
Zudem liebe ich es zu Planen und zu Organisieren. Manchmal verbringe ich
Tage mit der gedanklichen Ausgestaltung eines Planes, der in Jahren,
Jahrzehnten oder nie zum Einsatz kommen wird. Außerdem bin ich kontaktfreudig,
wortgewandt und tolerant in jedem Aspekt. Meine Art ist direkt und offen, ich
sage was ich denke, auch wenn es nicht immer das ist was andere gern hören
wollen. Trotzdem pflege ich meine sozialen Kontakte und Bindungen und versuche
mich in die Probleme anderer hineinzudenken um sie zu verstehen. Zudem bin ich
hilfsbereit, selbst wenn dies für mich zusätzliche Arbeit bedeutet.
</p>
</div>
<div id="sidebar" class="span3">
<div class="">
<h2>Teilen</h2>
<p>
Hat Ihnen diese Seite gefallen? Teilen Sie sie doch mit Ihren
Freunden und Bekannten über Googles Soziales Netzwerk oder über Facebook.
</p>
<p>
<a href="" class="btn btn-danger"><img src="img/glyphicons_386_google_plus.png" /> Google+</a>
<a href="" class="btn btn-primary"><img src="img/glyphicons_390_facebook.png" /> Facebook</a>
</p>
</div>
</div>
</div>
</div>
<!-- <div class="container"> -->
<!-- <header class="hero-unit"> -->
<!-- <h1>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer and Aalaap Ghag&rsquo;s Responsive Padding Fix</h1> -->
<!-- <p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p> -->
<!-- </header> -->
<!-- </div> -->
<div class="push"><!--//--></div>
</div> <!-- .wrapper -->
<footer>
<!-- <div class="container"> -->
<!-- <p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Ryan Fait&rsquo;s Sticky Footer</a> and <a href="#">Aalaap Ghag&rsquo;s Responsive Padding Fix</a>.</p> -->
<!-- </div> -->
<div class="container">
<div class="row">
<div class="span2">
<img src="img/signature.png" alt="" class="center"/>
<small class="">&copy; Hermann Mayer 2012</small>
</div>
<div class="span6">
<p><small>
Diese Website wurde mit <a target="_blank" href="http://symfony.com">Symfony 2</a> und
der <a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> realisiert.
Die Icons wurden zur Verfügung gestellt von <a href="http://glyphicons.com">Glyphicons</a>. Der Quellcode
des Projekts ist Open
Source lizenziert und steht in meinem selbst betriebenen Gitorious zur Verfügung.
Haben Sie fragen, oder Anregungen? Kein Problem &ndash; Nebenstehend finden Sie
weiterführende Verweise zu meinen Kontaktdaten und den Services die ich anbiete.
</small></p>
</div>
<div class="span2">
<h5>Services</h5>
<small>
<ul>
<li><a target="_blank" href="http://gitorious.hermann-mayer.net">Gitorious</a></li>
<li><a target="_blank" href="http://projects.hermann-mayer.net/">Chiliprojects</a></li>
<li><a target="_blank" href="http://ebay-tool.hermann-mayer.net/">eBay Tool</a></li>
</ul>
</small>
</div>
<div class="span2">
<h5>Allgemeines</h5>
<small>
<ul>
<li>Impressum</li>
<li>Über mich</li>
<li>Kontakt</li>
</ul>
</small>
</div>
</div>
</div>
</footer>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment