diff --git a/assets/sass/_content.scss b/assets/sass/_content.scss index 81bc964..02ce162 100644 --- a/assets/sass/_content.scss +++ b/assets/sass/_content.scss @@ -1,8 +1,16 @@ +@import "home"; + +html { + min-height: 100vh; + margin: 0; +} + body { max-width: 980px; margin: auto; - min-height: 100%; - padding-bottom: 20px; + width: 100%; + height: 1px; + min-height: 100vh; font-family: $sansfont; font-weight: normal; @@ -104,10 +112,12 @@ blockquote { code { // font-size: 1.2em; font-family: $monofont; + font-size: 0.9em; + box-sizing: border-box; padding: 3px; - background-color: #2b303b; + background-color: $faded-background-color; border-radius: 5px; - color: #cccccc; + color: $code-color; } a code { diff --git a/assets/sass/_home.scss b/assets/sass/_home.scss new file mode 100644 index 0000000..69c8358 --- /dev/null +++ b/assets/sass/_home.scss @@ -0,0 +1,108 @@ +#homepageContainer { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + padding: 12px; + box-sizing: border-box; + + #homepage { + width: 100%; + + h1#title { + font-weight: normal; + font-size: 4em; + margin: 0; + } + + div#about { + line-height: 1.5em; + + p { + min-width: 520px; + width: 60%; + } + + a code { + color: $code-color; + + &:hover { + text-decoration: none; + } + } + + ul { + list-style-type: "\22A2 "; + padding-left: 1.5em; + + li { + padding-left: .5em; + } + } + } + + h2 { + font-weight: normal; + margin-bottom: 6px; + color: $text-color; + } + + h2#blog-posts-title { + a { + text-decoration: none; + color: $text-color; + } + } + + #blog-posts { + width: 100%; + display: flex; + flex-direction: row; + align-content: stretch; + + @media screen and (max-width: 520px) { + flex-wrap: wrap; + } + @media screen and (min-width: 520px) { + flex-wrap: no-wrap; + } + + gap: 20px; + + .blog-post-link { + flex-grow: 1; + flex-basis: 100%; + padding: 8px; + background-color: $faded-background-color; + text-decoration: none; + + .blog-post { + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + align-content: stretch; + justify-content: space-between; + + color: $text-color; + text-decoration: none; + + .title { + display: flex; + } + + .details { + text-align: right; + color: $smaller-text-color; + } + } + + &:hover .title { + text-decoration: underline; + text-decoration-style: dotted; + } + } + } + } +} diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/sass/main.scss b/assets/sass/main.scss index b00147e..743ecab 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,5 +1,6 @@ -@import "syntax"; @import "agda"; +@import "mixins"; +@import "syntax"; @font-face { font-family: 'PragmataPro Mono Liga'; @@ -13,22 +14,26 @@ $monofont: "PragmataPro Mono Liga", "Roboto Mono", "Roboto Mono for Powerline", @media (prefers-color-scheme: light) { $background-color: white; + $faded-background-color: darken($background-color, 10%); $heading-color: #15202B; $text-color: #15202B; $small-text-color: lighten($text-color, 10%); - $smaller-text-color: lighten($text-color, 18%); + $smaller-text-color: lighten($text-color, 20%); $faded: lightgray; $link-color: royalblue; + $code-color: firebrick; @import "content"; } @media (prefers-color-scheme: dark) { $background-color: #15202B; + $faded-background-color: lighten($background-color, 10%); $heading-color: #E4E4E4; $text-color: #BCBCBC; $small-text-color: darken($text-color, 8%); $smaller-text-color: darken($text-color, 12%); $faded: #666; $link-color: lightskyblue; + $code-color: lighten(firebrick, 25%); @import "content"; } diff --git a/content/_index.md b/content/_index.md index 5a1d439..0243813 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,4 +2,18 @@ layout = "home" +++ -hello +Hi there! I'm a recent graduate from the University of Minnesota, currently +working as an associate researcher at [SIFT]. My computing-related interests lie +in programming language design and analysis, systems security, cryptography, and +distributed systems. + +[SIFT]: https://www.sift.net/ + +## contact + +- Email: `b64d(bWFpbEBtemhhbmcuaW8=)` +- PGP Key: [`925ECC02890D5CDAE26180D4BDA47A31A3C8EE6B`][PGP] +- IRC: `mzh` on [libera.chat] + +[PGP]: https://keybase.io/michaelz/pgp_keys.asc?fingerprint=925ecc02890d5cdae26180d4bda47a31a3c8ee6b +[libera.chat]: https://libera.chat diff --git a/content/about/_index.md b/content/about/_index.md index f9fcc36..35fcd56 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -7,16 +7,25 @@ type = "generic" layout = "single" +++ -Hi there! I'm a recently-graduated CS bachelor from the University of Minnesota, currently working as an associate researcher at [SIFT][11]. My computing-related interests lie in programming language design and analysis, systems security, cryptography, and distributed systems. Some of the projects I've been working on in my free time include: +Hi there! I'm a recent graduate from the University of Minnesota, currently +working as an associate researcher at [SIFT][11]. My computing-related interests +lie in programming language design and analysis, systems security, cryptography, +and distributed systems. Some of the projects I've been working on +in my free time include: - [**Leanshot**][6], a Linux screen capture tool. - [**Garbage**][7], a CLI interface to the trash can API. More can be found on [this page][12] or my public [Gitea][2]. -I've also started making an increased effort at using and supporting [FOSS][8], and other software that're not predatory towards users. As a part of this effort, I'm also self-hosting and rewriting some of the services and software that I use regularly. Find out what I'm using [here][9]. +I've also started making an increased effort at using and supporting [FOSS][8], +and other software that're not predatory towards users. As a part of this +effort, I'm also self-hosting and rewriting some of the services and software +that I use regularly. Find out what I'm using [here][9]. -I'm also an avid rhythm game player and beatmap creator, mostly involved with the free-to-play game [osu!][3]. Check out some of my beatmaps on my [osu! userpage][4]. +I'm also an avid rhythm game player and beatmap creator, mostly involved with +the free-to-play game [osu!][3]. Check out some of my beatmaps on my [osu! +userpage][4]. ## contact diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 01837d4..3ba2d6e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,6 +12,7 @@ + {{ block "body" . }}