Bitcron主题「花白」

!Warning
特别声明：本博客公开的所有模板及其源代码，一律禁止肖战团队及其粉丝使用。
这并不是一个正式主题，需要在源码上进行修改，建议熟悉Bitcron模板语言的朋友进行魔改后使用。

关于「花白」

……中文就不用问了当然是因为花归葬！嗐！

英文Fluquor是Onoken的一首曲子的歌题，这个词的来历官方说法是这样的：

タイトルの"Fluquor"とは、花の"fleur"と結晶の"quartz"を掛け合わせ「雪の結晶」を表現した造語。読み方は｢フルクオール｣。
标题“Fluquor”，是由花“fleur”与结晶“quartz”复合而来，表达“雪的结晶”之意的自造词，读作“フルクオール”。

就正好是由花而来又代表雪，嗐，就跟花白的名字一样一样。

这歌儿我和暗暗在打完花花后偶然发现，然后被歌词暴击了很久……北风那个吹眼泪那个流啊……

我发现我每次写新主题都是为了我的头图……上次写盘子皿也是因为要适配斑马给我画的头图。至于现在这张，虽然这张头图以前也用过，可能有朋友见过那个我三月份还是四月份写的主题，主页进来就是这张图……那个主题在我本地文件夹里被叫做“Hana”（はな，花），但因为当时觉得没什么新意就没给它开源掉……结果就是我现在想找但是一行代码都找不到了！我到底丢到哪个Backup里去了！

这个故事告诉我们，珍爱心血，积极开源。呜呜呜呜呜。

有这个教训以后我决定写一个开一个……嗐，谁知道你什么时候又会想抄一段儿呢！

因为糕糕的这张图是正方形的，主题皿的长条状的Header就非常影响观看，所以一直想写个新的但一直没啥灵感←然后在我在微博上说完这话以后十分钟以内我突然就想到了干脆做两栏，最后决定右侧一整栏都给它，嘿嘿。

做了很多新尝试，包括开始写劣质js了（……）总体来说还是挺喜欢的一个主题——从21世纪第一个十年开始上网的人都无法拒绝两栏模式！（掷地有声）

一些特点

0.1em的文字间隔

看起来更优雅了。

缺点就是为了首行缩进从原本的2em要变成2.2em了，要在Dashboard里做相应的调整。

更顺滑的移动端自适应

其实是用了jQuery的Fade效果，非常好用真诚向大家推荐。

原本的loading页淡出也改成了使用FadeOut控制，更简洁了。

不过需要注意：Fade效果的js与样式transition有冲突，需要Fade效果的类上请不要写transition属性。

示例代码：

script.                                                                 //控制移动端菜单淡入淡出
    $(document).ready(function(){
    $(".icono-hamburger").click(function(){
    $(".sp-menu").fadeToggle(500);
    $(".wrapper").fadeToggle(500);
    $("footer").fadeToggle(500);
    });
    });
    
script.                                                                 //控制Loading页面加载完成后淡出
    $(window).load(function(){
    $(".loader").fadeOut("slow");
    });

简单但好看的Loading页

虽然做起来挺简单的，就是一个雪花的svg加上了animation；然后因为是白底黑字了就把字体设成最细，符合雪花轻盈的印象。

img {
    max-width: 50px;
    margin: 1em;
    animation: lds-dual-ring 5s linear infinite;
}

移动端首页图片渐变效果

嗐！就是加了个滤镜……

套了三层div，由内到外，第一层的Background是图片，第二层的Background是一个白色到透明的渐变，这两层复合得到一个下方渐变为白色的div，然后在第二层上设置混合模式，与第一层混合就行啦！

具体的混合模式都是什么意思，其实大家会PS的都知道怎么操作……

 .sc-main {
    background: #eeeeee;
    .sc-visual {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255));
        mix-blend-mode: color-burn;
        .bg-img {
            mix-blend-mode: overlay;
        }
    }
}

长表格滚动展示

其实也没啥，就是长表格在窄div的时候会溢出，直接给overflow似乎不起作用（但很神秘的是我用皿那个主题的时候直接给又可以！可能还有别的什么设置项没抄过来），于是两行js给所有表格外面套了个div给溢出设置了。

这个我想要不要反映给Hepo让Bitcron自带，毕竟连toc和图片外面都套了div，按说表格套个div也很合理……

其他就是一些CSS细节上的问题了，小海龙依旧非常给力地帮我处理了很多细节问题，非常感谢！

因为估计还要持续更新优化所以就不写Log了！反正也不是什么很正式的主题……先这样吧！要是有人用的时候再遇到什么问题下面留言就好啦！

预览

我的主题集

古川政良的Bitcron主题集