bit-badger/bitbadger.solutions-theme
1
0
Fork 0
Code Pull Requests Packages Activity

Interim commit; structural changes

Browse Source 
- 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
This commit is contained in:
Daniel J. Summers 2017-10-05 06:52:44 -05:00
parent 1ab1bce770
commit 6b1455b73f
17 changed files with 176 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
</head> </head>
<body> <body>

4
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "djs-consulting", "name": "bit-badger-solutions",
"version": "1.0.0", "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>", "author": "Daniel J. Summers <daniel@djs-consulting.com>",
"private": true, "private": true,
"scripts": { "scripts": {

83
src/App.vue
View File

@ -1,18 +1,19 @@
<template lang="pug"> <template lang="pug">
#app #app
header header
router-link(to="/"): img(src="/static/djs-consulting.png" alt="DJS Consulting" title="DJS Consulting") router-link(to='/')
img(src="/static/slogan.png" alt="Your Web Design, Hosting, and Application Solution Source" img(src='/static/bitbadger.png'
title="Your web design, hosting, and application solution source!") alt='A cartoon badger looking at a computer screen, with his paw on a mouse'
span &nbsp; title='Bit Badger Solutions')
router-link(to='/') Bit Badger Solutions
#content #content
router-view router-view
footer footer
span. span.
A #[strong: router-link(to="/") DJS Consulting] original design A #[strong: router-link(to='/') Bit Badger Solutions] original design
span(style="flex-grow:3;") &nbsp; span(style='flex-grow:3;') &nbsp;
span. span.
Secured by #[strong: a(href="//letsencrypt.org") Let's Encrypt] Secured by #[strong: a(href='//letsencrypt.org') Let's Encrypt]
</template> </template>
<script> <script>
@ -22,10 +23,13 @@ export default {
</script> </script>
<style> <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 { body {
margin: 0px; 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; background-color: #FFFAFA;
} }
a { a {
@ -41,13 +45,13 @@ a img {
acronym { acronym {
border-bottom:dotted 1px black; border-bottom:dotted 1px black;
} }
h1, h2, h3, footer { header, h1, h2, h3, footer a {
font-family: "Play", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
} }
h1 { h1 {
text-align: center; text-align: center;
margin: 21px 0; margin: 21px 0;
font-size: 24pt; font-size: 2rem;
} }
h2 { h2 {
margin: 19px 0; margin: 19px 0;
@ -58,34 +62,47 @@ p {
margin: 16px 0; margin: 16px 0;
} }
#content { #content {
margin: 0 15px; margin: 0 1rem;
font-size: 1.05em; }
.content {
font-size: 1.1rem;
}
@media all and (min-width: 68rem) {
.content {
width: 66rem;
justify-content: space-around;
}
} }
.hdr { .hdr {
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
} }
.valid_img {
width: 88px;
height: 31px;
border: 0;
vertical-align: middle;
}
header { header {
height: 100px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; font-size: 3rem;
height: 70px; font-weight: bold;
border-bottom:solid 2px #3A1D00; line-height: 100px;
background: #FFE88E; 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 { header a:hover {
border-bottom:none; border-bottom:none;
} }
header.name {
display: table-cell;
vertical-align: middle;
}
.content-item { .content-item {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-size: 12pt; font-size: 1rem;
} }
article.page .metadata { article.page .metadata {
display: none; display: none;
@ -94,25 +111,25 @@ article.page .metadata {
text-decoration: line-through; text-decoration: line-through;
} }
footer { footer {
border-top: solid 5px #3A1D00; padding: 20px 15px 10px 15px;
border-bottom: solid 1px #3A1D00;
padding: 1px 15px 3px 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
/*text-align: right; */ font-size: 1rem;
font-size: 1em;
background-color: #FFE88E;
color: black; color: black;
clear: both; 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 { footer a:link, footer a:visited {
color: black; color: black;
} }
footer a:hover { /*footer a:hover {
border-bottom: none; border-bottom: none;
color: maroon; color: maroon;
} }*/
.alignleft { .alignleft {
float:left; float:left;
padding-right: 5px; padding-right: 5px;

29
src/components/Application.vue
View File

@ -1,30 +1,30 @@
<template lang="pug"> <template lang="pug">
article article.content
page-title(:title="pageTitle") page-title(:title='pageTitle')
h1. h1.
{{ application.name }} {{ application.name }}
#[br] #[br]
<small><small> <small><small>
#[a(v-if="application.active || application.linkInactive" :href="application.url") {{ application.url }}] #[a(v-if='application.active || application.linkInactive' :href='application.url') {{ application.url }}]
#[span(v-if="!application.active && !application.linkInactive") {{ application.url }}] #[span(v-if='!application.active && !application.linkInactive') {{ application.url }}]
</small></small> </small></small>
aside: img(:src="imageLink") aside: img(:src='imageLink')
p(v-for="(p, idx) in application.paragraphs" v-bind:key="idx" v-html="p") p(v-for='(p, idx) in application.paragraphs' :key='idx' v-html='p')
p(v-for="(act, idx) in application.activity" v-bind:key="idx" v-bind:act="act") p(v-for='(act, idx) in application.activity' :key='idx' :act='act')
strong {{ act.heading }} strong {{ act.heading }}
| &nbsp;&ndash;&nbsp; | &nbsp;&ndash;&nbsp;
span(v-html="act.narrative") span(v-html='act.narrative')
template(v-if='application.quotes') template(v-if='application.quotes')
hr hr
strong What They Say strong What They Say
blockquote blockquote
p.quote(v-html="application.quotes.full") p.quote(v-html='application.quotes.full')
p.source. p.source.
&mdash; #[strong {{ application.quotes.name }}], {{ application.quotes.from }} &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 p
br br
router-link(:to="{ name: 'ApplicationList' }") &laquo; Back to Web Sites and Applications router-link(:to="{ name: 'ApplicationList' }") &laquo; Back to All Solutions
</template> </template>
<script> <script>
@ -33,9 +33,6 @@ import PageTitle from './PageTitle.vue'
export default { export default {
props: ['app'], props: ['app'],
data: function () {
return {}
},
computed: { computed: {
application () { application () {
return AppData.apps.find(app => app.id === this.$props.app) return AppData.apps.find(app => app.id === this.$props.app)
@ -44,7 +41,7 @@ export default {
return `/static/screenshots/${this.application.id}.png` return `/static/screenshots/${this.application.id}.png`
}, },
pageTitle () { pageTitle () {
return `${this.application.name} « Applications` return `${this.application.name} « Solutions`
} }
}, },
components: { components: {
@ -55,7 +52,7 @@ export default {
<style scoped> <style scoped>
h1 { h1 {
line-height: .75em; line-height: 1.6rem;
} }
aside { aside {
float: right; float: right;

12
src/components/ApplicationList.vue
View File

@ -1,11 +1,11 @@
<template lang="pug"> <template lang="pug">
article article
page-title(title="Applications") page-title(title='All Solutions')
h1 Web Sites and Applications h1 All Solutions
h2 Current Projects h2 Active Solutions
application-list-item(v-for="app in current" v-bind:app="app" v-bind:key="app.id") application-list-item(v-for='app in current' :app='app' :key='app.id')
h2 Past Projects h2 Past Solutions
application-list-item(v-for="app in past" v-bind:app="app" v-bind:key="app.id") application-list-item(v-for='app in past' :app='app' :key='app.id')
</template> </template>
<script> <script>

16
src/components/ApplicationListItem.vue
View File

@ -1,15 +1,15 @@
<template lang="pug"> <template lang="pug">
p p
span.app-name(v-html="app.name") span.app-name(v-html='app.name')
| &nbsp;~&nbsp; | &nbsp;~&nbsp;
router-link(:to="{ name: 'Application', params: { app: app.id } }") About router-link(:to="{ name: 'Application', params: { app: app.id } }") About
span(v-if="app.active") &nbsp;~&nbsp; span(v-if='app.active') &nbsp;~&nbsp;
a(:href="app.url") Visit a(:href='app.url') Visit
span(v-if="!app.active && app.archiveUrl") &nbsp;~&nbsp; span(v-if='!app.active && app.archiveUrl') &nbsp;~&nbsp;
a(:href="app.archiveUrl") Visit a(:href='app.archiveUrl') Visit
em &nbsp;(archive) em &nbsp;(archive)
br br
span(v-html="app.indexText") span(v-html='app.indexText')
</template> </template>
<script> <script>
@ -21,8 +21,8 @@ export default {
<style scoped> <style scoped>
.app-name { .app-name {
font-family: "Play", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
font-size: 1.1em; font-size: 1.3rem;
font-weight: bold; font-weight: bold;
color: maroon; color: maroon;
} }

12
src/components/FourOhFour.vue
View File

@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
article article
page-title(title="Not Found (404)") page-title(title='Not Found (404)')
h1 Not Found (404) h1 Not Found (404)
p. p.
Looks like you've stumbled into the part of this site where we have no content to give you. Of course, you could 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 ul
li. li.
The #[strong Linux Software Repository] used to be at #[tt /linux/software], but can now be found at 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. includes the OpenSUSE ISOs, SQLDeveloper .deb packages, and Xine RPMs.
li. li.
The #[strong My Linux Adventure] and #[strong DJS Consulting Tech Blog] blogs used to be at #[tt /linux/blog], 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 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. li.
#[strong Kathie York]'s portfolio, formerly at #[tt /hosted/kathieyork], is now at #[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. li.
#[strong Daniel J. Summers]'s personal site, formerly at #[tt /personal] (and a really ancient copy at #[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. li.
The #[strong Not So Extreme Makeover: Community Edition] archive site, previously at The #[strong Not So Extreme Makeover: Community Edition] archive site, previously at
#[tt /archived/notsoextreme_org], can now be found 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> </template>
<script> <script>

24
src/components/Home.vue
View File

@ -1,12 +1,10 @@
<template lang="pug"> <template lang="pug">
article div.home
page-title(title="Welcome!") article.content
h1 Welcome to DJS Consulting! page-title(title='Welcome!')
app-sidebar
p. p.
DJS Consulting can develop an interactive web application to fit almost any need. 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 #[router-link(to='/solutions' title='All Solutions') View the complete list of our solutions!]
sites and applications!</router-link>
h2 Process Automation and User Engagement h2 Process Automation and User Engagement
p. p.
Computers can be used to augment or automate nearly any process; could you think of generating bank statements, Computers can be used to augment or automate nearly any process; could you think of generating bank statements,
@ -140,6 +138,7 @@
p. p.
We'd be happy to discuss your information technology needs, and how we may be able to help you. Just 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! #[a(href="mailto:daniel@djs-consulting.com") e-mail us] and let us know what we can do for you!
app-sidebar
</template> </template>
<script> <script>
@ -154,3 +153,16 @@ export default {
} }
} }
</script> </script>
<style>
article.content {
margin: auto;
}
@media all and (min-width: 80rem) {
.home {
display: flex;
flex-flow: row;
justify-content: space-around;
}
}
</style>

4
src/components/PageTitle.vue
View File

@ -3,11 +3,11 @@ export default {
name: 'page-title', name: 'page-title',
props: ['title'], props: ['title'],
created () { created () {
document.title = `${this.title} « DJS Consulting` document.title = `${this.title} « Bit Badger Solutions`
}, },
watch: { watch: {
title () { title () {
document.title = `${this.title} « DJS Consulting` document.title = `${this.title} « Bit Badger Solutions`
} }
}, },
render () { } render () { }

82
src/components/sidebar/AppSidebar.vue
View File

@ -1,12 +1,13 @@
<template lang="pug"> <template lang="pug">
aside div
aside.app-sidebar
div
div.app-sidebar-head Connect with Us
p p
strong.sidebar-name Connect with Us a(href='https://twitter.com/DJS_Consulting' title='DJS_Consulting on Twitter') Twitter
br
a(href="https://twitter.com/DJS_Consulting" title="DJS_Consulting on Twitter") Twitter
| &nbsp;&bull;&nbsp; | &nbsp;&bull;&nbsp;
a(href="https://www.facebook.com/pages/DJS-Consulting/262368048575" title="DJS Consulting on Facebook") Facebook 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") sidebar-category(v-for='category in cats' :category='category' :key='category.id')
</template> </template>
<script> <script>
@ -24,34 +25,59 @@ export default {
} }
</script> </script>
<style scoped> <style>
aside { .app-sidebar {
width: 200px;
float: right;
font-size: 1em;
text-align: center; text-align: center;
background-color: white; border-top: dotted 1px lightgray;
border: solid 2px navy; padding-top: 1rem;
border-right: none; font-size: .9rem;
border-radius: 10px; display: flex;
border-top-right-radius: 0; flex-flow: row wrap;
border-bottom-right-radius: 0; justify-content: space-around;
margin-left:3px;
margin-right: -15px;
padding-left: 3px;
padding-right: 3px;
font-size: 80%;
clear: both;
} }
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-size: 10pt;
font-family: sans-serif; font-family: sans-serif;
} }
.widget-projects hr { .app-sidebar-head {
border-color: #3A1D00; 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; margin: 0;
padding: 0;
}
.app-sidebar-description {
font-style: italic;
color: #555555;
padding-bottom: .6rem;
} }
</style> </style>

22
src/components/sidebar/SidebarApp.vue
View File

@ -1,12 +1,12 @@
<template lang="pug"> <template lang="pug">
div div
p p.app-sidebar-name
strong.sidebar-name {{ app.name }} strong {{ app.name }}
br br
span(v-if="!app.noAboutLink"). span(v-if='!app.noAboutLink').
#[router-link(:to="{ name: 'Application', params: { app: app.id } }") About] &bull; #[router-link(:to="{ name: 'Application', params: { app: app.id } }") About] &bull;
a(:title="app.name" :href="app.url") Visit a(:title='app.name' :href='app.url') Visit
.sidebar-description(v-html="app.frontPageText") p.app-sidebar-description(v-html='app.frontPageText')
</template> </template>
<script> <script>
@ -15,15 +15,3 @@ export default {
props: ['app'] props: ['app']
} }
</script> </script>
<style scoped>
p {
margin: 0;
padding: 0;
}
.sidebar-description {
font-style: italic;
color: #555555;
padding-bottom: 3px;
}
</style>

21
src/components/sidebar/SidebarCategory.vue
View File

@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
div div
p.sidebar-head {{ category.name }} div.app-sidebar-head {{ category.name }}
sidebar-app(v-for="app in appsForCat(category.id)" v-bind:app="app" v-bind:key="app.id") sidebar-app(v-for='app in appsForCat(category.id)' :app='app' :key='app.id')
</template> </template>
<script> <script>
@ -11,7 +11,7 @@ import SidebarApp from './SidebarApp.vue'
export default { export default {
name: 'sidebar-category', name: 'sidebar-category',
props: ['category'], props: ['category'],
data: function () { data () {
return { return {
appsForCat: function (catId) { appsForCat: function (catId) {
return AppData.apps return AppData.apps
@ -25,16 +25,3 @@ export default {
} }
} }
</script> </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>

4
src/router/index.js
View File

@ -12,8 +12,8 @@ export default new Router({
mode: 'history', mode: 'history',
routes: [ routes: [
{ path: '/', name: 'Home', component: Home }, { path: '/', name: 'Home', component: Home },
{ path: '/applications/:app', name: 'Application', component: Application, props: true }, { path: '/solutions/:app', name: 'Application', component: Application, props: true },
{ path: '/applications', name: 'ApplicationList', component: ApplicationList }, { path: '/solutions', name: 'ApplicationList', component: ApplicationList },
{ path: '*', name: 'FourOhFour', component: FourOhFour } { path: '*', name: 'FourOhFour', component: FourOhFour }
] ]
}) })

0
static/.gitkeep
View File

BIN
static/bitbadger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/djs-consulting.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
static/slogan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB