Redesign with Tailwind
This commit is contained in:
parent
b29b35e166
commit
3a25e0b4b0
SSH key fingerprint:
SHA256:DBype7RrB3qCdOLdkvecD2Y3THOYgYOVw6jAHVgsGRQ
13 changed files with 161 additions and 121 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
|||
_build/
|
||||
vendor/bundle
|
||||
.vscode/
|
||||
.vscode/
|
||||
node_modules/
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
shell: |
|
||||
npm ci
|
||||
podman run -it -v .:/site:z quay.io/aspr/phlexite:latest
|
||||
cp -r _build/* /srv/farthergate.com/
|
||||
cp -r _build/* /srv/farthergate.com/
|
||||
|
|
|
|||
BIN
assets/newhaven.jpg
Normal file
BIN
assets/newhaven.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
|
|
@ -1,75 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "DM Mono";
|
||||
src: url("DM_Mono/DMMono-Regular.ttf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DM Mono";
|
||||
font-weight: 500;
|
||||
src: url("DM_Mono/DMMono-Medium.ttf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DM Mono";
|
||||
font-style: italic;
|
||||
src: url("DM_Mono/DMMono-Italic.ttf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DM Mono";
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
src: url("DM_Mono/DMMono-MediumItalic.ttf") format("opentype");
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: "DM Mono", "Courier New", Courier, monospace;
|
||||
background-color: hsl(224, 44%, 95%);
|
||||
--color-theme-1: #ff3e00;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 700px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-theme-1);
|
||||
text-decoration: none;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: gray;
|
||||
transition-property: color;
|
||||
transition-duration: 0.5s;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a.active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
background-color: hsl(205.18, 14.29%, 10.94%);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
BIN
assets/trees.jpg
Normal file
BIN
assets/trees.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
4
build.rb
4
build.rb
|
|
@ -21,7 +21,7 @@ Phlexite::Site.new { |s|
|
|||
|
||||
s.mount "assets", on: "/"
|
||||
|
||||
# Tailwindcss::Phlexite.build s, 'input.css', 'tailwind.css'
|
||||
Tailwindcss::Phlexite.build s, 'input.css', 'tailwind.css'
|
||||
|
||||
s.page "index.html", Pages::Home.new
|
||||
s.page "blog/index.html", Pages::Blog.new
|
||||
|
|
@ -32,6 +32,6 @@ Phlexite::Site.new { |s|
|
|||
end
|
||||
|
||||
go_modules.each do |import, repo|
|
||||
s.page "#{import.to_s.delete_prefix('farthergate.com/')}", Pages::GoMod.new(import, repo)
|
||||
s.page import.to_s.delete_prefix('farthergate.com/'), Pages::GoMod.new(import, repo)
|
||||
end
|
||||
}
|
||||
|
|
|
|||
14
input.css
14
input.css
|
|
@ -1,7 +1,9 @@
|
|||
@import "tailwindcss";
|
||||
@layer base;
|
||||
@layer components;
|
||||
@layer utilities;
|
||||
@layer theme;
|
||||
@import url(https://fonts.bunny.net/css?family=bricolage-grotesque:400,700|dm-mono:400,400i,500,500i);
|
||||
|
||||
@source "./pages";
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Bricolage Grotesque", sans-serif;
|
||||
--font-mono: "DM Mono", monospace;
|
||||
}
|
||||
|
|
|
|||
91
package-lock.json
generated
Normal file
91
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
{
|
||||
"name": "farthergate.com",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.16"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.16",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
|
||||
"integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"postcss-selector-parser": "6.0.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"cssesc": "bin/cssesc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.castarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
|
||||
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.isplainobject": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.10",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
|
||||
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.1.8",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz",
|
||||
"integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
5
package.json
Normal file
5
package.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.16"
|
||||
}
|
||||
}
|
||||
|
|
@ -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