Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make it kinda responsive

This commit is contained in:
Koen Lageveen 2017-07-29 18:12:30 +02:00
parent 25cc65dbc6
commit 5b676b981a
3 changed files with 139 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.css
View File

@ -19,7 +19,7 @@ body {
h1 { h1 {
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
font-size: 1.414em; font-size: 14px;
margin: 0; margin: 0;
padding: .25em 0 0 0; padding: .25em 0 0 0;
} }
@ -37,13 +37,22 @@ a:active {
.octicon { .octicon {
fill: currentcolor; fill: currentcolor;
} }
article { .article-wrapper {
float: left; float: left;
border-right: 1px solid #4a4a4a; border-right: 1px solid #4a4a4a;
height: 100%; height: 100%;
max-height: 100%;
width: 28em; width: 28em;
overflow: hidden;
transition: width .2s ease-in-out;
position: relative;
z-index: 3;
}
article {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 28em;
} }
section { section {
flex: 1; flex: 1;
@ -127,29 +136,13 @@ footer {
background: #e4e4e4; background: #e4e4e4;
color: #777; color: #777;
} }
footer h1 + p {
font-style: italic;
}
footer a:hover, footer a:hover,
footer a:active { footer a:active {
text-decoration: underline; text-decoration: underline;
} }
#font-info p {
display: none;
}
#font-info a.button,
#font-info a.button:link,
#font-info a.button:visited {
position: relative;
background: #e4e4e4;
color: #777;
display: inline-block;
padding: 0 1ex;
border-radius: 3px;
font-size: 14px;
line-height: 22px;
margin-top: 2px;
}
#font-info a.button:active {
top: 1px;
}
label { label {
margin-right: .5ex; margin-right: .5ex;
font-style: italic; font-style: italic;
@ -193,6 +186,8 @@ textarea,
form { form {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
position: relative;
z-index: 1;
} }
.nav-button { .nav-button {
all: unset; all: unset;
@ -225,3 +220,24 @@ label[for="select-theme"] {
.CodeMirror-gutters { .CodeMirror-gutters {
background: transparent; background: transparent;
} }
.toggle {
display: none;
position: fixed;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 40px;
}
@media screen and (max-width: 56em) {
.toggle {
display: block;
}
body.menu-visible .toggle {
left: 28em;
}
body:not(.menu-visible) .article-wrapper {
width: 10px;
}
}

7
index.html
View File

@ -89,6 +89,7 @@
</head> </head>
<body> <body>
<div class="article-wrapper">
<article> <article>
<section class="select-list"> <section class="select-list">
<div id="select-font"> <div id="select-font">
@ -176,14 +177,17 @@
<footer> <footer>
<h1>Programming Fonts</h1> <h1>Programming Fonts</h1>
Test drive over 50 free programming fonts! <br> <p>Test drive over 50 free programming fonts!</p>
<p>
<a href="http://programmingfonts.org">Blog</a> - <a href="http://programmingfonts.org">Blog</a> -
<a href="http://programmingfonts.org/list" rel="external">The full list</a> - <a href="http://programmingfonts.org/list" rel="external">The full list</a> -
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> - <a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
<a href="https://github.com/braver/programmingfonts">Github</a> <a href="https://github.com/braver/programmingfonts">Github</a>
</p>
</footer> </footer>
</article> </article>
</div>
<form> <form>
<textarea id="code" name="code"> <textarea id="code" name="code">
@ -220,6 +224,7 @@ function updateGutters(cm) {
</textarea> </textarea>
</form> </form>
<div class="toggle"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="ga.js"></script> <script src="ga.js"></script>

5
index.js
View File

@ -38,6 +38,7 @@ function selectFont() {
$("#select-font a[data-value='" + font + "']").addClass("active"); $("#select-font a[data-value='" + font + "']").addClass("active");
document.cookie = "font=" + font + ";max-age=172800"; document.cookie = "font=" + font + ";max-age=172800";
$("body").removeClass("menu-visible");
} }
window.onhashchange = selectFont; window.onhashchange = selectFont;
@ -123,4 +124,8 @@ $(document).ready(function(){
$("#select-theme :selected").prev().prop("selected", true); $("#select-theme :selected").prev().prop("selected", true);
selectTheme(); selectTheme();
}); });
$(".toggle").click(function(){
$("body").toggleClass("menu-visible");
})
}); });