Sfoglia il codice sorgente

Fix CSS for mobile

Skeleton's webpage is neat and well documented. Copy. Also clean up some
unnecessary js variables.
Weiyi Lou 10 anni fa
parent
commit
cff4aa9bee
3 ha cambiato i file con 51 aggiunte e 31 eliminazioni
  1. 17 7
      css/style.css
  2. 18 4
      index.html
  3. 16 20
      js/pgsh.js

+ 17 - 7
css/style.css

@@ -4,16 +4,26 @@
 }
 
 body {
-  background: #222;
-}
-
-div.container {
   background: #191919;
-  padding: 2rem;
-  margin-top: 2rem;
 }
 
 div.console {
   overflow-y: hidden;
-  height: 80%;
+  height: 90%;
+}
+
+@media (min-width: 550px) {
+  body {
+    background: #222;
+  }
+
+  div.console {
+    height: 80%;
+  }
+
+  div.container {
+    background: #191919;
+    padding: 2rem;
+    margin-top: 2rem;
+  }
 }

+ 18 - 4
index.html

@@ -1,19 +1,33 @@
 <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN' 'http://www.w3.org/TR/REC-html40/loose.dtd'>
 <html>
   <head>
-    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
-    <title>
-      pgsh
-    </title>
+    <!-- Basic Page Needs
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta charset="utf-8">
+    <title>pgsh</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Mobile Specific Metas
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CSS
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel='stylesheet' type='text/css' href='css/vendor/skeleton/normalize.css' />
     <link rel='stylesheet' type='text/css' href='css/vendor/skeleton/skeleton.css' />
     <link rel='stylesheet' type='text/css' href='css/style.css' />
   </head>
   <body>
+
+    <!-- Primary Page Layout
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <div class='container'>
       <div class='console'><terminal shell='pgsh'></terminal></div>
     </div>
 
+    <!-- Scripts
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <script src='js/vendor/riot+compiler.min.js'></script>
     <script src='js/pgsh.js'></script>
     <script src='tags/terminal.tag' type='riot/tag'></script>

+ 16 - 20
js/pgsh.js

@@ -31,8 +31,7 @@ function pgsh(ev) {
       'help': 'Author Information\nUsage: about',
       'run': function(args) {
         if (args.length > 0) { show(this.help); return }
-        var me = 'Site by Weiyi Lou ' + new Date().getFullYear() + '\n\n'
-        show(me)
+        show('Site by Weiyi Lou ' + new Date().getFullYear() + '\n\n')
       }
     },
     'clear': {
@@ -45,19 +44,17 @@ function pgsh(ev) {
       'help': 'Shell Information\nUsage: version',
       'run': function(args) {
         if (args.length > 0) { show(this.help); return }
-        var ve = 'Parsley Gardens Shell (pgsh) 1.0.0 Built with ' +
-          '<a target="_blank" href="http://riotjs.com/">Riot.js</a>'
-        show(ve)
+        show('Parsley Gardens Shell (pgsh) 1.0.0 Built with ' +
+             '<a target="_blank" href="http://riotjs.com/">Riot</a>')
       }
     },
     'git': {
       'help': 'Link to Code Repository\nUsage: git',
       'run': function(args) {
         if (args.length > 0) { show(this.help); return }
-        var repo = 'Self-Hosted Code Repository at <a target="_blank" ' +
-          'href="https://code.parsleygardens.net/explore/projects">' +
-        'code.parsleygardens.net</a>'
-        show(repo)
+        show('Code Repository at <a target="_blank" ' +
+             'href="https://code.parsleygardens.net/explore/projects">' +
+             'code.parsleygardens.net</a>')
       }
     },
     'hello': {
@@ -77,9 +74,8 @@ function pgsh(ev) {
       'help': 'Link to Artist\nUsage: magic',
       'run': function(args) {
         if (args.length > 0) { show(this.help); return }
-        var art = 'Animation and Illustration at <a target="_blank" ' +
-          'href="http://slightlymagic.com.au">slightlymagic.com.au</a>'
-        show(art)
+        show('Animation and Illustration at <a target="_blank" ' +
+             'href="http://slightlymagic.com.au">slightlymagic.com.au</a>')
       }
     },
     'su': {
@@ -90,13 +86,12 @@ function pgsh(ev) {
           self.su = true
           if (!self.su_warned) {
             self.su_warned = true
-            var wa = 'We trust you have received the usual lecture from the ' +
-              'local System Administrator.\n' +
-              'It usually boils down to these three things:\n\n' +
-              '    #1) Respect the privacy of others.\n' +
-              '    #2) Think before you type.\n' +
-              '    #3) With great power comes great\n\n'
-            show(wa)
+            show('We trust you have received the usual lecture from the ' +
+                 'local System Administrator.\n' +
+                 'It usually boils down to these three things:\n\n' +
+                 '    #1) Respect the privacy of others.\n' +
+                 '    #2) Think before you type.\n' +
+                 '    #3) With great power comes great\n\n')
           }
           ev.trigger('prompt_set', self.prompt_su)
         }
@@ -132,7 +127,8 @@ function pgsh(ev) {
         if (!self.active) {
           self.active = 'questions'
           ev.trigger('context_swap', 'questions')
-          ev.trigger('disp_set', 'Welcome to the questions. Do you want to continue?')
+          ev.trigger('disp_set', 'Welcome to the questions. ' +
+                     'Do you want to continue?')
           return
         }
         if (args == 'exit') {