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>
<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>

4
package.json
View File

@ -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": {

87
src/App.vue
View File

@ -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;
@ -55,37 +59,50 @@ h2 {
border-bottom: solid 2px navy;
}
p {
margin: 16px 0;
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 {
display: flex;
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;

29
src/components/Application.vue
View File

@ -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;

12
src/components/ApplicationList.vue
View File

@ -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>

16
src/components/ApplicationListItem.vue
View File

@ -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;
}

12
src/components/FourOhFour.vue
View File

@ -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>

24
src/components/Home.vue
View File

@ -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>

4
src/components/PageTitle.vue
View File

@ -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 () { }

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

@ -1,12 +1,13 @@
<template lang="pug">
aside
p
strong.sidebar-name Connect with Us
br
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")
div
aside.app-sidebar
div
div.app-sidebar-head Connect with Us
p
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' :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 {
margin: 0;
.app-sidebar-name, .app-sidebar-description {
margin: 0;
padding: 0;
}
.app-sidebar-description {
font-style: italic;
color: #555555;
padding-bottom: .6rem;
}
</style>

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

@ -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>

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

@ -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>

4
src/router/index.js
View File

@ -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 }
]
})

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