From d55e50d9bb049b914bb5401f3f6f2c7be74a0ee5 Mon Sep 17 00:00:00 2001
From: Kevin Mok
Date: Wed, 6 Feb 2019 05:18:38 -0500
Subject: [PATCH] Fixed sticky footer, vertical me equation (mobile)
Put me equation in separate file.
---
assets/sass/main.scss | 23 +++++++++++++++----
layouts/partials/about.html | 12 +---------
layouts/partials/me-equation.html | 11 +++++++++
...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 22 +++++++++++++-----
static/{css => css-ref}/style.css | 0
5 files changed, 47 insertions(+), 21 deletions(-)
create mode 100644 layouts/partials/me-equation.html
rename static/{css => css-ref}/style.css (100%)
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 7f9643c..449aa21 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -34,6 +34,7 @@ $base-dark-orange: #d27b53;
// mixins {{{ //
$max-page-width: 52em;
+$phone-width: 600px;
@mixin side-padding-rem($n) {
padding-left: $n * 1rem;
@@ -88,6 +89,9 @@ body {
font-size: 100%;
/* font-family: 'Source Code Pro', monospace; */
font-family: 'Hack', monospace;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
@include a-color($base-sky-blue);
}
@@ -96,6 +100,7 @@ body {
max-width: $max-page-width;
margin-left: auto;
margin-right: auto;
+ flex: 1;
.copyright {
@include a-color(#747369);
@@ -146,9 +151,9 @@ footer {
text-align: center;
font-size: 0.9em;
color: #747369;
- bottom: 0;
- position: absolute;
- width: 100%;
+ // bottom: 0;
+ // position: absolute;
+ // width: 100%;
.container {
background-color: #393939;
@@ -286,7 +291,17 @@ footer {
font-size: 4rem;
display: inline;
@include side-padding-rem(1);
- // display: table-cell inline;
+ }
+
+ @media (max-width: $phone-width) {
+ margin-top: 2em;
+ display: block;
+
+ p {
+ display: block;
+ @include vert-padding-rem(0.1);
+ margin-bottom: 0rem;
+ }
}
}
}
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index d058e8f..6b4aa6c 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -8,15 +8,5 @@
target="_blank">FOSS/FLOSS.
-
-
-
-
-
+
-
-
+
-
-
=
-
-
+{{ partial "me-equation.html" . }}
diff --git a/layouts/partials/me-equation.html b/layouts/partials/me-equation.html
new file mode 100644
index 0000000..ee3fb71
--- /dev/null
+++ b/layouts/partials/me-equation.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
=
+
+
diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 9aa0ab1..9b1b4d3 100644
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -37,7 +37,10 @@ body {
line-height: 1.5;
font-size: 100%;
/* font-family: 'Source Code Pro', monospace; */
- font-family: 'Hack', monospace; }
+ font-family: 'Hack', monospace;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh; }
body a {
color: #66cccc; }
body a:visited {
@@ -48,7 +51,8 @@ body {
.container {
max-width: 52em;
margin-left: auto;
- margin-right: auto; }
+ margin-right: auto;
+ flex: 1; }
.container .copyright a {
color: #747369; }
.container .copyright a:visited {
@@ -109,10 +113,7 @@ footer {
margin-bottom: 1rem;
text-align: center;
font-size: 0.9em;
- color: #747369;
- bottom: 0;
- position: absolute;
- width: 100%; }
+ color: #747369; }
footer .container {
background-color: #393939;
max-width: 62em;
@@ -236,6 +237,15 @@ footer a {
display: inline;
padding-left: 1rem;
padding-right: 1rem; }
+ @media (max-width: 600px) {
+ #homepage #about .me-equation {
+ margin-top: 2em;
+ display: block; }
+ #homepage #about .me-equation p {
+ display: block;
+ padding-top: 0.1rem;
+ padding-bottom: 0.1rem;
+ margin-bottom: 0rem; } }
@media (max-width: 52em) {
#homepage {
diff --git a/static/css/style.css b/static/css-ref/style.css
similarity index 100%
rename from static/css/style.css
rename to static/css-ref/style.css