Initial layout coded.
Further development will involve functionality of the website itself. Along with a revisit of the layout for mobile devices
This commit is contained in:
parent
8ed283f13d
commit
deb2f09f76
18
index.html
18
index.html
|
@ -9,6 +9,24 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Baxter Images</h1>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="window-pane">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="standard-dialog center scale-down site-info">
|
||||
<h1 class="dialog-text">Baxter's desktop</h1>
|
||||
<p class="dialog-text">Welcome to Baxter's desktop, a time trip to before Baxter himself!</p>
|
||||
<p class="dialog-text">This site makes use of JavaScript, so you may want to turn that on if things aren't working as intended.</p>
|
||||
<p class="dialog-text">In the "Baxter Images" dialog, you can single-click on a photo to view it with a small description.</p>
|
||||
<p class="dialog-text">I hope you enjoy this little nostalgia trip featuring my cat, you can go back to his normal homepage <a href="https://thiscat.rocks/">here</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,16 +1,40 @@
|
|||
/* I may not want to reset margin and padding with a custom CSS framework
|
||||
Saving it here in case I do though.
|
||||
*/
|
||||
|
||||
/* *, ::before, ::after {
|
||||
*, ::before, ::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
} */
|
||||
}
|
||||
|
||||
/* html {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
} */
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
||||
.site-info {
|
||||
height: 20rem;
|
||||
width: auto;
|
||||
margin: 1rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
Loading…
Reference in New Issue