code page refactor

This commit is contained in:
a 2021-12-16 07:02:59 -06:00
parent 184136b3ad
commit b776374e4b
5 changed files with 327 additions and 32 deletions

View file

@ -1,33 +1,33 @@
.list {
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 3em;
}
.list-item {
color: inherit;
text-decoration: none;
transition: color 0.2s ease-in-out;
&__image {
width: 100%;
height: auto;
}
&__title {
font-size: 1.5em;
font-weight: 700;
margin: 1.5em 0 0.5em;
}
&__summary {
margin-bottom: 0.5em;
line-height: 1.4;
}
&__date {
display: block;
margin-bottom: 1em;
}
&__readmore {
margin-bottom: 1em;
display: block;
}
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 3em;
}
.list-item {
color: inherit;
text-decoration: none;
transition: color 0.2s ease-in-out;
&__image {
width: 100%;
height: auto;
}
&__title {
font-size: 1.5em;
font-weight: 700;
margin: 1.5em 0 0.5em;
}
&__summary {
margin-bottom: 0.5em;
line-height: 1.4;
}
&__date {
display: block;
margin-bottom: 1em;
}
&__readmore {
margin-bottom: 1em;
display: block;
}
}
}

199
assets/scss/code/index.scss Normal file
View file

@ -0,0 +1,199 @@
#code {
.page-header {
}
.page-title {
margin-bottom: 1em;
}
.title {
font-size: 2em;
font-weight: 700;
margin-bottom: 1em;
}
.explainer {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 1em;
margin: 0 auto;
.image {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
flex-shrink: 0;
border-radius: 100em;
}
i {
font-size: 2em;
}
p {
line-height: 1.4;
font-size: 1em;
}
}
#gitea {
margin-top: 4em;
i {margin-left: 0em; margin-top: 0.0625em}
.image {
background-color: #609926;
color: white;
}
}
#github {
margin-top: 2em;
.image {
background: black;
color: white
}
}
#liberapay {
margin-top: 2em;
.image {
background: #F6C915;
color: white;
}
}
#patreon {
margin-top: 2em;
i {margin-left: 0.125em;}
.image {
background: #F23F4A;
color: white;
}
}
#paypal {
margin-top: 2em;
.image {
background: #002F85;
color: white;
}
}
#cashapp {
margin-top: 2em;
.image {
background: #00D72E;
color: white;
}
}
#projects {
.container {
}
.project-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 3em;
margin-top: 4em;
}
.project {
&__link {
text-decoration: none;
display: contents;
color: inherit;
}
&__image {
width: 100%;
height: auto;
}
&__title {
font-weight: 700;
grid-area: title;
text-decoration: underline;
font-size: 1.5em;
margin: 1.5em 0 0.5em;
}
&__summary {
line-height: 1.4;
grid-area: summary;
max-width: 70ch;
margin-bottom: 0.5em;
}
&__date {
display: block;
margin-bottom: 1em;
}
}
@media (min-width: 35em) and (max-width: 847px) {
.codemastomods, .codecertbot-namecheap {
grid-column: span 2;
display: grid;
grid-template-areas: "cover title" "cover summary" "cover date";
grid-template-columns: 1fr 38ch;
grid-template-rows: auto auto 1fr;
height: max-content;
align-self: start;
.project__image {
grid-area: cover;
}
.project__title {
margin: 0;
margin-left: 1rem;
margin-bottom: 0.5em;
}
.project__summary {
margin-left: 1rem;
}
.project__date {
margin-left: 1rem;
}
}
}
@media (min-width: 53em) {
.codecertbot-namecheap {
grid-column: span 3;
}
}
}
#prs {
.container {
}
.pr-list {
display: flex;
flex-flow: column;
gap: 2em;
margin-top: 3em;
}
.pr {
display: grid;
grid-template-areas: "icon title" "icon summary";
grid-template-columns: 3em 1fr;
&__link {
text-decoration: none;
display: contents;
color: inherit;
}
&__icon {
grid-area: icon;
width: auto;
justify-self: center;
align-self: start;
fill: #9A6BEA;
}
&__title {
font-weight: 700;
grid-area: title;
text-decoration: underline;
}
&__summary {
line-height: 1.4;
grid-area: summary;
max-width: 70ch;
}
}
}
#support {
.container > p {
line-height: 1.4;
font-size: 1.2em;
}
}
b {font-weight: 700;}
}

View file

@ -12,5 +12,7 @@
@import "work/trilogy/index.scss";
@import "work/mastodon/index.scss";
@import "code/index.scss";
@import "partials/site-header.scss";
@import "partials/site-footer.scss";

View file

@ -1,5 +1,5 @@
---
title: "Add Pleroma support to Liberapay"
title: "Liberapay: Add Pleroma support"
summary: "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account."
author: "Abdullah Tarawneh"
date: "2019-11-13"

94
layouts/code/list.html Normal file
View file

@ -0,0 +1,94 @@
{{ define "main" }}
<main id="code">
<header class="section page-header">
<div class="container">
<h1 class="page-title">Check out some of the code I've written.</h1>
<a id="gitea" class="explainer" href="https://git.trwnh.com">
<div class="image">
<i class="fa fa-gitea"></i>
</div>
<p>I host my own code with <u>Gitea</u>. Currently, I host the source code for some websites I've built, including this one.</p>
</a>
<a id="github" class="explainer" href="https://github.com/trwnh">
<div class="image">
<i class="fa fa-github"></i>
</div>
<p>I also have a <u>Github</u> account. I mainly use this account to contribute to open-source projects using pull requests instead of sending patch files via email.</p>
</a>
</div>
</header>
<section class="section" id="projects">
<div class="container">
<h2 class="title">Original projects</h2>
<section class="project-list">
{{ range .Pages }}
{{ if not (in .Params.tags "pull request") }}
<article class="project {{ .Permalink | relURL | anchorize }}">
<a class="project__link" href="{{ .Permalink }}">
{{ with .Params.cover }}
<img class="project__image" src="{{.}}">
{{end}}
<h3 class="project__title">{{ .Title }}</h2>
</a>
<p class="project__summary">{{.Summary}}</p>
<datetime class="project__date">{{ .Date.Format "January 2, 2006" }}</datetime>
</article>
{{ end }}
{{ end }}
</section>
</div>
</section>
<section class="section" id="prs">
<div class="container">
<h2 class="title">Open source contributions</h2>
<section class="pr-list">
{{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }}
<article class="pr {{ .Permalink | relURL | anchorize }}">
<a class="pr__link" href="{{ .Permalink }}">
<svg class="pr__icon" height="40" width="30" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg">
<path
d="M640 448c-47.625 0-88.625 26.312-110.625 64.906C523.625 512.5 518 512 512 512c-131.062 0-255.438-99.844-300.812-223.438C238.469 265.09400000000005 256 230.71900000000005 256 192c0-70.656-57.344-128-128-128S0 121.34400000000005 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-47.25-25.844-88.062-64-110.25V491.469C276.156 580.5 392.375 640 512 640c6.375 0 11.625-0.438 17.375-0.625C551.5 677.812 592.5 704 640 704c70.625 0 128-57.375 128-128C768 505.344 710.625 448 640 448zM128 896c-35.312 0-64-28.625-64-64 0-35.312 28.688-64 64-64 35.406 0 64 28.688 64 64C192 867.375 163.406 896 128 896zM128 256c-35.312 0-64-28.594-64-64s28.688-64 64-64c35.406 0 64 28.594 64 64S163.406 256 128 256zM640 640c-35.312 0-64-28.625-64-64 0-35.406 28.688-64 64-64 35.375 0 64 28.594 64 64C704 611.375 675.375 640 640 640z" />
</svg>
<h3 class="pr__title">{{ .Title }}</h2>
</a>
<p class="pr__summary">{{.Summary}}</p>
</article>
{{ end }}
</section>
</div>
</section>
<section class="section" id="support">
<div class="container">
<h2 class="title">Support me.</h2>
<p>If you appreciate any of what I've done, please send me money. Your contributions and generosity will directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can justifiably devote to continuing to do what I do.</p>
<div id="liberapay" class="explainer">
<div class="image">
<i class="fa fa-liberapay"></i>
</div>
<p>Recurring or one-time donation via Liberapay: <a href="https://liberapay.com/trwnh">liberapay.com/trwnh</a></p>
</div>
<div id="patreon" class="explainer">
<div class="image">
<i class="fa fa-patreon"></i>
</div>
<p>Monthly patronage on Patreon: <a href="https://patreon.com/trwnh">patreon.com/trwnh</a></p>
</div>
<div id="paypal" class="explainer">
<div class="image">
<i class="fa fa-paypal"></i>
</div>
<p>For direct, one-time contributions, you can use Paypal with my email address <b>a@trwnh.com</b></p>
</div>
<div id="cashapp" class="explainer">
<div class="image">
<i class="fa fa-dollar"></i>
</div>
<p>You can also use Cashapp if you'd prefer, but this is not a recommended method: <a href="https://cash.me/$trwnh">$trwnh</a></p>
</div>
</div>
</section>
</main>
{{ end }}