Skip to content

GitLab

Verified Commit 6d0bcea7 authored by Aral Balkan's avatar Aral Balkan
Browse files

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

parent e3cb7d82
Hide whitespace changes
Inline Side-by-side
client/components/contentTypeFilter.vue
View file @ 6d0bcea7
......@@ -27,6 +27,6 @@ export default {
.content-filter-toggle.tabs
{
margin-bottom: 1em;
margin-bottom: 1rem;
}
</style>
client/components/followModal.vue
View file @ 6d0bcea7
......@@ -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>
client/components/indieHeader.vue
View file @ 6d0bcea7
......@@ -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 {
......
client/components/textComposer.vue
View file @ 6d0bcea7
......@@ -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;
}
......
client/components/vuePassword.vue
View file @ 6d0bcea7
......@@ -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%;
}
......
client/layouts/default.vue
View file @ 6d0bcea7
......@@ -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>
client/pages/index.vue
View file @ 6d0bcea7
......@@ -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>
......
client/pages/settings.vue
View file @ 6d0bcea7
......@@ -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

Like this? Fund us! Your patronage helps keep us independent and going.