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