Skip to content

Commit 69fe181

Browse files
whostackingwhostacking
committed
feat: new landing page
1 parent 76a56a3 commit 69fe181

4 files changed

Lines changed: 131 additions & 72 deletions

File tree

‎clouds.png‎

2.04 MB
Loading

‎index.html‎

Lines changed: 11 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>⌗ PortableBridge — PortableInfobox to InfoboxNeue converter</title>
7+
<title>whosnipping</title>
88
<meta name="description" content="Useful utility to convert PortableInfobox templates to InfoboxNeue templates or modules.">
9-
<link rel="icon" href="tools.png">
10-
<link rel="stylesheet" href="styles.css">
9+
<link rel="icon" href="../tools.png">
10+
<link rel="stylesheet" href="/landing/landing.css">
1111
<link rel="preconnect" href="https://fonts.googleapis.com">
1212
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1313
<link
@@ -17,74 +17,13 @@
1717
</head>
1818

1919
<body>
20-
<main class="shell">
21-
<section class="workspace" aria-label="PortableInfobox converter">
22-
<div class="intro">
23-
<h1>PortableBridge</h1>
24-
<div>PortableInfobox to InfoboxNeue converter</div>
25-
<!-- <img src="tools.png" height="50"> -->
26-
</div>
20+
<div class="whosnipping">whosnipping</div>
21+
<div class="written-text">by <a href="https://grids.so/stack" target="_blank">whostacking</a> | <a href="https://github.com/whostacking/whosnipping" target="_blank">Source code</a></div>
2722

28-
<ul id="notesList" aria-live="polite" aria-atomic="true"></ul>
29-
30-
<div class="tool-grid">
31-
<section class="panel input-panel" aria-label="PortableInfobox input">
32-
<div class="panel-head">
33-
<div class="panel-head-details">
34-
<h2>Portable infobox</h2>
35-
<p>Paste <code>&lt;infobox&gt;</code> markup</p>
36-
</div>
37-
</div>
38-
<textarea id="sourceInput" spellcheck="false" placeholder="<infobox>
39-
<title source=&quot;name&quot; />
40-
<image source=&quot;image&quot;>
41-
<caption source=&quot;imagecaption&quot; />
42-
</image>
43-
<data source=&quot;occupation&quot;>
44-
<label>Occupation</label>
45-
</data>
46-
</infobox>"></textarea>
47-
</section>
23+
<div class="tools-wrapper">
24+
<a href="/bucket" class="tool-link">Cargo ➔ Bucket</a>
25+
<a href="/neue" class="tool-link">PortableInfobox ➔ InfoboxNeue</a>
26+
</div>
4827

49-
<section class="panel output-panel" aria-label="InfoboxNeue output">
50-
<div class="panel-head">
51-
<div class="panel-head-details">
52-
<h2>InfoboxNeue</h2>
53-
<p>Copy generated output</p>
54-
</div>
55-
<div class="segmented" role="tablist" aria-label="Output type">
56-
<button type="button" class="active" id="templateTab" role="tab"
57-
aria-selected="true">Template</button>
58-
<button type="button" id="moduleTab" role="tab" aria-selected="false">Module</button>
59-
</div>
60-
<button type="button" id="copyButton" title="Copy output">
61-
<span class="material-symbols-outlined">content_copy</span>
62-
</button>
63-
</div>
64-
<pre id="outputBox" tabindex="0"></pre>
65-
</section>
66-
</div>
67-
68-
<section class="diagnostics" aria-label="Conversion notes">
69-
<p>
70-
Based on PortableInfobox tags and parameters from
71-
<a href="https://portability.fandom.com/wiki/Portable_Infoboxes" target="_blank"
72-
rel="noreferrer">Fandom wikis</a>
73-
and
74-
<a href="https://www.mediawiki.org/wiki/Extension:PortableInfobox" target="_blank"
75-
rel="noreferrer">MediaWiki's PortableInfobox extension</a>.
76-
</p>
77-
<p>
78-
InfoboxNeue uses
79-
<code><a href="https://starcitizen.tools/Module:InfoboxNeue" target="_blank" rel="noreferrer">Module:InfoboxNeue</a></code>
80-
and
81-
<code><a href="https://starcitizen.tools/Template:InfoboxNeue" target="_blank" rel="noreferrer">Template:InfoboxNeue</a></code>
82-
from the Star Citizen Wiki. © CC-BY-SA 4.0.
83-
</p>
84-
</section>
85-
</section>
86-
</main>
87-
<script src="script.js"></script>
88-
</body>
89-
90-
</html>
28+
<script src="/landing/landing.js"></script>
29+
</body>

‎landing/landing.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:root {
2+
color-scheme: dark;
3+
--bg: #0a0f0f;
4+
--panel: #172529;
5+
--line: rgba(255, 255, 255, .05);
6+
--line-strong: #3d4c64;
7+
--text: #ecf2ff;
8+
--muted: #9eacc0;
9+
--accent: #1d4d4f;
10+
--accent-strong: #f6c85f;
11+
--danger: #ff7a90;
12+
--shadow: 0 20px 60px rgba(0, 0, 0, .42);
13+
font-family: "Google Sans Flex", sans-serif;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
margin: 0;
22+
min-height: 100vh;
23+
color: var(--text);
24+
background: var(--bg);
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: center;
28+
align-items: center;
29+
30+
&::before {
31+
content: '';
32+
position: absolute;
33+
inset: 0;
34+
background: url(/clouds.png);
35+
background-size: cover;
36+
background-position: center;
37+
background-repeat: no-repeat;
38+
z-index: -1;
39+
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
40+
}
41+
42+
&::after {
43+
content: '';
44+
position: fixed;
45+
inset: 0;
46+
background: url(frosted-texture.png);
47+
background-repeat: repeat;
48+
background-size: 200px 200px;
49+
opacity: 0.1;
50+
z-index: -2;
51+
}
52+
}
53+
54+
.whosnipping {
55+
font-size: clamp(2rem, 5vw, 4rem);
56+
font-weight: bold;
57+
text-align: center;
58+
font-variation-settings: 'ROND' 100;
59+
mix-blend-mode: difference;
60+
pointer-events: none;
61+
}
62+
63+
.written-text {
64+
font-size: 1rem;
65+
text-align: center;
66+
color: var(--muted);
67+
margin-bottom: 2rem;
68+
69+
a {
70+
font-weight: bold;
71+
text-decoration: unset!important;
72+
}
73+
}
74+
75+
.tools-wrapper {
76+
display: flex;
77+
flex-wrap: wrap;
78+
gap: 1rem;
79+
80+
a {
81+
padding: .5rem 1rem;
82+
border-radius: 1rem;
83+
font-size: 1rem;
84+
background: var(--panel);
85+
text-decoration: unset!important;
86+
color: white!important;
87+
transition: all .25s;
88+
89+
&:hover {
90+
transform: scale(1.1);
91+
font-weight: bold;
92+
}
93+
}
94+
}

‎landing/landing.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
let mouseX = 0;
2+
let mouseY = 0;
3+
4+
let lerpedX = 0;
5+
let lerpedY = 0;
6+
7+
document.addEventListener("mousemove", e => {
8+
mouseX = e.clientX / window.innerWidth * 20 - 10;
9+
mouseY = e.clientY / window.innerHeight * 20 - 10;
10+
});
11+
12+
const tweets = document.querySelectorAll(".whosnipping");
13+
14+
function update() {
15+
lerpedX += (mouseX - lerpedX) * 0.05;
16+
lerpedY += (mouseY - lerpedY) * 0.05;
17+
18+
tweets.forEach(tweet => {
19+
tweet.style.transform =
20+
`translate(${lerpedX}px, ${lerpedY}px) rotate(${lerpedX * 0.15}deg)`;
21+
});
22+
23+
requestAnimationFrame(update);
24+
}
25+
26+
update();

0 commit comments

Comments
 (0)