diff --git a/site/theme/static/common.less b/site/theme/static/common.less index f2f3f91b79..b23514c0ab 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -32,7 +32,7 @@ a { position: relative; } -div.main-container { +.main-container { padding: 0 130px 120px 40px; margin-left: -1px; background: #fff; diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less index 93dcc7c3bf..82e6b98d69 100644 --- a/site/theme/static/footer.less +++ b/site/theme/static/footer.less @@ -6,34 +6,30 @@ footer { z-index: 1; color: @text-color; box-shadow: 0 1000px 0 1000px #fff; -} - -footer ul { - overflow: hidden; - margin: 0 2%; - list-style: none; -} - -footer ul li { - float: left; - width: 25%; - padding: 24px 2%; -} - -footer ul li > h2 { - font-size: 14px; - margin: 0 auto 8px; - font-weight: 500; - position: relative; - > .anticon { - font-size: 16px; - position: absolute; - left: -22px; - top: 3px; - color: #aaa; - } -} - -footer ul li > div { - margin: 0 8px 5px 0; + ul { + overflow: hidden; + margin: 0 2%; + list-style: none; + li { + float: left; + width: 25%; + padding: 24px 2%; + > h2 { + font-size: 14px; + margin: 0 auto 8px; + font-weight: 500; + position: relative; + > .anticon { + font-size: 16px; + position: absolute; + left: -22px; + top: 3px; + color: #aaa; + } + } + > div { + margin: 0 0 5px; + } + } + } } diff --git a/site/theme/static/header.less b/site/theme/static/header.less index 7d488a60a1..49985e21db 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -66,11 +66,12 @@ .version { float: right; margin-top: 29px; - margin-left: 12px; + margin-left: 10px; } .version { - width: 68px; + width: 66px; + margin-left: 0; } #nav { diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index 5f66e95408..c784ba5794 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -9,17 +9,16 @@ cursor: pointer; } -@media only screen and (min-width: 320px) and (max-width: 1280px) { +@media only screen and (min-width: 0px) and (max-width: 1280px) { #search-box { display: none; } } -@media only screen and (min-width: 320px) and (max-width: 1024px) { +@media only screen and (min-width: 0px) and (max-width: 992px) { .code-boxes-col-2-1, .code-boxes-col-1-1 { float: none; width: 100%; - padding: 0!important; } .preview-image-boxes { margin: 0!important; @@ -30,9 +29,7 @@ padding-left: 0; margin: 10px 0; } -} -@media only screen and (min-width: 320px) and (max-width: 1024px) { a#logo { width: 150px; margin-left: auto; @@ -177,9 +174,9 @@ } .main-container { - padding-left: 30px; - padding-right: 30px; - margin-left: 0; + padding-left: 16px; + padding-right: 16px; + margin-right: 0; > .markdown > * { width: 100%!important; } @@ -193,10 +190,12 @@ footer { text-align: center; - } - - footer ul li { - float: none; - width: auto; + ul li { + float: none; + width: auto; + > h2 .anticon { + display: none; + } + } } } diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 54adf05627..78d43a957f 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -195,8 +195,10 @@ export default class MainContent extends React.Component { return (