Integrate Laura’s CSS refactor to use rems instead of ems

parent e3cb7d82
......@@ -27,6 +27,6 @@ export default {
.content-filter-toggle.tabs
{
margin-bottom: 1em;
margin-bottom: 1rem;
}
</style>
......@@ -62,7 +62,10 @@ export default {
}
.card-content .profile-name {
/* when profile names are really long, don’t let them break the modal layout, instead break the words and add hyphens */
/*
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;
word-break: break-word;
......@@ -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.25rem;
margin: 0.25rem 0;
}
</style>
......@@ -140,10 +140,12 @@ export default {
.profile {
/* Note: the background colour and image are dynamically set on the
header itself, based on the site configuration settings. */
align-items: center;
color: white;
background-size: cover;
/* position relatively so contained items align to this container */
/* Position relatively so contained items align to this container. */
position: relative;
padding: 1rem 1rem 0;
text-align: center;
......@@ -152,59 +154,65 @@ export default {
.profile-information {
background-color: rgba(0,0,0,0.55);
margin-top: 1em;
/* offset background against padding on profile__material */
margin-top: 1rem;
/* Offset background against padding on profile__material. */
margin-right: -1rem;
margin-left: -1rem;
padding: 0.25rem 0;
}
.profile-name {
font-size: 3em;
font-size: 3rem;
/* numbered font weights won’t work in all browsers, will default to bold weight */
/* Numbered font weights won’t work in all browsers, will default to bold weight. */
font-weight: 400;
line-height: 1.2;
margin: 0;
margin: 0 auto;
/* Same max-width as on main in default.vue. */
max-width: 45rem;
}
.profile-bio {
margin: 0 auto 0.25em;
max-width: 42em;
font-size: 1.2rem;
margin: 0.25rem auto 0.75rem;
/* Same max-width as on main in default.vue. */
max-width: 45rem;
}
.profile-image {
/* make image circular with a white border */
border: 0.2em solid white;
/* Make image circular with a white border. */
border: 0.175rem solid white;
border-radius: 50%;
display: block;
height: 10rem;
width: 10rem;
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;
/* Make navigation tab text bigger (ideally these should be h2s). */
font-size: 1.5rem;
/* make navigation tabs very tall */
line-height: 2;
/* Make navigation tabs taller. */
line-height: 2.25;
}
.tabs ul {
......
......@@ -87,40 +87,39 @@ export default {
</script>
<style>
.compose
{
margin-bottom: 1em;
.compose {
margin-bottom: 1rem;
}
.compose-tools
{
/* override Bulma default for .buttons to align to right */
.compose-tools {
/* Override Bulma default for .buttons to align to right. */
justify-content: flex-end;
}
.quill-editor
{
/* make editor window full-width by default */
.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
{
/* reset so doesn’t use px for font size */
font-size: 1em;
.ql-container {
/* Overwrite so that it doesn’t use px for font size. */
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. */
/*
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,76 +47,87 @@ 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 */
/* Remove browsers’ default padding on body. */
margin: 0;
}
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
max-width: 45em;
/* Pad for space on either side 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;
/* Scale up font size when we reach 76 characters per line. */
@media only screen and (min-width: 35rem) {
body {
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;
/*
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: 42rem) {
body {
font-size: 1.2rem;
}
}
/*
Typography for all “content” (which is mirrored inside editor)
- - - - - - - - - - - - */
/* Typography for all ‘content’ (which is mirrored inside the editor). */
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,10 +139,10 @@ 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 */
/* Space created by ql-editor for bullet/number. */
.ql-editor li::before {
width: 1rem;
}
......@@ -152,51 +163,15 @@ li,
padding-left: 4.5rem;
}
/* placeholder message inside editor */
/* Placeholder message inside editor. */
.ql-editor.ql-blank::before {
margin-top: 1em;
margin-top: 1rem;
}
/*
BULMA-OVERRIDING STYLES
- - - - - - - - - - - - - - - - - - - - - - - - */
/* Bulma scales using rems, not ems, which doesn’t work with our font scaling. Here we just override where necessary */
/*
Buttons
- - - - - - - - - - - - */
/* Bulma overrides (placed here so that they apply universally). */
.button {
/* override Bulma default that prevents font scaling */
font-size: 1em;
.tabs a {
/* Override Bulma’s use of ems for padding. */
padding: 0.5rem 1rem;
}
/*
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;
}
/*
Form inputs
- - - - - - - - - - - - */
.input, .taginput .taginput-container.is-focusable, .textarea {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
</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>
......
......@@ -6,12 +6,12 @@
<main>
<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 id='profile-name' v-model='name' placeholder='Anonymous'></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 id='profile-bio' v-model='bio' placeholder='Anonymous'></b-input>
</b-field>
<label class='label' for='profile-image-upload'>Profile image</label>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment