diff options
| -rw-r--r-- | css/awsm_gondola.min.css | 7 | ||||
| -rw-r--r-- | css/style.css | 479 | ||||
| -rw-r--r-- | footer.php | 5 | ||||
| -rw-r--r-- | header.php | 43 | ||||
| -rw-r--r-- | index.html | 118 | ||||
| -rw-r--r-- | index.php | 50 |
6 files changed, 597 insertions, 105 deletions
diff --git a/css/awsm_gondola.min.css b/css/awsm_gondola.min.css deleted file mode 100644 index 180d9c8..0000000 --- a/css/awsm_gondola.min.css +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8"; -/*! - * awsm.css v3.0.4 (https://igoradamenko.github.io/awsm.css/) - * Copyright 2015 Igor Adamenko <mail@igoradamenko.com> (https://igoradamenko.com) - * Licensed under MIT (https://github.com/igoradamenko/awsm.css/blob/master/LICENSE.md) - */ -html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"PT Sans","Open Sans","Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:100%;line-height:1.4;background:#1f1010;color:#fff2e1;-webkit-overflow-scrolling:touch}body{margin:1.2em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(1rem + .00625*(100vw - 20rem))}}@media (min-width:40rem){body{font-size:1.125rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:6em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#763f28}details,nav,p{margin:1em 0}nav ul{list-style:none;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}a,nav a:visited{color:#874671}article header h1 a:visited:hover,article header h2 a:visited:hover,nav a:hover{color:#c6bdb8}ol,ul{margin-top:0;padding-top:0;padding-left:2.5em}article header h1+p,article header h2+p,ol li+li,ul li+li{margin-top:.25em}nav ul,ol li>details,ul li>details{margin:0}p{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}aside:first-child,form legend:first-child+label,p:first-child{margin-top:0}aside:last-child,p:last-child{margin-bottom:0}p+ol,p+ul{margin-top:-.75em}p img,p picture{float:right;margin-bottom:.5em;margin-left:.5em}p picture img{float:none;margin:0}blockquote,dd{padding-left:2.5em}dd{margin-bottom:1em;margin-left:0}dt{font-weight:700}blockquote{margin:0}aside{margin:.5em 0;font-style:italic;color:#763f28}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #492622}}section+section{margin-top:2em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 0;line-height:1.2}h1:focus>a[href^="#"][id]:empty,h1:hover>a[href^="#"][id]:empty,h2:focus>a[href^="#"][id]:empty,h2:hover>a[href^="#"][id]:empty,h3:focus>a[href^="#"][id]:empty,h3:hover>a[href^="#"][id]:empty,h4:focus>a[href^="#"][id]:empty,h4:hover>a[href^="#"][id]:empty,h5:focus>a[href^="#"][id]:empty,h5:hover>a[href^="#"][id]:empty,h6:focus>a[href^="#"][id]:empty,h6:hover>a[href^="#"][id]:empty{opacity:1}figure+p,h1+details,h1+p,h2+details,h2+p,h3+details,h3+p,h4+details,h4+p,h5+details,h5+p,h6+details,h6+p{margin-top:.5em}h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{position:absolute;left:-.65em;opacity:0;text-decoration:none;font-weight:400;line-height:1;color:#763f28}@media (min-width:40rem){h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{left:-.8em}}h1>a[href^="#"][id]:empty:focus,h1>a[href^="#"][id]:empty:hover,h1>a[href^="#"][id]:empty:target,h2>a[href^="#"][id]:empty:focus,h2>a[href^="#"][id]:empty:hover,h2>a[href^="#"][id]:empty:target,h3>a[href^="#"][id]:empty:focus,h3>a[href^="#"][id]:empty:hover,h3>a[href^="#"][id]:empty:target,h4>a[href^="#"][id]:empty:focus,h4>a[href^="#"][id]:empty:hover,h4>a[href^="#"][id]:empty:target,h5>a[href^="#"][id]:empty:focus,h5>a[href^="#"][id]:empty:hover,h5>a[href^="#"][id]:empty:target,h6>a[href^="#"][id]:empty:focus,h6>a[href^="#"][id]:empty:hover,h6>a[href^="#"][id]:empty:target{opacity:1;box-shadow:none;color:#fff2e1}h1>a[href^="#"][id]:empty:target:focus,h2>a[href^="#"][id]:empty:target:focus,h3>a[href^="#"][id]:empty:target:focus,h4>a[href^="#"][id]:empty:target:focus,h5>a[href^="#"][id]:empty:target:focus,h6>a[href^="#"][id]:empty:target:focus{outline:0}h1>a[href^="#"][id]:empty::before,h2>a[href^="#"][id]:empty::before,h3>a[href^="#"][id]:empty::before,h4>a[href^="#"][id]:empty::before,h5>a[href^="#"][id]:empty::before,h6>a[href^="#"][id]:empty::before{content:"§ "}h1{font-size:2.5em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.15em}a abbr,h5,h6{font-size:1em}h6{margin-top:1em}article+article{margin-top:4em}article header p{font-size:.6em;color:#763f28}article header p+h1,article header p+h2{margin-top:-.25em}article header h1 a,article header h2 a{color:#fff2e1}article header h1 a:visited,article header h2 a:visited,h6,legend{color:#763f28}article>footer{margin-top:1.5em;font-size:.85em}a:visited{color:#524971}a:active,a:hover{outline-width:0}a:hover{color:#c6bdb8}abbr{margin-right:-.075em;text-decoration:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;letter-spacing:.075em;font-size:.9em}img,picture{display:block;max-width:100%;margin:0 auto}audio,video{width:100%;max-width:100%}figure{margin:1em 0 .5em;padding:0}figure figcaption{opacity:.65;font-size:.85em}table{display:inline-block;border-spacing:0;border-collapse:collapse;overflow-x:auto;max-width:100%;text-align:left;vertical-align:top;background:linear-gradient(rgba(255,242,225,.15) 0%,rgba(255,242,225,.15) 100%) 0 0,linear-gradient(rgba(255,242,225,.15) 0%,rgba(255,242,225,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}table caption{font-size:.9em;background:#1f1010}table td,table th{padding:.35em .75em;vertical-align:top;font-size:.9em;border:1px solid #492622;border-top:0;border-left:0}table td:first-child,table th:first-child{padding-left:0;background-image:linear-gradient(to right,#1f1010 50%,rgba(31,16,16,0) 100%);background-size:2px 100%;background-repeat:no-repeat}table td:last-child,table th:last-child{padding-right:0;border-right:0;background-image:linear-gradient(to left,#1f1010 50%,rgba(31,16,16,0) 100%);background-position:100% 0;background-size:2px 100%;background-repeat:no-repeat}table td:only-child,table th:only-child{background-image:linear-gradient(to right,#1f1010 50%,rgba(31,16,16,0) 100%),linear-gradient(to left,#1f1010 50%,rgba(31,16,16,0) 100%);background-position:0 0,100% 0;background-size:2px 100%,2px 100%;background-repeat:no-repeat,no-repeat}table th{line-height:1.2}form{margin-right:auto;margin-left:auto}@media (min-width:40rem){form{max-width:80%}}form label,form select,output{display:block}form label:not(:first-child){margin-top:1em}form p label{display:inline}form p label+label{margin-left:1em}form input[type],form select,form textarea{margin-bottom:1em}form input[type=checkbox],form input[type=radio]{margin-bottom:0}button,fieldset{margin:0;border:1px solid #763f28}fieldset{padding:.5em 1em}button{outline:0;box-sizing:border-box;height:2em;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border-radius:2px;background:#1f1010;display:inline-block;width:auto;background:#492622;color:#fff2e1;cursor:pointer}button:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type^=date]:focus,select:focus{border:1px solid #fff2e1}button:hover,select:hover{border:1px solid #fff2e1}button:active,select:active{background-color:#763f28}select{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #763f28;border-radius:2px;background:#1f1010;display:inline-block;width:auto;background:#492622;color:#fff2e1;cursor:pointer;padding-right:1.2em;background-position:top 55% right .35em;background-size:.5em;background-repeat:no-repeat;-webkit-appearance:button;-moz-appearance:button;appearance:button;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(118, 63, 40)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}select:focus,select:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(255, 242, 225)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type^=date]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #763f28;border-radius:2px;background:#1f1010;color:#fff2e1;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=email]::-moz-placeholder,input[type=month]::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=search]::-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=text]::-moz-placeholder,input[type=time]::-moz-placeholder,input[type=url]::-moz-placeholder,input[type=week]::-moz-placeholder,input[type^=date]::-moz-placeholder{color:#763f28}input[type=email]::-webkit-input-placeholder,input[type=month]::-webkit-input-placeholder,input[type=number]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder,input[type=search]::-webkit-input-placeholder,input[type=tel]::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder,input[type=time]::-webkit-input-placeholder,input[type=url]::-webkit-input-placeholder,input[type=week]::-webkit-input-placeholder,input[type^=date]::-webkit-input-placeholder{color:#763f28}input[type=email]:-ms-input-placeholder,input[type=month]:-ms-input-placeholder,input[type=number]:-ms-input-placeholder,input[type=password]:-ms-input-placeholder,input[type=search]:-ms-input-placeholder,input[type=tel]:-ms-input-placeholder,input[type=text]:-ms-input-placeholder,input[type=time]:-ms-input-placeholder,input[type=url]:-ms-input-placeholder,input[type=week]:-ms-input-placeholder,input[type^=date]:-ms-input-placeholder{color:#763f28}input[type=button],input[type=reset],input[type=submit]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #763f28;border-radius:2px;background:#1f1010;display:inline-block;width:auto;background:#492622;color:#fff2e1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{border:1px solid #fff2e1}input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{border:1px solid #fff2e1}input[type=button]:active,input[type=reset]:active,input[type=submit]:active{background-color:#763f28}input[type=color]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #763f28;border-radius:2px;background:#1f1010;color:#fff2e1;display:block;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:6em}input[type=color]:focus{border:1px solid #fff2e1}input[type=color]::-moz-placeholder,textarea::-moz-placeholder{color:#763f28}input[type=color]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#763f28}input[type=color]:-ms-input-placeholder{color:#763f28}input[type=color]:hover{border:1px solid #fff2e1}input[type=file]{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;border:1px solid #763f28;border-radius:2px;background:#1f1010;background:#492622;color:#fff2e1;cursor:pointer;display:block;width:100%;height:auto;padding:.75em .5em;font-size:12px;line-height:1}input[type=file]:focus,textarea:focus{border:1px solid #fff2e1}input[type=file]:hover{border:1px solid #fff2e1}input[type=file]:active{background-color:#763f28}input[type=checkbox],input[type=radio]{margin:-.2em .75em 0 0;vertical-align:middle}textarea{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #763f28;border-radius:2px;background:#1f1010;color:#fff2e1;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4.5em;resize:vertical;padding-top:.5em;padding-bottom:.5em}textarea:-ms-input-placeholder{color:#763f28}code,kbd,samp,var{font-family:Consolas,"Lucida Console",Monaco,monospace;font-style:normal}pre{overflow-x:auto;font-size:.8em;background:linear-gradient(rgba(255,242,225,.15) 0%,rgba(255,242,225,.15) 100%) 0 0,linear-gradient(rgba(255,242,225,.15) 0%,rgba(255,242,225,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}pre>code,summary{display:inline-block}pre>code{overflow-x:visible;box-sizing:border-box;min-width:100%;border-right:3px solid #1f1010;border-left:1px solid #1f1010}hr{height:1px;margin:2em 0;border:0;background:#492622}details[open]{padding-bottom:.5em;border-bottom:1px solid #492622}summary{font-weight:700;border-bottom:1px dashed;cursor:pointer}summary::-webkit-details-marker{display:none}noscript{color:#852323}::selection{background:rgba(135,70,113,.25)} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..48a7d14 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/footer.php b/footer.php deleted file mode 100644 index 3a7f218..0000000 --- a/footer.php +++ /dev/null @@ -1,5 +0,0 @@ - </section> - </article> -</main> -</body> -</html> \ No newline at end of file diff --git a/header.php b/header.php deleted file mode 100644 index f8f3816..0000000 --- a/header.php +++ /dev/null @@ -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> diff --git a/index.html b/index.html new file mode 100644 index 0000000..5239213 --- /dev/null +++ b/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> diff --git a/index.php b/index.php deleted file mode 100644 index 67ed456..0000000 --- a/index.php +++ /dev/null @@ -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"; |