Refactor header CSS

components/followModal.vue

@@ -8,8 +8,8 @@
       </div>
       <div class='card-content'>
         <!-- <p>You are about to follow</p> -->
-        <h2 class='person-name'>{{name}}</h2>
-        <p class='person-bio'>{{bio}}</p>
+        <h2 class='profile-name'>{{name}}</h2>
+        <p class='profile-bio'>{{bio}}</p>
 
         <p>Enter your domain name (or Mastodon address, etc.) to follow:</p>
 

components/indieHeader.vue

 <template>
-  <div>
-    <header class='page-header'>
-      <div class='header-material'>
+    <header class='profile'>
+      <img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
+
+      <div class='profile-information'>
+        <h1 class='profile-name'>{{name}}</h1>
+        <p class='profile-bio'>{{bio}}</p>
         <button id='follow-button' @click='followButtonPress' class='button'>Follow</button>
-        <img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
-        <h1>{{name}}</h1>
-        <h2>{{bio}}</h2>
       </div>
     </header>
-    <div class='shade'></div>
-  </div>
 </template>
 
 <script>
@@ -27,53 +25,65 @@ export default {
 </script>
 
 <style>
-.page-header {
+.profile
+{
+  align-items: center;
+  color: white;
   /* background-image: url('/background-image.jpg'); */
   /* background-color: red; */
   /* background-color: white; */
   /* background-color: black; */
   background-color: lightblue;
   background-size: cover;
-  height: 26vmax;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0.2;
-  color: white;
+  /* position relatively so contained items align to this container */
+  position: relative;
+  padding: 1rem 1rem 0;
+  text-align: center;
+  width: 100%;
 }
 
-.header-material {
-  text-align: center;
-  z-index: 2;
+.profile-information
+{
+  background-color: rgba(0,0,0,0.55);
+  margin-top: 1em;
+  /* offset background against padding on profile__material */
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 0.25rem 0;
 }
 
-header h2 {
-  font-size: 2vmax;
+.profile-name
+{
+  /* numbered font weights won’t work in all browsers, will default to bold weight */
   font-weight: 400;
-  margin-top: 3vmax;
+  line-height: 1.2;
+  margin: 0;
 }
 
-.shade {
-  background-color: rgba(0,0,0,0.55);
-  height: 9vmax;
-  top: -9vmax;
-  margin-bottom: -9vmax;
-  position: relative;
-  z-index: 1;
+.profile-bio
+{
+  margin: 0 0 0.25em;
 }
 
-.profile-image {
-  width: 14vmax;
-  /* margin-top: 1vmax; */
-  margin-bottom: 4vmax;
-
-  /* Make the image circular with a white border */
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+.profile-image
+{
+  /* make image circular with a white border */
+  border: 0.2em solid white;
   border-radius: 50%;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  /* do not allow image size to exceed 7.5em */
+  max-width: 7.5em;
   overflow: hidden;
-  border: 0.4vmax solid white;
+  /* if smaller than 12em, scale image to 40% of width of container */
+  width: 40%;
 }
 
+#follow-button
+{
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
 </style>

layouts/default.vue

@@ -3,15 +3,160 @@
 </template>
 
 <style>
-html, body {
+body
+{
   font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
-  font-size: 16px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-
+  /* 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;
-  padding: 0;
+}
+
+/* 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 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;
+  }
+}
+
+/*
+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
+{
+  font-weight: bold;
+  margin: 1em 0 0.75em;
+}
+
+h1, .ql-editor h1, .ql-snow .ql-editor h1
+{
+  font-size: 2.5em;
+}
+
+h2, .ql-editor h2, .ql-snow .ql-editor h2
+{
+  font-size: 1.75em;
+}
+
+h3, .ql-editor h3, .ql-snow .ql-editor h3
+{
+  font-size: 1.5em;
+}
+
+h4, .ql-editor h4, .ql-snow .ql-editor h4
+{
+  font-size: 1.25em;
+}
+
+h5, .ql-editor h5, .ql-snow .ql-editor h5
+{
+  font-size: 1.2em;
+}
+
+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
+{
+  margin: 1em 0 0.75em;
+}
+
+ul, ol,
+.ql-editor ul, .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
+{
+  margin-bottom: 0.25em;
+}
+
+/* space created by ql-editor for bullet/number */
+.ql-editor li::before
+{
+  width: 1rem;
+}
+
+.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)
+{
+  padding-left: 2.5rem;
+}
+
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl)
+{
+  padding-left: 3.5rem;
+}
+
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl)
+{
+  padding-left: 4.5rem;
+}
+
+/* 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
+{
+  /* override Bulma default that prevents font scaling */
+  font-size: 1em;
 }
 </style>

pages/index.vue

@@ -68,79 +68,11 @@ export default {
 
 <style>
 
-#follow-button {
-  position: absolute;
-  top: 1vmax;
-  right: 1vmax;
-}
-
-p, figure {
-  margin-bottom: 2vmax;
-  margin-top: 2vmax;
-}
-
-figcaption {
-  margin-top: 1vmax;
-  text-align: center;
-  font-weight: bold;
-  font-size: 1.5vmax;
-}
-
-nav {
-  margin-top: 1vmax;
-}
-
-.tabs {
-  font-size: 3vmax;
-}
-
-/* Modal: currently unused */
-
-.modal .tabs {
-  font-size: 2vmax;
-}
-
-.modal nav {
-  margin-top: 0;
-}
-
-/* The component doesn’t set its own z-index high. We need to so as to
-   cover the Add button. */
-.modal {
-  z-index: 9001;
-}
-
-.tab-content {
-  margin-top: 2vmax;
-  padding: 0;
-}
-
-section {
-  max-width: 70vmax;
-  margin-left: auto;
+.tab-content
+{
   margin-right: auto;
-  /* margin-top: 1vmax; */
-  font-size: 2vmax;
-}
-
-.metadata {
-  text-align: right;
-  font-size: 1.5vmax;
-  font-style: italic;
-}
-
-h1 {
-  font-size: 5vmax;
-  margin-top: 3vmax;
-}
-
-h2 {
-  font-size: 3.5vmax;
-}
-
-article h1 {
-  font-size: 4vmax;
-  margin-bottom: 1.5vmax;
+  margin-left: auto;
+  max-width: 42em;
 }
 
 </style>