Browse Source

Fixed sticky footer, vertical me equation (mobile)

Put me equation in separate file.
resume-pdf
Kevin Mok 6 years ago
parent
commit
d55e50d9bb
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 23
      assets/sass/main.scss
  2. 12
      layouts/partials/about.html
  3. 11
      layouts/partials/me-equation.html
  4. 22
      resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
  5. 0
      static/css-ref/style.css

23
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;
}
}
}
}

12
layouts/partials/about.html

@ -8,15 +8,5 @@
target="_blank">FOSS/FLOSS</a>.
</p>
<div class="me-equation">
<a href="https://www.gnu.org/" target="_blank">
<img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
</a>
<p>+</p>
<img src="{{ "img/linux-icon.svg" | relURL }}" alt="linux-logo">
<p>+</p>
<img src="{{ "img/uoft-logo.svg" | relURL }}" alt="linux-logo">
<p>=</p>
<img src="{{ "img/hexatar.png" | relURL }}" alt="linux-logo">
</div>
{{ partial "me-equation.html" . }}
</div>

11
layouts/partials/me-equation.html

@ -0,0 +1,11 @@
<div class="me-equation">
<a href="https://www.gnu.org/" target="_blank">
<img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
</a>
<p>+</p>
<img src="{{ "img/linux-icon.svg" | relURL }}" alt="linux-logo">
<p>+</p>
<img src="{{ "img/uoft-logo.svg" | relURL }}" alt="uoft-logo">
<p>=</p>
<img src="{{ "img/hexatar.png" | relURL }}" alt="my-avatar">
</div>

22
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 {

0
static/css/style.css → static/css-ref/style.css

Loading…
Cancel
Save