diff --git a/assets/site.css b/assets/site.css index 85b3e63..6ddfad3 100644 --- a/assets/site.css +++ b/assets/site.css @@ -25,6 +25,7 @@ :root { font-family: "DM Mono", "Courier New", Courier, monospace; background-color: hsl(224, 44%, 95%); + --color-theme-1: #ff3e00; } body { @@ -42,11 +43,24 @@ nav { gap: 15px; } +a { + color: var(--color-theme-1); + text-decoration: none; + border-bottom: 1px solid transparent; + transition-property: border-color; + transition-duration: 0.5s; +} + +a:hover { + border-color: var(--color-theme-1); +} + nav a { color: gray; transition-property: color; transition-duration: 0.5s; text-decoration: none; + border: none; } nav a:hover, diff --git a/pages/home.rb b/pages/home.rb index d479f72..8691c1d 100644 --- a/pages/home.rb +++ b/pages/home.rb @@ -1,30 +1,41 @@ class Pages::Home < ::Phlex::HTML + def project_link(name:, url:, desc:) + li { + a(href: url) { name } + span { " - " + desc } + } + end + def view_template render ::Pages::Layout.new(:home) { p { "i'm aleks rūtiņš." } - p { "i'm a student and programmer, skilled with a wide variety of tools." } + p { "i'm a student and programmer, skilled with a wide variety of languages and tools." } h2 { "featured projects" } ul { - li { - a(href: "https://sr.ht/~aleksrutins/phlexite") { "phlexite" } - span { " - a simple static site generator using phlex for templating" } - } + project_link( + name: "phlexite", + url: "https://sr.ht/~aleksrutins/phlexite", + desc: "a simple static site generator using phlex for templating" + ) - li { - a(href: "https://dynamite.farthergate.com/") { "dynamite" } - span { " - a customizable lv2 distortion plugin"} - } + project_link( + name: "dynamite", + url: "https://dynamite.farthergate.com/", + desc: "a customizable lv2 distortion plugin" + ) - li { - a(href: "https://packsnap.farthergate.com/") { "packsnap" } - span { " - a reproducible container build system" } - } + project_link( + name: "packsnap", + url: "https://packsnap.farthergate.com/", + desc: "a reproducible container build system" + ) - li { - a(href: "https://bc.farthergate.com/") { "biocircuits for mere mortals" } - span { " - a daunting topic broken down in a (hopefully) friendly way" } - } + project_link( + name: "biocircuits for mere mortals", + url: "https://bc.farthergate.com/", + desc: "a daunting topic broken down in a (hopefully) friendly way" + ) } } end