yequari
/
yeet.marigold.town
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout changes, apply fonts

This commit is contained in:
yequari 2023-09-30 17:06:22 -07:00
parent aad36ee953
commit b552aa4312
3 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/noscript.css Normal file
View File

@ -0,0 +1,7 @@
toy-shelf ul {
position: relative;
}
toy-shelf li {
display: block;
}

22
css/style.css
View File

@ -4,6 +4,7 @@
display: inline-block; display: inline-block;
background-color: chartreuse; background-color: chartreuse;
} */ } */
@import url(https://fonts.bunny.net/css?family=georama:400|bangers:400);
body { body {
background: url(../images/d7YslGq.gif); background: url(../images/d7YslGq.gif);
@ -11,19 +12,23 @@ body {
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Georama', sans-serif;
} }
header { header {
text-align: center;
color: white;
font-family: 'Bangers', display;
} }
h1,h2,h3 { h1,h2,h3 {
line-height: 1.2; line-height: 1.2;
font-family: 'Bangers', display;
} }
.container { .container {
background-color: white;
width: 85%; width: 85%;
height: 100vh; min-height: 100vh;
padding: 20px 50px; padding: 20px 50px;
margin: 0 auto; margin: 0 auto;
} }
@ -31,17 +36,23 @@ h1,h2,h3 {
.content { .content {
display: flex; display: flex;
flex-flow: row wrap-reverse; flex-flow: row wrap-reverse;
align-items: center;
background-color: white;
padding: 20px 50px;
} }
.sidebar { .sidebar {
flex: 3 1 20%; flex: 3 1 20%;
border: 1px solid black; border: 1px solid black;
padding: 20px 40px; padding: 20px 30px;
margin-left: 10px;
} }
.storefront { .storefront {
flex: 1 3 fit-content; flex: 1 3 fit-content;
margin: 0 auto; margin: 0 auto;
min-height: 720px;
padding: 30px;
} }
.shelf-group { .shelf-group {
@ -78,3 +89,8 @@ toy-shelf li {
left: 2px; left: 2px;
text-align: center; text-align: center;
} }
footer {
text-align: center;
color: white;
}

19
index.html
View File

@ -4,24 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<script src="js/elements.js"></script> <script src="js/elements.js"></script>
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<noscript>
<link rel="stylesheet" href="css/noscript.css" />
</noscript>
<title>yeet</title> <title>yeet</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>yequari's emporium of excellent toys</h1> <h1>yequari's emporium of excellent toys</h1>
<h3><em>Odd that we only have Transformers though</em></h3>
</header> </header>
<div class="content"> <main class="content">
<div class="storefront"> <div class="storefront">
<div class="shelf-group"> <div class="shelf-group">
<h2>Featured</h2> <h2>Featured</h2>
<toy-shelf> <toy-shelf>
<ul slot="toy-list"> <ul slot="toy-list">
<li slot="toy-item">Armada Megatron</li> <li>Armada Megatron</li>
<li slot="toy-item">Leo Prime</li> <li>Leo Prime</li>
<li slot="toy-item">Coronation Starscream</li> <li>Coronation Starscream</li>
</ul> </ul>
</toy-shelf> </toy-shelf>
<toy-shelf> <toy-shelf>
@ -74,7 +76,12 @@
Don't see what you're looking for at the front desk? We might have it in the <a href="#">back</a>. Don't see what you're looking for at the front desk? We might have it in the <a href="#">back</a>.
</p> </p>
</div> </div>
</div> </main>
<footer>
<p>
<em>This site is best viewed with JavaScript enabled, but should be perfectly usable without. Please report any issues on the <a href="https://git.32bit.cafe/yequari/yeet.marigold.town/issues">git repository</a>.</em>
</p>
</footer>
</div> </div>
</body> </body>
</html> </html>