Make the <main> style a global style

parent 6a144e96
......@@ -16,7 +16,7 @@
<nav class='tabs is-centered' style='background-color: white;'>
<ul>
<li class='is-active'><nuxt-link to='/'>Me</nuxt-link></li>
<li><nuxt-link to='/everyone'>Everyone</nuxt-link></li>
<li><nuxt-link to='/everyone' :disabled='!configured'>Everyone</nuxt-link></li>
<li><nuxt-link to='/search'>Search</nuxt-link></li>
<li><nuxt-link to='/settings'>Settings</nuxt-link></li>
<li><nuxt-link to='/more'></nuxt-link></li>
......
......@@ -47,8 +47,7 @@ export default {
</script>
<style>
body
{
body {
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
/* minimum font size, no fonts should be smaller than 1em */
font-size: 1em;
......@@ -57,6 +56,12 @@ body
margin: 0;
}
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
/* scale up font size when we reach 76 characters per line */
@media only screen and (min-width: 35em) {
body
......@@ -79,92 +84,76 @@ Typography for all “content” (which is mirrored inside 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
{
.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;
}
h1, .ql-editor h1, .ql-snow .ql-editor h1
{
h1, .ql-editor h1, .ql-snow .ql-editor h1 {
font-size: 2.5em;
}
h2, .ql-editor h2, .ql-snow .ql-editor h2
{
h2, .ql-editor h2, .ql-snow .ql-editor h2 {
font-size: 1.75em;
}
h3, .ql-editor h3, .ql-snow .ql-editor h3
{
h3, .ql-editor h3, .ql-snow .ql-editor h3 {
font-size: 1.5em;
}
h4, .ql-editor h4, .ql-snow .ql-editor h4
{
h4, .ql-editor h4, .ql-snow .ql-editor h4 {
font-size: 1.25em;
}
h5, .ql-editor h5, .ql-snow .ql-editor h5
{
h5, .ql-editor h5, .ql-snow .ql-editor h5 {
font-size: 1.2em;
}
h6, .ql-editor h6, .ql-snow .ql-editor h6
{
h6, .ql-editor h6, .ql-snow .ql-editor h6 {
font-size: 1.1em;
}
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
{
.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;
}
ul, ol,
.ql-editor ul, .ql-editor ol,
.ql-snow .ql-editor ul, .ql-snow .ql-editor ol
{
.ql-snow .ql-editor ul, .ql-snow .ql-editor ol {
padding-left: 0;
}
li,
.ql-editor li,
.ql-snow .ql-editor li
{
.ql-snow .ql-editor li {
margin-bottom: 0.25em;
}
/* space created by ql-editor for bullet/number */
.ql-editor li::before
{
.ql-editor li::before {
width: 1rem;
}
.ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl)
{
.ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5rem;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl)
{
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
padding-left: 2.5rem;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl)
{
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
padding-left: 3.5rem;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl)
{
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
padding-left: 4.5rem;
}
/* placeholder message inside editor */
.ql-editor.ql-blank::before
{
.ql-editor.ql-blank::before {
margin-top: 1em;
}
......@@ -178,8 +167,7 @@ BULMA-OVERRIDING STYLES
Buttons
- - - - - - - - - - - - */
.button
{
.button {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
......@@ -188,8 +176,7 @@ Buttons
Controls
- - - - - - - - - - - - */
.control
{
.control {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
......@@ -207,8 +194,7 @@ Tabs
Form inputs
- - - - - - - - - - - - */
.input, .taginput .taginput-container.is-focusable, .textarea
{
.input, .taginput .taginput-container.is-focusable, .textarea {
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
......
......@@ -19,9 +19,5 @@ export default {
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
......@@ -21,9 +21,5 @@ export default {
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
......@@ -20,9 +20,5 @@ export default {
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
......@@ -21,9 +21,5 @@ export default {
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
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