第三次作业题目和答案(未公布)

themes/landscape/source/css/_partial/article.styl

@@ -0,0 +1,357 @@
+.article
+  margin: block-margin 0
+
+.article-inner
+  @extend $block
+  overflow: hidden
+
+.article-meta
+  clearfix()
+
+.article-date
+  @extend $block-caption
+  float: left
+
+.article-category
+  float: left
+  line-height: 1em
+  color: #ccc
+  text-shadow: 0 1px #fff
+  margin-left: 8px
+  &:before
+    content: "\2022"
+
+.article-category-link
+  @extend $block-caption
+  margin: 0 12px 1em
+
+.article-header
+  padding: article-padding article-padding 0
+
+.article-title
+  text-decoration: none
+  font-size: 2em
+  font-weight: bold
+  color: color-default
+  line-height: line-height-title
+  transition: color 0.2s
+  a&:hover
+    color: color-link
+
+.article-entry
+  @extend $base-style
+  clearfix()
+  color: color-default
+  padding: 0 article-padding
+  p, table
+    line-height: line-height
+    margin: line-height 0
+  h1, h2, h3, h4, h5, h6
+    font-weight: bold
+  h1, h2, h3, h4, h5, h6
+    line-height: line-height-title
+    margin: line-height-title 0
+  a
+    color: color-link
+    text-decoration: none
+    &:hover
+      text-decoration: underline
+  ul, ol, dl
+    margin-top: line-height
+    margin-bottom: line-height
+  img, video
+    max-width: 100%
+    height: auto
+    display: block
+    margin: auto
+  iframe
+    border: none
+  table
+    width: 100%
+    border-collapse: collapse
+    border-spacing: 0
+  th
+    font-weight: bold
+    border-bottom: 3px solid color-border
+    padding-bottom: 0.5em
+  td
+    border-bottom: 1px solid color-border
+    padding: 10px 0
+  blockquote
+    font-family: font-serif
+    font-size: 1.4em
+    margin: line-height 20px
+    text-align: center
+    footer
+      font-size: font-size
+      margin: line-height 0
+      font-family: font-sans
+      cite
+        &:before
+          content: "—"
+          padding: 0 0.5em
+  .pullquote
+    text-align: left
+    width: 45%
+    margin: 0
+    &.left
+      margin-left: 0.5em
+      margin-right: 1em
+    &.right
+      margin-right: 0.5em
+      margin-left: 1em
+  .caption
+    color: color-grey
+    display: block
+    font-size: 0.9em
+    margin-top: 0.5em
+    position: relative
+    text-align: center
+  // http://webdesignerwall.com/tutorials/css-elastic-videos
+  .video-container
+    position: relative
+    padding-top: (9 / 16 * 100)% // 16:9 ratio
+    height: 0
+    overflow: hidden
+    iframe, object, embed
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      margin-top: 0
+
+.article-more-link a
+  display: inline-block
+  line-height: 1em
+  padding: 6px 15px
+  border-radius: 15px
+  background: color-background
+  color: color-grey
+  text-shadow: 0 1px #fff
+  text-decoration: none
+  &:hover
+    background: color-link
+    color: #fff
+    text-decoration: none
+    text-shadow: 0 1px darken(color-link, 20%)
+
+.article-footer
+  clearfix()
+  font-size: 0.85em
+  line-height: line-height
+  border-top: 1px solid color-border
+  padding-top: line-height
+  margin: 0 article-padding article-padding
+  a
+    color: color-grey
+    text-decoration: none
+    &:hover
+      color: color-default
+
+.article-tag-list-item
+  float: left
+  margin-right: 10px
+
+.article-tag-list-link
+  &:before
+    content: "#"
+
+.article-comment-link
+  float: right
+  &:before
+    content: "\f075"
+    font-family: font-icon
+    padding-right: 8px
+
+.article-share-link
+  cursor: pointer
+  float: right
+  margin-left: 20px
+  &:before
+    content: "\f064"
+    font-family: font-icon
+    padding-right: 6px
+
+#article-nav
+  clearfix()
+  position: relative
+  @media mq-normal
+    margin: block-margin 0
+    &:before
+      absolute-center(8px)
+      content: ""
+      border-radius: 50%
+      background: color-border
+      box-shadow: 0 1px 2px #fff
+
+.article-nav-link-wrap
+  text-decoration: none
+  text-shadow: 0 1px #fff
+  color: color-grey
+  box-sizing: border-box
+  margin-top: block-margin
+  text-align: center
+  display: block
+  &:hover
+    color: color-default
+  @media mq-normal
+    width: 50%
+    margin-top: 0
+
+#article-nav-newer
+  @media mq-normal
+    float: left
+    text-align: right
+    padding-right: 20px
+
+#article-nav-older
+  @media mq-normal
+    float: right
+    text-align: left
+    padding-left: 20px
+
+.article-nav-caption
+  text-transform: uppercase
+  letter-spacing: 2px
+  color: color-border
+  line-height: 1em
+  font-weight: bold
+  #article-nav-newer &
+    margin-right: -2px
+
+.article-nav-title
+  font-size: 0.85em
+  line-height: line-height
+  margin-top: 0.5em
+
+.article-share-box
+  position: absolute
+  display: none
+  background: #fff
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
+  border-radius: 3px
+  margin-left: -145px
+  overflow: hidden
+  z-index: 1
+  &.on
+    display: block
+
+.article-share-input
+  width: 100%
+  background: none
+  box-sizing: border-box
+  font: 14px font-sans
+  padding: 0 15px
+  color: color-default
+  outline: none
+  border: 1px solid color-border
+  border-radius: 3px 3px 0 0
+  height: 36px
+  line-height: 36px
+
+.article-share-links
+  clearfix()
+  background: color-background
+
+$article-share-link
+  width: 50px
+  height: 36px
+  display: block
+  float: left
+  position: relative
+  color: #999
+  text-shadow: 0 1px #fff
+  &:before
+    font-size: 20px
+    font-family: font-icon
+    absolute-center(@font-size)
+    text-align: center
+  &:hover
+    color: #fff
+
+.article-share-twitter
+  @extend $article-share-link
+  &:before
+    content: "\f099"
+  &:hover
+    background: color-twitter
+    text-shadow: 0 1px darken(color-twitter, 20%)
+
+.article-share-facebook
+  @extend $article-share-link
+  &:before
+    content: "\f09a"
+  &:hover
+    background: color-facebook
+    text-shadow: 0 1px darken(color-facebook, 20%)
+
+.article-share-pinterest
+  @extend $article-share-link
+  &:before
+    content: "\f0d2"
+  &:hover
+    background: color-pinterest
+    text-shadow: 0 1px darken(color-pinterest, 20%)
+
+.article-share-google
+  @extend $article-share-link
+  &:before
+    content: "\f0d5"
+  &:hover
+    background: color-google
+    text-shadow: 0 1px darken(color-google, 20%)
+
+.article-gallery
+  background: #000
+  position: relative
+
+.article-gallery-photos
+  position: relative
+  overflow: hidden
+
+.article-gallery-img
+  display: none
+  max-width: 100%
+  &:first-child
+    display: block
+  &.loaded
+    position: absolute
+    display: block
+  img
+    display: block
+    max-width: 100%
+    margin: 0 auto
+/*
+$article-gallery-ctrl
+  position: absolute
+  top: 0
+  height: 100%
+  width: 60px
+  color: #fff
+  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
+  opacity: 0.3
+  transition: opacity 0.2s
+  cursor: pointer
+  &:hover
+    opacity: 0.8
+  &:before
+    font-size: 30px
+    font-family: font-icon
+    position: absolute
+    top: 50%
+    margin-top: @font-size * -0.5
+
+.article-gallery-prev
+  @extend $article-gallery-ctrl
+  left: 0
+  &:before
+    content: "\f053"
+    left: 15px
+
+.article-gallery-next
+  @extend $article-gallery-ctrl
+  right: 0
+  &:before
+    content: "\f054"
+    right: 15px*/