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

19
index.html
View File

@ -4,24 +4,26 @@
<meta charset="utf-8">
<script src="js/elements.js"></script>
<link rel="stylesheet" href="css/style.css" />
<noscript>
<link rel="stylesheet" href="css/noscript.css" />
</noscript>
<title>yeet</title>
</head>
<body>
<div class="container">
<header>
<h1>yequari's emporium of excellent toys</h1>
<h3><em>Odd that we only have Transformers though</em></h3>
</header>
<div class="content">
<main class="content">
<div class="storefront">
<div class="shelf-group">
<h2>Featured</h2>
<toy-shelf>
<ul slot="toy-list">
<li slot="toy-item">Armada Megatron</li>
<li slot="toy-item">Leo Prime</li>
<li slot="toy-item">Coronation Starscream</li>
<li>Armada Megatron</li>
<li>Leo Prime</li>
<li>Coronation Starscream</li>
</ul>
</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>.
</p>
</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>
</body>
</html>