Redesign with Tailwind
This commit is contained in:
parent
b29b35e166
commit
3a25e0b4b0
13 changed files with 161 additions and 121 deletions
|
@ -2,17 +2,20 @@ class Pages::Blog < ::Phlex::HTML
|
|||
include Util::PostLoader
|
||||
|
||||
def view_template
|
||||
render ::Pages::Layout.new(:blog) {
|
||||
ul {
|
||||
render ::Pages::Layout.new(:blog, banner: '/trees.jpg') {
|
||||
h1(class: 'font-bold text-center') { 'Blog' }
|
||||
table {
|
||||
posts.each { |post|
|
||||
meta = post[:data].front_matter
|
||||
|
||||
return unless meta.key?('published_on')
|
||||
|
||||
li {
|
||||
p {
|
||||
time(datetime: meta['published_on']) { meta['published_on'] }
|
||||
a(href: '/p/' + post[:slug], style: "padding-left: 10px;") { meta['title'] }
|
||||
tr {
|
||||
td {
|
||||
time(datetime: meta['published_on'], class: 'text-gray-500') { meta['published_on'] }
|
||||
}
|
||||
td {
|
||||
a(href: '/p/' + post[:slug], class: 'pl-2') { meta['title'] }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,52 +1,52 @@
|
|||
class Pages::Home < ::Phlex::HTML
|
||||
def project_link(name:, url:, desc:)
|
||||
li {
|
||||
a(href: url) { name }
|
||||
span { " - " + desc }
|
||||
a(class: 'flex flex-col border border-gray-300 p-2 rounded gap-1', href: url) {
|
||||
h3(class: 'font-bold') { 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 languages and tools." }
|
||||
render ::Pages::Layout.new(:home, banner: '/newhaven.jpg') {
|
||||
p(class: "text-center font-bold") { "Aleks Rūtiņš" }
|
||||
p(class: "text-center") { "developer ~ designer ~ musician" }
|
||||
|
||||
h2 { "featured projects" }
|
||||
ul {
|
||||
h2(class: "my-2 text-lg font-bold") { "Featured Projects" }
|
||||
div(class: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 justify-stretch') {
|
||||
project_link(
|
||||
name: "phlexite",
|
||||
url: "https://git.farthergate.com/p/rad:z4VDVahjKBJYSqR8uRo7UrKZDuXQ6",
|
||||
desc: "a simple static site generator using phlex for templating"
|
||||
url: "https://docs.farthergate.com/phlexite",
|
||||
desc: "A simple static site generator using phlex for templating"
|
||||
)
|
||||
|
||||
project_link(
|
||||
name: "phlexite-docker",
|
||||
url: "https://git.farthergate.com/p/rad:z3PY7qd21HkdCEG7uBXnxHrtVTLiP",
|
||||
desc: "build your phlexite site without worrying about a ruby environment"
|
||||
desc: "Build your phlexite site without worrying about a ruby environment"
|
||||
)
|
||||
|
||||
project_link(
|
||||
name: "mzk",
|
||||
url: "https://sr.ht/~aleksrutins/mzk/",
|
||||
desc: "bash scripts to help you manage your zettelkasten"
|
||||
desc: "Bash scripts to help you manage your zettelkasten"
|
||||
)
|
||||
|
||||
project_link(
|
||||
name: "dynamite",
|
||||
url: "https://sr.ht/~aleksrutins/dynamite/",
|
||||
desc: "a customizable lv2 distortion plugin"
|
||||
desc: "A customizable LV2 distortion plugin"
|
||||
)
|
||||
|
||||
project_link(
|
||||
name: "packsnap",
|
||||
url: "https://packsnap.farthergate.com/",
|
||||
desc: "a reproducible container build system"
|
||||
desc: "A reproducible container build system"
|
||||
)
|
||||
|
||||
project_link(
|
||||
name: "biocircuits for mere mortals",
|
||||
url: "https://bc.farthergate.com/",
|
||||
desc: "a daunting topic broken down in a (hopefully) friendly way"
|
||||
desc: "A daunting topic broken down in a (hopefully) friendly way"
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,20 +12,17 @@ module Pages
|
|||
about: {
|
||||
title: "About",
|
||||
url: "/about"
|
||||
},
|
||||
garden: {
|
||||
title: "Garden",
|
||||
url: "https://garden.farthergate.com"
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
def initialize(page, meta: {})
|
||||
def initialize(page, banner: nil, meta: {})
|
||||
@page = page
|
||||
if @page.is_a? Symbol
|
||||
@page_info = pages[page]
|
||||
else
|
||||
@page_info = @page
|
||||
end
|
||||
@banner = banner
|
||||
@meta = meta
|
||||
end
|
||||
def view_template
|
||||
|
@ -36,9 +33,7 @@ module Pages
|
|||
title { @page_info[:title] + " | Aleks Rūtiņš" }
|
||||
meta(charset: "utf-8")
|
||||
meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
|
||||
link(rel: "prefetch", href: "/DM_Mono/DMMono-Regular.ttf")
|
||||
link(rel: "prefetch", href: "/DM_Mono/DMMono-Medium.ttf")
|
||||
link(rel: "stylesheet", href: "/site.css")
|
||||
link(rel: "stylesheet", href: "/tailwind.css")
|
||||
|
||||
script(defer: true, 'data-domain' => "farthergate.com", src: "https://plausible.farthergate.com/js/script.js")
|
||||
|
||||
|
@ -46,15 +41,30 @@ module Pages
|
|||
meta(name: name, content: content)
|
||||
}
|
||||
}
|
||||
body(class: 'm-0 p-0') {
|
||||
header(class: 'sticky top-0 bg-white/50 backdrop-blur-md border-gray-500 border-b flex p-3 justify-center') {
|
||||
nav(class: 'flex gap-4') {
|
||||
body(class: 'm-0 p-0 font-sans') {
|
||||
header(class: "#{@banner ? 'fixed' : 'sticky'} top-0 w-screen bg-transparent pointer-events-none flex p-3 items-center justify-center") {
|
||||
nav(class: 'flex gap-2 p-2 rounded-full border border-gray-300 bg-white/50 backdrop-blur-md pointer-events-auto') {
|
||||
pages.each { |key, page|
|
||||
a(href: page[:url], class: key == @page ? "active" : "") { page[:title].downcase }
|
||||
a(href: page[:url], class: "block rounded-full px-3 py-1 #{key == @page ? 'bg-gray-100/50' : ''}") { page[:title] }
|
||||
}
|
||||
}
|
||||
}
|
||||
yield
|
||||
img(src: @banner, class: 'w-full h-[400px] object-cover') if @banner
|
||||
main(class: 'p-6 max-w-4xl mx-auto') {
|
||||
yield
|
||||
}
|
||||
|
||||
footer(class: 'text-gray-500 py-4 text-center flex flex-col items-center gap-3') {
|
||||
p {
|
||||
a(href: 'https://git.farthergate.com/p') { 'git' }
|
||||
plain ' ~ '
|
||||
a(href: 'https://bsky.app/profile/farthergate.com') { 'bsky' }
|
||||
plain ' ~ '
|
||||
a(href: 'https://git.farthergate.com/p/rad:z3eNe9ayEhwgxmeJb92jwiY1QsANh') { 'source' }
|
||||
}
|
||||
p { "built with phlexite and tailwindcss" }
|
||||
p { "© #{Time.now.year} Aleks Rūtiņš" }
|
||||
}
|
||||
}
|
||||
}
|
||||
end
|
||||
|
|
|
@ -6,10 +6,12 @@ class Pages::Post < ::Phlex::HTML
|
|||
def view_template
|
||||
meta = @post[:data].front_matter
|
||||
render ::Pages::Layout.new({title: meta['title']}) {
|
||||
p {
|
||||
article(class: 'prose prose-lg m-auto') {
|
||||
h1 { meta['title'] }
|
||||
time(datetime: meta['published_on']) { meta['published_on'] }
|
||||
|
||||
hr
|
||||
|
||||
render ::Phlex::Markdown.new(@post[:data].content)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue