调整细节
kun.peng
parent
6c54da5b8d
commit
f01744217c
|
|
@ -67,13 +67,13 @@
|
|||
<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/back-to-top.css">
|
||||
<#-- <link rel="stylesheet" href="${static!}/source/css/style.theme.css">-->
|
||||
<#-- <link rel="stylesheet" href="${static!}/source/css/style.theme.css">-->
|
||||
<#include "./plugin/style.theme.ftl">
|
||||
<#if post??>
|
||||
<#-- <link rel="stylesheet" type="text/css"-->
|
||||
<#-- href="${static!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css"/>-->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="${static!}/source/lib/prism/css/prism.css"/>
|
||||
<#-- <link rel="stylesheet" type="text/css"-->
|
||||
<#-- href="${static!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css"/>-->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="${static!}/source/lib/prism/css/prism.css"/>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="${static!}/source/lib/prism/css/prism-line-numbers.css"/>
|
||||
<script type="text/javascript" src="${static!}/source/lib/prism/js/prism.js"></script>
|
||||
|
|
@ -86,60 +86,68 @@
|
|||
</head>
|
||||
<body class="is-3-column">
|
||||
<@navbar 'page' />
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<#if post?? >
|
||||
<#if settings.share_type !=''>
|
||||
<@module 'share' />
|
||||
</#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">
|
||||
<#nested />
|
||||
</div>
|
||||
<@widget 'right' />
|
||||
<#else >
|
||||
<#if is_index??>
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<#-- 判断是否已经有置顶文章-->
|
||||
<#list posts.content as post>
|
||||
<#if post.topPriority == 1>
|
||||
<#assign isTop = 'yes'>
|
||||
<#break>
|
||||
</#if>
|
||||
</#list>
|
||||
<#if isTop??>
|
||||
<div class="level">
|
||||
<#-- <#include "./common/widget_pin.ftl">-->
|
||||
<@module 'slider' />
|
||||
</div>
|
||||
</#if>
|
||||
<div class="level">
|
||||
<div class="columns">
|
||||
<div class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#nested />
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<#if post?? >
|
||||
<#if is_post??>
|
||||
<#if settings.share_type !=''>
|
||||
<@module 'share' />
|
||||
</#if>
|
||||
<div class="column is-12-tablet is-8-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#nested />
|
||||
</div>
|
||||
<@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 >
|
||||
<#if is_index??>
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<#-- 判断是否已经有置顶文章-->
|
||||
<#list posts.content as post>
|
||||
<#if post.topPriority == 1>
|
||||
<#assign isTop = 'yes'>
|
||||
<#break>
|
||||
</#if>
|
||||
</#list>
|
||||
<#if isTop??>
|
||||
<div class="level">
|
||||
<#-- <#include "./common/widget_pin.ftl">-->
|
||||
<@module 'slider' />
|
||||
</div>
|
||||
</#if>
|
||||
<div class="level">
|
||||
<div class="columns">
|
||||
<div class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#nested />
|
||||
</div>
|
||||
<@widget 'right' />
|
||||
</div>
|
||||
<@widget 'right' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<@widget 'left' />
|
||||
<#else>
|
||||
<div class="column is-12-tablet is-8-desktop is-6-widescreen is-6-fullhd has-order-2 column-main">
|
||||
<#nested />
|
||||
</div>
|
||||
<@widget 'left' />
|
||||
<@widget 'right' />
|
||||
<@widget 'left' />
|
||||
<#else>
|
||||
<div class="column is-12-tablet is-8-desktop is-6-widescreen is-6-fullhd has-order-2 column-main">
|
||||
<#nested />
|
||||
</div>
|
||||
<@widget 'left' />
|
||||
<@widget 'right' />
|
||||
</#if>
|
||||
</#if>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<#include "common/footer.ftl">
|
||||
<#include "common/scripts.ftl">
|
||||
<#include "search/local.ftl">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
标签云
|
||||
</h3>
|
||||
<#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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
116
photos.ftl
116
photos.ftl
|
|
@ -27,15 +27,12 @@
|
|||
|
||||
<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="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">
|
||||
<#include "layout/plugin/style.theme.ftl">
|
||||
|
||||
|
||||
<link rel="stylesheet"
|
||||
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/bundle.css">
|
||||
<link rel="stylesheet" href="${static!}/source/css/back-to-top.css">
|
||||
|
|
@ -44,24 +41,37 @@
|
|||
<body class="is-3-column">
|
||||
<@navbar 'page' />
|
||||
<section class="section photos">
|
||||
<div class="container" id="aniimated-thumbnials">
|
||||
<@photoTag method="listTeams">
|
||||
<#list teams as item>
|
||||
<h3 class="level title is-3">${item.team}</h3>
|
||||
<div class="columns
|
||||
is-mobile is-4-tablet is-1-desktop is-1-widescreen is-6-fullhd
|
||||
columns is-mobile is-multiline " >
|
||||
<#list item.photos as photo>
|
||||
<div class="column is-one-quarter aniimated-thumbnials">
|
||||
<a href="${photo.url}" class="show">
|
||||
<img src="${photo.thumbnail}" alt="">
|
||||
</a>
|
||||
<@photoTag method="listTeams">
|
||||
<#list teams as item>
|
||||
<h3 class="level title is-3">${item.team}</h3>
|
||||
<div class="columns is-multiline" id="view_${item.team}">
|
||||
<#list item.photos as photo>
|
||||
<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" >
|
||||
<img src="${photo.thumbnail}" alt="" >
|
||||
</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>
|
||||
</#list>
|
||||
</div>
|
||||
</#list>
|
||||
</@photoTag>
|
||||
</div>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</#list>
|
||||
|
||||
</@photoTag>
|
||||
</section>
|
||||
<#include "./layout/common/footer.ftl">
|
||||
<#include "./layout/plugin/back-to-top.ftl">
|
||||
|
|
@ -71,42 +81,62 @@
|
|||
<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>
|
||||
var lg = document.getElementById('aniimated-thumbnials');
|
||||
lightGallery(lg, {
|
||||
mode: 'lg-slide',
|
||||
cssEasing: 'ease',
|
||||
speed: 500,
|
||||
thumbnail: true,
|
||||
animateThumb: true,
|
||||
showThumbByDefault: true,
|
||||
autoplay: true,
|
||||
progressBar: true,
|
||||
selector: '.show'
|
||||
});
|
||||
var views = []
|
||||
<@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',
|
||||
cssEasing: 'ease',
|
||||
speed: 500,
|
||||
thumbnail: true,
|
||||
animateThumb: true,
|
||||
showThumbByDefault: true,
|
||||
autoplay: true,
|
||||
progressBar: true,
|
||||
selector: '.show'
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#aniimated-thumbnials a {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 2px;
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#aniimated-thumbnials a {
|
||||
.card-image {
|
||||
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);
|
||||
}
|
||||
|
||||
#aniimated-thumbnials a img {
|
||||
#animated-thumbnail a img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.photos .container {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -69,22 +69,31 @@ textarea {
|
|||
.card {
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
.card + .card,
|
||||
.card + .column-right-shadow {
|
||||
.card-normal .card + .card,
|
||||
.card-normal .card + .column-right-shadow {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.card.card-transparent {
|
||||
.card-normal .card.card-transparent {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
.card .card-image {
|
||||
.card-normal .card .card-image {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
flex: 8;
|
||||
}
|
||||
.card .card-image img {
|
||||
.card-normal .card .card-image img {
|
||||
max-height: 150px;
|
||||
top: 50%;
|
||||
transform: translateX(-5%) translateY(-50%);
|
||||
|
|
@ -92,15 +101,10 @@ textarea {
|
|||
border-radius: 2px;
|
||||
box-shadow: 3px 4px 12px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
.card .card-content {
|
||||
.card-normal .card .card-content {
|
||||
flex: 12;
|
||||
padding: 1rem;
|
||||
}
|
||||
@media screen and (max-width: 769px) {
|
||||
.card-image img {
|
||||
height: 80% !important;
|
||||
}
|
||||
}
|
||||
img.thumbnail {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -65,34 +65,40 @@ body, button, input, select, textarea
|
|||
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 1px 2px 0 rgba(0, 0, 0, .05)
|
||||
display: flex;
|
||||
& + .card,
|
||||
& + .column-right-shadow
|
||||
margin-top: 1.5rem
|
||||
&.card-transparent
|
||||
box-shadow: none
|
||||
background: transparent
|
||||
.card-image
|
||||
//overflow: hidden
|
||||
border-top-left-radius: 4px
|
||||
border-top-right-radius: 4px
|
||||
flex: 8
|
||||
img
|
||||
//height: 80%
|
||||
max-height 150px
|
||||
top: 50%
|
||||
transform: translateX(-5%) translateY(-50%)
|
||||
position: relative
|
||||
border-radius: 2px
|
||||
box-shadow: 3px 4px 12px 0 rgba(0, 0, 0, .2)
|
||||
.card-content
|
||||
flex: 12
|
||||
padding: 1rem
|
||||
|
||||
@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;
|
||||
& + .card,
|
||||
& + .column-right-shadow
|
||||
margin-top: 1.5rem
|
||||
&.card-transparent
|
||||
box-shadow: none
|
||||
background: transparent
|
||||
.card-image
|
||||
//overflow: hidden
|
||||
border-top-left-radius: 4px
|
||||
border-top-right-radius: 4px
|
||||
flex: 8
|
||||
img
|
||||
//height: 80%
|
||||
max-height 150px
|
||||
top: 50%
|
||||
transform: translateX(-5%) translateY(-50%)
|
||||
position: relative
|
||||
border-radius: 2px
|
||||
box-shadow: 3px 4px 12px 0 rgba(0, 0, 0, .2)
|
||||
.card-content
|
||||
flex: 12
|
||||
padding: 1rem
|
||||
|
||||
|
||||
img.thumbnail
|
||||
object-fit: cover
|
||||
|
|
|
|||
Loading…
Reference in New Issue