content, home, list template
parent
9697c522e3
commit
25ad8954eb
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SI16 - Learning how to walk while catwalking</title>
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="./static/css/variables.css" />
|
||||
<link rel="stylesheet" href="./static/css/global.css" />
|
||||
<link rel="stylesheet" href="./static/css/list.css" />
|
||||
|
||||
<!-- script -->
|
||||
<script src="./static/js/lodash.js"></script>
|
||||
<script src="./static/js/spawnSticker.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="sticker-container"></section>
|
||||
<section class="page--header">
|
||||
<header>
|
||||
<h1 class="title">List</h1>
|
||||
<!-- <h2 class="subtitle">Sub--title</h2> -->
|
||||
</header>
|
||||
<nav>
|
||||
<a href=".." data-sticker="Back"></a>
|
||||
<a href="/" data-sticker="Home"></a>
|
||||
</nav>
|
||||
</section>
|
||||
<main class="page--content">
|
||||
<p class="description">
|
||||
Incididunt sint excepteur amet in officia laboris ex ex non ea. Pariatur consequat
|
||||
culpa qui commodo ea. Consectetur pariatur esse non consequat laboris ea sit
|
||||
pariatur fugiat mollit. Non pariatur consequat magna mollit amet sunt. Incididunt
|
||||
aute eu aliqua exercitation velit. Sit ea commodo amet excepteur commodo aliquip
|
||||
eiusmod esse do non sit ex fugiat quis. Pariatur cupidatat duis adipisicing enim
|
||||
officia laborum do voluptate. Deserunt mollit amet minim dolore occaecat anim aute
|
||||
sint sit. Exercitation sint mollit cillum eiusmod ad exercitation.
|
||||
</p>
|
||||
|
||||
<table class="list">
|
||||
<tr>
|
||||
<td class="title">Annotation Compass</td>
|
||||
<td class="description">Et ea tempor ex minim ad laboris id enim cupidatat.</td>
|
||||
<td class="link">link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">"and i hope all your questions have been answered"</td>
|
||||
<td class="description">
|
||||
Eiusmod nostrud est sunt reprehenderit enim occaecat do enim dolore cillum
|
||||
fugiat proident.
|
||||
</td>
|
||||
<td class="link">link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">Title</td>
|
||||
<td class="description">
|
||||
Veniam laboris commodo et incididunt aliqua sint aute ut magna qui nulla
|
||||
occaecat.
|
||||
</td>
|
||||
<td class="link">link</td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
<section class="page--footer">
|
||||
<footer>Special Issue 16—Learning How to Walk while Catwalking</footer>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,73 @@
|
||||
.list {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
border-top: 1px solid currentColor;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
}
|
||||
|
||||
tr:last-of-type {
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 24px 0;+++
|
||||
}
|
||||
|
||||
td.title {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td.description {
|
||||
grid-column: 2 / span 2;
|
||||
padding-right: 90px;
|
||||
}
|
||||
|
||||
td.link {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
table,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
tr + tr {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td.title {
|
||||
padding-right: 30px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
td.description {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
td.link {
|
||||
top: 18px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
const negativeStickers = document.querySelectorAll(".negative");
|
||||
const container = document.getElementById("sticker-container");
|
||||
|
||||
var throttleSpawn = _.throttle(spawnSticker, 400);
|
||||
|
||||
Array.from(negativeStickers).forEach((spawner) => {
|
||||
spawner.addEventListener("click", (e) => spawnSticker(e));
|
||||
// spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
|
||||
});
|
||||
|
||||
function spawnSticker(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
let position = { x: e.clientX, y: e.clientY };
|
||||
getFromNegative(e.target, position);
|
||||
}
|
||||
|
||||
function getFromNegative(target, position) {
|
||||
sticker = target.cloneNode(true);
|
||||
sticker.classList.add("sticker");
|
||||
sticker.classList.remove("negative");
|
||||
|
||||
sticker.style.left = position.x + "px";
|
||||
sticker.style.top = position.y + "px";
|
||||
|
||||
sticker.style.transform = `
|
||||
rotate(${Math.random() * 20 - 10}deg)
|
||||
translate(-50%, -100%)
|
||||
`;
|
||||
|
||||
container.appendChild(sticker);
|
||||
}
|
||||
Loading…
Reference in New Issue