Commit 35267612 authored by jack's avatar jack
Browse files

Cleanups for responsive design.

parent eed56656

css/jity.css

+27 −61
Original line number Diff line number Diff line 


/**********************************

 * 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;

    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

+39 −24
Original line number Diff line number Diff line
@@ -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

+4 −4
Original line number Diff line number Diff line 
$('.wrapper').css(

    'min-height',

    parseInt($('.wrapper').css('min-height')) - 110

);
 
// $('.wrapper').css(

//     'min-height',

//     parseInt($('.wrapper').css('min-height')) - 110

// );

old/sticky.css

deleted100644 → 0
+0 −34
Original line number Diff line number Diff line 
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

deleted100644 → 0
+0 −38
Original line number Diff line number Diff line 
<!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>