From 733343545f2be35f192011f2741dc8c41948cac8 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Sat, 9 Jun 2018 15:50:47 +0300 Subject: many updates --- vnext/src/style/main.css | 81 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 55 insertions(+), 26 deletions(-) (limited to 'vnext/src/style/main.css') diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 24108030..69c29f07 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -85,6 +85,11 @@ html { margin: 12px 0 0 0; width: 728px; } +#minimal_content { + margin: 0 auto; + min-width: 310px; + width: auto; +} body > header { box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); background: #fff; @@ -92,11 +97,26 @@ body > header { top: 0; width: 100%; z-index: 10; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transition-property: -webkit-transform; + transition-property: transform; } #header_wrapper { margin: 0 auto; width: 1000px; display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding: 4px; +} +.header--hidden { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); } #footer { clear: both; @@ -142,7 +162,6 @@ body > header { #logo { height: 36px; - margin: 7px 25px 0 20px; width: 110px; } #logo a { @@ -157,7 +176,6 @@ body > header { width: 110px; } #global { - flex-grow: 1; display: flex; } #global a { @@ -169,31 +187,24 @@ body > header { #global li { display: inline-block; } +#ctitle a { + padding: 14px; +} #global li:hover, +#ctitle a:hover, .l a:hover { background-color: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); cursor: pointer; transition: box-shadow 0.2s ease-in; } -#search { - margin: 12px 20px 12px 0; -} #search input { background: #FFF; - border: 1px solid #DDDDD5; + border: 1px solid #ccc; outline: none !important; padding: 4px; -} -@media screen and (max-width: 850px) { - #logo { - display: none; - } - #search { - display: inline-block; - float: none; - margin: 10px 10px; - } + -webkit-appearance: none; + border-radius: 0; } /* #endregion */ @@ -262,10 +273,12 @@ body > header { /* #endregion */ /* #region main content */ - #content > p, #content > h1, -#content > h2 { +#content > h2, +#minimal_content > p, +#minimal_content > h1, +#minimal_content > h2 { margin: 1em 0; } .page { @@ -331,10 +344,11 @@ article .tags { margin-top: 3px; } .msg-tags { - margin-top: 5px; - min-height: 30px; + margin-top: 12px; + min-height: 1px; } article .tags > a, +.badge, .msg-tags > a { background: #eee; border: 1px solid #eee; @@ -382,7 +396,6 @@ article .tags > a, border-right: 5px solid #0C0; } .msg-ts { - float: right; font-size: small; vertical-align: top; } @@ -478,6 +491,16 @@ article .tags > a, } @media screen and (max-width: 850px) { + #header_wrapper { + width: auto; + } + #global { + justify-content: space-around; + flex-grow: 1; + } + #search { + padding: 4px; + } article { overflow: auto; } @@ -509,12 +532,18 @@ article .tags > a, } @media screen and (max-width: 480px) { - .msg-ts { - float: none; + #wrapper { + margin-top: 104px; + } + #search { + display: none; + } + #global a { + padding: 14px 2px; } - .msg-tags { - margin-top: 10px; - min-height: 1px; + .msg-cont > nav.l, + article > nav.l { + font-size: 9pt; } .msg-txt { padding-top: 5px; -- cgit v1.2.3