Refactor header CSS

parent 850f98ff
......@@ -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>
......
<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>
......@@ -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>
......@@ -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>
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