completed structural changes
- Application thumbnail now flexes above the description when it cannot fit on the right - Converted some measures that still used px to rem - Removed commented-out style rules
This commit is contained in:
parent
6b1455b73f
commit
ecfd96e2bc
16
src/App.vue
16
src/App.vue
|
@ -50,16 +50,21 @@ header, h1, h2, h3, footer a {
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 21px 0;
|
margin: 1.4rem 0;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin: 19px 0;
|
margin: 1.2rem 0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
h2, h3 {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
border-bottom: solid 2px navy;
|
border-bottom: solid 2px navy;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin: 16px 0;
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
#content {
|
#content {
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
|
@ -70,7 +75,6 @@ p {
|
||||||
@media all and (min-width: 68rem) {
|
@media all and (min-width: 68rem) {
|
||||||
.content {
|
.content {
|
||||||
width: 66rem;
|
width: 66rem;
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.hdr {
|
.hdr {
|
||||||
|
@ -126,10 +130,6 @@ footer {
|
||||||
footer a:link, footer a:visited {
|
footer a:link, footer a:visited {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
/*footer a:hover {
|
|
||||||
border-bottom: none;
|
|
||||||
color: maroon;
|
|
||||||
}*/
|
|
||||||
.alignleft {
|
.alignleft {
|
||||||
float:left;
|
float:left;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
|
|
|
@ -1,30 +1,30 @@
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
article.content
|
div
|
||||||
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>
|
||||||
|
div.app-info
|
||||||
aside: img(:src='imageLink')
|
aside: img(:src='imageLink')
|
||||||
p(v-for='(p, idx) in application.paragraphs' :key='idx' v-html='p')
|
article.content
|
||||||
p(v-for='(act, idx) in application.activity' :key='idx' :act='act')
|
p(v-for='(p, idx) in application.paragraphs' :key='idx' v-html='p')
|
||||||
strong {{ act.heading }}
|
div(v-for='(act, idx) in application.activity' :key='idx' :act='act')
|
||||||
| –
|
h3 {{ act.heading }}
|
||||||
span(v-html='act.narrative')
|
p(v-html='act.narrative')
|
||||||
template(v-if='application.quotes')
|
div(v-if='application.quotes')
|
||||||
hr
|
h3 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.
|
— #[strong.app-info-heading {{ application.quotes.name }}], {{ application.quotes.from }}
|
||||||
— #[strong {{ application.quotes.name }}], {{ application.quotes.from }}
|
p(v-for='(p, idx) in application.footnotes' :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' }") « Back to All Solutions
|
||||||
router-link(:to="{ name: 'ApplicationList' }") « Back to All Solutions
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -54,20 +54,23 @@ export default {
|
||||||
h1 {
|
h1 {
|
||||||
line-height: 1.6rem;
|
line-height: 1.6rem;
|
||||||
}
|
}
|
||||||
|
.app-info {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row-reverse wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
aside {
|
aside {
|
||||||
float: right;
|
|
||||||
width: auto;
|
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
aside img {
|
aside img {
|
||||||
border: solid 3px #3A1D00;
|
border: dotted 1px darkgray;
|
||||||
border-top-right-radius: 5px;
|
border-top-right-radius: 5px;
|
||||||
border-top-left-radius: 5px;
|
border-top-left-radius: 5px;
|
||||||
border-bottom-left-radius: 10px;
|
border-bottom-left-radius: 10px;
|
||||||
border-bottom-right-radius: 10px;
|
border-bottom-right-radius: 10px;
|
||||||
}
|
}
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: solid 1px #3A1D00;
|
border-left: solid 1px darkgray;
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,7 +155,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
article.content {
|
.home article.content {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
@media all and (min-width: 80rem) {
|
@media all and (min-width: 80rem) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user