diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 82d7fa8..7f9643c 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -2,6 +2,8 @@ // base colors {{{ // +$base04: #a09f93; +$base05: #d3d0c8; $base-red: #f2777a; $base-orange: #f99157; $base-yellow: #ffcc66; @@ -11,14 +13,13 @@ $base-blue: #6699cc; $base-violet: #cc99cc; $base-dark-orange: #d27b53; -.base00 { color: #2d2d2d; } +/* .base00 { color: #2d2d2d; } .base01 { color: #393939; } .base02 { color: #515151; } .base03 { color: #747369; } .base04 { color: #a09f93; } -.base05 { color: #d3d0c8; } .base06 { color: #e8e6df; } -.base07 { color: #f2f0ec; } +.base07 { color: #f2f0ec; } */ .base08 { color: $base-red; } .base09 { color: $base-orange; } .base0a { color: $base-yellow; } @@ -87,6 +88,8 @@ body { font-size: 100%; /* font-family: 'Source Code Pro', monospace; */ font-family: 'Hack', monospace; + + @include a-color($base-sky-blue); } .container { @@ -227,7 +230,7 @@ footer { h2 { text-align: center; font-size: 3em; - color: #a09f93; + color: $base04; margin-bottom: 4rem; } @@ -246,14 +249,44 @@ footer { // homepage {{{ // -.homepage { - h1 { - .headline { - font-size: 3em; - color: #ffcc66; +#homepage { + #about { + font-size: 1.25rem; - @media (max-width: $max-page-width) { - @include side-padding-rem(2); + h1 { + margin-top: 1.25rem; + font-size: 2rem; + color: $base-yellow; + text-align: center; + + // @media (max-width: $max-page-width) { + // @include side-padding-rem(2); + // } + } + + .me-equation { + margin-top: 3em; + text-align: center; + display: flex; + justify-content: center; /* align horizontal */ + align-items: center; /* align vertical */ + + img { + width: 8em; + border-radius: 2em; + display: inline; + + &#gnu { + background-color: $base04; + // background-color: $base05; + } + } + + p { + font-size: 4rem; + display: inline; + @include side-padding-rem(1); + // display: table-cell inline; } } } @@ -290,7 +323,8 @@ h1.site-title { text-align: center; /* font-size: 3.5em; */ font-size: 4.8em; - color: #66cccc; + // color: #66cccc; + color: $base05; margin-top: 0.5em; margin-bottom: 0.2em; } @@ -308,12 +342,17 @@ h1.site-title { .nav-bar { margin-left: .5em; margin-bottom: 1em; - @include a-color($base-sky-blue); } .hero-tagline{ margin-top: .3em; + font-size: .8rem; + // font-style: italic; text-align: center; + + .icon { + width: 1.25rem; + } } // }}} hero // @@ -484,7 +523,7 @@ article.single td { line-height: inherit; border-bottom-width: 1px; border-bottom-style: solid; - border-bottom-color: #a09f93; + border-bottom-color: $base04; } article.single tr:last-child td { @@ -510,7 +549,7 @@ article.single hr { border: 0; border-bottom-style: solid; border-bottom-width: 1px; - border-bottom-color: #a09f93; + border-bottom-color: $base04; } // }}} article.single // diff --git a/content/_index.md b/content/_index-old.md similarity index 100% rename from content/_index.md rename to content/_index-old.md diff --git a/ideas.md b/ideas.md index 61dc135..1622277 100644 --- a/ideas.md +++ b/ideas.md @@ -1,17 +1,31 @@ # Large -- rewrite CSS in Sass - - push to base16 repo - resume - printable version +- rewrite CSS in Sass + - push to base16 repo - loop through URL sections - add CSS grid layout -- credits +- add media queries for mobile site +- terminal simulator for site + - cd/ls diff. pages # Medium -- setup Netlify +- fav. apps +- credits # Tiny -- setup custom domain/HTTPS with Netlify +- 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 diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..2afec88 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,9 @@ +{{ define "main" }} + +
+ +{{ partial "about.html" . }} + +
+ +{{ end }} diff --git a/layouts/partials/about.html b/layouts/partials/about.html index cfbf28d..d058e8f 100644 --- a/layouts/partials/about.html +++ b/layouts/partials/about.html @@ -1 +1,22 @@ -

About

+
+ +

Welcome to my site!

+

+ I'm Kevin Mok, a 2nd year Computer Science student at the University of Toronto. + I'm interested in all things Linux-related and + FOSS/FLOSS. +

+ +
+ + gnu-logo + +

+

+ linux-logo +

+

+ linux-logo +

=

+ linux-logo +
+
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index bfb306f..52851e3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -17,8 +17,7 @@ {{ $main_sass := resources.Get "sass/main.scss" }} {{ $main_style := $main_sass | resources.ToCSS }} - - + - [KKevin Mok] # _ - + class="base0e">k] # _
@@ -31,11 +29,13 @@
-
- - Live, love and Linux. -
+ diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 0ceff81..9aa0ab1 100644 --- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -1,28 +1,11 @@ /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */ -.base00 { - color: #2d2d2d; } - -.base01 { - color: #393939; } - -.base02 { - color: #515151; } - -.base03 { - color: #747369; } - -.base04 { - color: #a09f93; } - -.base05 { - color: #d3d0c8; } - -.base06 { - color: #e8e6df; } - -.base07 { - color: #f2f0ec; } - +/* .base00 { color: #2d2d2d; } +.base01 { color: #393939; } +.base02 { color: #515151; } +.base03 { color: #747369; } +.base04 { color: #a09f93; } +.base06 { color: #e8e6df; } +.base07 { color: #f2f0ec; } */ .base08 { color: #f2777a; } @@ -55,6 +38,12 @@ body { font-size: 100%; /* font-family: 'Source Code Pro', monospace; */ font-family: 'Hack', monospace; } + body a { + color: #66cccc; } + body a:visited { + color: #66cccc; } + body a:active { + color: #66cccc; } .container { max-width: 52em; @@ -221,16 +210,35 @@ footer a { .page-not-found h2 { font-size: 2em; } } -.homepage h1 .headline { - font-size: 3em; - color: #ffcc66; } - @media (max-width: 52em) { - .homepage h1 .headline { - padding-left: 2rem; - padding-right: 2rem; } } +#homepage #about { + font-size: 1.25rem; } + #homepage #about h1 { + margin-top: 1.25rem; + font-size: 2rem; + color: #ffcc66; + text-align: center; } + #homepage #about .me-equation { + margin-top: 3em; + text-align: center; + display: flex; + justify-content: center; + /* 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: 52em) { - .homepage { + #homepage { margin-bottom: 2rem; } } /* .homepage section.categories, @@ -253,7 +261,7 @@ h1.site-title { text-align: center; /* font-size: 3.5em; */ font-size: 4.8em; - color: #66cccc; + color: #d3d0c8; margin-top: 0.5em; margin-bottom: 0.2em; } @@ -267,16 +275,13 @@ h1.site-title { .nav-bar { margin-left: .5em; margin-bottom: 1em; } - .nav-bar a { - color: #66cccc; } - .nav-bar a:visited { - color: #66cccc; } - .nav-bar a:active { - color: #66cccc; } .hero-tagline { margin-top: .3em; + font-size: .8rem; text-align: center; } + .hero-tagline .icon { + width: 1.25rem; } .article-list h1.list-title { font-size: 3em; diff --git a/static/img/gnu.svg b/static/img/gnu.svg new file mode 100644 index 0000000..9a068ae --- /dev/null +++ b/static/img/gnu.svg @@ -0,0 +1,2492 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/hexatar.png b/static/img/hexatar.png new file mode 100644 index 0000000..b392526 Binary files /dev/null and b/static/img/hexatar.png differ diff --git a/static/img/linux-icon.svg b/static/img/linux-icon.svg new file mode 100644 index 0000000..2f20159 --- /dev/null +++ b/static/img/linux-icon.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/uoft-logo.svg b/static/img/uoft-logo.svg new file mode 100644 index 0000000..b57d040 --- /dev/null +++ b/static/img/uoft-logo.svg @@ -0,0 +1,702 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file