| @import '/src/css/variable.scss'; |
| /** |
| * Any CSS included here will be global. The classic template |
| * bundles Infima by default. Infima is a CSS framework designed to |
| * work well for content-centric websites. |
| */ |
| |
| /* You can override the default Infima variables here. */ |
| :root { |
| --ifm-color-primary: #5494FF; |
| /* --ifm-dropdown-hover-background-color: #fff; |
| --ifm-link-hover-color: #5494FF; */ |
| --ifm-code-font-size: 95%; |
| } |
| |
| .docusaurus-highlight-code-line { |
| background-color: rgba(0, 0, 0, 0.1); |
| display: block; |
| margin: 0 calc(-1 * var(--ifm-pre-padding)); |
| padding: 0 var(--ifm-pre-padding); |
| } |
| |
| html[data-theme='dark'] .docusaurus-highlight-code-line { |
| background-color: rgba(0, 0, 0, 0.3); |
| } |
| |
| @font-face { |
| font-family: octicons-link; |
| src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); |
| } |
| |
| html { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; |
| font-variant: tabular-nums; |
| font-feature-settings: 'tnum'; |
| } |
| |
| .navbar__title { |
| /*color: #f5573d;*/ |
| } |
| |
| .navbar.index-nav { |
| background: rgb(255 255 255 / 40%); |
| } |
| |
| aside { |
| font-family: Avenir-Heavy; |
| } |
| |
| .ctn-block { |
| width: 1200px; |
| padding: 0 20px; |
| margin: 0 auto; |
| } |
| |
| .text-center { |
| text-align: center; |
| } |
| |
| .reading-area { |
| display: flex; |
| padding: 60px 0; |
| min-height: 600px; |
| |
| .main-content { |
| width: 900px; |
| padding: 30px; |
| } |
| |
| .side-bar { |
| flex: 1; |
| padding: 18px 0; |
| border-left: 1px solid #eaecef; |
| |
| .bar-item { |
| display: block; |
| padding: 5px 18px; |
| color: #4A4A4A; |
| |
| &:hover, |
| &.router-link-exact-active { |
| color: $active-color; |
| } |
| } |
| } |
| } |
| |
| .blog-ctn { |
| padding-top: 60px; |
| padding-bottom: 80px; |
| |
| .blog-title { |
| font-size: 24px; |
| } |
| |
| .blog-info{ |
| display: flex; |
| align-items: center; |
| padding: 20px 0; |
| font-size: 16px; |
| color: rgba(15,18,34,0.45); |
| .info-item{ |
| padding: 0 10px 0 28px; |
| &.sperator{ |
| padding: 0 10px; |
| } |
| } |
| } |
| } |
| |
| .corner-botton{ |
| display: flex; |
| align-items: center; |
| margin-right: 24px; |
| padding: 0 40px; |
| height: 64px; |
| line-height: 64px; |
| border-radius: 32px; |
| font-size: 18px; |
| user-select: none; |
| &:last-child{ |
| margin-right: 0; |
| } |
| .button-icon{ |
| margin-right: 8px; |
| } |
| &.blue-fill{ |
| color: #fff; |
| background: #1E78E0; |
| border: 1px solid #1E78E0; |
| } |
| &.white{ |
| color: $enhance-color; |
| background: #fff; |
| border: 1px solid $enhance-color; |
| } |
| &.blue{ |
| color: #1E78E0; |
| border: 1px solid #1E78E0; |
| } |
| } |
| |
| .normal-page{ |
| padding-top: 20px; |
| .normal-title{ |
| font-size: 24px; |
| line-height: 34px; |
| } |
| .normal-desc{ |
| color: $enhance-color; |
| font-weight: 400; |
| .link{ |
| color: $active-color; |
| text-decoration: underline; |
| &:hover{ |
| text-decoration: none; |
| } |
| } |
| } |
| } |
| |
| .home-page { |
| padding: 64px 0 30px; |
| min-height: 92vh; |
| |
| &.feature { |
| background: #eee url(/static/home/features_bg.png) center no-repeat; |
| background-size: cover; |
| } |
| |
| &.slogan { |
| // margin-top: -60px; |
| background: #eee url(/static/home/banner_bg.png) center no-repeat; |
| background-size: cover; |
| } |
| |
| &.introduce { |
| padding-bottom: 100px; |
| } |
| |
| .home-block-title { |
| margin-bottom: 20px; |
| font-size: 32px; |
| line-height: 46px; |
| } |
| |
| .home-block { |
| padding: 20px 0; |
| |
| .home-paragraph { |
| font-size: 18px; |
| color: #4A4A4A; |
| line-height: 26px; |
| font-weight: 400; |
| margin-bottom: 16px; |
| } |
| } |
| |
| .description { |
| .home-block { |
| padding: 40px 0; |
| |
| .botton-row { |
| padding: 20px 0 40px; |
| } |
| } |
| |
| .home-paragraph { |
| font-size: 14px; |
| background: #fff; |
| } |
| |
| .home-paragraph-title { |
| font-size: 20px; |
| line-height: 44px; |
| font-weight: 600; |
| } |
| |
| .description-image { |
| display: block; |
| width: 780px; |
| min-height: 460px; |
| margin: 52px auto 20px; |
| } |
| |
| .bold-dot { |
| position: absolute; |
| width: 14px; |
| height: 14px; |
| border-radius: 50%; |
| background: $active-color; |
| } |
| |
| .top-desc{ |
| width: 660px; |
| padding-left: 60px; |
| } |
| |
| .bottom-desc{ |
| width: 570px; |
| margin: 0 auto; |
| } |
| |
| svg { |
| height: 860px; |
| width: 860px; |
| position: absolute; |
| top: 40px; |
| left: 50%; |
| z-index: -1; |
| margin-left: -430px; |
| |
| circle { |
| fill: transparent; |
| stroke: $active-color; |
| stroke-width: 0.3; |
| } |
| |
| .dotted { |
| stroke-dasharray: 0, 3; |
| stroke-linecap: round; |
| } |
| } |
| } |
| |
| .concept { |
| display: grid; |
| grid-template-columns: repeat(2, 600px); |
| grid-column-gap: 20px; |
| |
| .concept-item { |
| &.before { |
| .before-image { |
| background: rgb(250, 250, 251); |
| margin-left: -30px; |
| padding-left: 30px; |
| padding-right: 30px; |
| margin-right: -30px; |
| margin-bottom: -30px; |
| padding-bottom: 30px; |
| padding-top: 40px; |
| } |
| |
| .concept-ctn { |
| padding: 40px 50px 30px 30px; |
| background: #e4e5e9 url(/static/home/before_linkis_bg.png) 320px 0px no-repeat; |
| background-size: 280px; |
| } |
| |
| .concept-title { |
| background: #E4E5E9; |
| } |
| } |
| |
| &.after { |
| position: relative; |
| z-index: 10; |
| left: -60px; |
| top: 52px; |
| |
| .concept-ctn { |
| background: $active-color url(/static/home/after_linkis_bg.png) 230px -120px no-repeat; |
| background-size: 450px; |
| box-shadow: -12px 0 34px rgba(51, 89, 218, 0.3); |
| |
| .home-paragraph { |
| color: #fff; |
| } |
| |
| .concept-image { |
| border-radius: 4px; |
| } |
| } |
| |
| .concept-title { |
| color: #fff; |
| background: $active-color; |
| } |
| } |
| |
| .concept-ctn { |
| padding: 40px 30px 30px; |
| border-radius: 10px; |
| |
| .home-paragraph { |
| margin-bottom: 30px; |
| } |
| } |
| |
| .concept-title { |
| display: inline-block; |
| padding: 0 24px; |
| font-size: 24px; |
| line-height: 48px; |
| font-weight: 600; |
| margin-bottom: 16px; |
| color: $enhance-color; |
| border-top-left-radius: 24px; |
| border-top-right-radius: 24px; |
| border-bottom-left-radius: 24px; |
| } |
| |
| .concept-image { |
| width: 100%; |
| } |
| } |
| } |
| |
| .show-case { |
| display: grid; |
| grid-template-columns: repeat(6, 1fr); |
| grid-row-gap: 20px; |
| grid-column-gap: 20px; |
| margin-bottom: 20px; |
| |
| .case-item { |
| display: flex; |
| min-width: 0; |
| padding: 5px; |
| height: 88px; |
| background: #FFFFFF; |
| box-shadow: 0 1px 20px 0 rgba(15, 18, 34, 0.10); |
| border-radius: 8px; |
| align-items: center; |
| justify-content: center; |
| |
| >img { |
| max-width: 90%; |
| max-height: 90%; |
| } |
| } |
| } |
| |
| .features { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| |
| .feature-item { |
| width: 320px; |
| height: 320px; |
| margin-right: 32px; |
| margin-bottom: 32px; |
| background: #FFFFFF; |
| // box-shadow: 0 0 16px 0 rgba(211,211,211,0.50); |
| border-radius: 10px; |
| padding: 126px 50px 24px; |
| background-repeat: no-repeat; |
| background-size: 80px; |
| background-position: center 30px; |
| |
| &:nth-child(3n+3) { |
| margin-right: 0; |
| } |
| |
| &.scalability { |
| background-image: url(/static/home/icons/scalability.png); |
| } |
| |
| &.connectivity { |
| background-image: url(/static/home/icons/connectivity.png); |
| } |
| |
| &.controllability { |
| background-image: url(/static/home/icons/controllability.png); |
| } |
| |
| &.orchestration { |
| background-image: url(/static/home/icons/orchestration.png); |
| } |
| |
| &.reusability { |
| background-image: url(/static/home/icons/reusability.png); |
| } |
| |
| .item-title { |
| margin-bottom: 8px; |
| color: #393939; |
| line-height: 26px; |
| font-size: 18px; |
| font-weight: 500; |
| } |
| |
| .item-desc { |
| color: #666666; |
| line-height: 22px; |
| font-weight: 400; |
| } |
| } |
| } |
| |
| .banner { |
| padding: 140px 0 70px; |
| |
| .home-title { |
| margin-bottom: 20px; |
| font-size: 0; |
| line-height: 60px; |
| |
| .apache { |
| color: #0F1223; |
| font-weight: 600; |
| font-size: 80px; |
| margin-right: 8px; |
| } |
| |
| .linkis { |
| color: $active-color; |
| font-weight: 600; |
| font-size: 80px; |
| margin-right: 8px; |
| } |
| |
| .badge { |
| font-size: 24px; |
| font-weight: 500; |
| color: $active-color; |
| } |
| } |
| |
| .home-desc { |
| margin-bottom: 56px; |
| font-size: 24px; |
| color: $enhance-color; |
| text-align: center; |
| line-height: 32px; |
| font-weight: 400; |
| } |
| } |
| |
| .botton-row { |
| display: flex; |
| |
| &.center { |
| justify-content: center; |
| } |
| } |
| } |
| |
| .team-page{ |
| .character-list { |
| display: grid; |
| grid-template-columns: repeat(6, 1fr); |
| grid-column-gap: 20px; |
| grid-row-gap: 20px; |
| padding: 20px 0 60px; |
| &.committer{ |
| grid-template-columns: repeat(5, 224px); |
| .character-item{ |
| display: flex; |
| padding: 20px; |
| align-items: center; |
| .character-avatar{ |
| width: 60px; |
| height: 60px; |
| margin: 0; |
| } |
| .character-desc{ |
| flex: 1; |
| padding-left: 16px; |
| min-width: 0; |
| } |
| } |
| } |
| .character-item{ |
| border: 1px solid rgba(15,18,34,0.20); |
| border-radius: 4px; |
| // 辅助处理文字溢出 |
| min-width: 0; |
| padding: 0 20px 20px; |
| .character-avatar{ |
| width: 120px; |
| height: 120px; |
| margin: 30px auto 10px; |
| background: #D8D8D8; |
| border-radius: 50%; |
| } |
| .character-name{ |
| color: $enhance-color; |
| line-height: 24px; |
| font-size: 16px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .character-link{ |
| color: rgba(15,18,34,0.65); |
| font-weight: 400; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| } |
| } |
| } |
| |
| /** In mobile view, reduce the padding */ |
| @media screen and (max-width: 1200px) { |
| .ctn-block { |
| width: auto !important; |
| } |
| .corner-botton{ |
| white-space: nowrap; |
| } |
| .home-page { |
| &.introduce { |
| padding-bottom: 0; |
| } |
| &.slogan{ |
| margin-top: -60px; |
| } |
| .concept{ |
| grid-template-columns: repeat(1, 1fr); |
| grid-row-gap: 20px; |
| .concept-item{ |
| &.after{ |
| position: static; |
| } |
| &.before { |
| .concept-ctn{ |
| padding: 40px 30px 30px 30px |
| } |
| .before-image{ |
| margin: 0; |
| padding: 0; |
| } |
| } |
| text-align: center; |
| .concept-title{ |
| border-bottom-right-radius: 24px; |
| } |
| } |
| } |
| .features .feature-item{ |
| width: 100%; |
| margin-right: 0; |
| } |
| .description { |
| .bold-dot{ |
| display: none; |
| } |
| .description-image{ |
| width: 100%; |
| min-height: 160px; |
| } |
| svg{ |
| display: none; |
| } |
| .top-desc{ |
| width: 100%; |
| padding-left: 0; |
| text-align: center; |
| } |
| |
| .bottom-desc{ |
| width: 100%; |
| text-align: center; |
| } |
| } |
| .show-case{ |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| .team-page{ |
| .character-list{ |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| } |
| |
| .header-github-link:hover { |
| opacity: 0.6; |
| } |
| |
| .header-github-link:before { |
| content: ''; |
| width: 24px; |
| height: 24px; |
| display: flex; |
| background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; |
| } |
