Browse Source

Made homepage more mobile-friendly

resume-pdf
Kevin Mok 5 years ago
parent
commit
012c004155
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 31
      assets/sass/main.scss
  2. 37
      ideas.md
  3. 24
      resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

31
assets/sass/main.scss

@ -159,13 +159,17 @@ footer {
background-color: #393939;
max-width: 62em;
@include auto-center();
height: 1.8em;
@include vert-padding-rem(.1);
}
@media (max-width: $max-page-width) {
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: $phone-width) {
font-size: 0.8em;
}
}
/* Typography */
@ -269,6 +273,8 @@ footer {
// }
}
// me-equation {{{ //
.me-equation {
margin-top: 3em;
text-align: center;
@ -304,11 +310,22 @@ footer {
}
}
}
// }}} me-equation //
@media (max-width: $phone-width) {
font-size: 1.1em;
h1 {
font-size: 1.75rem;
}
}
}
@media (max-width: $max-page-width) {
margin-bottom: 2rem;
}
}
/* .homepage section.categories,
@ -342,12 +359,14 @@ h1.site-title {
color: $base05;
margin-top: 0.5em;
margin-bottom: 0.2em;
}
@media (max-width: $max-page-width) {
h1.site-title {
@media (max-width: $max-page-width) {
font-size: 3em;
}
@media (max-width: $phone-width) {
font-size: 2.25em;
}
}
.hero-logo img {
@ -357,6 +376,10 @@ h1.site-title {
.nav-bar {
margin-left: .5em;
margin-bottom: 1em;
@media (max-width: $phone-width) {
font-size: .9em;
}
}
.hero-tagline{

37
ideas.md

@ -1,3 +1,18 @@
## Archived
- about/homepage
- typing animation
- linux screenshot
- fade between two
- tux icon
# Tiny
- contact page
- click on name for base URL
# Medium
- fav. apps
- credits
# Large
- resume
- printable version
@ -5,27 +20,5 @@
- push to base16 repo
- loop through URL sections
- add CSS grid layout
- add media queries for mobile site
- terminal simulator for site
- cd/ls diff. pages
# Medium
- fav. apps
- credits
# Tiny
- about/homepage
- elevator pitch
- student
- passionate
- typing animation
- linux screenshot
- fade between two
- picture equation of my interests
- Linux
- terminal
- UofT
- contact page
- click on name for base URL
- tux icon

24
resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@ -119,11 +119,15 @@ footer {
max-width: 62em;
margin-left: auto;
margin-right: auto;
height: 1.8em; }
padding-top: 0.1rem;
padding-bottom: 0.1rem; }
@media (max-width: 52em) {
footer {
margin-top: 0;
margin-bottom: 0; } }
@media (max-width: 600px) {
footer {
font-size: 0.8em; } }
/* Typography */
h1 {
@ -246,6 +250,11 @@ footer a {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
margin-bottom: 0rem; } }
@media (max-width: 600px) {
#homepage #about {
font-size: 1.1em; }
#homepage #about h1 {
font-size: 1.75rem; } }
@media (max-width: 52em) {
#homepage {
@ -274,10 +283,12 @@ h1.site-title {
color: #d3d0c8;
margin-top: 0.5em;
margin-bottom: 0.2em; }
@media (max-width: 52em) {
h1.site-title {
font-size: 3em; } }
@media (max-width: 52em) {
h1.site-title {
font-size: 3em; } }
@media (max-width: 600px) {
h1.site-title {
font-size: 2.25em; } }
.hero-logo img {
width: 100%; }
@ -285,6 +296,9 @@ h1.site-title {
.nav-bar {
margin-left: .5em;
margin-bottom: 1em; }
@media (max-width: 600px) {
.nav-bar {
font-size: .9em; } }
.hero-tagline {
margin-top: .3em;

Loading…
Cancel
Save