diff --git a/assets/sass/main.scss b/assets/sass/main.scss index d5deae4..5a5e37f 100644 --- a/assets/sass/main.scss +++ b/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 {// {{{ diff --git a/content/config/_index.md b/content/config/_index.md index a1ad63c..6b092bd 100644 --- a/content/config/_index.md +++ b/content/config/_index.md @@ -6,7 +6,7 @@ layout: single --- -![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 -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 + diff --git a/content/resume/_index.md b/content/resume/_index.md index 4670160..d7ff8a1 100644 --- a/content/resume/_index.md +++ b/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
2017-2021
+{{% resume/education name="University of Toronto" title="Computer Science Specialist" date="2017-2021" %}} {{% /resume/section %}} diff --git a/layouts/partials/base/footer.html b/layouts/partials/base/footer.html index 5401f35..8fbc728 100644 --- a/layouts/partials/base/footer.html +++ b/layouts/partials/base/footer.html @@ -7,39 +7,39 @@ - diff --git a/layouts/partials/base/site-title.html b/layouts/partials/base/site-title.html index 25c4671..060f1f1 100644 --- a/layouts/partials/base/site-title.html +++ b/layouts/partials/base/site-title.html @@ -1,7 +1,7 @@

- [K[Kevin Mok] # _ + class="base0e">k] # _

diff --git a/layouts/partials/home/about.html b/layouts/partials/home/about.html index 870c10b..52ea578 100644 --- a/layouts/partials/home/about.html +++ b/layouts/partials/home/about.html @@ -1,7 +1,7 @@

Welcome to my site!

- I'm Kevin Mok - a 2nd year Computer Science + I'm Kevin Mok - a 3rd year Computer Science student at the University of Toronto, and I'm greatly interested in all things Linux and FOSS/FLOSS. diff --git a/layouts/partials/resume/contact-info.html b/layouts/partials/resume/contact-info.html index 5dbc1f9..da25999 100644 --- a/layouts/partials/resume/contact-info.html +++ b/layouts/partials/resume/contact-info.html @@ -1,15 +1,39 @@ -

-
- smartphone-icon: - 647-685-2500 +
+
+
+ + smartphone-icon + + 647-685-2500 + + +
+
+ + + Kev-Mok + + linkedin-icon + +
- - diff --git a/layouts/resume/section.html b/layouts/resume/section.html index 3d69d6b..b7669f7 100644 --- a/layouts/resume/section.html +++ b/layouts/resume/section.html @@ -6,8 +6,6 @@ {{ partial "resume/contact-info.html" . }} -{{ partial "base/base16-logo.html" . }} -
{{ .Content }} diff --git a/layouts/shortcodes/resume/education.html b/layouts/shortcodes/resume/education.html new file mode 100644 index 0000000..347e6af --- /dev/null +++ b/layouts/shortcodes/resume/education.html @@ -0,0 +1,12 @@ +
+
+
+

+ {{ .Get "name" }} +

+
+
{{ .Get "date" }}
+
+ {{ .Get "title" }} +
+
diff --git a/layouts/shortcodes/resume/project.html b/layouts/shortcodes/resume/project.html index 1f9c022..197bd71 100644 --- a/layouts/shortcodes/resume/project.html +++ b/layouts/shortcodes/resume/project.html @@ -1,13 +1,21 @@
- - link-icon - - -
{{ .Get "date" }}
+
+
+ + link-icon + + +
+
{{ .Get "date" }}
+
{{ .Inner }} diff --git a/static/img/resume/down-triangle.png b/static/img/resume/down-triangle.png new file mode 100644 index 0000000..a5f7a81 Binary files /dev/null and b/static/img/resume/down-triangle.png differ