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

Reduce font size across site

Browse Source 
- change footer background to line above

Resume:
- add LinkedIn
- fix Unicode expand icon not showing on mobile
This commit is contained in:
Kevin Mok
2019-10-05 03:02:10 -04:00
parent b652c45375
commit d14bcf3c8f
11 changed files with 321 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
assets/sass/main.scss
View File

@@ -2,6 +2,7 @@
// base colors {{{ // // base colors {{{ //
$base02: #515151;
$base03: #747369; $base03: #747369;
$base04: #a09f93; $base04: #a09f93;
$base05: #d3d0c8; $base05: #d3d0c8;
@@ -34,30 +35,36 @@ $base-dark-orange: #d27b53;
// mixins {{{ // // mixins {{{ //
$max-page-width: 52em; // $max-page-width: 52em;
$max-page-width: 45em;
$phone-width: 800px; $phone-width: 800px;
@mixin side-padding-rem($n) { @mixin side-padding-rem($n) {// {{{
padding-left: $n * 1rem; padding-left: $n * 1rem;
padding-right: $n * 1rem; padding-right: $n * 1rem;
} }// }}}
@mixin vert-padding-rem($n) { @mixin side-margin-em($n) {// {{{
margin-left: $n * 1em;
margin-right: $n * 1em;
}// }}}
@mixin vert-padding-rem($n) {// {{{
padding-top: $n * 1rem; padding-top: $n * 1rem;
padding-bottom: $n * 1rem; padding-bottom: $n * 1rem;
} }// }}}
@mixin vert-margin-em($n) { @mixin vert-margin-rem($n) {// {{{
margin-top: $n * 1em; margin-top: $n * 1rem;
margin-bottom: $n * 1em; margin-bottom: $n * 1rem;
} }// }}}
@mixin auto-center() { @mixin auto-center() {// {{{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }// }}}
@mixin article-body() { @mixin article-body() {// {{{
/* background-color: #e6e6fa; */ /* background-color: #e6e6fa; */
background-color: #cbbeb5; background-color: #cbbeb5;
color: #2d2d2d; color: #2d2d2d;
@@ -69,9 +76,9 @@ $phone-width: 800px;
@media (max-width: $max-page-width) { @media (max-width: $max-page-width) {
@include side-padding-rem(2); @include side-padding-rem(2);
} }
} }// }}}
@mixin a-color($color) { @mixin a-color($color) {// {{{
a { a {
color: $color; color: $color;
&:visited { &:visited {
@@ -81,7 +88,7 @@ $phone-width: 800px;
color: $color; color: $color;
} }
} }
} }// }}}
// }}} mixins // // }}} mixins //
@@ -97,7 +104,8 @@ body {
background-color: $background-color; background-color: $background-color;
color: $color; color: $color;
line-height: 1.5; line-height: 1.5;
font-size: 100%; // font-size: 100%;
font-size: 15px;
/* font-family: 'Source Code Pro', monospace; */ /* font-family: 'Source Code Pro', monospace; */
font-family: 'Hack', monospace; font-family: 'Hack', monospace;
display: flex; display: flex;
@@ -153,41 +161,62 @@ header {
} }
footer { footer {
// base {{{ //
@include a-color(#747369);
// background-color: #393939;
// max-width: $max-page-width;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; $vertical-margin: .2em;
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.8em;
color: #747369; color: #747369;
// bottom: 0; // bottom: 0;
// position: absolute; // position: absolute;
// width: 100%; // width: 100%;
.container { // }}} base //
background-color: #393939;
max-width: 62em; .container {// {{{
// max-width: $max-page-width;
// min-width: $max-page-width;
@include auto-center(); @include auto-center();
@include vert-padding-rem(.1); // @include vert-padding-rem(.1);
} @include side-padding-rem(0);
$vertical-margin: .2em; #footer-row {
// background-color: #393939;
#copyright {
position: relative;
top: 2px;
@include a-color(#747369);
}
#social-icons {
position: relative;
padding-left: 3px;
img {
height: 1.5em;
@include vert-margin-em(.2);
padding-left: .5em;
opacity: .6;
} }
}
#footer-content {
$side-padding: 2.5em;
@include vert-padding-rem(.35);
border-style: solid;
border-width: 1px 0 0 0;
border-color: rgba(81, 81, 81, .75);
#copyright {
// padding-left: .85em;
padding-left: $side-padding;
position: relative;
top: 2px;
@include a-color(#747369);
}
#social-icons {
position: relative;
padding-right: $side-padding;
// padding-right: .9em;
img {
height: 1.5em;
@include vert-margin-rem(.2);
padding-left: .5em;
opacity: .6;
}
}
}
}// }}}
@media (max-width: $max-page-width) { @media (max-width: $max-page-width) {
margin-top: 0; margin-top: 0;
@@ -215,8 +244,20 @@ p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h1 { font-size: 2rem } h1 {
h2 { font-size: 1.5rem } font-size: 2rem;
@media (max-width: $phone-width) {
font-size: 1.75rem;
}
}
h2 {
font-size: 1.5rem;
@media (max-width: $phone-width) {
font-size: 1.4rem;
}
}
h3 { font-size: 1.25rem } h3 { font-size: 1.25rem }
h4 { font-size: 1rem } h4 { font-size: 1rem }
h5 { font-size: .875rem } h5 { font-size: .875rem }
@@ -243,10 +284,6 @@ header {// {{{
} }
}// }}} }// }}}
footer {// {{{
@include a-color(#747369);
}// }}}
.page-not-found {// {{{ .page-not-found {// {{{
h1 { h1 {
text-align: center; text-align: center;
@@ -273,11 +310,12 @@ footer {// {{{
#homepage {// {{{ #homepage {// {{{
#about { #about {
font-size: 1.25rem; font-size: 1.1rem;
h2 { h2 {
margin-top: 1.25rem; margin-top: 1.25rem;
font-size: 2rem; // font-size: 2rem;
font-size: 1.9rem;
color: $base-yellow; color: $base-yellow;
text-align: center; text-align: center;
@@ -445,78 +483,152 @@ footer {// {{{
}// }}} }// }}}
#contact-info {// {{{ #contact-info {// {{{
@include vert-padding-rem(0.5); @include side-margin-em(0);
display: flex; // @include vert-padding-rem(0.5);
align-content: center; @include a-color($base-sky-blue);
// min-width: $max-page-width;
@media (min-width: 1200px) {
.container{
min-width: $max-page-width;
}
}
div { font-size: .9em;
flex-grow: 1;
.row {
// flex-grow: 1;
color: $base05; color: $base05;
img { img {
height: 1em; height: 1em;
// @media (max-width: $phone-width) {
// height: 1.5em;
// }
}
div[class^="col"] {
@include side-padding-rem(0);
// text-align: center;
}
}
.url-info {
margin-left: 5px;
// position: relative;
// left: -8px;
@media (max-width: $phone-width) {
// display: none;
// font-size: 10px;
font-size: .8em;
} }
} }
#email {
text-align: center;
}
#website {
text-align: right;
}
}// }}} }// }}}
#resume {// {{{ #resume {// {{{
a { a {// {{{
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }// }}}
h1 { h1 {// {{{
color: $base-orange; color: $base-orange;
} margin-top: 1rem;
.date { @media (max-width: $phone-width) {
margin-top: .75rem;
}
}// }}}
h2 {// {{{
color: $base-orange;
margin-top: .5rem;
@media (max-width: $phone-width) {
font-size: 1.2em;
margin-top: .75rem;
}
}// }}}
.date {// {{{
padding-top: .8em;
float: right; float: right;
color: $base03; color: $base03;
}
.project { @media (max-width: $phone-width) {
@include vert-padding-rem(.2); padding-top: 0em;
}
}// }}}
h2 { #projects {// {{{
color: $base-sky-blue; h1 {
display: inline; margin-bottom: 3px;
} }
img { .project {// {{{
height: 1.2em; @include vert-padding-rem(.2);
}
.project-link { h2 {
&:hover { color: $base-sky-blue;
text-decoration: none; display: inline;
} }
}
.btn { img {
display: inline; height: 1.2em;
background-color: transparent; }
.project-link {
&:hover {
text-decoration: none;
}
}
.down-triangle {
// fill: blue;
height: 1.2em;
position: relative;
top: -3px;
left: -3px;
}
.btn {// {{{
display: inline;
background-color: transparent;
margin-bottom: 5px;
padding-left: 7px;
&:focus, &:active {
outline: none !important;
box-shadow: none;
}
}// }}}
// }}}
// [id^="details-"] {
// margin-top: .5em;
// }
}
}// }}}
#education {// {{{
.institution {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 5px; margin-bottom: 5px;
padding-left: 7px;
&:focus, &:active {
outline: none !important;
box-shadow: none;
}
} }
// [id^="details-"] { .date {
// margin-top: .5em; padding-top: 0;
// } }
}// }}}
@media (max-width: $phone-width) {
font-size: 14px;
// font-size: 1em;
} }
}// }}} }// }}}
@@ -577,12 +689,12 @@ footer {// {{{
h1.site-title {// {{{ h1.site-title {// {{{
text-align: center; text-align: center;
/* font-size: 3.5em; */ font-size: 4.2em;
font-size: 4.8em;
// color: #66cccc; // color: #66cccc;
color: $base05; color: $base05;
margin-top: 1rem; // margin-top: 1rem;
margin-bottom: 0.5rem; // margin-bottom: 0.75rem;
@include vert-margin-rem(.75);
@include a-color($base-sky-blue); @include a-color($base-sky-blue);
a { a {
@@ -594,15 +706,22 @@ h1.site-title {// {{{
} }
@media (max-width: $phone-width) { @media (max-width: $phone-width) {
// font-size: 3em; font-size: 3.5em;
@include vert-margin-rem(.3);
// font-size: 2.5em; // font-size: 2.5em;
font-size: 2em; // font-size: 2em;
.surrounding {
display: none;
}
} }
}// }}} }// }}}
.hero-logo img { .hero-logo img {
margin-top: 0.5rem; margin-top: 0.5rem;
width: 100%; width: 100%;
// display: none;
// width: $max-page-width;
} }
.nav-bar {// {{{ .nav-bar {// {{{

10
content/config/_index.md
View File

@@ -6,7 +6,7 @@ layout: single
--- ---
<!--- Intro {{{ --> <!--- Intro {{{ -->
![desktop-screenshot](https://i.imgur.com/Fpsr8Fc.png) ![desktop-screenshot](https://img.khkm.tk/uploads/big/b2bd45e8f436d389ecb787b5c61c951a.png)
*Screenshot from my dual-monitor setup.* *Screenshot from my dual-monitor setup.*
This [repository][lc-repo] contains the dotfiles to increase my workflow This [repository][lc-repo] contains the dotfiles to increase my workflow
@@ -34,8 +34,10 @@ efficiency. They are also for my Linux [rice][ricing_explanation].
<!--- Setup {{{ --> <!--- Setup {{{ -->
## Setup ## Setup
I use I use [chezmoi] to manage varying configs for different machines with
[Stow](http://brandon.invergo.net/news/2012-05-26-using-gnu-stow-to-manage-your-dotfiles.html) a single branch.
to symbolically link the configs/dotfiles.
[chezmoi]: https://github.com/twpayne/chezmoi
<!--- }}} Setup --> <!--- }}} Setup -->

2
content/resume/_index.md
View File

@@ -114,6 +114,6 @@ url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
{{% resume/section education %}}<!--- {{{ --> {{% resume/section education %}}<!--- {{{ -->
- **University of Toronto**: Computer Science Specialist <div class="date">2017-2021</div> {{% resume/education name="University of Toronto" title="Computer Science Specialist" date="2017-2021" %}}
{{% /resume/section %}}<!--- }}} --> {{% /resume/section %}}<!--- }}} -->

58
layouts/partials/base/footer.html
View File

@@ -7,39 +7,39 @@
<footer> <footer>
<div class="container"> <div class="container">
<!-- <span class="copyright">&copy; {{ .Site.LastChange.Year }} {{ .Site.Title }} - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></span> --> <!-- <span class="copyright">&copy; {{ .Site.LastChange.Year }} {{ .Site.Title }} - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></span> -->
<div class="row justify-content-center"> <div id="footer-row" class="row justify-content-center">
<span id="copyright" class="col-xs-6"> <span id="footer-content" class="name">
&copy; {{ now.Year }} {{ .Site.Title }} · <span id="copyright" class="col-xs-6">
<!-- <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> · --> &copy; {{ now.Year }} {{ .Site.Title }} ·
<!-- <a href="{{ "credits" | relURL }}">Credits</a> · --> <!-- <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> · -->
</span> <!-- <a href="{{ "credits" | relURL }}">Credits</a> · -->
<span id="social-icons" class="col-xs-4"> </span>
<a href="https://github.com/Kevin-Mok" target="_blank"> <span id="social-icons" class="col-xs-4">
<img src="{{ "img/social/github.svg" | relURL }}" <a href="https://github.com/Kevin-Mok" target="_blank">
alt="github-logo"> <img src="{{ "img/social/github.svg" | relURL }}"
</a> alt="github-logo">
<a href="https://www.linkedin.com/in/kevin-kh-mok" target="_blank"> </a>
<img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo"> <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank">
</a> <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo">
<a href="https://git.kevin-mok.com/" target="_blank"> </a>
<img src="{{ "img/social/gitea.svg" | relURL }}" alt="gitea-logo"> <a href="https://git.kevin-mok.com/" target="_blank">
</a> <img src="{{ "img/social/gitea.svg" | relURL }}" alt="gitea-logo">
<a href="mailto:me@kevin-mok.com" target="_blank"> </a>
<img src="{{ "img/social/email.svg" | relURL }}" <a href="mailto:me@kevin-mok.com" target="_blank">
alt="envelope"> <img src="{{ "img/social/email.svg" | relURL }}"
</a> alt="envelope">
<a href="https://fosstodon.org/web/accounts/93113" target="_blank"> </a>
<img src="{{ "img/social/mastodon.svg" | relURL }}" <a href="https://fosstodon.org/web/accounts/93113" target="_blank">
alt="mastodon-logo"> <img src="{{ "img/social/mastodon.svg" | relURL }}"
</a> alt="mastodon-logo">
</span> </a>
<span id="social-icons" class="col-xs-2"> </span>
<span class="col-xs-2">
</span>
</span> </span>
</div> </div>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

4
layouts/partials/base/site-title.html
View File

@@ -1,7 +1,7 @@
<h1 class="site-title"> <h1 class="site-title">
[<a href="{{ .Site.BaseURL }}"><span class="base08">K</span><span <span class="surrounding">[</span><a href="{{ .Site.BaseURL }}"><span class="base08">K</span><span
class="base0f">e</span><span class="base09">v</span><span class="base0f">e</span><span class="base09">v</span><span
class="base0a">i</span><span class="base0b">n </span><span class="base0a">i</span><span class="base0b">n </span><span
class="base0c">M</span><span class="base0d">o</span><span class="base0c">M</span><span class="base0d">o</span><span
class="base0e">k</span></a>] # _ class="base0e">k</span></a><span class="surrounding">] # _</span>
</h1> </h1>

2
layouts/partials/home/about.html
View File

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

48
layouts/partials/resume/contact-info.html
View File

@@ -1,15 +1,39 @@
<div id="contact-info"> <div id="contact-info" class="container">
<div id="phone-number"> <div class="row row-top justify-content-center">
<img src="{{ "img/resume/smartphone.svg" | relURL }}" <div id="phone-number" class="col text-left">
alt="smartphone-icon">: <a href="tel:647-685-2500" target="_blank">
<a href="tel:647-685-2500" target="_blank">647-685-2500</a> <img src="{{ "img/resume/smartphone.svg" | relURL }}"
alt="smartphone-icon">
<span class="url-info">
647-685-2500
</span>
</a>
</div>
<div id="linkedin" class="col text-right">
<a href="https://www.linkedin.com/in/Kev-Mok">
<span class="url-info">
Kev-Mok
</span>
<img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-icon">
</a>
</div>
</div> </div>
<div id="email"> <div class="row justify-content-center">
<img src="{{ "img/resume/envelope.svg" | relURL }}" alt="envelope-icon">: <div id="email" class="col col-left">
<a href="mailto:me@kevin-mok.com">me@kevin-mok.com</a> <a href="mailto:me@kevin-mok.com">
</div> <img src="{{ "img/resume/envelope.svg" | relURL }}" alt="envelope-icon">
<div id="website"> <span class="url-info">
<img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">: me@kevin-mok.com
<a href="https://kevin-mok.com/">kevin-mok.com</a> </span>
</a>
</div>
<div id="website" class="col text-right">
<a href="https://kevin-mok.com/">
<span class="url-info">
kevin-mok.com
</span>
<img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">
</a>
</div>
</div> </div>
</div> </div>

2
layouts/resume/section.html
View File

@@ -6,8 +6,6 @@
{{ partial "resume/contact-info.html" . }} {{ partial "resume/contact-info.html" . }}
{{ partial "base/base16-logo.html" . }}
<div id="resume"> <div id="resume">
{{ .Content }} {{ .Content }}

12
layouts/shortcodes/resume/education.html Normal file
View File

@@ -0,0 +1,12 @@
<div class="education">
<div class="row">
<div class="col-8 text-left">
<p class="institution">
{{ .Get "name" }}
</p>
</div>
<div class="col text-right date">{{ .Get "date" }}</div>
</div>
{{ .Get "title" }}
</div>
</div>

26
layouts/shortcodes/resume/project.html
View File

@@ -1,13 +1,21 @@
<div class="project"> <div class="project">
<a class="project-link" href="{{ .Get "url" }}" target="_blank"> <div class="row project-header">
<img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon"> <div class="col-10 col-md-8 text-left">
</a> <a class="project-link" href="{{ .Get "url" }}" target="_blank">
<button class="btn" type="button" data-toggle="collapse" <img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">
data-target="#{{ .Get "name" | lower | urlize }}-details" </a>
aria-expanded="false" aria-controls="{{ .Get "name" | lower | urlize }}-details"> <button class="btn" type="button" data-toggle="collapse"
<h2 class="project-title">{{ .Get "name" }} ⏷</h2> data-target="#{{ .Get "name" | lower | urlize }}-details"
</button> aria-expanded="false" aria-controls="{{ .Get "name" | lower | urlize }}-details">
<div class="date">{{ .Get "date" }}</div> <h2 class="project-title">
{{ .Get "name" }}
<!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.svg" | relURL }}" alt="link-icon"> -->
<img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon">
</h2>
</button>
</div>
<div class="col-2 col-md-4 text-right date">{{ .Get "date" }}</div>
</div>
<div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details"> <div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
<div> <div>
{{ .Inner }} {{ .Inner }}

BIN
static/img/resume/down-triangle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B