make it kinda responsive
This commit is contained in:
parent
25cc65dbc6
commit
5b676b981a
58
index.css
58
index.css
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
189
index.html
189
index.html
|
@ -89,101 +89,105 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<article>
|
<div class="article-wrapper">
|
||||||
<section class="select-list">
|
<article>
|
||||||
<div id="select-font">
|
<section class="select-list">
|
||||||
<!-- filled from json -->
|
<div id="select-font">
|
||||||
</div>
|
<!-- filled from json -->
|
||||||
</section>
|
</div>
|
||||||
<section class="config">
|
</section>
|
||||||
<p>
|
<section class="config">
|
||||||
<label for="size">Size</label>
|
<p>
|
||||||
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
|
<label for="size">Size</label>
|
||||||
</p>
|
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
|
||||||
<p>
|
</p>
|
||||||
<label for="spacing">Spacing</label>
|
<p>
|
||||||
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
|
<label for="spacing">Spacing</label>
|
||||||
</p>
|
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
|
||||||
<p>
|
</p>
|
||||||
<label for="aliasing">AA</label>
|
<p>
|
||||||
<input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
|
<label for="aliasing">AA</label>
|
||||||
</p>
|
<input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
|
||||||
</section>
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="config">
|
<section class="config">
|
||||||
<p class="select">
|
<p class="select">
|
||||||
<button class="nav-button" id="theme-previous">↑</button>
|
<button class="nav-button" id="theme-previous">↑</button>
|
||||||
<button class="nav-button" id="theme-next">↓</button>
|
<button class="nav-button" id="theme-next">↓</button>
|
||||||
<label for="select-theme">Theme</label>
|
<label for="select-theme">Theme</label>
|
||||||
<select onchange="selectTheme()" id="select-theme">
|
<select onchange="selectTheme()" id="select-theme">
|
||||||
<option>3024-day</option>
|
<option>3024-day</option>
|
||||||
<option>3024-night</option>
|
<option>3024-night</option>
|
||||||
<option>abcdef</option>
|
<option>abcdef</option>
|
||||||
<option>ambiance</option>
|
<option>ambiance</option>
|
||||||
<option>base16-dark</option>
|
<option>base16-dark</option>
|
||||||
<option>base16-light</option>
|
<option>base16-light</option>
|
||||||
<option>bespin</option>
|
<option>bespin</option>
|
||||||
<option>blackboard</option>
|
<option>blackboard</option>
|
||||||
<option>cobalt</option>
|
<option>cobalt</option>
|
||||||
<option>colorforth</option>
|
<option>colorforth</option>
|
||||||
<option>dracula</option>
|
<option>dracula</option>
|
||||||
<option>duotone-dark</option>
|
<option>duotone-dark</option>
|
||||||
<option>duotone-light</option>
|
<option>duotone-light</option>
|
||||||
<option>erlang-dark</option>
|
<option>erlang-dark</option>
|
||||||
<option>hopscotch</option>
|
<option>hopscotch</option>
|
||||||
<option>isotope</option>
|
<option>isotope</option>
|
||||||
<option>lesser-dark</option>
|
<option>lesser-dark</option>
|
||||||
<option>liquibyte</option>
|
<option>liquibyte</option>
|
||||||
<option>material</option>
|
<option>material</option>
|
||||||
<option>mbo</option>
|
<option>mbo</option>
|
||||||
<option>mdn-like</option>
|
<option>mdn-like</option>
|
||||||
<option>midnight</option>
|
<option>midnight</option>
|
||||||
<option selected>monokai</option>
|
<option selected>monokai</option>
|
||||||
<option>neo</option>
|
<option>neo</option>
|
||||||
<option>night</option>
|
<option>night</option>
|
||||||
<option>paraiso-dark</option>
|
<option>paraiso-dark</option>
|
||||||
<option>paraiso-light</option>
|
<option>paraiso-light</option>
|
||||||
<option>pastel-on-dark</option>
|
<option>pastel-on-dark</option>
|
||||||
<option>railscasts</option>
|
<option>railscasts</option>
|
||||||
<option>rubyblue</option>
|
<option>rubyblue</option>
|
||||||
<option>seti</option>
|
<option>seti</option>
|
||||||
<option>the-matrix</option>
|
<option>the-matrix</option>
|
||||||
<option>tomorrow-night-bright</option>
|
<option>tomorrow-night-bright</option>
|
||||||
<option>tomorrow-night-eighties</option>
|
<option>tomorrow-night-eighties</option>
|
||||||
<option>twilight</option>
|
<option>twilight</option>
|
||||||
<option>vibrant-ink</option>
|
<option>vibrant-ink</option>
|
||||||
<option>xq-dark</option>
|
<option>xq-dark</option>
|
||||||
<option>yeti</option>
|
<option>yeti</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
<p class="select">
|
<p class="select">
|
||||||
<label for="select-language">Language</label>
|
<label for="select-language">Language</label>
|
||||||
<select onchange="selectLanguage()" id="select-language">
|
<select onchange="selectLanguage()" id="select-language">
|
||||||
<option selected="">JavaScript</option>
|
<option selected="">JavaScript</option>
|
||||||
<option>PHP</option>
|
<option>PHP</option>
|
||||||
<option value="clike">C (-like)</option>
|
<option value="clike">C (-like)</option>
|
||||||
<option>Ruby</option>
|
<option>Ruby</option>
|
||||||
<option>CSS</option>
|
<option>CSS</option>
|
||||||
<option>Perl</option>
|
<option>Perl</option>
|
||||||
<option>Shell</option>
|
<option>Shell</option>
|
||||||
<option>R</option>
|
<option>R</option>
|
||||||
<option>Go</option>
|
<option>Go</option>
|
||||||
<option>Haskell</option>
|
<option>Haskell</option>
|
||||||
<option>Swift</option>
|
<option>Swift</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<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>
|
||||||
<a href="http://programmingfonts.org">Blog</a> -
|
<p>
|
||||||
<a href="http://programmingfonts.org/list" rel="external">The full list</a> -
|
<a href="http://programmingfonts.org">Blog</a> -
|
||||||
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
|
<a href="http://programmingfonts.org/list" rel="external">The full list</a> -
|
||||||
<a href="https://github.com/braver/programmingfonts">Github</a>
|
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
|
||||||
</footer>
|
<a href="https://github.com/braver/programmingfonts">Github</a>
|
||||||
|
</p>
|
||||||
|
</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
5
index.js
|
@ -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");
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue