Daily Expedition

So, after about 2 weeks or so of being sick, and 3 days of bingewatching House M.D. again, I decided to finally start working on things in full that just haven't gotten done around here. Ages ago, I said I'd work on a layout that's free for all and based on my layout that was ideally, easier to read and work with. Well, I'm here to tell you that this is an attempt at that layout. I cut out quite a bit of things, but in all actuality, if there's anything you want to look at in my code, I'm not going to stop you. Or you can just ask me. I really don't care, my contact options are always open.

Anyways, I told myself that since I already made 2 layouts that had Yugioh based assets, I wasn't allowed to do a 3rd. So for now you get Urotsuki and a very purple layout. A lot of the assets I've used for this are straight up from the wiki, out of a folder of graphics that I've long lost any source to, or in some cases (like the headers), just hand drawn by me.

The CSS here is a bit of a mess, but that's because I won't lie and pretend that I wrote new CSS instead of just repeatedly plopping assets into layouts. Because I am like that sometimes. But either way, the original CSS is mine and if I wrote it then, why write it again? Either way, it's a less complicated version of my current for anyone to just grab. You can change colors, customize, or just use it as is, I don't really mind. Like all of my stuff, if you want to convert it to iframes or whatever, you're free to do so.

Vending Machine Hunt

Okay, let's get to the assets part. There's quite a bit this time. We have 12 images, 2 javascript files, and the initial HTML & CSS. We also have quite a bit of credits for these, so lets get that out of the way. If anyone who made any of the things that I used for this layout (or any other layout or general part of my site) wants them removed, you're free to let me know and I'll remove them the instant I'm able to. I mostly bring this up due to the music player code and the fact that site just disappeared with no real information as to why, but I hope that the webmaster is doing well, despite the sudden disappearance.

Anyways, let's go over credits.

Yume 2kki Wiki for the header assets, icon, & background
Misc graphics (Seems to have broken images)
Misc smaller graphics
As mentioned, Adilene.net was the original code for the music player design.
Calendar code
If anything else is missing that you recognize that I didn't credit, let me know.

Stick the images in "/images," style sheet in "/style," and the javascript files in "/js"

With that out of the way, let's get to the images:

layout header
body header
sidebar headers

Content Border Inner window background Page background Journal Icon

Header Background Header image

Cursor

The Javascript files are here and here. Just copypaste them into a new document or right click and save.

Anyways, here's the HTML. Paste this into a file named index:

<!DOCTYPE html>
<html lang="en">
<head>
<title>lavender waters</title>
<meta name="description" content="personal blog">
<link rel="icon" href="./images/favicon.gif" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Kosugi+Maru&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://whimwitch.neocities.org/ygoring/onionring.css">
<link href="./style/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<header id="topbanner">
<h5>lavender waters</h5>
<div id="headerfocus">
<img src="./images/header.gif" alt="">
</div>
</header>

<div id="stack">
<nav id="nav">
<div class="navhead"></div>
<div id="sidepad">

<div class="n2"><div class="navlink"><a href="#">home</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 1</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 2</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 3</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 4</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 5</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 6</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 7</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 8</a></div></div>
<div class="n2"><div class="navlink"><a href="#">link 9</a></div></div>
<div class="n2"><div class="navlink"><a href="#">guestbook</a></div></div>

</div>
</nav>

</div>

<div id="solo">
<article id="blog">
<div class="bloghead"></div>
<div id="content"> 
<div class="innerborder">
<div class="innercontainer">
<h1>Daily Expedition</h1>
<div class="postav"><img src="./images/av01.png" style="float: left; margin-bottom: -5px;" alt=""></div>
<p>This is where you would add content.</p>

</div>
</div>

<div class="outercontainer">
<h2>Vending Machine Hunt</h2>
<div class="postav"><img src="./images/av01.png" style="float: left; margin-bottom: -5px;" alt=""></div>
<p>This is an alternate way to display content.</p>		
</div>

</div>
</article>
</div>

<footer id="botbanner">
<div id="footer">Layout by <a href="https://ordainedmotion.neocities.org/" target="_blank">Mizumiya</a></div>
</footer>

</div>
</body>
<script src="./js/music.js"></script>

</html>

And here's the CSS. Toss this into a file named style and put it in the /style folder:

html {
cursor: url(../images/cur.gif), auto;
}

body {
 font-family: 'Zen Maru Gothic';
 color: #4f4257;
 font-weight: bold;
 line-height: 1.3em;
 background-image: url(../images/tile.png);
 background-position: top;
 overflow-x: hidden;
 }

a:link, a:visited {
 color: #9e72d9;
 font-weight: bold;
 text-decoration: none;
 line-height: 1.3;
}

a:hover {
 color: #a562ff;
 text-decoration: none;
 line-height: 1.3;
 background-color: #ffffff;
 cursor: url(../images/cur.gif),auto;
}

b {
 color: #9e72d9;
 font-weight: bold;
}

img {
 max-width: 100%;
 height: auto;
}

p {
 color: #4f4257;
 line-height: 1.1em;
}

h1, h2, h3{
 font-family: 'Kosugi Maru';
 color: #9e72d9;
 font-size: 1em;
 text-align: right;
 background-color: #ffffff;
}

h4 {
 font-family: 'Kosugi Maru';
 color: #a562ff;
 font-size: .8em;
 text-align: left;
}

h5 {
 font-family: 'Hachi Maru Pop';
 color: #ffffff;
 font-size: 3.2em;
 line-height: 1.3em;
 background: -webkit-linear-gradient(#f2e9fb, #9071bb);
 position: absolute;
 top: 6%;
 left: -1%;
 margin: 1%;
 padding: 2%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

ul {
 list-style-image: url(../images/bullet.png);
}

textarea {
 color: #ffffff;
 background: rgba(110, 82, 126, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 98%;
 height: 6.7em;
 padding: 2px;
}

.postav img {
 border:0;
 margin:1% 1% -.5%;
 vertical-align:center
}

#layout {
 background: rgba(110, 82, 126, 0.5);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 75em;
 height: auto;
 position: relative;
 margin: auto;
 overflow-y: auto;
}

#topbanner {
 background-image: url(../images/hbg.png);
 background-position: center;
 background-size: cover;
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 height: 8em;
 margin: 0.5em;
 padding: 10px;
 overflow-y: hidden;
}

#midbanner {
 background-image: url(../images/mdiv.gif);
 background-repeat: repeat-x;
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 margin: 0.5em;
 padding: 10px;
 overflow-x: hidden;
 overflow-y: auto;
}

#botbanner {
 background-image: url(../images/ctbg.png);
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 height: 1.8em;
 margin: 0.5em;
 padding: 10px;
 overflow-x: hidden;
 overflow-y: hidden;
}

#stack {
width: 13.75em;
display: flex;
float: left;
flex-direction: column;
}

#solo {
width: 80%;
position: relative;
display: flex;
float: right;
}

#nav{
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 height: 100%;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}

#cal {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}

#blog {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 100%;
 height: 100%;
 position: relative;
 float: right;
 margin: 0.5em;
}

#musicplayer {
 text-align: center; 
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}
 
#botcontainer {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 76%;
 height: 34.8em;
 position: relative;
 float: left;
 margin: 0.5em;
}

.n2{
 background: rgba(216, 202, 235, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 display: block;
 margin: 3px 1px 3px 1px;
}

.navlink a{
 font-family: 'Zen Maru Gothic';
 color: #ffffff;
 letter-spacing: 2px;
 background: -webkit-linear-gradient(#f2e9fb, #9071bb);
 margin: 3px;
 padding: 3px;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

.navlink a:hover {
 font-family: 'Zen Maru Gothic';
 background: -webkit-linear-gradient(white, #9966ff);
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
 }
 
.calendar-table {
 color:#4f4257;
 font-weight: bold;
 text-align: center;
 letter-spacing: 3px;
 background: linear-gradient(#d9d7fa 15%, white);
 border: 1px solid #947ed0;
 border-radius: 5px;
 margin: auto;
 padding: 2px;
}

.month-name {
 color:#4f4257;
 background: linear-gradient(white 50%, #d9d7fa);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-header-day {
 color:#4f4257;
 background: linear-gradient(white 50%, #aa92c5);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-day {
 color:#4f4257;
 background: linear-gradient(white 50%, #d9d7fa);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-current-date {
 color:#a562ff;
 font-weight:700
}

.innercontainer {
 background: rgba(255, 255, 255, 0.7);
 border: 1px solid #947ed0;
 border-radius: 5px;
 margin: 1%;
 padding: 1%;
}

.outercontainer {
 background: rgba(216, 202, 235, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 padding: 1%;
 margin: 1%;
}

#footer {
 color: #4f4257;
 font-size: 0.8em;
}

#content {
 height: 44.4em;
 padding: 1.5%;
 overflow-y: scroll;
 overflow-x: hidden;
}

#sidepad {
 padding: 4.5%;
}

.layouthead {
 background-image: url(../images/hdrly.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

.navhead {
 background-image: url(../images/hdrsd.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

.bloghead {
 background-image: url(../images/hdrbg.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

#headerfocus {
 position: absolute;
 right: 1.5%;
 top: 1.45%;
 overflow-y: hidden;
}

.innerborder {
 background-image: url(../images/bdbg.png);
 border: 1px solid #947ed0;
 border-radius: 5px;
 display: inline-flex;
 padding: 1%;
 margin: 1%;
}

::-moz-selection {
 color: #a562ff;
 }

::selection {
 color: #a562ff;
 }

* {
 scrollbar-width: thin;
 scrollbar-color: #9071bb #daccee;
}

*::-webkit-scrollbar {
 width: 16px;
}

*::-webkit-scrollbar-track {
 background: #daccee;
}

*::-webkit-scrollbar-thumb {
 background-color: #9071bb;
 border-radius: 10px;
 border: 3px solid #ffffff;
}

.songtitle, .track-info, .now-playing{
 color: #ffffff;
 font-size: 0.8em;
 padding: 0px;
}

.controls{
 display: flex; 
 flex-direction: column; 
 gap: 0px;
}

.buttons{
 font-size: 0.8em;
 width: 100%;
 display: flex;
 justify-content: center;
}

.buttons div{
 width: 33.3%;
}

.playpause-track, .prev-track, .next-track{
 color: #ffffff;
 font-size: 1.8em;
}

.volume-icon{
 font-size: 0.8em;
}

.seeking, .volume{
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 0px;			
}

.now-playing { 
}

.track-info{
 background: rgba(110, 82, 126, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 padding: 5px;
}

.now-playing{
 font-weight: bold;
}

input[type=range]{
width: 95%;
-webkit-appearance: none;
}

input[type=range]:focus{
 outline: none;
}

input[type=range]::-webkit-slider-runnable-track{
 background:#ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-webkit-slider-thumb{
 background: #ffffff;
 border-radius: 3px;
 height: 0.8em;
 width: 0.8em;
 margin-top: -3px;
 -webkit-appearance: none;
}

input[type=range]::-moz-range-track{
 background: #ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-moz-range-thumb{
 background: #ffffff;
 border: none;
 border-radius: 3px;
 height: 0.8em;
 width: 0.8em;
}

input[type=range]{
 width: 95%;
 -webkit-appearance: none;
}

input[type=range]:focus{
 outline: none;
}

input[type=range]::-webkit-slider-runnable-track{
 background:#ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-webkit-slider-thumb{
 background: #ffffff;
 border-radius: 3px;
 width: 0.8em;
 height: 0.8em;
 margin-top: -3px;
 -webkit-appearance: none;
}

input[type=range]::-moz-range-track{
 background: #ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-moz-range-thumb{
 background: #ffffff;
 border: none;
 border-radius: 3px;
 width: 0.8em;
 height: 0.8em;
}

.kosugi-maru-regular {
 font-family: "Kosugi Maru", serif;
 font-weight: 400;
 font-style: normal;
}

.zen-maru-gothic-regular {
 font-family: "Zen Maru Gothic", serif;
 font-weight: 400;
 font-style: normal;
}

.hachi-maru-pop-regular {
 font-family: "Hachi Maru Pop", serif;
 font-weight: 400;
 font-style: normal;
}

If you don't want to copy and paste that all, here's a direct download to a .7z archive from my catbox files. It contains all of the files set up as is. You will need 7zip or another archival program to extract the files to use it.