jinql
/
halo-theme-fantastic
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

调整细节

v1.2.0
kun.peng 2019-10-16 23:25:57 +08:00
parent 6c54da5b8d
commit f01744217c
5 changed files with 178 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
layout/layout.ftl
View File

@ -86,17 +86,24 @@
</head> </head>
<body class="is-3-column"> <body class="is-3-column">
<@navbar 'page' /> <@navbar 'page' />
<div class="card-normal">
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<#if post?? > <#if post?? >
<#if is_post??>
<#if settings.share_type !=''> <#if settings.share_type !=''>
<@module 'share' /> <@module 'share' />
</#if> </#if>
<div class="column is-12-tablet <#if is_sheet?? || settings.share_type != ''>is-9-desktop<#else>is--desktop</#if> is-8-widescreen is-8-fullhd has-order-2 column-main"> <div class="column is-12-tablet is-8-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
<#nested /> <#nested />
</div> </div>
<@widget 'right' /> <@widget 'right' />
<#elseif is_sheet??>
<div class="column is-12-tablet is-12-desktop is-12-widescreen is-12-fullhd has-order-2 column-main">
<#nested />
</div>
</#if>
<#else > <#else >
<#if is_index??> <#if is_index??>
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main" <div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
@ -140,6 +147,7 @@
</div> </div>
</div> </div>
</section> </section>
</div>
<#include "common/footer.ftl"> <#include "common/footer.ftl">
<#include "common/scripts.ftl"> <#include "common/scripts.ftl">
<#include "search/local.ftl"> <#include "search/local.ftl">

2
layout/widget/tagcloud.ftl
View File

@ -6,7 +6,7 @@
标签云 标签云
</h3> </h3>
<#list tags as tag> <#list tags as tag>
<a href="${context!}/tags/${tag.slugName!}" style="font-size:<#if tag.name?length gt 7> ${tag.postCount+(tag.name?length)}<#else>${tag.postCount+(tag.name?length)*3}</#if>px">${tag.name!}</a> <a href="${context!}/tags/${tag.slugName!}" style="font-size:<#if tag.name?length gt 7> ${tag.postCount+(tag.name?length)}<#else>${tag.postCount+(tag.name?length)*2}</#if>px">${tag.name!}</a>
</#list> </#list>
</div> </div>
</div> </div>

74
photos.ftl
View File

@ -27,15 +27,12 @@
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.4.1/css/all.css"> <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">
<#include "layout/plugin/style.theme.ftl"> <#include "layout/plugin/style.theme.ftl">
<link rel="stylesheet" <link rel="stylesheet"
href="//cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css"> href="//cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">
<#-- <script src="//cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>-->
<link rel="stylesheet" href="${static!}/source/css/style.css"> <link rel="stylesheet" href="${static!}/source/css/style.css">
<link rel="stylesheet" href="${static!}/source/css/bundle.css"> <link rel="stylesheet" href="${static!}/source/css/bundle.css">
<link rel="stylesheet" href="${static!}/source/css/back-to-top.css"> <link rel="stylesheet" href="${static!}/source/css/back-to-top.css">
@ -44,24 +41,37 @@
<body class="is-3-column"> <body class="is-3-column">
<@navbar 'page' /> <@navbar 'page' />
<section class="section photos"> <section class="section photos">
<div class="container" id="aniimated-thumbnials">
<@photoTag method="listTeams"> <@photoTag method="listTeams">
<#list teams as item> <#list teams as item>
<h3 class="level title is-3">${item.team}</h3> <h3 class="level title is-3">${item.team}</h3>
<div class="columns <div class="columns is-multiline" id="view_${item.team}">
is-mobile is-4-tablet is-1-desktop is-1-widescreen is-6-fullhd
columns is-mobile is-multiline " >
<#list item.photos as photo> <#list item.photos as photo>
<div class="column is-one-quarter aniimated-thumbnials"> <div class="column is-one-quarter-desktop is-half-tablet">
<div class="card" style="height: 100%">
<div class="card-image">
<figure class="image">
<a href="${photo.url}" class="show" > <a href="${photo.url}" class="show" >
<img src="${photo.thumbnail}" alt="" > <img src="${photo.thumbnail}" alt="" >
</a> </a>
</figure>
<#-- <div class="card-content is-overlay is-clipped">-->
<#-- <span class="tag is-info">-->
<#-- ${photo.name}-->
<#-- </span>-->
<#-- </div>-->
</div>
<#-- <footer class="card-footer">-->
<#-- <a class="card-footer-item">-->
<#-- ${photo.name}-->
<#-- </a>-->
<#-- </footer>-->
</div>
</div> </div>
</#list> </#list>
</div> </div>
</#list> </#list>
</@photoTag> </@photoTag>
</div>
</section> </section>
<#include "./layout/common/footer.ftl"> <#include "./layout/common/footer.ftl">
<#include "./layout/plugin/back-to-top.ftl"> <#include "./layout/plugin/back-to-top.ftl">
@ -71,8 +81,15 @@
<script src="${static!}/source/lib/lg/js/lg-thumbnail.min.js"></script> <script src="${static!}/source/lib/lg/js/lg-thumbnail.min.js"></script>
<script src="${static!}/source/lib/lg/js/lg-fullscreen.min.js"></script> <script src="${static!}/source/lib/lg/js/lg-fullscreen.min.js"></script>
<script> <script>
var lg = document.getElementById('aniimated-thumbnials'); var views = []
lightGallery(lg, { <@photoTag method="listTeams">
<#list teams as item>
views.push('view_${item.team}')
</#list>
</@photoTag>
views.forEach(function (value) {
var lg = document.getElementById((value));
lightGallery(document.getElementById((value)), {
mode: 'lg-slide', mode: 'lg-slide',
cssEasing: 'ease', cssEasing: 'ease',
speed: 500, speed: 500,
@ -83,30 +100,43 @@
progressBar: true, progressBar: true,
selector: '.show' selector: '.show'
}); });
})
</script> </script>
<style> <style>
#aniimated-thumbnials a { .card {
display: block; height: 100%;
padding: 1rem;
border-radius: 2px;
} }
.card-image {
#aniimated-thumbnials a {
height: 100%; height: 100%;
} }
#aniimated-thumbnials a:hover img { .image {
height: 100%;
padding: 5px;
}
.image img{
height: 100%;
}
#animated-thumbnail a {
display: block;
padding: 5px;
border-radius: 2px;
}
#animated-thumbnail a {
height: 100%;
}
#animated-thumbnail a:hover img {
transform: scale(1.01); transform: scale(1.01);
} }
#aniimated-thumbnials a img { #animated-thumbnail a img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 2px; border-radius: 2px;
} }
.photos .container {
padding: 1rem;
}
</style> </style>
</html> </html>

26
source/css/style.css
View File

@ -69,22 +69,31 @@ textarea {
.card { .card {
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
@media screen and (max-width: 769px) {
.card-image img {
height: 80% !important;
}
}
.card-normal .card {
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
display: flex; display: flex;
} }
.card + .card, .card-normal .card + .card,
.card + .column-right-shadow { .card-normal .card + .column-right-shadow {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.card.card-transparent { .card-normal .card.card-transparent {
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
} }
.card .card-image { .card-normal .card .card-image {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
flex: 8; flex: 8;
} }
.card .card-image img { .card-normal .card .card-image img {
max-height: 150px; max-height: 150px;
top: 50%; top: 50%;
transform: translateX(-5%) translateY(-50%); transform: translateX(-5%) translateY(-50%);
@ -92,15 +101,10 @@ textarea {
border-radius: 2px; border-radius: 2px;
box-shadow: 3px 4px 12px 0 rgba(0,0,0,0.2); box-shadow: 3px 4px 12px 0 rgba(0,0,0,0.2);
} }
.card .card-content { .card-normal .card .card-content {
flex: 12; flex: 12;
padding: 1rem; padding: 1rem;
} }
@media screen and (max-width: 769px) {
.card-image img {
height: 80% !important;
}
}
img.thumbnail { img.thumbnail {
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;

14
source/css/style.styl
View File

@ -65,6 +65,16 @@ body, button, input, select, textarea
border-radius: 2px border-radius: 2px
//box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1) //box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
@media screen and (max-width: screen-tablet)
.card-image
img
height: 80% !important
.card-normal
.card
border-radius: 2px
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
display: flex; display: flex;
& + .card, & + .card,
& + .column-right-shadow & + .column-right-shadow
@ -88,10 +98,6 @@ body, button, input, select, textarea
.card-content .card-content
flex: 12 flex: 12
padding: 1rem padding: 1rem
@media screen and (max-width: screen-tablet)
.card-image
img
height: 80% !important
img.thumbnail img.thumbnail