linux-command/template/styl/index.styl

@import('mixins/reset.styl')
@import('mixins/markdown.styl')

mq-mobile = "screen and (max-width: 479px)"

[data-color-mode*='dark'], [data-color-mode*='dark'] body {
  color-scheme: dark;
  --color-header-bg: #3a3a3a8f;
  --color-header-border: #323232;
  --color-hover: #ffffff30;
}
[data-color-mode*='light'], [data-color-mode*='light'] body {
  color-scheme: light;
  --color-header-bg: #ffffff52;
  --color-header-border: #d3d3d3;
  --color-hover: #f2f2f2;
}

.warpper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .footer {
    padding-bottom: 280px;
  }
}

.header {
  width 517px
  margin 0 auto 0
  padding 0 10px
  .logo a {
    display flex
    color: currentColor;
  }
  .box {
    position relative
  }
  .search {
    min-height 20px
    position relative
    display table
    border-collapse separate
    li,ul {
      list-style none
    }
    #result {
      .ok {
        background:#f4f4f4;
      }
    }
    .search-list {
      position absolute
      display none
      z-index 999
      box-shadow 1px 1px 3px var(--color-theme-bg)
      border 1px solid var(--color-header-border)
      background var(--color-theme-bg)
      min-width 100px
      top 39px
      width 100%
      padding 5px
      border-radius 5px 5px 5px 5px
      li {
        line-height 23px
        span{
          padding 0 8px
          color #b9b9b9
        }
      }
      a {
        display block
        padding 2px 6px 2px 6px
        &:hover {
          background-color var(--color-hover)
        }
        .kw {
          color #f00
          font-style inherit
          font-weight bold
        }
      }
    }
    .query, .enter-input {
      display table-cell
      transition border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
    }
    .query {
      resize: none;
      position relative
      z-index 2
      width 100%
      height 40px
      padding 6px 12px
      font-size 14px
      font-weight bold
      line-height 1.42857143
      background-color: transparent;
      background-image none
      border 1px solid $border-color
      border-radius 5px 0 0 5px
      -webkit-appearance: none;
      &:focus {
        z-index 99
        border-color #66afe9
        outline 0
        box-shadow inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)
      }
    }
    .enter-input {
      white-space nowrap
      button {
        margin 0
        left -1px
        position relative
        z-index 5
        display inline-block
        padding 9px 23px
        font-size 14px
        font-weight bold
        line-height 1.42857143
        text-align center
        text-rendering auto
        white-space nowrap
        vertical-align middle
        touch-action manipulation
        cursor pointer
        user-select none
        background-image none
        border 1px solid transparent
        border-collapse separate
        border-radius 0 5px 5px 0
        border-color $border-color
        &:focus,&:active:focus {
          outline thin dotted
          outline 5px auto -webkit-focus-ring-color
          outline-offset -2px
        }
        &:active {
          color #333
          background-color #e6e6e6
          border-color #b4b4b4
          background-image none
          box-shadow inset 0 8px 32px -8px rgba(0,0,0,0.3)
        }
        &:focus {
          color #333
          background-color #e6e6e6
          border-color #999
          text-decoration none
        }
        &:hover {
          color #333
          background-color #e6e6e6
          border-color #b4b4b4
        }
      }
    }
  }
}

.footer {
  text-align center
  padding-top 31px
  font-size 14px
  font-weight 300
  border-top 1px solid var(--color-header-border)
  padding-bottom 50px;
  padding 31px 6px 50px 6px
  &.home {
    border-top 0
  }
}
.header.home {
  .header_inner {
    display flex
    flex-direction column
    align-items center
  }
  .logo {
    min-height 140px
    display flex
    align-items center
  }
  .search {
    display flex
    min-width 320px
  }
}

.header.header_list {
  width auto
  position fixed
  width 100%
  background var(--color-theme-bg)
  backdrop-filter saturate(180%) blur(0.4rem)
  background-color var(--color-header-bg)
  z-index 99
}

.header_list {
  padding 10px 10px 10px 13px 
  border-bottom 1px solid var(--color-header-border)
  .logo {
    padding-right 24px
    text-align left
    svg {
      height 37px
      width 136px
    }
  }
}

.search_list {
  padding 79px 27px 
  a {
    font-size 16px
    strong {
      font-weight bold
    }
    .kw {
      color #f00
      font-style inherit
      font-weight bold
    }
    &:hover {
      .kw {
        color #333
      }
    }
  }
  li {
    padding 10px 0 10px 0
    list-style-type none
    p {
      padding-top 5px
      color #4F4F4F
    }
  }
}

.hotlist {
  padding 79px 27px 
  a {
    font-size 16px
    strong {
      font-weight bold
    }
  }
  li {
    padding 5px 0 5px 0
    list-style-type none
    p{
      padding-top 5px
      color #4F4F4F
    }
  }
}

.header_list .header_inner {
  display: flex;
  align-items: center;
  .search {
    flex: 1;
    display: flex;
  }
}

.header_inner, .hotlist, .search_list, .contributors {
  max-width 920px
  margin 0 auto
}

.contributors {
  padding 79px 27px
  max-width: 960px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  a {
    font-weight: bold;
  }
}

@media mq-mobile {
  .header{
    width inherit
    .search .enter-input {
      button {
        padding 9px 14px
      }
    }
  }
  .header_list {
    padding: 10px 10px 10px 13px
    .logo {
      float inherit
      padding-right 10px
      text-align center
    }
    .logo svg {
      width 96px
    }
    .search {
      .query {
        line-height 31px
      }
    }
  }
  .search_list, .hotlist {
    padding 78px 27px
  }
}