Pārlūkot izejas kodu

Fix CSS for mobile

Skeleton's webpage is neat and well documented. Copy. Also clean up some
unnecessary js variables.
Weiyi Lou 10 gadi atpakaļ
vecāks
revīzija
cff4aa9bee
3 mainītis faili ar 51 papildinājumiem un 31 dzēšanām
  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') {