code page refactor
This commit is contained in:
parent
184136b3ad
commit
b776374e4b
5 changed files with 327 additions and 32 deletions
|
|
@ -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
199
assets/scss/code/index.scss
Normal 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;}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -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
94
layouts/code/list.html
Normal 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 }}
|
||||
Loading…
Reference in a new issue