You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
4.8 KiB
68 lines
4.8 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tiny Components | Masonry</title>
|
|
<link rel="icon" href="data:,">
|
|
<link href="/example.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="bar">
|
|
<div class="bar__start">
|
|
<h1 class="m-top-4 m-bottom-4 h4">
|
|
@tiny-components/masonry
|
|
</h1>
|
|
</div>
|
|
<div class="bar__main justify-end">
|
|
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
|
|
Gitea
|
|
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-gitea"></use>
|
|
</svg>
|
|
</a>
|
|
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
|
|
Github
|
|
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-github"></use>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="tiny-masonry">
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>1</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>2</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>3</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>4</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>5</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>6</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>7</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>8</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>9</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>10</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>11</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>12</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>13</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>14</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>15</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>16</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>17</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>18</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>19</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>20</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>21</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>22</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>23</span></div></div>
|
|
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>24</span></div></div>
|
|
</div>
|
|
<script defer src="/example.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|