Lao Tzu
278 lines
5.9 KiB
HTML
278 lines
5.9 KiB
HTML
<!DOCTYPE html><html><head><title>World Wide Witzeman</title><style>/* Fonts */
|
|
@font-face {
|
|
font-family: hackmono;
|
|
src: url(fonts/Hack-Regular.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: "Code New Roman";
|
|
src: url("fonts/Code New Roman.woff");
|
|
}
|
|
@font-face {
|
|
font-family: unifont;
|
|
src: url(fonts/unifont-17.0.04.otf);
|
|
}
|
|
@font-face {
|
|
font-family: "Liberation Mono";
|
|
src: url(/fonts/liberation-mono.regular.ttf);
|
|
}
|
|
/* Color variables */
|
|
:root {
|
|
/* Ayu Dark */
|
|
/* --bg-primary: #0A0E14;
|
|
--red: #FF3333;
|
|
--red2: #FF3333;
|
|
--green: #C2D94C;
|
|
--green2: #C2D94C;
|
|
--orange: #FF8F40;
|
|
--orange2: #FF8F40;
|
|
--blue: #59C2FF;
|
|
--blue2: #59C2FF;
|
|
--yellow: #FFEE99;
|
|
--yellow2: #FFEE99;
|
|
--cyan: #95E6CB;
|
|
--cyan2: #95E6CB;
|
|
--grey: #B3B1AD;
|
|
--grey2: #B3B1AD;
|
|
--bg-secondary: #4D5566;
|
|
*/
|
|
/* Elementary */
|
|
--bg-primary: #303030;
|
|
--red: #E1321A;
|
|
--red2: #FF361E;
|
|
--green: #6AB017;
|
|
--green2: #7BC91F;
|
|
--orange: #FFC005;
|
|
--orange2: #FFD00A;
|
|
--blue: #004F9E;
|
|
--blue2: #0071FF;
|
|
--yellow: #EC0048;
|
|
--yellow2: #FF1D62;
|
|
--cyan: #2AA7E7;
|
|
--cyan2: #4BB8FD;
|
|
--grey: #F2F2F2;
|
|
--grey2: #A020f0;
|
|
--bg-secondary: #4D5566;
|
|
}
|
|
|
|
/* Common CSS */
|
|
html {
|
|
background-color: var(--bg-primary);
|
|
color: var(--grey);
|
|
}
|
|
|
|
h1, h2 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Liberation Mono", monospace;
|
|
}
|
|
#titlebar {
|
|
font-family: unifont;
|
|
}
|
|
#titlebar h1 {
|
|
font-size: 2rem;
|
|
}
|
|
#subhead {
|
|
color: var(--cyan);
|
|
font-weight: bold;
|
|
}
|
|
#subhead a {
|
|
text-decoration: none;
|
|
padding: 0 0.5em 0 0.5em;
|
|
margin: 0 0.5em 0 0.5em;
|
|
color: var(--cyan);
|
|
}
|
|
#subhead a:hover {
|
|
/*text-decoration: underline;*/
|
|
background-color: var(--bg-secondary);
|
|
color: var(--orange);
|
|
}
|
|
#subhead ul {
|
|
border-bottom: 2px dashed var(--red);
|
|
}
|
|
|
|
.content p {
|
|
text-indent: 2em;
|
|
}
|
|
|
|
#foot {
|
|
border-top: 4px double var(--yellow);
|
|
padding-top: 2em;
|
|
padding-bottom: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
a {
|
|
color: var(--cyan);
|
|
}
|
|
a:hover {
|
|
color: var(--orange);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Desktop CSS */
|
|
@media only screen and (min-aspect-ratio: 0.72) {
|
|
body {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
}
|
|
#head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
#titlebar {
|
|
align-self: stretch;
|
|
border-bottom: 4px double var(--yellow);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 2em;
|
|
}
|
|
#titlebar h1{
|
|
margin: 0 0 0 0.3em;
|
|
}
|
|
#titlebar .item1 {
|
|
}
|
|
#titlebar .item2 {
|
|
}
|
|
#subhead {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
#subhead ul {
|
|
list-style-type: none;
|
|
display: flex;
|
|
margin: 0 0 0 0;
|
|
}
|
|
#subhead ul li {
|
|
}
|
|
#motd {
|
|
margin-left: 10px;
|
|
tab-size: 4;
|
|
white-space: pre-wrap;
|
|
}
|
|
.content {
|
|
width: 90vw;
|
|
max-width: 65em;
|
|
margin-top: 1em;
|
|
padding-left: 1em;
|
|
/*align-self: center;*/
|
|
margin-left: 2em;
|
|
min-height: 85vh;
|
|
border-left: 2px solid var(--bg-secondary);
|
|
}
|
|
}
|
|
|
|
/* Mobile CSS */
|
|
@media screen and (max-aspect-ratio: 0.71) {
|
|
html {
|
|
font-size: 2vh;
|
|
}
|
|
#titlebar {
|
|
border-bottom: 4px double var(--yellow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
#titlebar h1{
|
|
margin: 0;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
#titlebar .item1 {
|
|
}
|
|
#titlebar .item2 {
|
|
}
|
|
#subhead {
|
|
color: var(--cyan);
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
#subhead ul {
|
|
list-style-type: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 0 0 0;
|
|
}
|
|
#motd {
|
|
margin-left: 0.5em;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
tab-size: 4;
|
|
white-space: pre-wrap;
|
|
}
|
|
.content {
|
|
margin-left: 15px;
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
</style></head><div id='head'>
|
|
<div id='titlebar'>
|
|
<div class='item1'><h1>world-wide-witzeman</h1></div>
|
|
<div class='item2'></div>
|
|
</div>
|
|
<div id='subhead'>
|
|
<div id='motd'>content/home</div>
|
|
<ul>
|
|
<li><a href='?'>home</a></li>
|
|
<li><a href='?q=services.html'>services</a></li>
|
|
<li><a href='?q=contact.html'>contact</a></li>
|
|
<li><a href='?q=about.html'>about</a></li>
|
|
</ul>
|
|
</div>
|
|
</div><div class='content'><h1>|= CHECK IT OUT!</h1>
|
|
|
|
<p>
|
|
Welcome to my homepage. This website is a place to look
|
|
at my cool things and ideas. You can also contact me!
|
|
I am a programmer, musician, and other things also.
|
|
If your computer isn't working, <i>I can probably
|
|
help you!</i> if you or someone you love wants to learn
|
|
to play piano or needs to pass college algebra, <i> I am
|
|
your guy!</i> If you want a friend, <i> definitely email me!</i>
|
|
</p>
|
|
|
|
<!--include content/about.html-->
|
|
<h1>|= ABOUT JAMES</h1>
|
|
<p>
|
|
Caden James Witzeman is a programmer and jazz musician
|
|
based in the US! James likes progamming in C, PHP,
|
|
systems administration, Gentoo, DWM, and other forms of
|
|
linux-based pain. James was trained in computer engineering
|
|
for 3 years for college, but didn't finish.
|
|
</p>
|
|
<p>
|
|
James plays mostly piano, and knows a bit of guitar. He started
|
|
playing keyed percussion in high school and later at Northern Arizona
|
|
University. James is currently listening to lots of Herbie Hancock
|
|
(specifically Mr. Hands and Future Shock),
|
|
Thelonious Monk, 9th Wonder, Victor Vaughn, and is <i>obsessed</i>
|
|
lately with Hiromi's <i>OUT THERE</i> album. Really good stuff.
|
|
</p>
|
|
<h3>LINKS</h3>
|
|
<ul>
|
|
<li><a href="mailto: me@jameswitzeman.net">me@jameswitzeman.net</a></li>
|
|
<li><a href="https://jaufheben.bandcamp.com/">Bandcamp</a></li>
|
|
<li><a href="https://github.com/jameswitzeman?tab=repositories">GitHub</a></li>
|
|
<li><a href="https://www.instagram.com/xu4nde/">Instagram</a></li>
|
|
</ul>
|
|
</div><div id='foot'>
|
|
<div id='footbar'>
|
|
<a href='mailto:me@jameswitzeman.net'>me@jameswitzeman.net</a>
|
|
</div>
|
|
</div></html>
|