...
 
Commits (10)
......@@ -27,6 +27,6 @@ export default {
.content-filter-toggle.tabs
{
margin-bottom: 1em;
margin-bottom: 1rem;
}
</style>
......@@ -61,7 +61,10 @@ export default {
margin-top: 0;
}
/* Override the size of the name and bio as they should be smaller than in the header. */
.card-content .profile-name {
font-size: 2.25rem;
margin: 1rem 0 0.25rem;
/* when profile names are really long, don’t let them break the modal layout, instead break the words and add hyphens */
-ms-word-break: break-all;
word-break: break-all;
......@@ -71,15 +74,9 @@ export default {
hyphens: auto;
}
/* Override the size of the name and bio as they should be smaller than in the header. */
.profile-name
{
font-size: 2.5em;
}
.profile-bio
{
font-size: 1.25em;
.card-content .profile-bio {
font-size: 1.2rem;
margin: 0.25rem 0;
}
</style>
......@@ -152,7 +152,7 @@ export default {
.profile-information {
background-color: rgba(0,0,0,0.55);
margin-top: 1em;
margin-top: 1rem;
/* offset background against padding on profile__material */
margin-right: -1rem;
margin-left: -1rem;
......@@ -160,51 +160,54 @@ export default {
}
.profile-name {
font-size: 3em;
font-size: 2.5rem;
/* numbered font weights won’t work in all browsers, will default to bold weight */
font-weight: 400;
line-height: 1.2;
margin: 0;
/* same as max-width on main in default.vue */
max-width: 45rem;
margin: 0 auto;
}
.profile-bio {
margin: 0 auto 0.25em;
max-width: 42em;
font-size: 1.2rem;
margin: 0 auto 0.25rem;
/* same as max-width on main in default.vue */
max-width: 45rem;
}
.profile-image {
/* make image circular with a white border */
border: 0.2em solid white;
border: 0.175rem solid white;
border-radius: 50%;
display: block;
height: 7.25rem;
width: 7.25rem;
margin-right: auto;
margin-left: auto;
/* do not allow image size to exceed 7.5em */
max-width: 7.5em;
overflow: hidden;
/* if smaller than 12em, scale image to 40% of width of container */
width: 40%;
}
#follow-button {
position: absolute;
top: 1em;
right: 1em;
top: 1rem;
right: 1rem;
}
/* Main navigation */
/*
Main navigation
- - - - - - - - - - - - */
nav {
margin-bottom: 1em;
margin-bottom: 1rem;
}
nav.tabs {
/* make navigation tab text bigger (ideally these will be h2s) */
font-size: 1.5em;
font-size: 1.5rem;
/* make navigation tabs very tall */
line-height: 2;
line-height: 2.25;
}
.tabs ul {
......
......@@ -2,12 +2,12 @@
<div>
<form @submit.prevent>
<b-field label='Name'>
<b-input v-model='name' placeholder='Anonymous'></b-input>
<b-field label='Name' for='profile-name'>
<b-input v-model='name' placeholder='Anonymous' id='profile-name'></b-input>
</b-field>
<b-field label='Bio'>
<b-input v-model='bio' placeholder='Anonymous'></b-input>
<b-field label='Bio' for='profile-bio'>
<b-input v-model='bio' placeholder='Anonymous' id='profile-bio'></b-input>
</b-field>
<label class='label' for='profile-image-upload'>Profile image</label>
......
......@@ -87,40 +87,34 @@ export default {
</script>
<style>
.compose
{
margin-bottom: 1em;
.compose {
margin-bottom: 1rem;
}
.compose-tools
{
.compose-tools {
/* override Bulma default for .buttons to align to right */
justify-content: flex-end;
}
.quill-editor
{
.quill-editor {
/* make editor window full-width by default */
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 1em;
margin-bottom: 1rem;
}
.ql-editor
{
.ql-editor {
padding-top: 0;
}
.ql-container
{
.ql-container {
/* reset so doesn’t use px for font size */
font-size: 1em;
font-size: 1rem;
}
/* The editor only has a top and bottom border to mark its boundaries. Otherwise, it is styled exactly like the rest of the content to underscore its purpose. When a post is submitted, the minimal chrome around the editor simply fades away and the content becomes part of the page. */
.ql-container.ql-snow
{
.ql-container.ql-snow {
border-right: none;
border-left: none;
}
......
......@@ -52,7 +52,7 @@
}
.VuePassword input {
padding-right: 2.5em;
padding-right: 2.5rem;
width: 100%;
}
......@@ -69,8 +69,8 @@
.VuePassword__Toggle__Icon {
fill: currentColor;
height: 100%;
width: 1.5em;
margin-right: .5em;
width: 1.5rem;
margin-right: 0.5rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
......@@ -80,10 +80,10 @@
.VuePassword__Meter {
color: rgb(175, 175, 175);
display: block;
height: .5rem;
margin-top: .2rem;
padding-left: .5rem;
padding-right: .5rem;
height: 0.5rem;
margin-top: 0.2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: 100%;
}
......
......@@ -47,10 +47,13 @@ export default {
</script>
<style>
html {
font-size: 1rem;
}
body {
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
/* minimum font size, no fonts should be smaller than 1em */
font-size: 1em;
line-height: 1.2;
/* remove browsers’ default padding on body */
margin: 0;
......@@ -59,22 +62,22 @@ body {
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
max-width: 45rem;
/* padding for space on left/right of content on narrower viewports */
padding: 0 1rem 1rem;
}
/* scale up font size when we reach 76 characters per line */
@media only screen and (min-width: 35em) {
body
{
font-size: 1.1em;
@media only screen and (min-width: 35rem) {
html {
font-size: 1.1rem;
}
}
/* scale up font size again when we reach 76 characters per line. Width of main components will be capped at this width */
@media only screen and (min-width: 42em) {
body
{
font-size: 1.2em;
@media only screen and (min-width: 45rem) {
html {
font-size: 1.2rem;
}
}
......@@ -86,37 +89,43 @@ h1, h2, h3, h4, h5, h6,
.ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6,
.ql-snow .ql-editor h1, .ql-snow .ql-editor h2, .ql-snow .ql-editor h3, .ql-snow .ql-editor h4, .ql-snow .ql-editor h5, .ql-snow .ql-editor h6 {
font-weight: bold;
margin: 1em 0 0.75em;
margin: 1rem 0 0.75rem;
}
h1, .ql-editor h1, .ql-snow .ql-editor h1 {
font-size: 2.5em;
font-size: 2.5rem;
margin: 2.5rem 0 1.5rem;
}
h2, .ql-editor h2, .ql-snow .ql-editor h2 {
font-size: 1.75em;
font-size: 1.75rem;
margin: 1.75rem 0 0.875rem;
}
h3, .ql-editor h3, .ql-snow .ql-editor h3 {
font-size: 1.5em;
font-size: 1.5rem;
margin: 1.5rem 0 0.75rem;
}
h4, .ql-editor h4, .ql-snow .ql-editor h4 {
font-size: 1.25em;
font-size: 1.25rem;
margin: 1.25rem 0 0.625rem;
}
h5, .ql-editor h5, .ql-snow .ql-editor h5 {
font-size: 1.2em;
font-size: 1.2rem;
margin: 1.2rem 0 0.6rem;
}
h6, .ql-editor h6, .ql-snow .ql-editor h6 {
font-size: 1.1em;
font-size: 1.1rem;
margin: 1.1rem 0 0.55rem;
}
p, ul, ol, blockquote, figure,
.ql-editor p, .ql-editor ul, .ql-editor ol, .ql-editor blockquote, .ql-editor figure,
.ql-snow .ql-editor p, .ql-snow .ql-editor ul, .ql-snow .ql-editor ol, .ql-snow .ql-editor blockquote, .ql-snow .ql-editor figure {
margin: 1em 0 0.75em;
margin: 1rem 0 0.75rem;
}
ul, ol,
......@@ -128,7 +137,7 @@ ul, ol,
li,
.ql-editor li,
.ql-snow .ql-editor li {
margin-bottom: 0.25em;
margin-bottom: 0.25rem;
}
/* space created by ql-editor for bullet/number */
......@@ -154,49 +163,16 @@ li,
/* placeholder message inside editor */
.ql-editor.ql-blank::before {
margin-top: 1em;
}
/*
BULMA-OVERRIDING STYLES
- - - - - - - - - - - - - - - - - - - - - - - - */
/* Bulma scales using rems, not ems, which doesn’t work with our font scaling. Here we just override where necessary */
/*
Buttons
- - - - - - - - - - - - */
.button {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
/*
Controls
- - - - - - - - - - - - */
.control {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
/*
Tabs
- - - - - - - - - - - - */
.tabs, .tabs.is-small {
/* override Bulma default that prevents font scaling */
font-size: 1em;
margin-top: 1rem;
}
/*
Form inputs
Bulma overrides (here so they apply universally)
- - - - - - - - - - - - */
.input, .taginput .taginput-container.is-focusable, .textarea {
/* override Bulma default that prevents font scaling */
font-size: 1em;
.tabs a {
/* override Bulma’s use of ems for padding */
padding: 0.5rem 1rem;
}
</style>
......@@ -12,7 +12,7 @@
<transition-group name='list' tag='div' @enter='clearTextComposer'>
<div v-for='post in posts' :key='post.id'>
<!-- <span>ID: {{post.id}}</span> -->
<span v-html='post.content'></span>
<article v-html='post.content'></article>
</div>
</transition-group>
</main>
......@@ -63,7 +63,7 @@ export default {
},
{
id: 0,
content: "<h2>Earliest post</h2><p>This is a great post.</p>"
content: "<h2>Earliest post</h2><p>Two days are passed. It is a summer evening; the coachman has set me down at a place called Wh76cross; he could take me no farther for the sum I had given, and I was not possessed of another shilling in the world. The coach is a mile off by this time; I am alone. At this moment I discover that I forgot to take my parcel out of the pocket of the coach, where I had placed it for safety; there it remains, there it must remain; and now, I am absolutely destitute. Whitcross is no town, nor even a hamlet; it is but a stone pillar set up where four roads meet: whitewashed, I suppose, to be more obvious at a distance and in darkness. Four arms spring from its summit: the nearest town to which these point is, according to the inscription, distant ten miles; the farthest, above twenty. From the well-known names of these towns I learn in what county I have lighted; a north-midland shire, dusk with moorland, ridged with mountain: this I see. There are great moors behind and on each hand of me; there are waves of mountains far beyond that deep valley at my feet. The population here must be thin, and I see no passengers on these roads: they stretch out east, west, north, and south—white, broad, lonely; they are all cut in the moor, and the heather grows deep and wild to their very verge. Yet a chance traveller might pass by; and I wish no eye to see me now: strangers would wonder what I am doing, lingering here at the sign-post, evidently objectless and lost. I might be questioned: I could give no answer but what would sound incredible and excite suspicion. Not a tie holds me to human society at this moment—not a charm or hope calls me where my fellow-creatures are—none that saw me would have a kind thought or a good wish for me. I have no relative but the universal mother, Nature: I will seek her breast and ask repose. I struck straight into the heath; I held on to a hollow I saw deeply furrowing the brown moorside; I waded knee-deep in its dark growth</p>"
}
]
}
......