aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBryan Brattlof <hello@bryanbrattlof.com>2020-04-07 12:16:11 -0400
committerBryan Brattlof <hello@bryanbrattlof.com>2020-04-07 12:16:11 -0400
commit966645d82f56234e2837288e58981b324f862813 (patch)
tree7c01073334fa9e54ca2a9d553d9870115e1d9342
parent7ed87eff683bbddd0788b783972d5b0f64d89396 (diff)
downloadbryanbrattlof.com-966645d82f56234e2837288e58981b324f862813.tar.gz
bryanbrattlof.com-966645d82f56234e2837288e58981b324f862813.tar.bz2
add side-by-side image styling to article stylesheet
* this will allow me to create two charts side-by-side for desktop viewing, and flip back to on top of each other screens smaller than the max article width (800px) minus 4 * the default spacing (20px)
-rw-r--r--stylesheets/article.scss24
-rw-r--r--stylesheets/base/base.scss2
2 files changed, 13 insertions, 13 deletions
diff --git a/stylesheets/article.scss b/stylesheets/article.scss
index 01c4d14..3eb4218 100644
--- a/stylesheets/article.scss
+++ b/stylesheets/article.scss
@@ -58,21 +58,21 @@ main {
/* images */
img {
+ @include breakpoint-min($max-page-width + 4 * $default-spacing) {
- &.left, &.right {
- max-width: ($max-page-width/2) - $default-spacing;
- }
+ &.left, &.right {
+ max-width: ($max-page-width/2) - $default-spacing;
+ }
- @include breakpoint-min($max-page-width * (3/4)) {
- &.left {
- float: left;
- padding-right: $default-spacing;
- }
+ &.left {
+ float: left;
+ padding-right: $default-spacing;
+ }
- &.right {
- float: right;
- padding-left: $default-spacing;
- }
+ &.right {
+ float: right;
+ padding-left: $default-spacing;
+ }
}
}
/* svg objects */
diff --git a/stylesheets/base/base.scss b/stylesheets/base/base.scss
index 8c43be6..8ba2c5e 100644
--- a/stylesheets/base/base.scss
+++ b/stylesheets/base/base.scss
@@ -15,7 +15,7 @@ body {
line-height: $line-height;
padding: 0;
- margin: 20px 40px 0;
+ margin: 0 20px;
font-size: $mobile-font-size;
@include breakpoint-min(600px) {