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

112
layout/layout.ftl
View File

@ -67,13 +67,13 @@
<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">
<#-- <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"> <#include "./plugin/style.theme.ftl">
<#if post??> <#if post??>
<#-- <link rel="stylesheet" type="text/css"--> <#-- <link rel="stylesheet" type="text/css"-->
<#-- href="${static!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css"/>--> <#-- href="${static!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css"/>-->
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="${static!}/source/lib/prism/css/prism.css"/> href="${static!}/source/lib/prism/css/prism.css"/>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="${static!}/source/lib/prism/css/prism-line-numbers.css"/> href="${static!}/source/lib/prism/css/prism-line-numbers.css"/>
<script type="text/javascript" src="${static!}/source/lib/prism/js/prism.js"></script> <script type="text/javascript" src="${static!}/source/lib/prism/js/prism.js"></script>
@ -86,60 +86,68 @@
</head> </head>
<body class="is-3-column"> <body class="is-3-column">
<@navbar 'page' /> <@navbar 'page' />
<section class="section"> <div class="card-normal">
<div class="container"> <section class="section">
<div class="columns"> <div class="container">
<#if post?? > <div class="columns">
<#if settings.share_type !=''> <#if post?? >
<@module 'share' /> <#if is_post??>
</#if> <#if settings.share_type !=''>
<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"> <@module 'share' />
<#nested /> </#if>
</div> <div class="column is-12-tablet is-8-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
<@widget 'right' /> <#nested />
<#else > </div>
<#if is_index??> <@widget 'right' />
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main" <#elseif is_sheet??>
style="margin-left: 10px"> <div class="column is-12-tablet is-12-desktop is-12-widescreen is-12-fullhd has-order-2 column-main">
<div class="columns"> <#nested />
<div class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main"> </div>
<#-- 判断是否已经有置顶文章--> </#if>
<#list posts.content as post> <#else >
<#if post.topPriority == 1> <#if is_index??>
<#assign isTop = 'yes'> <div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
<#break> style="margin-left: 10px">
</#if> <div class="columns">
</#list> <div class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
<#if isTop??> <#-- 判断是否已经有置顶文章-->
<div class="level"> <#list posts.content as post>
<#-- <#include "./common/widget_pin.ftl">--> <#if post.topPriority == 1>
<@module 'slider' /> <#assign isTop = 'yes'>
</div> <#break>
</#if> </#if>
<div class="level"> </#list>
<div class="columns"> <#if isTop??>
<div class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main"> <div class="level">
<#nested /> <#-- <#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> </div>
<@widget 'right' />
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> <@widget 'left' />
<@widget 'left' /> <#else>
<#else> <div class="column is-12-tablet is-8-desktop is-6-widescreen is-6-fullhd has-order-2 column-main">
<div class="column is-12-tablet is-8-desktop is-6-widescreen is-6-fullhd has-order-2 column-main"> <#nested />
<#nested /> </div>
</div> <@widget 'left' />
<@widget 'left' /> <@widget 'right' />
<@widget 'right' /> </#if>
</#if> </#if>
</#if> </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>

116
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 is-multiline" id="view_${item.team}">
<div class="columns <#list item.photos as photo>
is-mobile is-4-tablet is-1-desktop is-1-widescreen is-6-fullhd <div class="column is-one-quarter-desktop is-half-tablet">
columns is-mobile is-multiline " > <div class="card" style="height: 100%">
<#list item.photos as photo> <div class="card-image">
<div class="column is-one-quarter aniimated-thumbnials"> <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>
</#list> </div>
</div> </#list>
</#list> </div>
</@photoTag> </#list>
</div>
</@photoTag>
</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,42 +81,62 @@
<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">
mode: 'lg-slide', <#list teams as item>
cssEasing: 'ease', views.push('view_${item.team}')
speed: 500, </#list>
thumbnail: true, </@photoTag>
animateThumb: true, views.forEach(function (value) {
showThumbByDefault: true, var lg = document.getElementById((value));
autoplay: true, lightGallery(document.getElementById((value)), {
progressBar: true, mode: 'lg-slide',
selector: '.show' cssEasing: 'ease',
}); speed: 500,
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
autoplay: true,
progressBar: true,
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%;

52
source/css/style.styl
View File

@ -65,34 +65,40 @@ 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)
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) @media screen and (max-width: screen-tablet)
.card-image .card-image
img img
height: 80% !important 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 img.thumbnail
object-fit: cover object-fit: cover