Aero Glass 版式




≡

评分: +66+–x

评分: +66+–x

著作信息

作者：MercuresphereMercuresphere

本页面中所用到的背景图片：

主背景：来自今夜太阳入眠，唯尔独逐梦神 ，https://www.pexels.com/zh-cn/photo/4073994/

雨：https://pixabay.com/images/id-3524800/

翠玉都、紫罗兰、浮空都市、记忆监视器：使用Midjourney自制，CC-BY-SA 3.0

评分: +66+–x

主题颜色

Sui-gyou--gray-monochrome(38, 34, 66)
Mon-chien--bright-accent(203, 219, 250)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}
{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

关于本页

这是 MercuresphereMercuresphere 设计的美学版式，名称和主要设计灵感来自于Windows 7的默认用户界面：Aero Glass。

类似单色型 版式，这个版式不仅仅只有一种配色方案，而是为你提供了一个有着高扩展性的版式框架，你可以根据你的喜好，制作属于你自己的Aero Glass版式。（详见“DIY”一节）

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:aero-glass]]

示例

basalt_logotype_darkmode.png

SCP基金会

可通过 5 个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建

在两年之前的那个晚上，不眠者之家里的众人正在开办着每晚一次的豪华舞会，就像身在格里鲍耶陀夫之家的海盗船上那样，随后他们等来了他们的流浪客。他们，包括不速之客自己一开始都以为自己只是普通的不舒服而已，只是普普通通的吐出来就好了。

随后，他们看到了眼前的来人——这位在不眠者当中最为冷静和知性的唯一的成年人沉浸在癫狂当中，一边语无伦次地大喊着，一边疯狂地想用指甲抓破自己的头盖骨。他们并不知道，这动作是她如同正在沸腾的大脑的热辐射，而辐射源是被困于她的头盖骨当中无处可走，只能不断地在她的大脑当中翻涌的记忆。下一刻，她在她的幻觉当中，看到了无数红色、绿色、蓝色的像素色块从她的头盖骨上刚刚自己戳破的孔洞当中像喷泉一样喷出，而那些R、G、B的颜色再在惊骇的观众的眼中以253、212、203的比例调配成完美而均匀，上下波动不超过10%的粉红色。她终于得到解放了。以其他人的噩梦从此开始作为交换。

——《实用主义的孩子们》

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

一条分割线

嵌套引用块1

这是 表格
你应该老早 就知道怎么
做这个了吧

正文字体为 Noto Sans SC
页眉与标题字体为 Work Sans。
等宽字为 Fira Code。

+ 显示代码

DIY

通过在[[include]]之后额外引入如下格式的代码，你可以非常简单地制作属于自己的Aero Glass版式：

[[module CSS]]
:root {
    --title: " SCP基金会";  /* 修改此变量来改变页眉标题 */
    --subtitle: " 控制 • 收容 • 保护";  /* 修改此变量来改变页眉副标题 */
    --logo: url(https://evernight-aquarium.wdfiles.com/local--files/files/basalt_logotype_darkmode.png);  /* 修改此变量来改变页眉logo */
 
    --gray-monochrome: 38, 34, 66;  /* 修改此变量来改变版式的主题颜色 */
    --dark-gray-monochrome: 29, 26, 56;  /* 副主题颜色，此变量应与主题颜色色相一致而亮度稍暗 */
 
    --bright-accent: 203, 219, 250; /* 修改此变量来改变链接颜色 */
    --pale-accent: 255, 75, 255; /* 修改此变量来改变鼠标移到链接上时的链接颜色 */
    --newpage-color: 238, 212, 255;  /* 修改此变量来改变指向不存在的页面的链接颜色 */
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/moirecity.jpg);  /* 修改此变量来改变背景图 */
 
    --main-aero-glass-filter: blur(7px) brightness(1);  /* 此变量为“主界面滤镜”，如果你选择的背景图较亮，可能会使得白色文字难以辨认，这时你可以通过减少brightness的值来降低主界面亮度。 */
}
[[/module]]

这里是一些已经制作好，可供参考以及随意取用的预设：

006Vtzrtly1h5zpqi69i7j31h30qpb29.jpg
[[module CSS]]
 
/* ===Preset: Polis Smaragdina=== */
 
:root {
    --gray-monochrome: 41, 127, 128;
    --dark-gray-monochrome: 0, 35, 29;
 
    --pale-accent: 136, 198, 201;
    --bright-accent: 140, 234, 222;
    --newpage-color: 150, 235, 150;
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c16aqnlzj31kw0w0tg1.jpg);
    --main-aero-glass-filter: blur(7px) brightness(0.5);
}
 
[[/module]]
006Vtzrtly1h5zpqhuv86j31h30qp7je.jpg
[[module CSS]]
 
/* ===Preset: Rain=== */
 
:root {
    --pale-gray-monochrome: 241, 241, 241;
    --very-light-gray-monochrome: 221, 221, 221;
    --light-gray-monochrome: 70, 130, 183;
 
    --gray-monochrome: 114,114,114;
    --dark-gray-monochrome: 29,29,29;
 
    --pale-accent: 255,255,255;
    --bright-accent: 163, 162, 160;
    --newpage-color: 120, 120, 120;
 
    --background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.9) 100%), url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c19qmfabj30zk0npqc1.jpg);
 
    --main-aero-glass-filter: blur(7px);
}
 
[[/module]]
006Vtzrtly1h5zpru74h1j31hc0qpe81.jpg
[[module CSS]]
 
/* ===Preset: Violet=== */
 
:root {
    --gray-monochrome: 43, 14, 116;
    --dark-gray-monochrome: 41, 26, 91;
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c18ua5xfj31kw0w07c4.jpg);
    --main-aero-glass-filter: blur(7px) brightness(0.35);
}
 
[[/module]]
006Vtzrtly1h6es10dz75j31hb0qpe81.jpg
[[module CSS]]
 
/* ===Preset: Cloud=== */
 
:root {
    --gray-monochrome: 101,141,160;
    --dark-gray-monochrome: 7,48,78;
 
    --bright-accent: 127, 211, 255;
    --pale-accent: 206,237,254;
    --newpage-color: 129, 245, 254;
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6eqotlggrj31h20ubajo.jpg);
    --main-aero-glass-filter: blur(7px) brightness(0.6);
}
 
[[/module]]
006Vtzrtly1h6erz1nxmfj31hb0qpkjl.jpg
[[module CSS]]
 
/* ===Preset: Memory Monitor=== */
 
:root {
    --gray-monochrome: 158,181,181;
    --dark-gray-monochrome: 33,53,53;
 
    --pale-accent: 204,109,255;
    --bright-accent: 233,209,255;
    --newpage-color: 203, 219, 250;
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6erc7w34xj31kw0w0157.jpg);
    --main-aero-glass-filter: blur(7px) brightness(0.65);
}
 
[[/module]]

以下是大家投稿的优秀预设：

006Vtzrtly1h6qy2tqsscj31h20qpb29.jpg
[[module CSS]]
 
/* ===Preset: Ripple by zhangbowen55=== */
 
:root {
    --gray-monochrome: 27, 151, 215;  
    --dark-gray-monochrome: 19, 124, 175;
    --very-light-gray-monochrome: 205, 245, 255;
 
    --bright-accent: 127, 211, 255;
    --pale-accent: 129, 245, 254;
    --newpage-color: 27, 211 , 205;
 
    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/008vezbogy1h6oyk0ti55j333x1qxn63.jpg);
 
    --main-aero-glass-filter: blur(12px) brightness(0.88);
}
 
[[/module]]

请随意实验自己的颜色配置！

脚注
原创版式
页面版本: 39, 最后编辑于: 27 Jul 2024 13:14
编辑 评分 (+66) 标签 讨论 (16) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License