main layout nearly done
This commit is contained in:
parent
a23b7fbb5e
commit
63f88b2623
3 changed files with 45 additions and 23 deletions
|
@ -1,3 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "@punkfairie/stylelint-config"
|
"extends": "@punkfairie/stylelint-config",
|
||||||
|
"rules": {
|
||||||
|
"rem-over-px/rem-over-px": false
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -13,20 +13,23 @@
|
||||||
<div class="site">
|
<div class="site">
|
||||||
<header>
|
<header>
|
||||||
<h1>Epiphany</h1>
|
<h1>Epiphany</h1>
|
||||||
|
|
||||||
|
<nav class="main-nav">
|
||||||
|
<a href="/">index</a>
|
||||||
|
<a href="#">adoptions</a>
|
||||||
|
<a href="#">about</a>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="flow">
|
<main class="flow">
|
||||||
<p>Hello and welcome to Epiphany Petz! This is a Petz 4 website.</p>
|
<p>Hello and welcome to Epiphany Petz! This is a Petz 4 website.</p>
|
||||||
|
|
||||||
<p>If there are any broken links or typos, please let me know in the
|
|
||||||
cbox!</p>
|
|
||||||
|
|
||||||
<div class="divide"></div>
|
<div class="divide"></div>
|
||||||
|
|
||||||
<h2>Affiliate Sites</h2>
|
<h2>Affiliate Sites</h2>
|
||||||
|
|
||||||
<p><a href="https://harvestpetz.neocities.org/" title="harvest">scribble @
|
<p><a href="https://harvestpetz.neocities.org/" title="harvest"
|
||||||
harvest</a></p>
|
target="_blank">scribble @ harvest</a></p>
|
||||||
|
|
||||||
<div class="divide"></div>
|
<div class="divide"></div>
|
||||||
|
|
||||||
|
@ -51,7 +54,7 @@
|
||||||
for whatever I feel like posting :)</p>
|
for whatever I feel like posting :)</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<nav></nav>
|
<nav class="secondary-nav"></nav>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -7,45 +7,61 @@
|
||||||
|
|
||||||
/* noinspection Stylelint */
|
/* noinspection Stylelint */
|
||||||
.site {
|
.site {
|
||||||
inline-size: 64rem;
|
|
||||||
block-size: 48rem;
|
|
||||||
background: url('/img/theme/baby-its-cold-outside/bg.png');
|
|
||||||
border: 1px solid hsl(233deg 66% 20%);
|
|
||||||
padding: var(--space-xs);
|
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template:
|
grid-template:
|
||||||
'. .' 1.5fr
|
'. .' 1.5fr
|
||||||
'header header' 0.5fr
|
'header header' 0.5fr
|
||||||
'nav main' 2.5fr / 1fr 5fr;
|
's-nav main' 2.5fr / 1fr 5fr;
|
||||||
|
inline-size: 64rem;
|
||||||
|
block-size: 48rem;
|
||||||
|
padding: var(--space-xs);
|
||||||
|
background: url('/img/theme/baby-its-cold-outside/bg.png');
|
||||||
|
border: 1px solid hsl(233deg 66% 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
grid-area: header;
|
grid-area: header;
|
||||||
text-align: right;
|
|
||||||
align-self: end;
|
align-self: end;
|
||||||
padding-right: var(--space-xs);
|
padding-inline-end: var(--space-xs);
|
||||||
|
padding-bottom: var(--space-2xs);
|
||||||
|
text-align: end;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: baseline;
|
||||||
|
column-gap: var(--space-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
display: flex;
|
||||||
|
column-gap: var(--space-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
--flow-space: var(--space-xs);
|
--flow-space: var(--space-xs);
|
||||||
|
|
||||||
grid-area: main;
|
grid-area: main;
|
||||||
overflow: auto;
|
|
||||||
padding: var(--space-s);
|
padding: var(--space-s);
|
||||||
|
overflow: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: rgba(255, 255, 255, 0.49);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
s
|
||||||
grid-area: nav;
|
.secondary-nav {
|
||||||
|
grid-area: s-nav;
|
||||||
padding: var(--space-s);
|
padding: var(--space-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide {
|
.divide {
|
||||||
background: url('/img/theme/baby-its-cold-outside/divider.gif');
|
|
||||||
height: 20px;
|
|
||||||
width: 239px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: var(--space-m);
|
width: 239px;
|
||||||
|
height: 20px;
|
||||||
|
margin-block-start: var(--space-m);
|
||||||
|
background: url('/img/theme/baby-its-cold-outside/divider.gif');
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue