| @import "variable.scss"; |
| |
| @media screen and (max-width: 1380px) { |
| .article { |
| .article-toc { |
| > ul { |
| width: 32%; |
| margin-left: 4%; |
| } |
| } |
| } |
| } |
| |
| @media screen and (max-width: 1280px) { |
| .article { |
| .article-toc { |
| display: none; |
| } |
| } |
| } |
| |
| @media screen and (max-width: 1080px) { |
| #header { |
| padding: 0 30px; |
| |
| .tools > li { |
| margin-left: 10px; |
| } |
| .tools .search-form { |
| width: 120px; |
| } |
| |
| .main-nav { |
| li > a { |
| font-size: 1.1em; |
| padding: 0 12px; |
| } |
| } |
| |
| } |
| |
| .article { |
| .article-toc { |
| display: none; |
| } |
| .article-entry { |
| margin: 40px 0 20px 20px; |
| } |
| } |
| } |
| |
| @media screen and (max-width: $content-max-width) { |
| |
| /*********************************************** |
| * Global |
| **********************************************/ |
| body { |
| user-select: none; |
| font-size: 14px; |
| } |
| |
| #header { |
| .navbar { |
| display: none !important; |
| } |
| |
| #mobile-nav { |
| display: flex; |
| } |
| } |
| |
| #sidebar { |
| display: flex !important; |
| transform: translateX(-320px); |
| transition: all .3s ease; |
| &.open { |
| transform: translateX(0); |
| } |
| } |
| |
| #footer { |
| padding: 10px 20px; |
| .disclaimer { |
| display: none; |
| } |
| .copyright { |
| margin: 0; |
| } |
| } |
| .article { |
| .article-entry { |
| margin: 20px; |
| } |
| } |
| |
| /*********************************************** |
| * Index |
| **********************************************/ |
| .header .galaxy { |
| display: none; |
| } |
| |
| .edge .scene-container { |
| .textbox { |
| flex: 2; |
| } |
| |
| .inner-box:nth-child(3) { |
| flex: 0 0 240px; |
| } |
| .sketch-content { |
| /*flex-direction: column; |
| align-items: center;*/ |
| } |
| } |
| |
| .horizon .sketch-content { |
| padding: 50px 5em; |
| } |
| |
| .horizon .sketch-content .inner-box { |
| padding: 0 2em; |
| } |
| |
| .users .scene-container .textbox { |
| flex: 1; |
| } |
| |
| .feedback .sketch-content { |
| align-content: center; |
| } |
| |
| .feedback .scene-container .textbox { |
| flex: 1; |
| } |
| |
| /*********************************************** |
| * Post |
| **********************************************/ |
| .article-wrapper .doc-nav { |
| display: none; |
| } |
| |
| .article-wrapper .article { |
| margin-left: 0; |
| } |
| } |
| |
| |
| @media screen and (max-width: 600px) { |
| /*********************************************** |
| * Index |
| **********************************************/ |
| |
| .edge .scene-container { |
| .textbox { |
| flex: 1; |
| } |
| .sketch-content { |
| flex-direction: column; |
| align-items: center; |
| } |
| } |
| |
| .article { |
| .article-entry { |
| margin: 10px; |
| padding: 5px; |
| img { |
| max-width: 100%; |
| } |
| } |
| } |
| |
| .scene.overlength { |
| height: auto; |
| min-height: 100%; |
| min-height: calc(100% - 72px); |
| } |
| |
| .horizon .textbox { |
| flex: 4; |
| } |
| |
| .horizon .sketch-content { |
| padding: 50px 1em; |
| .title { |
| font-size: 18px; |
| } |
| .download-btn { |
| width: 60px; |
| height: 60px; |
| border-radius: 10px; |
| top: 5px; |
| left: 5px; |
| a { |
| width: 100%; |
| height: 30px; |
| float:none; |
| } |
| .android { |
| background: url(../images/android-icon.png) center center no-repeat; |
| background-size: 24px 24px; |
| } |
| .ios { |
| background: url(../images/ios-icon.png) center center no-repeat; |
| background-size: 24px 24px; |
| } |
| } |
| .app-listing { |
| margin-top: 0; |
| li{ |
| padding: 5px; |
| } |
| .img{ |
| width: 60px; |
| height: 60px; |
| background-size: 60px 60px; |
| } |
| .tooltip{ |
| width: 60px; |
| font-size: 12px; |
| height: 30px; |
| overflow: hidden; |
| text-overflow:ellipsis; |
| white-space: nowrap; |
| } |
| } |
| .addmore{ |
| font-size: 14px; |
| margin-top: 0; |
| &:before{ |
| font-size: 14px; |
| } |
| } |
| } |
| |
| .horizon .sketch-content .inner-box { |
| padding: 0 1em; |
| } |
| |
| .horizon .textbox p { |
| width: 100%; |
| } |
| |
| .header { |
| |
| .slide-content { |
| .page-title { |
| width: 320px; |
| margin-left: -160px; |
| } |
| .btn-group { |
| bottom: 10%; |
| } |
| } |
| } |
| |
| .feature { |
| |
| .right-box { |
| width: 500px; |
| height: 245.45px; |
| top: 50%; |
| right: -65px; |
| |
| .level1, .level2, .level3, .level4 { |
| width: 500px; |
| height: 245.45px; |
| } |
| } |
| } |
| |
| .cross-platform { |
| .sketch-content { |
| height: 200px; |
| } |
| } |
| |
| .supporting-vue { |
| .sketch-content.imgbox .imgbox { |
| background-size: 80px; |
| } |
| } |
| |
| .users .sketch-content { |
| .user-logo { |
| width: 140px; |
| height: 140px; |
| background-size: 45px; |
| } |
| |
| .user-info p { |
| @include lines(3); |
| } |
| |
| .user-logo h3 { |
| margin-top: 110px; |
| } |
| } |
| |
| .feedback { |
| .user-feedback { |
| /*flex: 1 0 140px;*/ |
| } |
| .scene-container .go-2-doc { |
| margin-top: 0; |
| } |
| } |
| } |