mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2026-01-19 02:12:40 +01:00
Code Issues Projects Releases Wiki Activity

Implemented some responsivenes in markup

Browse Source
This commit is contained in:
Borys Levytskyi
2015-05-13 20:40:37 +03:00
parent 78194ef42f
commit 867cf7ddc7
2 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/css/styles.css
View File

@@ -1,10 +1,10 @@
body { font-family: Verdana; font-size: 0.8em; padding: 20px 100px 0 100px; margin: 0 }
body { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; }
code { font-size: 1.2em; font-weight: bold; }
ul.links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
ul.links li { float: left; }
.links a { display: inline-block; padding: 10px 15px}
.links .icon { margin-right: 5px; }
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
.top-links li { float: left; }
.top-links a { display: inline-block; padding: 10px 15px}
.top-links .icon { margin-right: 5px; }
.mono { font-family: monospace; font-size: 1.3em }
.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
@@ -60,7 +60,7 @@ ul.links li { float: left; }
.light .other { color: #bbb }
.light .hashLink, .light .hashLink:visited { color: #ddd }
.light .hashLink:hover { color: #888 }
.light ul.links li:hover { background: #ddd }
.light ul.top-links li:hover { background: #ddd }
/* Dark */
.dark { background: #121212; color: white;}
@@ -73,5 +73,26 @@ ul.links li { float: left; }
.dark .other { color: #444;}
.dark .hashLink, .dark .hashLink:visited { color: #333 }
.dark .hashLink:hover { color: #999 }
.dark ul.links li:hover { background: #333 }
.dark ul.top-links li:hover { background: #333 }
/* Top Links Shrink */
@media (max-width: 800px) {
.top-links .link-text { display: none }
}
/* Remove margin space on body. Inline top links with header */
@media (max-width: 700px) {
body { padding: 10px; }
.expressionInput { width: 500px; }
}
/* Further shrink */
@media (max-width: 500px) {
.expressionInput { width: 350px; }
.top-links a { display: inline-block; padding: 5px 10px}
}
@media (max-width: 350px) {
.expressionInput { width: 200px; }
}

28
src/index.html
View File

@@ -42,21 +42,23 @@
<body id="rootView" class="dark">
<header>
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
<div class="header">
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
<ul class="links">
<li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github">&nbsp;</i>Project on GitHub</a>
</li>
<li>
<a href="https://twitter.com/BitwiseCmd"><i class="icon twitter">&nbsp;</i>Twitter</a>
</li>
<li>
<a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i class="icon feedback">&nbsp;</i>Send Feedback</a>
</li>
</ul>
<ul class="top-links">
<li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github">&nbsp;</i><span class="link-text">Project on GitHub</span></a>
</li>
<li>
<a href="https://twitter.com/BitwiseCmd"><i class="icon twitter">&nbsp;</i><span class="link-text">Twitter</span></a>
</li>
<li>
<a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i class="icon feedback">&nbsp;</i><span class="link-text">Send Feedback</span></a>
</li>
</ul>
</div>
<div>
<div class="expressionInput-container">
<input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
<span data-controller="configPanelCtrl" class="configPnl">