_intro.scss

// 首页主体内容
// NOTE: 为了让小模块标题居中 *并且* 带上适当宽度的 border-bottom,
// 只好在容器元素上玩一点花样了...
.mod-title {
  > .section__content {
    text-align: center;
  }
}

// 小模块标题
.intro__title {
  display: inline-block;

  // 两边给一些富余的内边距用来撑开 border-bottom
  padding: 0 1.5em 0.1em;

  border-bottom: 1px solid rgba(#000, $alpha-divider);

	font-size: 150%;
	font-weight: 500;

  // 标题居中
	text-align: center;  // 其实是多余的, 写在这里纯粹为了 readability
}

// 已经失效的小模块标题
.intro__title--disabled {
  color: rgba(#000, $alpha-hint);
  text-decoration: line-through;
}


// 小模块内容
.intro__content {
  padding: 1em 0 2em;

  // 让内容部分恢复正常对齐
  text-align: justify;

  // 在移动体验下也在两侧留白
  @include media($mobile) {
    padding-left: 1em;
    padding-right: 1em;
  }
}

// 允许例外: 让内容 (提示信息) 也居中
@mixin centered-intro-content {
  > .intro__content {
    text-align: center;
  }
}

// 提示文字
.intro__text--note {
  font-weight: 400;

  border-bottom: 1px dashed rgba(0, 0, 0, $alpha-hint);
}

.intro__text--note-disabled {
  color: rgba(#000, $alpha-hint);
}


// 小模块布局
.mod-intro__text {
  @include media($wide) {
    @include span-columns(12);
  }

  @include media($narrow) {
    // 不要显得太挤
    @include span-columns(4);
    @include shift(1);
  }

  @include media($mobile) {
    @include span-columns(4);
  }
}

.mod-intro__tickets,
.mod-intro__apply,
.mod-intro__topics,
.mod-intro__contact {
  @include media($wide) {
    @include span-columns(6);
  }

  @include media($narrow) {
    @include span-columns(3);
  }

  @include media($mobile) {
    @include span-columns(4);
  }
}

.mod-intro__apply,
.mod-intro__contact {
  @include media($wide) {
    @include omega;
  }

  @include media($narrow) {
    @include omega;
  }
}

// narrow: 只在左右两侧留白, 中间不要留, 所以 mobile 的 padding 策略不能直接应用
@include media($narrow) {
  .mod-intro__tickets,
  .mod-intro__topics {
    > .intro__content {
      padding-left: 1em;
    }
  }

  // 这样虽然会破坏报名入口链接的完美对齐, 不过总比一边有一边没有的 padding
  // 来得合适... Practicality beats purity, eh?
  .mod-intro__apply,
  .mod-intro__contact {
    > .intro__content {
      padding-right: 1em;
    }
  }
}


// 说明文字
.mod-intro__text {
  font-size: 125%;
}


// 主题提交
.mod-intro__topics {
  @include centered-intro-content;
}


// 门票策略
.mod-intro__tickets {
  // TODO: 我有罪, 不该写裸元素选择器... 谁来重构一把? 现在夜里 3 点不太有心情
  // 去改 HTML...
  > .intro__content > dl {
    > dt,
    > dd {
      margin-bottom: 1em;
    }

    > dt {
      @include media($wide) {
        @include span-columns(1 of 6);
      }

      @include media($narrow) {
        @include span-columns(1 of 3);
      }

      @include media($mobile) {
        @include span-columns(1 of 4);
      }
    }

    > dd {
      @include media($wide) {
        @include span-columns(5 of 6);
        @include omega;
      }

      @include media($narrow) {
        @include span-columns(2 of 3);
        @include omega;
      }

      @include media($mobile) {
        @include span-columns(3 of 4);
        @include omega;
      }
    }
  }
}


// 报名入口
.mod-intro__apply {
  @include centered-intro-content;
}

.intro__apply-links {
  margin: 1em 0 0;
}

.intro__apply-link {
  background-color: #52b0ff;
  font-weight: bold;
  margin-bottom: 1em;
  padding: 0.5em;

  &:hover {
    background-color: #ffe052;
    box-shadow: 0 0.5em 1em rgba(#000, $alpha-hint);
  }

  @include media($wide) {
    @include span-columns(2 of 6);
    @include omega(3n);
  }

  @include media($narrow) {
    @include span-columns(1 of 3);
    @include omega(3n);
  }

  @include media($mobile) {
    @include span-columns(2);
    @include omega(2n);
  }
}


// 联系大会
.mod-intro__contact {
  @include centered-intro-content;
}

// 大会邮箱链接
.intro__text--contact {
  font-family: $font-family-monospace;
  font-weight: bold;
  font-size: 150%;

  @include media($mobile) {
    // 320px 宽的设备下右边居然会 clip 掉... 难以置信
    // 算了
    font-size: 120%;
  }
}


// vim:set ai et ts=2 sw=2 sts=2 fenc=utf-8: