🎨

src/client/app/common/views/components/page-preview.vue

@@ -1,5 +1,5 @@
 <template>
-<router-link :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<router-link :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
 	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
@@ -32,16 +32,13 @@ export default Vue.extend({
 	display block
 	overflow hidden
 	width 100%
-	background var(--face)
+	border solid var(--lineWidth) var(--urlPreviewBorder)
+	border-radius 4px
+	overflow hidden
 
-	&.round
+	&:hover
-		border-radius 8px
+		text-decoration none
-
+		border-color var(--urlPreviewBorderHover)
-	&.shadow
-		box-shadow 0 4px 16px rgba(#000, 0.1)
-
-		@media (min-width 500px)
-			box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	> .thumbnail
 		position absolute

src/client/app/common/views/pages/pages.vue

@@ -7,7 +7,7 @@
 			<sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages">
 				<x-page-preview v-for="page in pages" class="page" :page="page" :key="page.id"/>
 			</sequential-entrance>
-			<ui-button v-if="existMore" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
+			<ui-button v-if="existMore" @click="fetchMore()" style="margin-top:16px;">{{ $t('@.load-more') }}</ui-button>
 		</div>
 	</ui-container>
 
@@ -133,11 +133,11 @@ export default Vue.extend({
 	> .new
 		margin-bottom 16px
 
-	> * > .page
+	> * > .page:not(:last-child)
 		margin-bottom 8px
 
 	@media (min-width 500px)
-		> * > .page
+		> * > .page:not(:last-child)
 			margin-bottom 16px
 
 </style>