Browse Source

Reduce font size across site

- change footer background to line above

Resume:
- add LinkedIn
- fix Unicode expand icon not showing on mobile
tr-letter
Kevin Mok 4 years ago
parent
commit
d14bcf3c8f
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 301
      assets/sass/main.scss
  2. 10
      content/config/_index.md
  3. 2
      content/resume/_index.md
  4. 58
      layouts/partials/base/footer.html
  5. 4
      layouts/partials/base/site-title.html
  6. 2
      layouts/partials/home/about.html
  7. 48
      layouts/partials/resume/contact-info.html
  8. 2
      layouts/resume/section.html
  9. 12
      layouts/shortcodes/resume/education.html
  10. 26
      layouts/shortcodes/resume/project.html
  11. BIN
      static/img/resume/down-triangle.png

301
assets/sass/main.scss

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

10
content/config/_index.md

@ -6,7 +6,7 @@ layout: single
---
<!--- 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.*
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
I use
[Stow](http://brandon.invergo.net/news/2012-05-26-using-gnu-stow-to-manage-your-dotfiles.html)
to symbolically link the configs/dotfiles.
I use [chezmoi] to manage varying configs for different machines with
a single branch.
[chezmoi]: https://github.com/twpayne/chezmoi
<!--- }}} Setup -->

2
content/resume/_index.md

@ -114,6 +114,6 @@ url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
{{% 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 %}}<!--- }}} -->

58
layouts/partials/base/footer.html

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

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

@ -1,7 +1,7 @@
<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="base0a">i</span><span class="base0b">n </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>

2
layouts/partials/home/about.html

@ -1,7 +1,7 @@
<div id="about">
<h2>Welcome to my site!</h2>
<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
<a href="https://www.gnu.org/philosophy/floss-and-foss.en.html"
target="_blank">FOSS/FLOSS</a>.

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

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

2
layouts/resume/section.html

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

12
layouts/shortcodes/resume/education.html

@ -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

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

BIN
static/img/resume/down-triangle.png

After

Width: 90  |  Height: 90  |  Size: 580 B

Loading…
Cancel
Save