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

and make it really responsive

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

35
index.css
View File

@ -1,3 +1,6 @@
* {
box-sizing: border-box;
}
html { html {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
@ -44,22 +47,21 @@ a:active {
max-height: 100%; max-height: 100%;
width: 28em; width: 28em;
overflow: hidden; overflow: hidden;
transition: width .2s ease-in-out;
position: relative; position: relative;
z-index: 3; z-index: 2;
} }
article { article {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 28em; width: 100%;
} }
section { section {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
} }
section.config { section.config {
min-height: 20px; min-height: 30px;
font-size: 10px; font-size: 10px;
background: #eee; background: #eee;
flex: 0; flex: 0;
@ -221,23 +223,18 @@ label[for="select-theme"] {
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) { @media screen and (max-width: 56em) {
.toggle { .article-wrapper,
display: block; form {
width: 100%;
height: 50%;
min-height: 50%;
float: none;
} }
body.menu-visible .toggle { section.select-list .entry {
left: 28em; padding: 0 1em;
} }
body:not(.menu-visible) .article-wrapper { footer h1 + p {
width: 10px; display: none;
} }
} }

2
index.html
View File

@ -224,8 +224,6 @@ 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>
<script src="index.js"></script> <script src="index.js"></script>

4
index.js
View File

@ -38,7 +38,6 @@ 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;
@ -125,7 +124,4 @@ $(document).ready(function(){
selectTheme(); selectTheme();
}); });
$(".toggle").click(function(){
$("body").toggleClass("menu-visible");
})
}); });