styling update
This commit is contained in:
Koen
parent
2c31d792a4
commit
eb0c62c822
57
index.html
57
index.html
|
|
@ -3,8 +3,6 @@
|
|||
<head>
|
||||
<title>Programming Fonts - Test Drive App</title>
|
||||
<meta charset="utf-8"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
|
||||
<!-- Favicons -->
|
||||
|
|
@ -89,7 +87,7 @@
|
|||
line-height: 2;
|
||||
}
|
||||
.background {
|
||||
background: url('http://static.tumblr.com/29b40daad2ef73e757cea2aa8538f348/ythva06/puMnf7dz7/tumblr_static_5c6usnox6y8880o08kk4gcwgo.jpg') no-repeat center center fixed;
|
||||
background: url('http://static.tumblr.com/5c5a2b58eb02d73886b75e948c4231aa/ythva06/cCenfcrzk/tumblr_static_e2e836q1c88owkc00sos0444o.jpg') no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
|
|
@ -102,7 +100,7 @@
|
|||
h1 {
|
||||
font-family: 'Patua One', serif;
|
||||
font-weight: normal;
|
||||
color: #f5f5f5;
|
||||
color: #444;
|
||||
font-size: 64px;
|
||||
line-height: 64px;
|
||||
margin: 0 0 64px 0;
|
||||
|
|
@ -129,13 +127,7 @@
|
|||
}
|
||||
article p {
|
||||
text-align: center;
|
||||
padding: 0 32px 16px 32px;
|
||||
}
|
||||
article p:last-child {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
article form {
|
||||
margin-bottom: 32px;
|
||||
padding: 32px;
|
||||
}
|
||||
select {
|
||||
margin-right: 32px;
|
||||
|
|
@ -177,15 +169,6 @@
|
|||
.select {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:640px) {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
padding-top: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -196,7 +179,7 @@
|
|||
|
||||
<h1>Programming Fonts Test Drive</h1>
|
||||
|
||||
<p class="description">What font looks best with code? Try over 40 free programming fonts and find out!</p>
|
||||
<p class="description">Want to know which font looks best in a code editor? Try over 40 free programming fonts right here.</p>
|
||||
|
||||
<article>
|
||||
<form>
|
||||
|
|
@ -301,24 +284,24 @@ function findSequence(goal) {
|
|||
</select></span>
|
||||
</p>
|
||||
|
||||
<p><a href="http://programmingfonts.org/list" rel="external">Download your favourite fonts</a>, or use <a href="http://atom.io/packages/fonts" rel="external">this package</a> in <a href="http://atom.io">Atom</a></p>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Built with <a href="http://codemirror.net/" rel="external">CodeMirror</a>, <a href="https://github.com/typekit/webfontloader" rel="external">Google/Typekit Web Font Loader</a>, <a href="http://cdnjs.com/" rel="external">CDNJS</a>, <a href="https://github.com/braver/programmingfonts">Github</a>, photography from <a href="http://unsplash.com">Unsplash</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://programmingfonts.org">Back to the blog</a> - © 2014 <a href="http://koenlageveen.nl" style="color: #eee;">Koen Lageveen</a>
|
||||
<p>
|
||||
</article>
|
||||
|
||||
<a href="https://github.com/braver/programmingfonts"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
|
||||
</footer>
|
||||
<p class="description"><a href="http://programmingfonts.org/list" rel="external">Download your favourite fonts</a></p>
|
||||
|
||||
<!-- Some jquery to make live easier -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<footer>
|
||||
<p>
|
||||
Built with <a href="http://codemirror.net/" rel="external">CodeMirror</a>, <a href="https://github.com/typekit/webfontloader" rel="external">Google/Typekit Web Font Loader</a>, <a href="http://cdnjs.com/" rel="external">CDNJS</a>, Photography from <a href="http://unsplash.com">Unsplash</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://programmingfonts.org">Back to the blog</a> - © 2014 <a href="http://koenlageveen.nl" style="color: #eee;">Koen Lageveen</a>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- Some jquery to make live easier -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
|
||||
<!-- The business -->
|
||||
<script>
|
||||
|
|
@ -437,7 +420,7 @@ function findSequence(goal) {
|
|||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-56825926-1']);
|
||||
_gaq.push(['_setDomainName', 'example-petstore.com']);
|
||||
_gaq.push(['_setDomainName', 'programmingfonts.org']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue