Browse Source

rewrite with john-doe framework

master
Ben Harris 6 months ago
parent
commit
3f4449decd
  1. 7
      css/awsm_gondola.min.css
  2. 479
      css/style.css
  3. 5
      footer.php
  4. 43
      header.php
  5. 118
      index.html
  6. 50
      index.php

7
css/awsm_gondola.min.css
File diff suppressed because it is too large
View File

479
css/style.css

@ -0,0 +1,479 @@
* { margin: 0; padding: 0; box-sizing: border-box;
/* Color scheme */
--textcolor: #121212;
--bgcolor: #fff;
--highlight: #2749c9;
}
@media (prefers-color-scheme: dark) {
* {
--textcolor: #dadada;
--bgcolor: #141414;
--highlight: #ffc400;
}
}
body {
font-size: 18px;
font-family: system-ui, sans-serif;
line-height: 1.4;
color: var(--textcolor);
background: var(--bgcolor);
position: relative;
max-width: 64em; /* remove this for a full-width layout */
margin: 0 auto; /* centers the layout */
}
/* ------- Sections ------- */
section {
padding: calc(6em + 5vw) 5vw 8vw 5vw;
/* ! Everything below is needed ! */
display: none;
position: absolute;
top: 0;
min-height: 100vh;
width: 100%;
background: var(--bgcolor);
}
section:target { /* Show section */
display: block;
}
section#home { /* Show #home by default */
display: block;
}
/* ------- Header ------- */
header {
padding: 5vw 5vw 0 5vw;
display: flex;
flex-wrap: wrap;
position: absolute;
width: 100%;
z-index: 2;
}
header h1 {
font-size: 1em;
flex: 1; /* pushes nav to the right */
white-space: nowrap;
padding: 0 5vw .5em 0;
}
nav a:not(:last-of-type) {
margin-right: 1.5vw;
}
/* ------- General ------- */
a {
text-decoration: none;
color: var(--highlight);
}
a:hover {
border-bottom: 1px solid;
}
section h1 {
font-size: 1em;
margin: 0 0 1em 0;
}
h2, h3, h4 {
font-size: 1em;
font-weight: 600;
margin: 1.6em 0 .6em 0;
}
p, ul, ol, article {
max-width: 60ch; /* Limit line-length to 60 characters */
margin-bottom: .6em;
}
ul {
list-style-type: none;
}
ul li::marker {
content: "\2022 ";
}
li {
margin-bottom: .2em;
}
ul, ol {
padding-left: 2ch;
}
b, strong {
font-weight: 600;
}
small {
font-size: .85em;
}
hr {
height: 1px;
border: 0;
background: currentColor;
opacity: .1;
margin: 1.2em 0;
}
abbr {
text-decoration: none;
}
abbr[title]:hover {
opacity: .7;
cursor: help;
}
blockquote {
padding-left: 2ch;
opacity: .7;
margin-bottom: .6em;
position: relative;
}
blockquote:before {
content: "";
position:absolute;
left: 0;
top: .3em;
bottom: .3em;
background: currentColor;
width: 1px;
opacity: .2;
}
img, svg, video, audio {
display: block;
max-width: 100%;
height: auto;
fill: currentColor;
}
code, textarea {
font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
font-size: 1em;
opacity: .7;
}
a code {
opacity:1;
}
pre, textarea { /* for code samples */
font-size: .9em;
color: inherit;
line-height:inherit;
padding:.6em .9em;
margin: .8em 0 1em 0;
position: relative;
display: block;
width: 100%;
white-space: pre;
border:0;
border-radius: 4px;
background:rgba(255,255,100,.075);
box-shadow: inset 1px 1px 0 rgba(0,0,0,.2), inset -1px -1px 0 rgba(0,0,0,.04) ;
}
/* Inline footnotes */
label {
cursor: pointer;
vertical-align: super;
line-height: 1;
font-size: .75em;
padding-left: .1em;
}
label:hover {
color: var(--highlight);
}
label:before {content:"[";}
label:after {content:"]";}
label + input,
label + input + small {
display: none;
}
input:checked + small {
display: block;
padding: .8em 0 1em 2.5vw;;
}
/* Figures */
figure {
margin: 2em 0 1.5em 0;
}
figure figcaption {
margin: 0.8em 0 0 0;
font-size: .85em;
opacity: .7;
}
/* Responsive video embeds */
figure.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
figure.video iframe, figure.video object, figure.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
visibility: hidden; /* so loading="lazy" should work? */
}
section:target iframe {
visibility: visible;
}
/* External links */
a[href*="//"]:after {
font-weight: 300;
font-size: .85em;
content: "\2197"; /* top right arrow: ↗ */
color: var(--textcolor);
opacity: .25;
}
a[href*="//"]:hover:after {
color: var(--highlight);
opacity: 1;
}
/* File links */
a:before {
font-size: .7em;
margin-right: .4em;
}
/* Add more filetypes here if you want */
a[href$=".pdf"]:before { content: "PDF"; }
a[href$=".txt"]:before { content: "TXT"; }
a[href$=".mp3"]:before { content: "MP3"; }
a[href$=".zip"]:before { content: "ZIP"; }
a[href$=".rar"]:before { content: "RAR"; }
a[href$=".jpeg"]:before,
a[href$=".jpg"]:before,
a[href$=".gif"]:before,
a[href$=".png"]:before { content: "IMG"; }
/* ------- News ------- */
article + article {
margin-top: 4.5em;
}
article h2 {
font-weight: 700;
margin: 0 0 1em 0;
}
article time {
margin-left: .6em;
font-size: .8em;
font-weight: 400;
opacity: .7;
}
/* ------- Images Grid ------- */
.grid {
display: grid;
grid-gap: 5vmin;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 150px = minimum image size */
grid-auto-flow: dense;
padding: 2em 0;
}
.grid a {
position: relative;
border: 0;
}
.grid a:hover {
transform: scale(.975);
}
/* For a square ratio */
.grid a:before {
content: "";
display: block;
padding-top: 100%;
}
.grid a img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ------- Slideshow ------- */
.slides {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.slides figure {
height: 100vh;
padding: 0 5vw;
margin: 0;
display: grid;
place-items: center;
align-content: center;
scroll-snap-align: center;
}
.slides figure img {
max-height: 88vh; /* Adjust if needed */
}
.slides figure.cover {
padding: 0;
}
.slides figure.cover img {
max-height: none;
position: absolute;
z-index: -1;
width: 100vw;
height: 100vh;
object-fit: cover;
}
/* ------- Lightbox ------- */
.lightbox {
display: none;
color: var(--textcolor);
}
.lightbox:target {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: grid;
place-items: center;
align-content: center;
background: var(--bgcolor);
border: 0;
z-index: 3;
}
.lightbox img {
max-height: 100vh;
z-index: 4;
}
.lightbox:target:before { /* Loading spinner */
content:"";
height: 2em;
width: 2em;
animation: spin .8s infinite linear;
border: 1px solid;
border-right-color: transparent;
border-radius: 50%;
display: block;
position: absolute;
transform: translateX(-50%);
opacity: .25;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.lightbox:target:after { /* × to close */
content: "\00D7";
position: fixed;
font-size: 2em;
font-weight: 200;
line-height: 0;
top: .75em;
right: .5em;
z-index: 4;
}
/* ------- Smaller screens ------- */
@media only screen and (max-width: 680px) {
body { font-size: 16px; }
}
@media only screen and (max-width: 540px) {
nav { width: 100%; } /* Fix for older webkit versions */
}
/* ------- Print ------- */
@media print {
nav, .lightbox:target:after { display: none; }
article, figure, img {
page-break-inside: avoid;
break-inside: avoid;
}
/* Inline footnotes */
label + input + small { display: inline; }
label + input + small:before { content: "["; }
label + input + small:after { content: "]"; }
/* Slides */
.slides, .slides figure {
position: relative;
height: auto;
padding: 0;
}
.slides figure img, .slides figure.cover img {
max-height: auto;
position: relative;
z-index: 1;
width: auto;
height: 100vh;
object-fit: contain;
}
}

5
footer.php

@ -1,5 +0,0 @@
</section>
</article>
</main>
</body>
</html>

43
header.php

@ -1,43 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Benjamin Harris">
<meta name="author" content="Benjamin Harris">
<meta name="theme-color" content="#333333">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="openid.delegate" href="https://benharr.is/" />
<link rel="openid.server" href="https://openid.indieauth.com/openid" />
<link rel="pingback" href="https://webmention.io/benharr.is/xmlrpc" />
<link rel="webmention" href="https://webmention.io/benharr.is/webmention" />
<link rel="pgpkey" href="/benharri.asc">
<link rel="stylesheet" href="/css/awsm_gondola.min.css">
<link rel="shortcut icon" href="/favicon.ico">
<title><?=$title ?? ""?> - benharr.is</title>
<?php if (isset($title)) unset($title); ?>
</head>
<body>
<header>
<div>
<a href="/"><img src="/images/profilepic.jpg" alt="profile pic" style="width:30px; height:30px; float:left;"></a>
<h1 style="padding-left:35px;">hello, i'm ben harris</h1>
</div>
<nav>
<ul>
<li><a rel="me" href="https://github.com/benharri">github</a></li>
<li><a rel="me" href="https://tilde.team/~ben/">tildepage</a>
<li><a href="now/">now</a></li>
<li><a href="https://tildegit.org/ben/resume/raw/branch/master/resume.pdf">resume</a></li>
<li><a rel="me" href="mailto:mail@benharr.is">email</a></li>
<li><a rel="pgpkey" href="/benharri.asc">pubkey</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>

118
index.html

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ben Harris</title>
<meta name="description" content="Benjamin Harris">
<meta name="author" content="Benjamin Harris">
<meta name="theme-color" content="#333333">
<link rel="openid.delegate" href="https://benharr.is/" />
<link rel="openid.server" href="https://openid.indieauth.com/openid" />
<link rel="pingback" href="https://webmention.io/benharr.is/xmlrpc" />
<link rel="webmention" href="https://webmention.io/benharr.is/webmention" />
<link rel="pgpkey" href="/benharri.asc">
<link rel="shortcut icon" href="/favicon.ico">
<meta property="og:title" content="benharr.is">
<meta property="og:description" content="Benjamin Harris">
<meta property="og:image" content="/images/profilepic.jpg">
<meta name="twitter:card" content="/images/profilepic.jpg">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<h1>
<a href="#home">benharr.is</a>
</h1>
<nav>
<a href="#projects">projects</a>
<a href="#now">now</a>
<a href="https://tilde.team/~ben/">tilde page</a>
<a href="https://tildegit.org/ben/resume/raw/branch/master/resume.pdf">resume</a>
<a href="/benharri.asc">pubkey</a>
<a href="#contact">contact me</a>
</nav>
</header>
<main>
<section id="home"> <!-- HOME -->
<h2>i'm a software developer</h2>
<p>i write code and do stuff on the internet</p>
<h3>about me</h3>
<p>
i grew up in the upper peninsula of michigan, received a
bachelor's in computer science from northern michigan university,
and now work professionally as a software developer in traverse
city, michigan.
</p>
<p>
i like building software and community through code and sysadmin
tools. my current day job involves writing c# for desktop
applications. my primary hobby project is <a href="https://tilde.team/">
tilde.team</a>, a non-commercial public access unix system focused
on teaching, learning, and building community.
</p>
<p>
some fun facts about me:
</p>
<ul>
<li>i'm left handed</li>
<li>i love to travel and have lived in ecuador and switzerland</li>
<li>i tend to avoid uppercase letters if i can help it</li>
</ul>
</section>
<section id="now">
<h3>what i've been up to</h3>
<ul>
<li>living in traverse city, mi</li>
<li>working at <a href="https://www.hagerty.com">hagerty</a> as a software developer</li>
<li>honing my c# skills</li>
<li>thinking of cool ideas for <a href="https://tilde.team">tilde.team</a></li>
<li><strike>probably</strike> definitely spending too much time on irc??? <a href="https://tilde.chat/">tilde-irc</a></li>
<li>running stuff for the <a href="https://tildeverse.org/">tildeverse</a></li>
<li>learning about and using <a href="https://xmpp.org">xmpp</a> and hosting <a href="https://hmm.st">some</a> <a href="https://tilde.team/wiki/xmpp">xmpp servers</a>.</li>
<li>doing my best to stay safe and sane during a pandemic</li>
</ul>
<p>updated december 14, 2020</p>
</section>
<section id="projects">
<h3>projects</h3>
<p>besides tilde.team, i'm also involved in several other projects, including:</p>
<ul>
<li><a href="https://tildeverse.org">the tildeverse</a></li>
<li>the original <a href="https://tilde.club"><em>tilde</em></a>, reborn</li>
<li><a href="https://hashbang.sh">hashbang</a></li>
</ul>
</section>
<section id="contact">
<h3>contact</h3>
<p>
feel free to get in touch via any of the links at the top, or preferably, drop
me a line on irc (if i'm not around, i'll see it soon™). i'm <code>benharri</code>
on <a href="https://freenode.net/">freenode</a> and <code>ben</code> on
<a href="https://tilde.chat">tilde.chat</a>
</p>
<p>note that the pubkey linked in the header is for my tilde email: <a href="mailto:ben@tilde.team">ben@tilde.team</a>, so be sure to use that address if you need to gpg some mail to me.</p>
<p>i'm also on xmpp as <a href="xmpp:ben@hmm.st">ben@hmm.st</a>. feel free to drop me a line there if irc is too tricky!</p>
<p>if you don't have an xmpp account, you can register one on my <a href="https://hmm.st">server</a>. there's even a <a href="https://hmm.st/converse.html">web chat</a>!</p>
</section>
</main>
</body>
</html>

50
index.php

@ -1,50 +0,0 @@
<?php
$title = "home";
include "header.php";
?>
<h2>i'm a software developer</h2>
<p>i write code and do stuff on the internet</p>
<h3>about me</h3>
<p>
i grew up in the upper peninsula of michigan, received a
bachelor's in computer science from northern michigan university,
and now work professionally as a software developer in traverse
city, michigan.
</p>
<p>
i like building software and community through code and sysadmin
tools. my current day job involves writing c# for desktop
applications. my primary hobby project is <a href="https://tilde.team/">
tilde.team</a>, a non-commercial public access unix system focused
on teaching, learning, and building community.
</p>
<p>
some fun facts about me:
</p>
<ul>
<li>i'm left handed</li>
<li>i love to travel and have lived in ecuador and switzerland</li>
<li>i tend to avoid uppercase letters if i can help it</li>
</ul>
<h3>projects</h3>
<p>besides tilde.team, i'm also involved in several other projects, including:</p>
<ul>
<li><a href="https://tildeverse.org">the tildeverse</a></li>
<li>the original <a href="https://tilde.club"><em>tilde</em></a>, reborn</li>
<li><a href="https://hashbang.sh">hashbang</a></li>
</ul>
<h3>contact</h3>
<p>
feel free to get in touch via any of the links at the top, or preferably, drop
me a line on irc (if i'm not around, i'll see it soon™). i'm <code>benharri</code>
on <a href="https://freenode.net/">freenode</a> and <code>ben</code> on
<a href="https://tilde.chat">tilde.chat</a>
</p>
<?php
include "footer.php";
Loading…
Cancel
Save