Added responsive classes to header
Also changed "Daniel's Weekly Devotions" to "A Word from the Word"
This commit is contained in:
parent
39a420e73f
commit
6096ecff10
58
src/App.vue
58
src/App.vue
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
#app
|
||||
header
|
||||
header.site-header
|
||||
.header-logo
|
||||
router-link(to='/')
|
||||
img(src='/static/bitbadger.png'
|
||||
|
@ -68,9 +68,13 @@ h3 {
|
|||
margin: 1rem 0;
|
||||
}
|
||||
h2, h3 {
|
||||
width: 80%;
|
||||
border-bottom: solid 2px navy;
|
||||
}
|
||||
@media all and (min-width:40rem) {
|
||||
h2, h3 {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
@ -92,7 +96,7 @@ p {
|
|||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
header {
|
||||
.site-header {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -102,12 +106,41 @@ header {
|
|||
background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
|
||||
background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
|
||||
}
|
||||
header a:link, header a:visited {
|
||||
.site-header a:link, header a:visited {
|
||||
color: black;
|
||||
}
|
||||
header a:hover {
|
||||
.site-header a:hover {
|
||||
border-bottom:none;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-spacer {
|
||||
flex-grow: 3;
|
||||
}
|
||||
.header-social {
|
||||
padding: 25px .8rem 0 0;
|
||||
}
|
||||
.header-social img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
@media all and (max-width:40rem) {
|
||||
.site-header {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.header-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
.header-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.content-item {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
@ -145,19 +178,4 @@ ul {
|
|||
li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 100px;
|
||||
}
|
||||
.header-spacer {
|
||||
flex-grow: 3;
|
||||
}
|
||||
.header-social {
|
||||
padding: 25px .8rem 0 0;
|
||||
}
|
||||
.header-social img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,6 +6,16 @@ const CATEGORIES = [
|
|||
{ id: 4, name: 'Personal' }
|
||||
]
|
||||
const APPS = [
|
||||
{
|
||||
id: 'a-word-from-the-word',
|
||||
name: 'A Word from the Word',
|
||||
url: 'https://devotions.summershome.org',
|
||||
active: true,
|
||||
categoryId: 4,
|
||||
noAboutLink: true,
|
||||
frontPageText: 'Devotions by Daniel',
|
||||
frontPageOrder: 2
|
||||
},
|
||||
{
|
||||
id: 'bay-vista',
|
||||
name: 'Bay Vista Baptist Church',
|
||||
|
@ -90,16 +100,6 @@ const APPS = [
|
|||
frontPageText: 'Daniel’s personal blog',
|
||||
frontPageOrder: 1
|
||||
},
|
||||
{
|
||||
id: 'daniels-weekly-devotions',
|
||||
name: 'Daniel\'s Weekly Devotions',
|
||||
url: 'https://devotions.summershome.org',
|
||||
active: true,
|
||||
categoryId: 4,
|
||||
noAboutLink: true,
|
||||
frontPageText: 'A word from the Word each week',
|
||||
frontPageOrder: 2
|
||||
},
|
||||
{
|
||||
id: 'dr-melissa-clouthier',
|
||||
name: 'Dr. Melissa Clouthier',
|
||||
|
|
Loading…
Reference in New Issue
Block a user