From 1c5b82d1e95cd090c60517e0d1b6c7c32c9bd895 Mon Sep 17 00:00:00 2001 From: a Date: Wed, 13 Mar 2024 01:54:20 -0500 Subject: [PATCH] whip up a new blog article layout --- assets/scss/components/pullquote.scss | 40 ++++++++++++--- assets/scss/layouts/blog/list.scss | 0 assets/scss/layouts/blog/single.scss | 65 ++++++++++++++++++++++++ assets/scss/layouts/index.scss | 4 +- assets/scss/main.scss | 3 ++ content/blog/personal-websites/index.md | 14 +++++ content/blog/twitter-not-social/index.md | 8 +-- layouts/_default/single.html | 2 +- layouts/blog/single.html | 34 +++++++++++++ layouts/index.html | 8 +-- 10 files changed, 160 insertions(+), 18 deletions(-) create mode 100644 assets/scss/layouts/blog/list.scss create mode 100644 assets/scss/layouts/blog/single.scss create mode 100644 content/blog/personal-websites/index.md create mode 100644 layouts/blog/single.html diff --git a/assets/scss/components/pullquote.scss b/assets/scss/components/pullquote.scss index 4163be6..9ddfd98 100644 --- a/assets/scss/components/pullquote.scss +++ b/assets/scss/components/pullquote.scss @@ -5,16 +5,42 @@ display: flex; font-family: serif; color: #555; - padding: 1em; font-size: 1.25em; } + +@mixin left { + float: left; + max-width: 30ch; + text-align: left; +} + +@mixin right { + float: right; + max-width: 30ch; + text-align: right; +} + .has-pullquote { - &.before:before { - @include pullquote; - margin-bottom: 1rem; + &.left:before { + @include pullquote; + margin-bottom: 1rem; + @media (min-width: 40rem) { + @include left; + } + @media (min-width: 80rem) { + margin-left: -9rem; + padding-right: 1em; + } } - &.after:after { - @include pullquote; - margin-top: 1rem; + &.right:before { + @include pullquote; + margin-bottom: 1rem; + @media (min-width: 40rem) { + @include right; + } + @media (min-width: 80rem) { + margin-right: -9rem; + padding-left: 1em; + } } } \ No newline at end of file diff --git a/assets/scss/layouts/blog/list.scss b/assets/scss/layouts/blog/list.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/layouts/blog/single.scss b/assets/scss/layouts/blog/single.scss new file mode 100644 index 0000000..792d6ae --- /dev/null +++ b/assets/scss/layouts/blog/single.scss @@ -0,0 +1,65 @@ +.blog .post .title { + font-family: serif; + margin-top: 2em; +} + +.blog .post .summary { + font-size: 1.25em; + font-family: serif; +} + +.blog .post .wordcount { + margin: 0; +} + +.blog .post .tags-title { + font-variant: small-caps; + font-weight: bold; + margin: 0.5em 0; +} + +.blog .post .tags { + display: flex; + flex-flow: row wrap; + gap: 0.5em; + list-style: none; + margin-left: 0; + li { + margin: 0; + } + a { + display: block; + padding: 0.5rem; + background: #cde; + border-radius: 6px; + &:before { + content: "#" + } + } +} + +.blog .post .content { + margin-block: 4em; +} + +@media (min-width: 75ch) { + .blog .post .content { + display: grid; + grid-template-columns: 1fr minmax(45ch, 75ch) 1fr; + } + .blog .post .content > * { + grid-column: 2; + margin-top: 0; + } + .blog .post .content > figure { + grid-column: 1 / span 3; + margin: 2em 0; + } + .blog .post .content figcaption { + max-width: 78ch; + margin: 0 auto; + } + .blog .post .content > hr { + width: 10ch; + } +} \ No newline at end of file diff --git a/assets/scss/layouts/index.scss b/assets/scss/layouts/index.scss index e4bd8a2..6440f60 100644 --- a/assets/scss/layouts/index.scss +++ b/assets/scss/layouts/index.scss @@ -19,14 +19,14 @@ main.index { article#quotes { background: #ddd; > .title { - margin-left: 1rem; + } } article#mastodon { background: #3088d4; color: white; - padding: 2em; + padding: 2em 1em; a { display: inline-block; text-decoration: none; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index df44849..925ee82 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -24,6 +24,9 @@ @import "layouts/_default/single.scss"; @import "layouts/_default/list.scss"; +@import "layouts/blog/single.scss"; +@import "layouts/blog/list.scss"; + @import "layouts/index.scss"; @import "content/work.scss"; @import "content/code.scss"; diff --git a/content/blog/personal-websites/index.md b/content/blog/personal-websites/index.md new file mode 100644 index 0000000..a21f4ba --- /dev/null +++ b/content/blog/personal-websites/index.md @@ -0,0 +1,14 @@ ++++ +title = "I wish personal websites were actually personal." +summary = "When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you." +author = "Abdullah Tarawneh" +date = "2023-03-18" +tags = ["personal websites", "portfolios", "services", "branding", "marketing", "capitalism"] +category = "Blog" ++++ + +

A lot of resources and materials that are readily available for helping you make a so-called personal website generally assume that you are trying to get hired or get clients. To me, this is a strange interpretation of "personal". I would describe such websites as professional websites instead. When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you. I mean a place to be yourself and to express yourself to others. I want advice on self-reflection and introspection and knowing yourself -- how to identify and how to introduce yourself; how to be genuinely engaging. Stuff that gets to the heart of who you are.

+ +

There is shockingly little of the latter content among what I can find. Virtually everyone is offering their advice for the former. The personal has become the professional. And, well... can you blame people, really? The current internet is highly commercialized and focused on promoting products or services. Sure, a website is ostensibly about conveying information, but a lot of that information is intended to get you to do something -- usually something representing a financial transaction.

+ +

Lorem ipsum dolor sit amet.

\ No newline at end of file diff --git a/content/blog/twitter-not-social/index.md b/content/blog/twitter-not-social/index.md index 86c7b65..9e19498 100644 --- a/content/blog/twitter-not-social/index.md +++ b/content/blog/twitter-not-social/index.md @@ -3,7 +3,7 @@ title = "Twitter is no longer a social network." summary = "That service that started out as a way to send status updates to your friends has been replaced by Twitter, a bloated, lumbering mess trying to force-feed you a stale diet of whatever Content™ floats to the top of the river of shit." author = "Abdullah Tarawneh" date = "2018-04-27" -tags = ["twitter", "social", "network", "media", "analysis", "capitalism"] +tags = ["twitter", "social network", "social media", "analysis", "capitalism"] category = "Blog" [[resources]] name = 'cover' @@ -39,7 +39,7 @@ src = 'failwhale.png'
Pictured above: a whale being lifted out of sludgy waters, which, aside from being reminiscent of a more whimiscal Twitter dot com from 2008, is also an apt metaphor for massively-viral content being surfaced from what is otherwise a toxic environment.
-

The short and bitter truth is that Twitter found out, regrettably, that being a conversational platform is not monetizable or profitable. It just took about four years for them to finally admit that they gave up on being an open, conversational platform and they are now a content aggregator.

+

The short and bitter truth is that Twitter found out, regrettably, that being a conversational platform is not monetizable or profitable. It just took about four years for them to finally admit that they gave up on being an open, conversational platform and they are now a content aggregator.

Now, anyone looking for a conversational platform is not going to find it on Twitter. How can there be conversation when you can't even be sure of the visibility of your messages? I, for one, have already mostly abandoned this network-that-is-not-a-network-anymore, as have several others.

@@ -51,9 +51,9 @@ src = 'failwhale.png'

It's probably going to be a bit of a shock at first, and hard to understand if you're used to being a product. But it makes way more sense when you do get it. Because we've been conditioned by the past decade to view everything through the lens of capital and profit; we've grown dependent on corporations to provide our platforms, for their benefit and not for ours. We're just a metric for them, another pair of eyeballs to view ads.

-

We think it's ridiculous for things to be open and accessible and free, because we're used to everything being locked down and user-hostile. It's absolutely heartbreaking — the darkest timeline. But not inevitably so. We have an actual chance to redeem ourselves, however slim. And that starts with realizing where we came from — how everything used to be open and free, before it was encircled and carved up by corporations for profit. You can email anyone, on any service. You can call/text anyone, on any carrier. But NOT on the internet. That's sad.

+

We think it's ridiculous for things to be open and accessible and free, because we're used to everything being locked down and user-hostile. It's absolutely heartbreaking — the darkest timeline. But not inevitably so. We have an actual chance to redeem ourselves, however slim. And that starts with realizing where we came from — how everything used to be open and free, before it was encircled and carved up by corporations for profit. You can email anyone, on any service. You can call/text anyone, on any carrier. But NOT on the internet. That's sad.

-

Our phone networks are free.
+

Our phone networks are free.
Our email networks are free.
Our browsers are free.
Our World Wide Web is free, with some challenges and attacks.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 1824f2b..88e170f 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -27,7 +27,7 @@ {{ .TableOfContents }} -

+
{{ .Content }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html new file mode 100644 index 0000000..1c8164b --- /dev/null +++ b/layouts/blog/single.html @@ -0,0 +1,34 @@ +{{ define "main" }} +
+
+ +
+
+

{{ .Title }}

+

{{.Summary}}

+ {{ with .Params.cover }} + + {{end}} +
+ +
+ {{ .Content }} +
+
+
+
+{{ end }} diff --git a/layouts/index.html b/layouts/index.html index 35e0109..6f1045e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ {{ define "body" }} {{ partial "site-header.html" . }}
-
+
@@ -61,8 +61,8 @@
a professional colleague
-
-
+
+
@@ -87,7 +87,7 @@

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.

- +