فهرست منبع

Fix CSS for mobile

Skeleton's webpage is neat and well documented. Copy. Also clean up some
unnecessary js variables.
Weiyi Lou 10 سال پیش
والد
کامیت
cff4aa9bee
3فایلهای تغییر یافته به همراه51 افزوده شده و 31 حذف شده
  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') {