Interim commit; structural changes

- Many instances of DJS Consulting changed to Bit Badger Solutions - Fresher, responsive structure where text will be no wider than 66rem - The app sidebar on the home page now becomes a footer on viewports < 80rem
2017-10-05 06:52:44 -05:00 · 2017-10-05 06:52:44 -05:00 · 6b1455b73f
commit 6b1455b73f
parent 1ab1bce770
17 changed files with 176 additions and 149 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>DJS Consulting</title>
+    <title>Bit Badger Solutions</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
-  "name": "djs-consulting",
+  "name": "bit-badger-solutions",
  "version": "1.0.0",
-  "description": "DJS Consulting Main Web Site",
+  "description": "Bit Badger Solutions Main Web Site",
  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
  "private": true,
  "scripts": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,18 +1,19 @@
 <template lang="pug">
  #app
    header
-      router-link(to="/"): img(src="/static/djs-consulting.png" alt="DJS Consulting" title="DJS Consulting")
-      img(src="/static/slogan.png" alt="Your Web Design, Hosting, and Application Solution Source"
-          title="Your web design, hosting, and application solution source!")
-      span &nbsp;
+      router-link(to='/')
+        img(src='/static/bitbadger.png'
+            alt='A cartoon badger looking at a computer screen, with his paw on a mouse'
+            title='Bit Badger Solutions')
+      router-link(to='/') Bit Badger Solutions
    #content
      router-view
    footer
      span.
-        A #[strong: router-link(to="/") DJS Consulting] original design
-      span(style="flex-grow:3;") &nbsp;
+        A #[strong: router-link(to='/') Bit Badger Solutions] original design
+      span(style='flex-grow:3;') &nbsp;
      span.
-        Secured by #[strong: a(href="//letsencrypt.org") Let's Encrypt]
+        Secured by #[strong: a(href='//letsencrypt.org') Let's Encrypt]
 </template>

 <script>
@ -22,10 +23,13 @@ export default {
 </script>

 <style>
-@import url('https://fonts.googleapis.com/css?family=Play:400,700|Source+Sans+Pro:400,400i,700');
+@import url('https://fonts.googleapis.com/css?family=Oswald|Raleway');
+html {
+  background-color: lightgray;
+}
 body {
 	margin: 0px;
-	font-family: "Source Sans Pro", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+	font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
 	background-color: #FFFAFA;
 }
 a {
@ -41,13 +45,13 @@ a img {
 acronym {
 	border-bottom:dotted 1px black;
 }
-h1, h2, h3, footer {
-	font-family: "Play", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+header, h1, h2, h3, footer a {
+	font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
 }
 h1 {
  text-align: center;
  margin: 21px 0;
-  font-size: 24pt;
+  font-size: 2rem;
 }
 h2 {
  margin: 19px 0;
@ -58,34 +62,47 @@ p {
  margin: 16px 0;
 }
 #content {
-  margin: 0 15px;
-  font-size: 1.05em;
+  margin: 0 1rem;
+}
+.content {
+  font-size: 1.1rem;
+}
+@media all and (min-width: 68rem) {
+  .content {
+    width: 66rem;
+    justify-content: space-around;
+  }
 }
 .hdr {
 	font-size: 14pt;
 	font-weight: bold;
 }
-.valid_img {
-	width: 88px;
-	height: 31px;
-	border: 0;
-	vertical-align: middle;
-}
 header {
+	height: 100px;
  display: flex;
  flex-direction: row;
-  justify-content: space-between;
-	height: 70px;
-	border-bottom:solid 2px #3A1D00;
-	background: #FFE88E;
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 100px;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(#FFFAFA));
+  background-image: -webkit-linear-gradient(top, lightgray, #FFFAFA);
+  background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
+  background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
+}
+header a:link, header a:visited {
+  color: black;
 }
 header a:hover {
 	border-bottom:none;
 }
+header.name {
+  display: table-cell;
+  vertical-align: middle;
+}
 .content-item {
 	padding-left: 5px;
 	padding-right: 5px;
-	font-size: 12pt;
+	font-size: 1rem;
 }
 article.page .metadata {
    display: none;
@ -94,25 +111,25 @@ article.page .metadata {
  text-decoration: line-through;
 }
 footer {
-	border-top: solid 5px #3A1D00;
-	border-bottom: solid 1px #3A1D00;
-	padding: 1px 15px 3px 15px;
+	padding: 20px 15px 10px 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
-	/*text-align: right; */
-	font-size: 1em;
-	background-color: #FFE88E;
+	font-size: 1rem;
 	color: black;
 	clear: both;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFAFA), to(lightgray));
+  background-image: -webkit-linear-gradient(top, #FFFAFA, lightgray);
+  background-image: -moz-linear-gradient(top, #FFFAFA, lightgray);
+  background-image: linear-gradient(to bottom, #FFFAFA, lightgray);
 }
 footer a:link, footer a:visited {
 	color: black;
 }
-footer a:hover {
+/*footer a:hover {
 	border-bottom: none;
 	color: maroon;
-}
+}*/
 .alignleft {
 	float:left;
 	padding-right: 5px;
--- a/src/components/Application.vue
+++ b/src/components/Application.vue
@ -1,30 +1,30 @@
 <template lang="pug">
-  article
-    page-title(:title="pageTitle")
+  article.content
+    page-title(:title='pageTitle')
    h1.
      {{ application.name }}
      #[br]
      <small><small>
-        #[a(v-if="application.active || application.linkInactive" :href="application.url") {{ application.url }}]
-        #[span(v-if="!application.active && !application.linkInactive") {{ application.url }}]
+        #[a(v-if='application.active || application.linkInactive' :href='application.url') {{ application.url }}]
+        #[span(v-if='!application.active && !application.linkInactive') {{ application.url }}]
      </small></small>
-    aside: img(:src="imageLink")
-    p(v-for="(p, idx) in application.paragraphs" v-bind:key="idx" v-html="p")
-    p(v-for="(act, idx) in application.activity" v-bind:key="idx" v-bind:act="act")
+    aside: img(:src='imageLink')
+    p(v-for='(p, idx) in application.paragraphs' :key='idx' v-html='p')
+    p(v-for='(act, idx) in application.activity' :key='idx' :act='act')
      strong {{ act.heading }}
      | &nbsp;&ndash;&nbsp;
-      span(v-html="act.narrative")
+      span(v-html='act.narrative')
    template(v-if='application.quotes')
      hr
      strong What They Say
      blockquote
-        p.quote(v-html="application.quotes.full")
+        p.quote(v-html='application.quotes.full')
        p.source.
          &mdash; #[strong {{ application.quotes.name }}], {{ application.quotes.from }}
-    p(v-for="(p, idx) in application.footnotes" v-bind:key="idx" v-html="p")
+    p(v-for='(p, idx) in application.footnotes' :key='idx' v-html='p')
    p
      br
-      router-link(:to="{ name: 'ApplicationList' }") &laquo; Back to Web Sites and Applications
+      router-link(:to="{ name: 'ApplicationList' }") &laquo; Back to All Solutions
 </template>

 <script>
@ -33,9 +33,6 @@ import PageTitle from './PageTitle.vue'

 export default {
  props: ['app'],
-  data: function () {
-    return {}
-  },
  computed: {
    application () {
      return AppData.apps.find(app => app.id === this.$props.app)
@ -44,7 +41,7 @@ export default {
      return `/static/screenshots/${this.application.id}.png`
    },
    pageTitle () {
-      return `${this.application.name} « Applications`
+      return `${this.application.name} « Solutions`
    }
  },
  components: {
@ -55,7 +52,7 @@ export default {

 <style scoped>
 h1 {
-  line-height: .75em;
+  line-height: 1.6rem;
 }
 aside {
  float: right;
--- a/src/components/ApplicationList.vue
+++ b/src/components/ApplicationList.vue
@ -1,11 +1,11 @@
 <template lang="pug">
  article
-    page-title(title="Applications")
-    h1 Web Sites and Applications
-    h2 Current Projects
-    application-list-item(v-for="app in current" v-bind:app="app" v-bind:key="app.id")
-    h2 Past Projects
-    application-list-item(v-for="app in past" v-bind:app="app" v-bind:key="app.id")
+    page-title(title='All Solutions')
+    h1 All Solutions
+    h2 Active Solutions
+    application-list-item(v-for='app in current' :app='app' :key='app.id')
+    h2 Past Solutions
+    application-list-item(v-for='app in past' :app='app' :key='app.id')
 </template>

 <script>
--- a/src/components/ApplicationListItem.vue
+++ b/src/components/ApplicationListItem.vue
@ -1,15 +1,15 @@
 <template lang="pug">
  p
-    span.app-name(v-html="app.name")
+    span.app-name(v-html='app.name')
    | &nbsp;~&nbsp;
    router-link(:to="{ name: 'Application', params: { app: app.id } }") About
-    span(v-if="app.active") &nbsp;~&nbsp;
-      a(:href="app.url") Visit
-    span(v-if="!app.active && app.archiveUrl") &nbsp;~&nbsp;
-      a(:href="app.archiveUrl") Visit
+    span(v-if='app.active') &nbsp;~&nbsp;
+      a(:href='app.url') Visit
+    span(v-if='!app.active && app.archiveUrl') &nbsp;~&nbsp;
+      a(:href='app.archiveUrl') Visit
      em &nbsp;(archive)
    br
-    span(v-html="app.indexText")
+    span(v-html='app.indexText')
 </template>

 <script>
@ -21,8 +21,8 @@ export default {

 <style scoped>
 .app-name {
-  font-family: "Play", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
-  font-size: 1.1em;
+  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-size: 1.3rem;
  font-weight: bold;
  color: maroon;
 }
--- a/src/components/FourOhFour.vue
+++ b/src/components/FourOhFour.vue
@ -1,6 +1,6 @@
 <template lang="pug">
  article
-    page-title(title="Not Found (404)")
+    page-title(title='Not Found (404)')
    h1 Not Found (404)
    p.
      Looks like you've stumbled into the part of this site where we have no content to give you. Of course, you could
@ -9,22 +9,22 @@
    ul
      li.
        The #[strong Linux Software Repository] used to be at #[tt /linux/software], but can now be found at
-        #[a(href="//hosted.djs-consulting.com/software") https://hosted.djs-consulting.com/software]. This
+        #[a(href='https://hosted.djs-consulting.com/software') https://hosted.djs-consulting.com/software]. This
        includes the OpenSUSE ISOs, SQLDeveloper .deb packages, and Xine RPMs.
      li.
        The #[strong My Linux Adventure] and #[strong DJS Consulting Tech Blog] blogs used to be at #[tt /linux/blog],
        but both have been combined into the latter, and can be found at
-        #[a(href="//techblog.djs-consulting.com") https://techblog.djs-consulting.com].
+        #[a(href='https://techblog.djs-consulting.com') https://techblog.djs-consulting.com].
      li.
        #[strong Kathie York]'s portfolio, formerly at #[tt /hosted/kathieyork], is now at
-        #[a(href="//hosted.djs-consulting.com/kathieyork") https://hosted.djs-consulting.com/kathieyork].
+        #[a(href='https://hosted.djs-consulting.com/kathieyork') https://hosted.djs-consulting.com/kathieyork].
      li.
        #[strong Daniel J. Summers]'s personal site, formerly at #[tt /personal] (and a really ancient copy at
-        #[tt /old_personal]), is now at #[a(href="//daniel.summershome.org") https://daniel.summershome.org].
+        #[tt /old_personal]), is now at #[a(href='https://daniel.summershome.org') https://daniel.summershome.org].
      li.
        The #[strong Not So Extreme Makeover: Community Edition] archive site, previously at
        #[tt /archived/notsoextreme_org], can now be found at
-        #[a(href="//hosted.djs-consulting.com/archive/notsoextreme_org") https://hosted.djs-consulting.com/archive/notsoextreme_org].
+        #[a(href='https://hosted.djs-consulting.com/archive/notsoextreme_org') https://hosted.djs-consulting.com/archive/notsoextreme_org].
 </template>

 <script>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@ -1,12 +1,10 @@
 <template lang="pug">
-  article
-    page-title(title="Welcome!")
-    h1 Welcome to DJS Consulting!
-    app-sidebar
+div.home
+  article.content
+    page-title(title='Welcome!')
    p.
      DJS Consulting can develop an interactive web application to fit almost any need.
-      <router-link to="/applications" title="Web Sites and Applications">View the complete list of our current web
-      sites and applications!</router-link>
+      #[router-link(to='/solutions' title='All Solutions') View the complete list of our solutions!]
    h2 Process Automation and User Engagement
    p.
      Computers can be used to augment or automate nearly any process; could you think of generating bank statements,
@ -140,6 +138,7 @@
    p.
      We'd be happy to discuss your information technology needs, and how we may be able to help you. Just
      #[a(href="mailto:daniel@djs-consulting.com") e-mail us] and let us know what we can do for you!
+  app-sidebar
 </template>

 <script>
@ -154,3 +153,16 @@ export default {
  }
 }
 </script>
+
+<style>
+article.content {
+  margin: auto;
+}
+@media all and (min-width: 80rem) {
+  .home {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
+  }
+}
+</style>
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@ -3,11 +3,11 @@ export default {
  name: 'page-title',
  props: ['title'],
  created () {
-    document.title = `${this.title} « DJS Consulting`
+    document.title = `${this.title} « Bit Badger Solutions`
  },
  watch: {
    title () {
-      document.title = `${this.title} « DJS Consulting`
+      document.title = `${this.title} « Bit Badger Solutions`
    }
  },
  render () { }
--- a/src/components/sidebar/AppSidebar.vue
+++ b/src/components/sidebar/AppSidebar.vue
@ -1,12 +1,13 @@
 <template lang="pug">
-  aside
+div
+  aside.app-sidebar
+    div
+      div.app-sidebar-head Connect with Us
      p
-      strong.sidebar-name Connect with Us
-      br
-      a(href="https://twitter.com/DJS_Consulting" title="DJS_Consulting on Twitter") Twitter
+        a(href='https://twitter.com/DJS_Consulting' title='DJS_Consulting on Twitter') Twitter
        | &nbsp;&bull;&nbsp;
-      a(href="https://www.facebook.com/pages/DJS-Consulting/262368048575" title="DJS Consulting on Facebook") Facebook
-    sidebar-category(v-for="category in cats" v-bind:category="category" v-bind:key="category.id")
+        a(href='https://www.facebook.com/pages/DJS-Consulting/262368048575' title="DJS Consulting on Facebook") Facebook
+    sidebar-category(v-for='category in cats' :category='category' :key='category.id')
 </template>

 <script>
@ -24,34 +25,59 @@ export default {
 }
 </script>

-<style scoped>
-aside {
-	width: 200px;
-	float: right;
-	font-size: 1em;
+<style>
+.app-sidebar {
 	text-align: center;
-	background-color: white;
-	border: solid 2px navy;
-	border-right: none;
-  border-radius: 10px;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	margin-left:3px;
-	margin-right: -15px;
-	padding-left: 3px;
-	padding-right: 3px;
-	font-size: 80%;
-	clear: both;
+  border-top: dotted 1px lightgray;
+	padding-top: 1rem;
+	font-size: .9rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
 }
-aside a {
+.app-sidebar > div {
+  width: 20rem;
+  padding-bottom: 1rem;
+}
+@media all and (min-width: 68rem) {
+  .app-sidebar {
+    width: 66rem;
+    margin: auto;
+  }
+}
+@media all and (min-width: 80rem) {
+  .app-sidebar {
+    width: 12rem;
+    border-top: none;
+    border-left: dotted 1px lightgray;
+    padding-top: 0;
+    padding-left: 2rem;
+    flex-direction: column;
+  }
+  .app-sidebar > div {
+    width: auto;
+  }
+}
+.app-sidebar a {
 	font-size: 10pt;
 	font-family: sans-serif;
 }
-.widget-projects hr {
-	border-color: #3A1D00;
+.app-sidebar-head {
+	font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-weight: bold;
+	color: maroon;
+	margin-bottom: .8rem;
+	padding: 3px 12px;
+	border-bottom: solid 2px lightgray /* #3A1D00 */;
+  font-size: 1rem;
 }
-aside p {
+.app-sidebar-name, .app-sidebar-description {
  margin: 0;
+  padding: 0;
+}
+.app-sidebar-description {
+	font-style: italic;
+	color: #555555;
+	padding-bottom: .6rem;
 }
-
 </style>
--- a/src/components/sidebar/SidebarApp.vue
+++ b/src/components/sidebar/SidebarApp.vue
@ -1,12 +1,12 @@
 <template lang="pug">
  div
-    p
-      strong.sidebar-name {{ app.name }}
+    p.app-sidebar-name
+      strong {{ app.name }}
      br
-      span(v-if="!app.noAboutLink").
+      span(v-if='!app.noAboutLink').
        #[router-link(:to="{ name: 'Application', params: { app: app.id } }") About] &bull; 
-      a(:title="app.name" :href="app.url") Visit
-    .sidebar-description(v-html="app.frontPageText")
+      a(:title='app.name' :href='app.url') Visit
+    p.app-sidebar-description(v-html='app.frontPageText')
 </template>

 <script>
@ -15,15 +15,3 @@ export default {
  props: ['app']
 }
 </script>
-
-<style scoped>
-p {
-  margin: 0;
-  padding: 0;
-}
-.sidebar-description {
-	font-style: italic;
-	color: #555555;
-	padding-bottom: 3px;
-}
-</style>
--- a/src/components/sidebar/SidebarCategory.vue
+++ b/src/components/sidebar/SidebarCategory.vue
@ -1,7 +1,7 @@
 <template lang="pug">
-  div
-    p.sidebar-head {{ category.name }}
-    sidebar-app(v-for="app in appsForCat(category.id)" v-bind:app="app" v-bind:key="app.id")
+div
+  div.app-sidebar-head {{ category.name }}
+  sidebar-app(v-for='app in appsForCat(category.id)' :app='app' :key='app.id')
 </template>

 <script>
@ -11,7 +11,7 @@ import SidebarApp from './SidebarApp.vue'
 export default {
  name: 'sidebar-category',
  props: ['category'],
-  data: function () {
+  data () {
    return {
      appsForCat: function (catId) {
        return AppData.apps
@ -25,16 +25,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-.sidebar-head {
-	font-family: "Play", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
-  font-weight: bold;
-	color: maroon;
-	margin: 10px 0;
-	padding: 3px 0;
-	display:block;
-	border-top: solid 1px #3A1D00;
-	border-bottom: solid 1px #3A1D00;
-}
-</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -12,8 +12,8 @@ export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
-    { path: '/applications/:app', name: 'Application', component: Application, props: true },
-    { path: '/applications', name: 'ApplicationList', component: ApplicationList },
+    { path: '/solutions/:app', name: 'Application', component: Application, props: true },
+    { path: '/solutions', name: 'ApplicationList', component: ApplicationList },
    { path: '*', name: 'FourOhFour', component: FourOhFour }
  ]
 })
--- a/static/.gitkeep
+++ b/static/.gitkeep
--- a/static/bitbadger.png
+++ b/static/bitbadger.png
--- a/static/djs-consulting.png
+++ b/static/djs-consulting.png
--- a/static/slogan.png
+++ b/static/slogan.png