IDeletedSystem64/system64.dev
1
0
Fork 0
Code Issues 4 Pull requests Releases 2 Activity

WIP: Final concept of the characters page

Browse source 
The final will likely use JS and JSON to dynamically add characters rather than being hard coded like they are in this example/concept
This commit is contained in:
Sophie Marie 2024-03-06 15:48:58 -06:00
parent 01ede1d201
commit 10691a7bc3
Signed by: IDeletedSystem64
GPG key ID: 33A12B0480AFC8E9
3 changed files with 44 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
characters/index.html
View file

@ -20,8 +20,8 @@
<input class="taskbar" type="button" onclick="location.href='../characters/index.html';" value="Characters"> <input class="taskbar" type="button" onclick="location.href='../characters/index.html';" value="Characters">
<input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)"> <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
</div> </div>
<div class="container"> <div class="container" style="flex-direction: column; display:inline-flex">
<div class="window"> <div class="window char-window">
<div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div> <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
<img src="preview/ponytown_technocolor.png"> <img src="preview/ponytown_technocolor.png">
<h1>Technocolor</h1> <h1>Technocolor</h1>
@ -33,8 +33,32 @@
</ul> </ul>
<input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet"> <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
</div> </div>
<!-- trying something with putting this outside the flexbox.. --> <div class="window char-window">
<div class="window" style="width:45vh; float:right;"> <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
<img src="preview/ponytown_technocolor.png">
<h1>Technocolor 2</h1>
<p>no way, a second one!</p>
<ul>
<li>Trans (FtM)</li>
<li>Alicorn</li>
<li>Music pony</li>
</ul>
<input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
</div>
<div class="window char-window">
<div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
<img src="preview/ponytown_technocolor.png">
<h1>Technocolor 3</h1>
<p>what the fuck, three????</p>
<ul>
<li>Trans (FtM)</li>
<li>Alicorn</li>
<li>Music pony</li>
</ul>
<input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
</div>
</div>
<div class="window" id="char-sidebar" style="width:45vh;">
<div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div> <div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div>
<h1>Absolutely!</h1> <h1>Absolutely!</h1>
<p>Anyone can draw my characters, there's not much that makes me happier than seeing art of my characters. It doesn't even have to be the greatest!</p> <p>Anyone can draw my characters, there's not much that makes me happier than seeing art of my characters. It doesn't even have to be the greatest!</p>

1
styles/main_style.css
View file

@ -55,7 +55,6 @@ body {
.container { .container {
display: flex; display: flex;
flex-direction: row;
} }
div.main { div.main {

23
styles/window_style.css
View file

@ -23,20 +23,29 @@ div.window {
border-width: 5px; border-width: 5px;
border-color: #e9e9e9; border-color: #e9e9e9;
overflow-y: auto; overflow-y: auto; /* I don't even know what this does, or why it's here... */
width: 40vw;
max-width: 80vw;
padding-top: 4vh; padding-top: 4vh;
padding-bottom: 1vh; padding-bottom: 1vh;
padding-left: 1vh; padding-left: 1vh;
max-height: 60vh;
background-color: #e9e9e9; background-color: #e9e9e9;
margin-left: 25vh;
margin: 10vh 1vh auto 25vh; margin-top: 10vh;
} }
.char-window {
width: 40vw;
max-width: 60vw;
max-height: 60vh;
}
/* I don't know what I'm doing :D */
#char-sidebar {
float: right;
margin-right: 25vh;
margin-left: auto;
}
img { img {
float: right; float: right;
} }