sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

whip up a new blog article layout

Browse source
This commit is contained in:
a 2024-03-13 01:54:20 -05:00
parent 6b6f9aa578
commit 1c5b82d1e9
10 changed files with 160 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
assets/scss/components/pullquote.scss
View file

@ -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;
}
}
}

0
assets/scss/layouts/blog/list.scss Normal file
View file

65
assets/scss/layouts/blog/single.scss Normal file
View file

@ -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;
}
}

4
assets/scss/layouts/index.scss
View file

@ -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;

3
assets/scss/main.scss
View file

@ -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";

14
content/blog/personal-websites/index.md Normal file
View file

@ -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"
+++
<p>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.</p>
<p class="has-pullquote after left" data-pullquote="The current internet is highly commercialized and focused on promoting products or services.">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.</p>
<p>Lorem ipsum dolor sit amet.</p>

8
content/blog/twitter-not-social/index.md
View file

@ -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'
<figcaption>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.</figcaption>
</figure>
<p class="has-pullquote after" data-pullquote="[Twitter] 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.</p>
<p class="has-pullquote before right" data-pullquote="[Twitter] 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.</p>
<p>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.</p>
@ -51,9 +51,9 @@ src = 'failwhale.png'
<p>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.</p>
<p class="has-pullquote before" data-pullquote="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.">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 &mdash; 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 &mdash; 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.</p>
<p class="has-pullquote before left" data-pullquote="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.">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 &mdash; 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 &mdash; 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.</p>
<p class="has-pullquote before" data-pullquote="[E]verything used to be open and free, before it was encircled and carved up by corporations for profit.">Our phone networks are free.<br>
<p class="has-pullquote before right" data-pullquote="[E]verything used to be open and free, before it was encircled and carved up by corporations for profit.">Our phone networks are free.<br>
Our email networks are free.<br>
Our browsers are free.<br>
Our World Wide Web is free, with some challenges and attacks.<br>

2
layouts/_default/single.html
View file

@ -27,7 +27,7 @@
{{ .TableOfContents }}
</div>
</aside>
<section class="section">
<section class="section content">
<div class="container">
{{ .Content }}
</div>

34
layouts/blog/single.html Normal file
View file

@ -0,0 +1,34 @@
{{ define "main" }}
<main class="blog">
<div class="container">
<article class="post h-entry">
<header>
<h1 class="title">{{ .Title }}</h1>
<p class="summary">{{.Summary}}</p>
{{ with .Params.cover }}
<img class="cover" src="{{.}}">
{{end}}
</header>
<aside class="meta">
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
<p class="wordcount"> {{.WordCount}} words</p>
{{ with .Params.tags }}
<p class="tags-title">Keywords</p>
<ul class="tags">
{{ range . }}
<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
{{ end }}
</ul>
{{ end }}
{{ .TableOfContents }}
</aside>
<section class="content">
{{ .Content }}
</section>
</article>
</div>
</main>
{{ end }}

8
layouts/index.html
View file

@ -1,7 +1,7 @@
{{ define "body" }}
{{ partial "site-header.html" . }}
<main class="index">
<div id="about">
<section id="about">
<article class="h-card vcard" id="hcard">
<header>
<img class="u-logo photo" width=120 height=120 src="/images/people/avatar.png" alt="">
@ -61,8 +61,8 @@
<figcaption><cite>a professional colleague</cite></figcaption>
</figure>
</article>
</div>
<div id="deeds">
</section>
<section id="deeds">
<article id="mastodon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976">
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path>
@ -87,7 +87,7 @@
<p>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.</p>
</section>
</article>
</div>
</section>
</main>
<style>
body {background: #abc;}