half-working version 1
This commit is contained in:
Lao Tzu
@@ -0,0 +1,277 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user