Skip to content

Instantly share code, notes, and snippets.

@artlung
Last active November 19, 2021 03:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artlung/5fdc65f7f465c5d8a9f50793bbc274e4 to your computer and use it in GitHub Desktop.
Save artlung/5fdc65f7f465c5d8a9f50793bbc274e4 to your computer and use it in GitHub Desktop.
Words Legacy Template (for WordPress)
<?php /* Template Name: Words Legacy Template */ ?>
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" <?php language_attributes(); ?>>
<head>
<title><?php echo wp_title('', false, 'left'); ?> : Joe Crawford (ArtLung.com)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<?php wp_head(); ?>
</head>
<?php
$additional_class = 'words-legacy';
?>
<body <?php body_class($additional_class)?>>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div <?php post_class()?>>
<h1><?php the_title(); ?></h1>
<div class="legacy-body">
<?php the_content("Read complete article&#8594;"); ?>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
<section class="legacy-footer">
<ul>
<li><a href="/">ArtLung</a></li>
<li><a href="/words/">Words</a></li>
<li><span><?php echo wp_title('', false, 'left'); ?></span></li>
</ul>
</section>
<div class="roanoke-search">
<?php get_search_form(); ?>
</div>
<div class="roanoke-search-opener">
<a href="#" class="open-search"><i class="fa fa-search fa-lg" title="Open Search"></i></a>
</div>
<?php wp_footer(); ?>
</body>
</html>
html {
body {
height: 100%;
}
}
body.words-legacy {
text-align: left;
color: #666;
background-color: #CCC;
font-family: "century schoolbook", palatino, serif;
margin: 1em auto 100px auto;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
div.page {
color: #000;
position: relative;
box-sizing: border-box;
width: 80%;
min-width: 450px;
padding: 40px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
h1 {
margin-top: 0;
em, i {
font-weight: normal;
}
}
h2 {
margin-bottom: 0;
}
h2 + p {
margin-top: 4px;
}
img {
max-width: 100%;
height: auto;
}
}
/* main words page */
&.page-id-119046 {
div.page {
width: 60vw;
.legacy-body {
display: grid;
grid-template-columns: 100px 1fr;
grid-gap: 0 1em;
h2.year {
font-size: medium;
font-style: italic;
font-weight: normal;
padding: 0;
margin: 0;
font-family: georgia, serif;
}
div.mentions {
max-width: 400px;
> * {
font-family: sans-serif;
font-weight: normal;
font-size: small;
}
h2 {
color: #999;
border-bottom: 3px solid #ccc;
padding: 0 0 3px 0;
&:first-child {
margin-top: 3px;
}
}
.date {
color: #666;
font-style: italic;
font-family: serif;
}
ul {
padding: 0 0 0 2em;
li {
line-height: 1.3;
list-style: none;
padding: 0;
margin: 0;
}
}
}
}
}
}
&.page-id-119013 {
div.page {
width: 580px;
}
}
/* web integrator */
&.page-id-118992 {
background-color: #fff;
div.page {
border: none;
padding: 0;
}
}
&.page-id-119038 {
background-color: #006;
color: #fff;
div.page {
background-color: #006;
color: #fff;
border: none;
}
div.legacy-body {
background-color: #006;
color: #fff;
border-bottom-width: 1px;
border-bottom-color: #F30;
border-bottom-style: dotted;
border-left-width: 1px;
border-left-color: #F30;
border-left-style: dotted;
padding: 40px;
margin: 0 0 50px 0;
}
h1 {
font-size: 20px;
font-family: georgia, times, serif;
margin: 0 0 0 0;
color: #fff;
}
p {
font-family: courier, 'courier new', fixed-width;
}
div.two-ships-footer {
font-size: x-small;
font-family: verdana, sans-serif;
background-color: #FFF;
color: #000;
padding: 0.5em;
margin: 0 0 25px 0;
width: 40vw;
float: right;
}
}
/* becoming */
&.page-id-119032 {
background-color: #fff;
body.words-legacy {
background-color: #fff;
color: #000;
}
div.page {
border: none;
width: 400px;
margin: 0 auto;
}
h1, p {
font-size: medium;
}
}
/* lindows-pitch, forta-speaks */
&.page-id-119028, &.page-id-119041 {
h1 {
font-size: larger;
}
h1, h2 {
color: #063;
font-size: medium;
font-family: Georgia, serif;
line-height: 1.2;
}
p {
font-family: Georgia, serif;
line-height: 1.2;
}
.footer {
margin-left: 100px;
width: 400px;
}
}
/* zappa */
&.page-id-119026 {
background-color: #F6F;
margin: 1em 1em 100px 1em;
div {
background-color: #fff;
&.page {
padding: 0;
width: 100%;
}
}
ul {
line-height: 1.1;
}
h1 {
background-image: url(https://artlung.com/archive/words/zappa/iamazappafan.gif);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
width: 50vw;
height: 20vh;
white-space: nowrap;
overflow: hidden;
text-indent: 100%;
margin: 0;
}
div.legacy-body {
max-width: 600px;
margin: 0 auto;
}
}
/** web work */
&.page-id-119023 {
div.page {
background-color: #EFE;
color: #000;
h1, h2 {
color: #063;
}
h2 {
margin-bottom: 0;
}
p {
margin-top: 5px;
}
div.footer {
font-family: geneva, 'ms sans serif', sans-serif;
padding: 5px;
width: 100%;
background-color: #EEE;
color: #666;
border-style: dotted;
border-width: 2px;
border-color: #063;
}
div.narrow {
width: 400px;
margin-left: 100px;
}
}
}
/** accessibility */
&.page-id-119005 {
div.page {
width: 600px;
margin: 0 auto;
}
}
&.page-id-118999, &.page-id-119019 {
h1 {
display: none;
}
.c { color: #060; }
.q { font-style: italic; color: #090; font-weight: bold;}
pre { text-align: left; }
}
/* what-is-a-web-integrator */
&.page-id-118992 {
h1 {
display: none;
font-family: georgia, times, serif;
font-weight: normal;
margin: 0;
&.custom-header {
display: block;
padding: 1.2em 0.5em;
color: #000;
background-color: #3C3;
max-width: 600px;
border: 3px dotted #fff;
text-align: left;
line-height: 1.2;
}
br {
display: none;
}
em {
display: block;
font-size: medium;
line-height: 1.1;
}
}
}
/* crossplatform */
&.page-id-118975 {
div.page {
font-family: georgia, times, serif;
line-height: 1.2;
h1 {
font-size: 1.5em;
font-weight: lighter;
}
.legacy-body {
display: grid;
grid-template-columns: 153px 1fr;
justify-items: center;
}
.TI994A_Amiga {
}
.crossplatform-main {
}
.operating-systems-1997 {
width: 240px;
float: right;
height: 30px * 3;
a {
height: 30px;
width: 30px;
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
&.os2 {
width: 30px * 2;
}
}
div.row1 {
display: grid;
grid-template-columns: 1fr 1fr;
width: 30px * 2;
}
div.row2 {
display: grid;
grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
width: 30px * 6;
margin-left: 30px * 2;
}
div.row3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
width: 30px * 6;
margin-left: 30px * 2;
}
}
}
}
/* flash mind reader */
&.page-id-119044 {
div.page {
width: auto;
}
}
/* some poems */
&.page-id-118969, &.page-id-119034 {
div.page {
border-width: 1px;
border-style: solid;
border-color: #ccc #666 #666 #ccc;
h1 {
font-family: georgia, times, serif;
font-weight: normal;
}
h2 {
font-family: georgia,times,serif;
color: #969;
position: absolute;
top: -26px;
margin: 0;
left: 0;
}
div.poem {
box-sizing: border-box;
border-width: 0 0 1px 1px;
border-color: #969;
border-style: dotted;
position: relative;
padding: 20px 0 20px 40px;
margin: 50px 0 100px 0;
max-width: 600px;
p {
font-family: "century schoolbook", palatino, serif;
font-style: italic;
line-height: 1.1;
}
}
div.poem-footer {
box-sizing: border-box;
max-width: 600px;
border-top: 1px dotted #ccc;
padding: 30px 0 0 80px;
color: #666;
font-size: small;
line-height: 2;
font-family: "century schoolbook", palatino, serif;
}
}
}
}
section.legacy-footer {
position: fixed;
bottom: 0;
left: 0;
background-color: #666;
color: #fff;
opacity: 0.9;
z-index: 10;
width: 100%;
padding: 0;
font-size: x-small;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
height: 30px;
overflow: hidden;
&:hover {
opacity: 1
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
min-width: 100px;
height: 33px;
display: inline-block;
margin: 0;
background-image: url(data:image/gif;base64,R0lGODlhEQBGAIAAAP///wAAACH5BAkAAAEALAAAAAARAEYAAAJPjA2nq8mPoHRy0Xoujjt3/3GfhpFlGJgTmqIq9MLuTI+1HcaMvt8bb/GdhBUgCNcxipI54grJbEJ/zoeyJY1Oh9oudVus9rLeMPlbNoMVBQA7);
background-repeat: no-repeat;
background-position: top right;
text-align: center;
padding: 0 33px 0 0;
box-sizing: border-box;
color: #ccc;
&:first-child {
padding-left: 0;
}
a, span {
display: inline-block;
min-width: 100px;
color: #ccc;
box-sizing: border-box;
padding: 0;
line-height: 3;
}
a {
text-decoration: none;
&:hover {
color: #fff;
text-decoration: underline;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment