Commit 70f63d09 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Put card layout back together. Add some basic Bulma overrides to help scaling....

Put card layout back together. Add some basic Bulma overrides to help scaling. Now refactored enough to close #8
parent 3d1aee47
......@@ -84,9 +84,14 @@
<!-- Follow modal -->
<b-modal :active.sync='followModalActive' :width='300' :scroll='keep'>
<div class='card'>
<div class='card__content'>
<div class='card__image card-image'>
<figure class='image is-fullwidth'>
<img src='/profile-image.jpg' alt='Profile image'>
</figure>
</div>
<div class='card__content card-content'>
<!-- <p>You are about to follow</p> -->
<p class='card__title'>{{name}}</p>
<h2 class='card__title'>{{name}}</h2>
<p class='card__bio'>{{bio}}</p>
<p>Enter your domain name (or Mastodon address, etc.) to follow:</p>
......@@ -97,11 +102,6 @@
</b-field>
<button @click='followModalActive = !followModalActive' class='button is-primary is-fullwidth'>Follow</button>
</div>
<div class='card__image'>
<figure class='image is-fullwidth'>
<img src='/profile-image.jpg' alt='Profile image'>
</figure>
</div>
</div>
</b-modal>
</main>
......@@ -191,7 +191,7 @@ body
@media only screen and (min-width: 35em) {
body
{
font-size: 1.2em;
font-size: 1.1em;
}
}
......@@ -199,7 +199,7 @@ body
@media only screen and (min-width: 42em) {
body
{
font-size: 1.4em;
font-size: 1.2em;
}
}
......@@ -259,6 +259,13 @@ ul, 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
{
......@@ -298,6 +305,42 @@ figcaption
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;
}
/*
COMPONENT-SPECIFIC STYLES
- - - - - - - - - - - - - - - - - - - - - - - - */
......@@ -403,16 +446,6 @@ Header and profile material
background-size: cover;
}
/*
Buttons
- - - - - - - - - - - - */
.button
{
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
/*
Follow button
- - - - - - - - - - - - */
......@@ -436,12 +469,6 @@ Autocomplete
Tabs
- - - - - - - - - - - - */
.tabs
{
/* override Bulma default that prevents font scaling */
font-size: 1em;
}
nav.tabs
{
/* make navigation tab text bigger (ideally these will be h2s) */
......@@ -455,6 +482,11 @@ nav.tabs
margin: 0;
}
.tabs li
{
margin-bottom: 0;
}
/*
Content filter toggle
- - - - - - - - - - - - */
......
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