aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBryan Brattlof <hello@bryanbrattlof.com>2020-04-26 12:12:17 -0400
committerBryan Brattlof <hello@bryanbrattlof.com>2020-04-26 12:12:17 -0400
commitaaed634a12461cb57785f999740870be1a5386cf (patch)
tree9741b3967ebf6c3332b6268d9efe702aae35ebed
parentef77456a3e230371651937a6f66f29b0ae6f6e91 (diff)
downloadbryanbrattlof.com-aaed634a12461cb57785f999740870be1a5386cf.tar.gz
bryanbrattlof.com-aaed634a12461cb57785f999740870be1a5386cf.tar.bz2
remove hard-coded padding and margin elements
-rw-r--r--stylesheets/article.scss34
-rw-r--r--stylesheets/base/base.scss4
-rw-r--r--stylesheets/base/variables.scss4
-rw-r--r--stylesheets/footer.scss8
-rw-r--r--stylesheets/index.scss4
5 files changed, 26 insertions, 28 deletions
diff --git a/stylesheets/article.scss b/stylesheets/article.scss
index 5647f31..1a1cb81 100644
--- a/stylesheets/article.scss
+++ b/stylesheets/article.scss
@@ -6,7 +6,7 @@
header {
margin: auto;
- padding-bottom: 50px;
+ padding-bottom: 3 * $default-spacing;
/* article/page title */
h1 {
@@ -29,7 +29,7 @@ header {
font-size: 80%;
font-style: italic;
color: $display-font-color;
- padding: 10px 0;
+ padding: ($default-spacing/2) 0;
}
}
@@ -42,10 +42,10 @@ main {
margin: auto;
max-width: $max-page-width;
- padding-top: 50px;
+ padding-top: 3 * $default-spacing;
@include breakpoint-min($max-page-width) {
- padding-top: 100px;
+ padding-top: 5 * $default-spacing;
}
@include print {
@@ -154,8 +154,8 @@ em {
blockquote {
border-left: 5px solid lighten($secondary-color, 10);
font-style: italic;
- margin: 20px;
- padding: 10px 20px;
+ margin: $default-spacing;
+ padding: ($default-spacing/2) $default-spacing;
.attribution {
margin: 0;
@@ -169,7 +169,7 @@ blockquote {
/* section divs */
.section {
- margin: 50px 0 0;
+ margin: (3 * $default-spacing) 0 0;
}
/* hyperlinks */
@@ -211,7 +211,7 @@ ol {
/* definition list */
dl {
- margin: 0 0 20px;
+ margin: 0 0 $default-spacing;
padding: 0;
dt {
@@ -219,8 +219,8 @@ dl {
@extend %bold-font-extends;
}
dd {
- margin: 0 0 20px 10px;
- padding-left: 10px;
+ margin: 0 0 $default-spacing ($default-spacing/2);
+ padding-left: ($default-spacing/2);
border-left: 5px solid lighten($secondary-color, 10);
}
}
@@ -231,7 +231,7 @@ table {
border: none;
width: 100%;
- margin: 0 0 20px;
+ margin: 0 0 $default-spacing;
th, td {
padding: 6px 13px;
@@ -239,13 +239,13 @@ table {
border-bottom: 1px solid lighten($secondary-color, 10);
}
th {
- padding-right: 20px;
+ padding-right: $default-spacing;
text-align: left;
}
td {
}
p {
- margin: 0 0 20px;
+ margin: 0 0 $default-spacing;
}
p.last {
margin:0;
@@ -263,7 +263,7 @@ table {
font-style: italic;
}
.field-body {
- padding-left: 20px;
+ padding-left: $default-spacing;
}
}
@@ -276,7 +276,7 @@ table {
}
td {
- padding: 0 0 10px 20px;
+ padding: 0 0 ($default-spacing/2) $default-spacing;
}
.option-group {
@@ -295,7 +295,7 @@ table {
border: none;
}
td {
- padding: 0 20px 20px 0;
+ padding: 0 $default-spacing $default-spacing 0;
}
}
}
@@ -303,7 +303,7 @@ table {
/* line breaks */
hr {
border: 1px solid lighten($secondary-color, 10);
- margin: 0 0 20px;
+ margin: 0 0 $default-spacing;
/* Add the correct box sizing in Firefox.*/
box-sizing: content-box;
diff --git a/stylesheets/base/base.scss b/stylesheets/base/base.scss
index 0909cfa..098ff4e 100644
--- a/stylesheets/base/base.scss
+++ b/stylesheets/base/base.scss
@@ -15,7 +15,7 @@ body {
line-height: $line-height;
padding: 0;
- margin: 0 20px;
+ margin: 0 $default-spacing;
@include breakpoint-max(600px) {
font-size: $mobile-font-size;
@@ -37,7 +37,7 @@ img {
max-width: 100%;
height: auto;
- margin: 0 auto 20px;
+ margin: 0 auto $default-spacing;
/* Remove the border on images inside links in IE 10. */
border-style: none;
diff --git a/stylesheets/base/variables.scss b/stylesheets/base/variables.scss
index fbda6f7..2d42098 100644
--- a/stylesheets/base/variables.scss
+++ b/stylesheets/base/variables.scss
@@ -1,6 +1,6 @@
-$max-page-width: 800px !default;
-$default-spacing: 20px !default;
+$max-page-width: 50em !default;
+$default-spacing: 1.25em !default;
$title-font: sans-serif !default;
$display-font: serif !default;
diff --git a/stylesheets/footer.scss b/stylesheets/footer.scss
index 6b71e6b..b9b6338 100644
--- a/stylesheets/footer.scss
+++ b/stylesheets/footer.scss
@@ -1,12 +1,11 @@
footer {
text-align: center;
- margin: 125px auto 10px;
+ margin: (8 * $default-spacing) auto ($default-spacing/2);
max-width: $max-page-width * 0.5;
img {
max-width: 200px;
- margin: 0;
display: inline;
}
@@ -16,7 +15,6 @@ footer {
ul {
@include ul;
- margin: 30px 0;
}
li {
@@ -25,14 +23,14 @@ footer {
font-size: 90%;
- margin: 0 10px;
+ margin: 0 ($default-spacing/2);
padding: 0;
}
p {
@include p;
font-size: 75%;
- margin: 40px 0;
+ margin: (2 * $default-spacing) 0;
&.contact {
display: none;
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index e409269..398fc9a 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -21,7 +21,7 @@ main {
}
@include breakpoint-min($max-page-width) {
- padding-top: 100px;
+ padding-top: 6 * $default-spacing;
}
}
@@ -31,7 +31,7 @@ h1 {
font-family: $title-font;
color: $title-font-color;
- margin: 20px 0 0;
+ margin: $default-spacing 0 0;
padding: 0;
font-weight: $normal-font-weight;