nekoapril.blog/kinklist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header

Browse source
This commit is contained in:
April Eaton 2025-12-14 21:28:50 +01:00
parent c2804d1329
commit 32ee2de008
5 changed files with 81 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
global/global.css
View file

@ -1 +1,10 @@
/* Global CSS options */
body {
font-family: "Truculenta", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings: "wdth" 100;
font-size: 16pt;
}

42
header/header.css
View file

@ -1 +1,43 @@
/* Header CSS */
header {
font-family: "Roboto Mono", monospace;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-size: 14pt;
height: 1.5rem;
width: calc(100% - 1.5rem);
margin-bottom: 0.25rem;
padding: 0.5rem;
border-width: 3px;
border-style: solid;
position: sticky;
top: 0;
display: flex;
#hd-left {
width: min-width;
padding-left: 0.25rem;
padding-right: 0.25rem;
font-style: italic;
}
#hd-mid {
width: 100%;
}
#hd-right {
width: min-width;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.spacer {
width: 2rem;
display: block;
}
}

15
header/header.html
View file

@ -1 +1,16 @@
<!-- Site header -->
<link
rel="stylesheet"
href="/header/header.css"
type="text/css"
media="screen"
/>
<div id="hd-left">nekoapril.blog</div>
<div id="hd-mid"></div>
<div id="hd-right">
<span>Home</span>
<span class="spacer"></span>
<span>Kinks</span>
<span class="spacer"></span>
<span>Gear</span>
</div>

13
index.html
View file

@ -6,11 +6,19 @@
<title>Kinklist</title>
<meta name="description" content="Personal kinklist and gearlist" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Truculenta:opsz,wght@12..72,100..900&display=swap"
rel="stylesheet"
/>
<link href="/global/global.css" rel="stylesheet" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<script type="text/javascript" src="/global/loadin.js"></script>
<script type="text/javascript" src="/index.js"></script>
<!-- Place favicon.ico in the root directory -->
</head>
<body>
<body onload="loadDependencies()">
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
@ -18,6 +26,7 @@
your experience.
</p>
<![endif]-->
<header id="hd-box"></header>
Look ma, I'm horny!
</body>
</html>

4
index.js
View file

@ -1 +1,5 @@
// Landing page JS
function loadDependencies() {
loadHTML("hd-box", "/header/header.html");
loadHTML("footer", "/footer/footer.html");
}