WIP: Add characters page
todo: fix display when multiple windows, mobile support, move images to img.system64.dev
This commit is contained in:
parent
742cac0ef8
commit
db956c4ba4
GPG Key ID:
33A12B0480AFC8E9
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/styles/main_style.css"> <!-- Import main styling -->
|
||||
<link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling -->
|
||||
<link rel="stylesheet" type="text/css" href="/styles/window_style.css"> <!-- Window Styling -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>system64.dev - OCs</title>
|
||||
<!-- embed -->
|
||||
<meta content="system64.dev" property="og:title" />
|
||||
<meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" />
|
||||
<meta content="https://system64.dev" property="og:url" />
|
||||
<meta content="https://system64.dev/img/blueberry.png" property="og:image" />
|
||||
<meta content="#2452b5" data-react-helmet="true" name="theme-color" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="taskbar">
|
||||
<input class="start" type="button" onclick="location.href='/';" value="system64.dev">
|
||||
<input class="taskbar" type="button" onclick="location.href='/artwork/index.html';" value="Artwork">
|
||||
<input class="taskbar" type="button" onclick="location.href='/projects/index.html';" value="Projects">
|
||||
<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)">
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="window">
|
||||
<div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
|
||||
<img src="./preview/ponytown_technocolor.png">
|
||||
<h1>Technocolor</h1>
|
||||
<p>there's supposed to be a snippet of oc lore here ok plz be patient with me</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>
|
||||
<!-- trying something with putting this outside the flexbox.. -->
|
||||
<div class="window" style="width:45vh; float:right;">
|
||||
<div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div>
|
||||
<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>What you can do with my characters:</p>
|
||||
<ul>
|
||||
<li>Draw them with your own character</li>
|
||||
<li>Ship them with their canon ships</li>
|
||||
</ul>
|
||||
<p>You CANNOT do this with my characters:</p>
|
||||
<ul>
|
||||
<li>Draw gore of them</li>
|
||||
<li>Ship them with your own characters</li>
|
||||
<li>Draw NSFW content</li>
|
||||
</ul>
|
||||
<p>If there's something you aren't sure about, feel free to ask me!</p>
|
||||
<p>Additionally, you can send your drawings to me via one of my contacts on my <a href="../socials.html" style="color:blue">contacts page.</a></p>
|
||||
</div>
|
||||
</body>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
|
|
@ -0,0 +1,61 @@
|
|||
/* Moving window stuff here to make it easier to work with */
|
||||
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
|
||||
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
|
||||
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }
|
||||
|
||||
/* Probably not the right way to do it, but eh. We can come back to this later.*/
|
||||
|
||||
|
||||
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: #e9e9e9;
|
||||
|
||||
overflow-y: auto;
|
||||
width: 40vw;
|
||||
max-width: 80vw;
|
||||
padding-top: 4vh;
|
||||
padding-bottom: 1vh;
|
||||
padding-left: 1vh;
|
||||
|
||||
max-height: 60vh;
|
||||
background-color: #e9e9e9;
|
||||
|
||||
margin: 10vh 1vh auto 25vh;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
/* Fonts */
|
||||
h1 {
|
||||
font-family: 'Bitter', serif;
|
||||
font-size: 20pt;
|
||||
|
||||
color: black
|
||||
}
|
||||
|
||||
p { color: black }
|
||||
li { color: black }
|
||||
|
||||
h3.window {
|
||||
color: white;
|
||||
|
||||
display: inline;
|
||||
padding-left: 2px;
|
||||
font-family: 'Bitter', serif;
|
||||
font-size: 11pt;
|
||||
}
|
||||
Loading…
Reference in New Issue