art/index.html at master · NodeBE4/art · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
---
layout: default
---

<style>
img{
  /*max-width:100%;  */
  object-fit: cover;
}

.page{ width: auto; max-width: 100% ; display: inline-flex; float: left; text-align: center; vertical-align: middle; overflow: hidden; object-fit: cover;   position: relative;}
{ padding:0;display: flow-root;}

.page:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.page img{
  -webkit-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}
.page:nth-child(even) {
    height: 438px;
}
.page:nth-child(odd) {
    height: 438px;
}
.page:nth-child(odd) .box_data{ background:rgba(0,0,0,0.17) }
.page:nth-child(even) .box_data{ background:rgba(0,44,255,0.27) }
.box_data{ position:absolute; top: 0; left: 0; right:0; bottom:0; color:#fff;}
.box_data span{ position:absolute; top: 50%; transform: translateY(-50%); left:0 ; right:0; font-size:48px;}
.page:hover .box_data{ background:rgba(255,0,39,0.55)}
</style>

<div class="row">
  {% assign counter = 0 %}
  {% for post in paginator.posts %}
  <div class="col-sm align-items-center page">
    <a href="{{ site.baseurl }}{{ post.url }}"><img src="https://picsum.photos/300/70{{ counter }}/?random"  style="object-fit: cover;">
    <div class="box_data">
      <span>{{ post.title }}</span>
    </div></a>
  </div>
  {% assign counter = counter | plus: 1 %}
  {% endfor %}
</div>

<div style="text-align: center">
到<a href="https://github.com/NodeBE4/art/issues/new/choose">这里</a>添加您喜欢的内容(需要github帐号)
</div>