Responsive layout prevents cutting of terminal commands

10 years ago · 0672cfd31d
parent 6ddd19929c
commit 0672cfd31d
3 changed files with 19 additions and 1 deletions
--- a/static/css/bootstrap-responsive.min.css
+++ b/static/css/bootstrap-responsive.min.css
--- a/static/css/style.css
+++ b/static/css/style.css
@ -10,6 +10,13 @@ figure img {
  margin-left: auto;
  margin-right: auto;
 }
+
+@media (min-width: 767px) {
+  #menu {
+    position: fixed;
+  }
+}
+
 .screenshot {
  box-shadow: 0 0 10px #888;
  border: 1px solid #aaa;
@ -57,6 +64,7 @@ code.terminal {
    padding: 1em;
    margin: 1em;
    display: block;
+    white-space: normal;
 }

 .argument {
--- a/templates/base.html
+++ b/templates/base.html
@ -3,6 +3,7 @@
  <head>
    <title>Security 1</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.base64.min.js"></script>
@ -13,7 +14,7 @@
      {% csrf_token %}

      <div class="row-fluid">
-        <div class="well span3" style="position: fixed">
+        <div class="well span3" id="menu">
          <p>Ingelogd als <strong>{{ user }}</strong>.</p>

          <h5>Security 1</h5>