dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

twerk the github pages section a bit so it mostly works

This commit is contained in:
Coby Chapple 2013-04-04 16:28:25 +01:00
parent f98482d0fa
commit 68e82a1cac
2 changed files with 62 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
site/css/style.css
View File

@ -17,6 +17,18 @@ body {
text-shadow: 0 1px 3px rgba(0,0,0,.5); text-shadow: 0 1px 3px rgba(0,0,0,.5);
} }
.clear {
display: block;
}
.clear:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Sections */ /* Sections */
body > header, body > section, body > footer { body > header, body > section, body > footer {
@ -192,7 +204,7 @@ body > footer a:hover img {
} }
.quickstart .code { .quickstart .code {
font-size: 13px; font-size: 12px;
display: block; display: block;
margin: 0 0 -30px; margin: 0 0 -30px;
} }
@ -221,7 +233,7 @@ body > footer a:hover img {
.quickstart .code .title { .quickstart .code .title {
display: block; display: block;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 20px;
padding: 5px 0; padding: 5px 0;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5); box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
@ -245,7 +257,7 @@ body > footer a:hover img {
.quickstart .code .shell { .quickstart .code .shell {
padding: 20px; padding: 20px;
text-shadow: none; text-shadow: none;
margin: 0 10px; margin: 0 20px;
background: #3d3d3d; background: #3d3d3d;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
box-shadow: 0 5px 30px rgba(0,0,0,.3); box-shadow: 0 5px 30px rgba(0,0,0,.3);
@ -279,49 +291,58 @@ body > footer a:hover img {
/* Free Hosting */ /* Free Hosting */
.free-hosting .content {
/*margin-bottom: 40px;*/
position: relative;
}
.free-hosting .pane { .free-hosting .pane {
background: #444; background: #444;
border-radius: 10px; border-radius: 10px;
padding: 40px 70px 30px;
/*color: #222;*/
text-shadow: none; text-shadow: none;
position: relative;
padding: 0 20px 30px;
} }
.free-hosting img { .free-hosting img {
float: left; margin: -30px 0 0;
margin: -20px 40px -40px -20px; width: 180px;
height: 150px;
} }
.free-hosting h2 { .free-hosting h2 {
/*font-weight: 800;*/ font-size: 28px;
} }
.free-hosting p, .free-hosting p,
.free-hosting a { .free-hosting a {
font-weight: inherit; font-size: 16px;
} }
.free-hosting p { .free-hosting p {
margin: 0.75em; margin: .75em 0;
} }
.free-hosting a { @media (min-width: 768px){
/*color: #c00;*/ .free-hosting img {
} float: left;
margin: -20px -30px -30px -50px;
.free-hosting .content:after { width: 300px;
content: " "; height: 251px;
float: right; }
background: url(../img/footer-arrow.png) top left no-repeat; .free-hosting .pane-content {
width: 73px; margin-top: 35px;
height: 186px; padding-right: 30px;
position: absolute; }
right: 30px; .free-hosting p,
bottom: -60px; .free-hosting a {
font-size: 18px;
}
.free-hosting .pane:after {
content: " ";
float: right;
background: url(../img/footer-arrow.png) top left no-repeat;
width: 73px;
height: 186px;
position: absolute;
right: 0;
bottom: -30px;
}
} }
/* HTML Elements */ /* HTML Elements */

22
site/index.html
View File

@ -66,16 +66,20 @@ overview: true
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</section> </section>
<section class="free-hosting pane"> <section class="free-hosting">
<div class="grid"> <div class="grid">
<div class="unit one-third"> <div class="unit whole">
<img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages"> <div class="grid pane">
</div> <div class="unit whole center-on-mobiles">
<div class="unit two-thirds"> <img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
<h2><strong>Free hosting</strong> with GitHub Pages</h2> <div class="pane-content">
<p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and all.</p> <h2 class="center-on-mobiles"><strong>Free hosting</strong> with GitHub Pages</h2>
<a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a> <p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and&nbsp;all.</p>
<div class="clear"></div> <a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
</div>
</div>
<div class="clear"></div>
</div>
</div> </div>
</div> </div>
</section> </section>