From 6b6f9aa57850dfe60f3f93f068cafbda91c1b0b5 Mon Sep 17 00:00:00 2001 From: a Date: Sun, 10 Mar 2024 21:05:55 -0500 Subject: [PATCH] new home page, again wiki article style was kinda tldr --- assets/scss/base/links.scss | 1 - assets/scss/base/sections.scss | 9 +- assets/scss/layouts/index.scss | 223 +++++++++++++++++- assets/scss/layouts/partials/site-header.scss | 7 +- layouts/_default/baseof.html | 2 +- layouts/index.html | 108 +++++++-- layouts/partials/site-header.html | 2 +- 7 files changed, 323 insertions(+), 29 deletions(-) diff --git a/assets/scss/base/links.scss b/assets/scss/base/links.scss index 22aa328..dab0af6 100644 --- a/assets/scss/base/links.scss +++ b/assets/scss/base/links.scss @@ -13,7 +13,6 @@ a { color: var(--link-visited); } &:focus { - display: inline-block; outline-offset: 0.5rem; outline-width: 0.25rem; border-radius: 0.125rem; diff --git a/assets/scss/base/sections.scss b/assets/scss/base/sections.scss index b7b5f7d..009b41f 100644 --- a/assets/scss/base/sections.scss +++ b/assets/scss/base/sections.scss @@ -1,5 +1,4 @@ html { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; scroll-behavior: smooth; } body { @@ -15,7 +14,13 @@ main {flex-grow: 1;} } .container { width: 100%; - max-width: 960px; + max-width: var(--container-width); margin: 0 auto; padding: 0 1em; +} + +@media (min-width: $container-width + 2em) { + .container { + padding: 0; + } } \ No newline at end of file diff --git a/assets/scss/layouts/index.scss b/assets/scss/layouts/index.scss index 69892ff..e4bd8a2 100644 --- a/assets/scss/layouts/index.scss +++ b/assets/scss/layouts/index.scss @@ -1,10 +1,152 @@ -.index { +main.index { + flex-grow: 0; + width: 100%; + max-width: var(--container-width, 60rem); + margin: 0 auto; + margin-bottom: 4rem; + @include box-shadow; + article:not(.h-card) { + padding: 1em; + > .title { + font-size: 1.5rem; + font-variant: small-caps; + } + .section-title { + font-size: 1.25rem; + } + } + + article#quotes { + background: #ddd; + > .title { + margin-left: 1rem; + } + } + + article#mastodon { + background: #3088d4; + color: white; + padding: 2em; + a { + display: inline-block; + text-decoration: none; + background: white; + padding: 1rem; + color: black; + font-weight: bold; + border-radius: 10px; + border: 1px solid rgba(0,0,0,0.25); + } + } + + article#now { + background: white; + } + article#todo { + background: white; + } + + @media (min-width: 40rem) { + display: grid; + grid-template-columns: repeat(12, 1fr); + #about { + grid-column: 1 / span 12; + display: grid; + grid-template-columns: 20rem 1fr; + width: 100%; + } + article.h-card { + .metadata { + padding-inline: 0.75em; + } + } + #deeds { + grid-column: 1 / span 12; + display: grid; + grid-template-columns: 1fr 1fr; + } + article#mastodon { + grid-column: 1 / span 2; + display: grid; + grid-template-columns: 1fr auto auto auto 1fr; + gap: 1em; + svg { + grid-column: 2; + place-self: center; + } + .title { + grid-column: 3 / span 2; + font-size: 2rem; + margin: 0; + place-self: center start; + } + p { + grid-column: 2 / span 2; + font-size: 1.25rem; + max-width: 35ch; + margin: 0; + place-self: center start; + } + a { + grid-column: 4; + grid-row: 2; + place-self: center start; + } + } + article#now { + grid-column: 1 / span 1; + } + article#todo { + grid-column: 2 / span 1; + } + } + + @media (min-width: 60rem) { + margin-top: 1rem; + #about { + } + #deeds { + + } + article#now { + padding: 2em; + height: 320px; + } + article#todo { + padding: 2em; + } + } + + // @media (min-width: 100rem) { + // max-width: 100rem; + // display: grid; + // grid-template-columns: 60rem 40rem; + // margin-top: 2rem; + + // #about { + // grid-column: 1; + // } + // #deeds { + // grid-column: 2; + // display: grid; + // grid-template-columns: 1fr; + // grid-template-rows: auto auto 1fr; + // } + // article#now { + // grid-column: 1; + // } + // article#todo { + // grid-column: 1; + // } + // } figure.quote { border: 0; blockquote { - font-size: 1.25em; - margin-block-start: 0.5rem; + padding-inline-start: 0; + &:before { + inset-inline-start: 0; + } } } @@ -32,4 +174,79 @@ } } + .h-card { + --border-radius: 0px; + border-radius: var(--border-radius, 10px); + background: #eee; + h2 { + text-align: center; + font-size: 1em; + margin: 0em; + padding: 1rem; + } + header { + aspect-ratio: 2; + background-image: url('/images/sunset.jpg'); + background-size: cover; + background-position: center; + position: relative; + border-top-left-radius: var(--border-radius, 10px); + border-top-right-radius: var(--border-radius, 10px); + img { + border-radius: 12px; + background-color: #ddd; + padding: 10px; + width: 120px; + height: 120px; + position: absolute; + left: calc(50% - 60px); + top: calc(100% - 60px); + } + margin-bottom: 60px; + } + .info { + text-align: center; + p { + margin: 0; + line-height: 1; + } + .p-name { + font-weight: bold; + text-align: center; + font-size: 1.5rem; + line-height: 2rem; + } + .u-uid { + text-decoration: none; + font-family: monospace; + color: inherit; + font-size: 1.25em; + display: inline-block; + line-height: 24px; + } + .p-note { + margin-bottom: 1rem; + line-height: 1.5; + } + } + .metadata { + padding-block-end: 2rem; + display: grid; + gap: 1em; + .field { + display: grid; + place-items: start; + gap: 0.5em; + padding: 0 1em; + } + dt { + font-weight: bold; + font-variant: small-caps + } + dd { + + } + } + } + } \ No newline at end of file diff --git a/assets/scss/layouts/partials/site-header.scss b/assets/scss/layouts/partials/site-header.scss index b2fec61..631c52e 100644 --- a/assets/scss/layouts/partials/site-header.scss +++ b/assets/scss/layouts/partials/site-header.scss @@ -1,5 +1,6 @@ .site-header { z-index: 10; + box-shadow: 0px 2px 2px rgba(0,0,0,0.2); a { text-decoration: none; color: inherit; @@ -13,8 +14,7 @@ &:focus { background: var(--primary-accent-transparent); - padding: unset; - border-radius: unset; + outline: none; } &:hover { @@ -104,6 +104,7 @@ background: var(--primary-accent-transparent); padding: unset; border-radius: unset; + outline: none; } &:hover { @@ -132,4 +133,4 @@ position: sticky; top: 0; } -} +} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9c29563..c022dfd 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -11,7 +11,7 @@ {{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }} {{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }} - + {{ partial "seo.html" . }} {{ block "head" . }} diff --git a/layouts/index.html b/layouts/index.html index 5b6dde0..35e0109 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,23 +1,95 @@ -{{ define "main" }} +{{ define "body" }} +{{ partial "site-header.html" . }}
-
-
-
-

{{.Title}}

- From abdullahtarawneh.com, the free website -

{{.Summary}}

+
+
- -
-
- {{ .Content }} -
-
+
+
+
Email
+
+
+ +
+
XMPP
+
a@trwnh.com
+
+ +
+
Fediverse
+
mastodon.social/@trwnh
+
+ +
+
Personal website
+
trwnh.com
+
+
+ + +
+

Things people have said about me

+
+
+ It's scary how much you know. +
+
a former classmate
+
+
+
+ You're the first person I've met that keeps a spreadsheet of their lightbulbs. +
+
an electrician
+
+
+
+ VERY MUCH not garbage [...] a worthwhile human +
+
a social networking acquaintance
+
+
+
+ Honestly, I trust your judgement more than I trust my own. +
+
a professional colleague
+
+
+
+
+
+ + + + +

Mastodon documentation
case study

+

I reorganized and rewrote the docs for an open-source project with millions of users.

+ Read more > +
+
+

What I'm doing right now

+
+

social web so-called "expert"

+

Member of the Social Web Community Group at the W3C. Writing a W3C SWICG report on ActivityPub and WebFinger.

+

Also active on the SocialHub forum for the ActivityPub community.

+
+
+
+

What I want to do

+
+

untitled social app

+

For the past few years, I've been developing a theoretical framework for unified social communications across various protocols. I'd like to collect my ideas into writings that will be published on this site.

+
+
+ {{ end }} \ No newline at end of file diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 07199b1..daf69e0 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -9,7 +9,7 @@ {{ $currentPage := . }} {{ range .Site.Menus.main }}