Theme memories box to look like a Win9X window
This commit is contained in:
parent
03cf1dfb00
commit
1f4778b020
|
@ -18,13 +18,19 @@
|
||||||
<input type="button" onclick="location.href='/';" value="Blueheart forever">
|
<input type="button" onclick="location.href='/';" value="Blueheart forever">
|
||||||
</div>
|
</div>
|
||||||
<h1>Thank you for the memories.</h1>
|
<h1>Thank you for the memories.</h1>
|
||||||
|
<div class="window">
|
||||||
|
<div class="window_titlebar">
|
||||||
|
<h3>memories.exe</h3>
|
||||||
|
</div>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="memoriesBox" id="memoriesBox"></div>
|
<div class="memoriesBox" id="memoriesBox"></div>
|
||||||
|
<footer>
|
||||||
<button id="prev"><</button>
|
<button id="prev"><</button>
|
||||||
<button id="next">></button>
|
<button id="next">></button>
|
||||||
|
</footer>
|
||||||
<script src="/js/memories.js"></script>
|
<script src="/js/memories.js"></script>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -12,13 +12,13 @@ body {
|
||||||
|
|
||||||
/* *flexes your boxes*/
|
/* *flexes your boxes*/
|
||||||
.container {
|
.container {
|
||||||
padding-top: 30px;
|
padding-top: 10vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
img.art_temp {
|
img.art_temp { /* we still need to redo this to the final, thing. */
|
||||||
width: 50%;
|
width: 50%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
padding-top: 5vh;
|
padding-top: 5vh;
|
||||||
|
@ -36,6 +36,33 @@ div.taskbar {
|
||||||
background: #c3c3c3;
|
background: #c3c3c3;
|
||||||
box-shadow: inset -1px -1px black;
|
box-shadow: inset -1px -1px black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Probably not the right way to do this, but it will suffice I guess. */
|
||||||
|
div.window_titlebar {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
height: 22px;
|
||||||
|
background: navy;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.window {
|
||||||
|
position: relative
|
||||||
|
;
|
||||||
|
border-style: ridge;
|
||||||
|
border-width: 5px;
|
||||||
|
border-color: #c3c3c3;
|
||||||
|
|
||||||
|
width: 60vw;
|
||||||
|
padding: 10px;
|
||||||
|
align-self: center;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -46,4 +73,23 @@ h1 {
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding-top: 5px;
|
||||||
|
font-family: 'Share Tech', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: inline;
|
||||||
|
padding-left: 2px;
|
||||||
|
font-family: 'Bitter', serif;
|
||||||
|
font-size: 11pt;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: 'Bitter', serif;
|
||||||
|
font-weight: 450;
|
||||||
|
}
|
||||||
|
|
Reference in New Issue