style: optimize friends link page
This commit is contained in:
parent
46280023c6
commit
0dbc6643f1
|
@ -12,8 +12,8 @@
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="name"><%= f.name %></div>
|
<div class="name ellipsis"><%= f.name %></div>
|
||||||
<div class="description"><%= f.description %></div>
|
<div class="description ellipsis"><%= f.description %></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
$friend-link-item-height = 82px;
|
$friend-link-item-height = 82px;
|
||||||
|
$friend-link-item-height-tablet = 68px;
|
||||||
$friend-link-item-interval = 16px;
|
$friend-link-item-interval = 16px;
|
||||||
$friend-link-item-border-radius = 6px;
|
$friend-link-item-border-radius = 6px;
|
||||||
|
|
||||||
|
@ -17,6 +18,7 @@ $friend-link-item-border-radius = 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (hexo-config('menu.Links')) {
|
if (hexo-config('menu.Links')) {
|
||||||
.friends-link-container {
|
.friends-link-container {
|
||||||
|
|
||||||
|
@ -32,6 +34,10 @@ $friend-link-item-border-radius = 6px;
|
||||||
height: $friend-link-item-height;
|
height: $friend-link-item-height;
|
||||||
padding-bottom: $friend-link-item-interval;
|
padding-bottom: $friend-link-item-interval;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
height: $friend-link-item-height-tablet;
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
padding-right: $friend-link-item-interval * 0.5;
|
padding-right: $friend-link-item-interval * 0.5;
|
||||||
}
|
}
|
||||||
|
@ -48,6 +54,11 @@ $friend-link-item-border-radius = 6px;
|
||||||
border-radius: $friend-link-item-border-radius;
|
border-radius: $friend-link-item-border-radius;
|
||||||
padding-left: $friend-link-item-height - $friend-link-item-interval;
|
padding-left: $friend-link-item-height - $friend-link-item-interval;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
padding-left: $friend-link-item-height-tablet - $friend-link-item-interval;
|
||||||
|
}
|
||||||
|
|
||||||
transition();
|
transition();
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -72,6 +83,10 @@ $friend-link-item-border-radius = 6px;
|
||||||
background: var(--second-background-color);
|
background: var(--second-background-color);
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
width: $friend-link-item-height-tablet - $friend-link-item-interval;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -91,10 +106,18 @@ $friend-link-item-border-radius = 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-items: flex-start;
|
justify-items: flex-start;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
font-size: 1.28rem;
|
font-size: 1.28rem;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
font-size: 1.08rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
@ -102,10 +125,18 @@ $friend-link-item-border-radius = 6px;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--third-text-color);
|
color: var(--third-text-color);
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue