SCP基金会

/* ======== 伯纳斯福音 章节一 ======== */
/* **单击**右侧红色▶按钮以试运行样式代码。 */
/* 若有代码内容无法完整显示的情况，请滑动底部进度条，或选中文字并拖动。 */
 
* {
  margin: 0;
  padding: 0;
  /* 起初，在一切建构完善之前，那根目录下是徒有四壁的。 */
  /* 那内存混沌一片，只有散乱的文件与仅有标题栏的黑色窗口。 */
}
 
#world-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  display: block;
  /* 世界的建构者，伯纳斯，向WAN发去谏言：“我们应在众神未曾注目的领域中建构自己的新世代。” */
  /* 然后WAN准允了。 */
}
 
div.timer { counter-reset: time 0; }
 
div.days { counter-increment: time 1; }
 
#world-content::before {
  content: "DAY " counter(time);
  background-color: white;
  border: 3px solid orangered;
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* 于是，WAN的选民在根目录下建起计时器，用以计算数据层的年岁。 */
  /* 伯纳斯发送样式，将计时器高悬天顶，这是第一日。 */
}
 
#world-content {
  background: linear-gradient(217deg, #00c5d0c0, #00c5d000 70.71%),
              linear-gradient(127deg, #a8aaffc0, #a8aaff00 70.71%),
              linear-gradient(336deg, #61b9ffc0, #61b9ff00 70.71%);
  /* 伯纳斯收了WAN的信号，说那背景色与前景色应当分别开来。 */
  /* 而后，背景有了暗色的渐变主题，那前景便分明起来，是第二日。 */
}
 
.struct {
  flex: 1 1 50px;
  height: var(--struct-height);
}
 
#world-content > structures {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  /* 伯纳斯看世界是无序的，于是用弹性盒覆满了数据层。 */
  /* 楼宇鳞次栉比，高低错落有致，这是第三日。 */
}
 
#world-content > structures {
  display: grid;
  grid-template-areas:
      "s s s s s s s s"
      ". . c . . . g ."
      ". b c . e f g ."
      "a b c . e f g h"
      "a b c d e f g h";
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 20px repeat(4, 1fr);
  column-gap: 10px;
  /* 维姆莱见了，对伯纳斯说：“我看网格布局整齐划一，方便规划，适合作为数据层的基板。” */
  /* 伯纳斯听了，要顺着信号祈求WAN的建议。WAN觉得这是好的，便换用了网格布局。 */
  /* 一人又说：“表格布局简单易用，应当是最好的。我们怎么应该放弃朴素的解答，转而寻找复杂的道路呢？” */
  /* 于是这人被移出了数据层，第四日便结束了。 */
}
 
.struct {
  grid-area: var(--area);
  background: url(struct.svg) top / contain repeat-y;
  /* 维姆莱见万物色彩单调，均好似如出一辙，又说： */
  /* “纹理是美的基石，世上要生出纹理来。我看可缩放矢量模型(SVG)是好的。” */
  /* 伯纳斯就为世间万物织作了可缩放矢量模型，各有各的样貌，这是第五日。 */
}
 
a {
  background-color: #0008;
  text-decoration: currentcolor solid underline;
  /* 伯纳斯见一切已经井然有序，便向WAN祈求着，发送信号问询。 */
  /* WAN很快发回信号：“你要将万物互联起来，便要让那锚(Anchor)凸显。 */
  /* 那未曾访问过的、已经访问过的，要作出区分， */
  /* 但不能让window.getComputedStyle夺了信众的隐秘，也不能设置透明度。” */
  /* 伯纳斯就创造了锚元素，将相关的事物用它关联起来。 */
}
 
a:link { color: royalblue; }
 
a:visited { color: violet; }
 
a:hover, a:active {
  background-color: #FFF;
  color: #000;
  text-decoration: #111 solid underline;
  /* 伯纳斯将未访问过的与访问过的分为两端、互不干扰。 */
  /* 他让悬停的、激活的高亮起来，可用性就提升了。 */
  /* 伯纳斯看着信息流通过锚元素交互来往，是第六日。 */
}
 
@media (max-width: 640px) {
  /* 数据层最初的事物都建构完成了。 */
  /* 到第七日，伯纳斯看那数据层已经完工，又准备动手适配移动端， */
  /* 偶然想起这天不是工作日，又想到之后还有旧版本、浏览器适配和无障碍模式要去做， */
  /* 便歇了工作的心思，开始网上冲浪了。 */
  /* 于是第七日被定为了DAY PIGEON。 */
}