zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
emma 2024-10-27 21:05:18 -04:00
parent 8ed283f13d
commit deb2f09f76
2 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -9,6 +9,24 @@
</head> </head>
<body> <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> </body>
</html> </html>

40
style/style.css
View File

@ -1,16 +1,40 @@
/* I may not want to reset margin and padding with a custom CSS framework *, ::before, ::after {
Saving it here in case I do though.
*/
/* *, ::before, ::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
} */ }
/* html { html {
font-size: 16px; font-size: 16px;
} }
body { body {
box-sizing: border-box; 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;
}