Kevin-Mok/my-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Made homepage more mobile-friendly

Browse Source 
Adjusted font size and converted me equation from column to 2 rows.
This commit is contained in:
Kevin Mok
2019-02-07 02:56:45 -05:00
parent 78e9176a6b
commit 2c5edc9cbb
5 changed files with 201 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
assets/sass/main.scss
View File

@@ -34,7 +34,7 @@ $base-dark-orange: #d27b53;
// mixins {{{ //
$max-page-width: 52em;
$phone-width: 600px;
$phone-width: 800px;
@mixin side-padding-rem($n) {
padding-left: $n * 1rem;
@@ -259,6 +259,8 @@ footer {
// homepage {{{ //
#homepage {
// about {{{ //
#about {
font-size: 1.25rem;
@@ -279,48 +281,131 @@ footer {
margin-top: 3em;
text-align: center;
display: flex;
// display: grid;
// grid-template-columns: repeat(3, 2fr 1fr) 2fr;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
img {
width: 8em;
border-radius: 2em;
display: inline;
.equation-part {
// width: 33%;
display: flex;
flex: 1;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
&#gnu {
background-color: $base04;
// background-color: $base05;
a {
text-decoration: none;
}
}
p {
font-size: 4rem;
display: inline;
@include side-padding-rem(1);
}
img {
// width: 7em;
width: 70%;
// width: 15vw;
// min-width: 25%;
// height: 25%;
// height: auto;
@media (max-width: $phone-width) {
margin-top: 2em;
display: block;
// object-fit: contain;
// flex-basis: 20%;
// flex: 2 2 0;
// border-radius: 1.5em;
border-radius: 1.1em;
display: inline;
&#gnu {
background-color: $base04;
// background-color: $base05;
}
}
p {
display: block;
@include vert-padding-rem(0.1);
margin-bottom: 0rem;
// font-size: 3rem;
font-size: 3vw;
// width: 20%;
// flex: 1;
// display: inline;
display: inline-block;
@include side-padding-rem(0.2);
}
}
// media {{{ //
// @media (max-width: $phone-width) {
// margin-top: 2em;
// display: block;
// p {
// display: block;
// @include vert-padding-rem(0.1);
// margin-bottom: 0rem;
// }
// }
// @media (max-width: 800px) {
@media (max-width: $phone-width) {
// flex-direction: column;
flex-wrap: wrap;
margin-top: 2em;
justify-content: space-around; /* align horizontal */
// height: 100vh;
// height: 50vh;
.equation-part {
// min-width: 50vw;
// display: inline-block;
// min-width: 50%;
min-width: 33%;
// max-height: 25vh;
// flex-direction: column;
img {
// display: block;
// width: 50%;
flex: 1.5;
// flex: 1;
// height: 50%;
// max-height: 30%;
// max-height: 25vh;
&#hexatar {
// max-width: 70%;
// max-width: 33%;
max-width: 28%;
// margin-top: 2rem;
margin-top: 1.75rem;
}
}
p {
// font-size: 3rem;
font-size: 6vw;
// width: 20%;
flex: 1;
// @include side-padding-rem(0.2);
}
&#uoft-part {
justify-content: flex-end;
}
}
}
// }}} media //
}
// }}} me-equation //
@media (max-width: $phone-width) {
font-size: 1.1em;
// font-size: 1.1em;
font-size: .9em;
h1 {
font-size: 1.75rem;
// font-size: 1.75rem;
font-size: 1.4rem;
}
}
}
// }}} about //
@media (max-width: $max-page-width) {
margin-bottom: 2rem;
@@ -358,14 +443,16 @@ h1.site-title {
// color: #66cccc;
color: $base05;
margin-top: 0.5em;
margin-bottom: 0.2em;
margin-bottom: 0;
@media (max-width: $max-page-width) {
font-size: 3em;
}
@media (max-width: $phone-width) {
font-size: 2.25em;
// font-size: 3em;
// font-size: 2.5em;
font-size: 2em;
}
}
@@ -375,10 +462,13 @@ h1.site-title {
.nav-bar {
margin-left: .5em;
margin-bottom: 1em;
// margin-bottom: 1em;
// margin-top: .75em;
@include vert-padding-rem(1);
@media (max-width: $phone-width) {
font-size: .9em;
// font-size: .9em;
font-size: .8em;
}
}

42
ideas.md
View File

@@ -1,3 +1,25 @@
# Large
- add CSS grid layout
- add tooltip saying responsive
- resume
- printable version
- rewrite CSS in Sass
- push to base16 repo
- loop through URL sections
- terminal simulator for site
- cd/ls diff. pages
# Medium
- fav. apps
- credits
# Tiny
- socials in footer?
- shrink font sizing for mobile
- add links to all equation parts
- contact page
- click on name for base URL
## Archived
- about/homepage
- typing animation
@@ -5,23 +27,3 @@
- fade between two
- tux icon
# Tiny
- shrink font sizing for mobile
- contact page
- click on name for base URL
# Medium
- fav. apps
- credits
# Large
- resume
- printable version
- rewrite CSS in Sass
- push to base16 repo
- loop through URL sections
- add CSS grid layout
- use to make me equation columns for desktop
- box layout for mobile
- terminal simulator for site
- cd/ls diff. pages

6
layouts/partials/about.html
View File

@@ -1,9 +1,9 @@
<div id="about">
<!-- <h1 class="headline">About</h1> -->
<h1>Welcome to my site!</h1>
<h1>Hello there!</h1>
<p>
I'm Kevin Mok, a 2<sup>nd</sup> year Computer Science student at the University of Toronto.
I'm interested in all things Linux-related and
Welcome to my site. I'm Kevin Mok - a 2<sup>nd</sup> year Computer Science
student at the University of Toronto, and I'm interested in all things Linux-related and
<a href="https://www.gnu.org/philosophy/floss-and-foss.en.html"
target="_blank">FOSS/FLOSS</a>.
</p>

18
layouts/partials/me-equation.html
View File

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

75
resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View File

@@ -125,7 +125,7 @@ footer {
footer {
margin-top: 0;
margin-bottom: 0; } }
@media (max-width: 600px) {
@media (max-width: 800px) {
footer {
font-size: 0.8em; } }
@@ -230,31 +230,49 @@ footer a {
/* align horizontal */
align-items: center;
/* align vertical */ }
#homepage #about .me-equation img {
width: 8em;
border-radius: 2em;
display: inline; }
#homepage #about .me-equation img#gnu {
background-color: #a09f93; }
#homepage #about .me-equation p {
font-size: 4rem;
display: inline;
padding-left: 1rem;
padding-right: 1rem; }
@media (max-width: 600px) {
#homepage #about .me-equation .equation-part {
display: flex;
flex: 1;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */ }
#homepage #about .me-equation .equation-part a {
text-decoration: none; }
#homepage #about .me-equation .equation-part img {
width: 70%;
border-radius: 1.1em;
display: inline; }
#homepage #about .me-equation .equation-part img#gnu {
background-color: #a09f93; }
#homepage #about .me-equation .equation-part p {
font-size: 3vw;
display: inline-block;
padding-left: 0.2rem;
padding-right: 0.2rem; }
@media (max-width: 800px) {
#homepage #about .me-equation {
flex-wrap: wrap;
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: 600px) {
justify-content: space-around;
/* align horizontal */ }
#homepage #about .me-equation .equation-part {
min-width: 33%; }
#homepage #about .me-equation .equation-part img {
flex: 1.5; }
#homepage #about .me-equation .equation-part img#hexatar {
max-width: 28%;
margin-top: 1.75rem; }
#homepage #about .me-equation .equation-part p {
font-size: 6vw;
flex: 1; }
#homepage #about .me-equation .equation-part#uoft-part {
justify-content: flex-end; } }
@media (max-width: 800px) {
#homepage #about {
font-size: 1.1em; }
font-size: .9em; }
#homepage #about h1 {
font-size: 1.75rem; } }
font-size: 1.4rem; } }
@media (max-width: 52em) {
#homepage {
@@ -282,23 +300,24 @@ h1.site-title {
font-size: 4.8em;
color: #d3d0c8;
margin-top: 0.5em;
margin-bottom: 0.2em; }
margin-bottom: 0; }
@media (max-width: 52em) {
h1.site-title {
font-size: 3em; } }
@media (max-width: 600px) {
@media (max-width: 800px) {
h1.site-title {
font-size: 2.25em; } }
font-size: 2em; } }
.hero-logo img {
width: 100%; }
.nav-bar {
margin-left: .5em;
margin-bottom: 1em; }
@media (max-width: 600px) {
padding-top: 1rem;
padding-bottom: 1rem; }
@media (max-width: 800px) {
.nav-bar {
font-size: .9em; } }
font-size: .8em; } }
.hero-tagline {
margin-top: .3em;