aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main/static/style.css
diff options
context:
space:
mode:
authorGravatar Killy2017-12-27 16:15:57 +0300
committerGravatar Killy2017-12-27 16:15:57 +0300
commitb1e6f250e1c9d69f80899e4b877f40ccf8a214df (patch)
treea7d536a270cf21f7244863535fc40a021616cb20 /juick-www/src/main/static/style.css
parentae16c7b66f8bfc74ef34eddc7d816172a91fe971 (diff)
www: responsive layout (2)killy-responsive-2
Diffstat (limited to 'juick-www/src/main/static/style.css')
-rw-r--r--juick-www/src/main/static/style.css266
1 files changed, 131 insertions, 135 deletions
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 2320b6e3..05175d7a 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -149,6 +149,7 @@ body > header {
align-items: center;
flex-direction: column;
margin: 55px auto 0 auto;
+ padding: 0 8px;
}
body > header {
margin-bottom: 15px;
@@ -164,7 +165,7 @@ body > header {
}
#content {
max-width: 100%;
- padding: 0 8px;
+ /* padding: 0 8px; */
width: 728px;
}
}
@@ -182,9 +183,18 @@ body > header {
color: #069;
font-size: 13pt;
}
+#global {
+ order: 0;
+}
+#logo {
+ order: 1;
+}
+#header-right {
+ order: 2;
+}
#logo {
height: 36px;
- margin: 0 25px 0 20px;
+ margin: 0 10px 0 10px;
width: 110px;
}
#logo a {
@@ -198,31 +208,35 @@ body > header {
white-space: nowrap;
width: 110px;
}
+#global {
+ flex-grow: 1;
+}
#global > ul {
display: flex;
}
+#header-right > .a-login,
+#site-search,
+#post,
#global li {
margin: 0 10px;
}
-#search {
- margin: 0;
-}
-#search input,
-#user-menu-dropdown input {
- background: #FFF;
- border: 1px solid #DDDDD5;
- padding: 4px;
+#header-right {
+ align-items: center;
+ display: flex;
+ flex-grow: 1;
}
-
-#menu-spacer-1,
-#menu-expander {
- display: none;
+#site-search {
+ color: #069;
+ display: flex;
}
-#menu-expander {
- align-self: center;
- cursor: pointer;
- padding: 10px;
+#site-search input {
+ background: #f2f2ec;
+ border: 0;
+ border-bottom: 1px solid rgba(0, 104, 153, 0.5); /* #069 + alpha */
+ margin: 0;
+ width: 120px;
}
+
#user-menu {
align-self: stretch;
display: flex;
@@ -239,13 +253,6 @@ body > header {
margin: 10px;
user-select: none;
}
-body:not([data-hash]) #user-menu > img {
- display: none;
-}
-body:not([data-hash]) #user-menu > #menu-expander {
- display: block;
- order: 3;
-}
#user-menu-dropdown {
background: #f2f2ec;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.28);
@@ -264,145 +271,125 @@ body:not([data-hash]) #user-menu > #menu-expander {
flex-direction: column;
flex-grow: 1;
margin: -1px 0 1px 0;
-}
-#user-menu-dropdown > ul.right-column {
min-width: 9em;
- order: 1;
-}
-#user-menu-dropdown > ul.left-column {
- display: none;
- flex-grow: 100;
- min-width: 11em;
- order: 0;
-}
-#user-menu-dropdown > ul.left-column input {
- max-width: 12em;
- width: 100%;
-}
-#user-menu-dropdown li {
- padding: 6px;
}
+#user-menu-dropdown li > form,
#user-menu-dropdown li > a {
display: block;
+ padding: 6px;
+}
+#user-menu-dropdown li > a:hover {
+ background-color: #fff;
+ transition: background-color 0.2s ease-in;
}
#user-menu-dropdown li > a .icon {
margin-right: 0.25em;
}
-#user-menu-dropdown li:first-child,
#user-menu-dropdown li.next-section {
border-top: 1px solid #ccc;
}
#user-menu-dropdown .icon--ei-share-apple {
transform: rotate(90deg);
}
-#menu-photos-2,
-#menu-popular-2 {
+.show-1,
+.show-2,
+.show-3,
+.show-4 {
display: none;
}
-@media screen and (min-width: 710px) {
- #user-menu:hover > #user-menu-dropdown {
- display: flex;
+@media screen and (max-width: 49.375em /* 790/16 */) {
+ #site-search,
+ .only-icon-1 span,
+ .hide-1 {
+ display: none;
}
-}
-
-@media screen and (max-width: 850px) {
- #logo {
- margin: 0 10px 0 10px;
+ .show-1 {
+ display: inline-block;
}
}
-@media screen and (max-width: 710px) {
- #user-menu {
- flex-grow: 1;
+@media screen and (max-width: 38.75em /* 620/16 */) {
+ #header-right > .a-login,
+ #post,
+ #global li {
+ margin: 0 6px;
}
- #user-menu-dropdown {
- border: 10px solid #f2f2ec;
- overflow: hidden;
- width: 100vw;
+ #header_wrapper {
+ min-height: 48px;
}
- #user-menu-dropdown > ul.left-column {
- display: flex;
+ #header_wrapper a {
+ font-size: 12pt;
}
- #menu-expander,
- #menu-spacer-1 {
- display: block;
+ #user-menu > img {
+ margin: 6px;
}
- #search,
- #menu-spacer-2 {
+ .only-icon-2 span,
+ .hide-2 {
display: none;
}
+ .show-2 {
+ display: inline-block;
+ }
}
-@media screen and (max-width: 600px) {
- #global li {
- margin: 0 10px;
+@media screen and (max-width: 32em /* 512/16 */) {
+ #user-menu-dropdown {
+ border: 10px solid #f2f2ec;
+ overflow: hidden;
+ width: 100vw;
}
- #menu-photos-1 {
+ .only-icon-3 span,
+ .hide-3 {
display: none;
}
- #menu-photos-2 {
+ .show-3 {
display: inline-block;
}
}
-@media screen and (max-width: 470px) {
- #logo {
+@media screen and (max-width: 25.625em /* 410/16 */) {
+ .only-icon-4 span,
+ .hide-4 {
display: none;
}
- #menu-popular-2 {
+ .show-4 {
display: inline-block;
}
- #user-menu > img {
- margin: 6px;
- }
- #header_wrapper {
- min-height: 48px;
- }
- #header_wrapper a {
- font-size: 12pt;
- }
-}
-
-@media screen and (max-width: 350px) {
- #user-menu-dropdown > ul.left-column input {
- max-width: 100%;
- }
}
/* #endregion */
/* #region left column internals */
-.toolbar {
- border-top: 1px solid #CCC;
-}
-
-#column ul,
-#column p,
-#column hr {
+#column > ul,
+#column > hr {
margin: 10px 0;
}
-#column > *:not(#ustats) li > a {
+#column li > a,
+#column li > p {
display: block;
- height: 100%;
padding: 6px;
}
-#column > *:not(#ustats) li > a:hover {
+#column li > a:hover {
background-color: #f2f2ec;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
transition: background-color 0.2s ease-in;
}
-#column .margtop {
- margin-top: 15px;
+#column li span {
+ float: right;
}
-#column p {
+#column li > p,
+#column li span {
+ color: #999;
+}
+#column > form {
+ margin-bottom: 10px;
+}
+#column > form > p {
font-size: 10pt;
line-height: 140%;
}
-#column .tags {
- text-align: justify;
-}
#column .inp {
background: #F5F5E9;
border: 1px solid #CCC;
@@ -411,30 +398,20 @@ body:not([data-hash]) #user-menu > #menu-expander {
width: 222px;
}
#ctitle {
- align-items: center;
display: flex;
- flex-direction: row;
font-size: 14pt;
+ position: relative;
}
#ctitle img {
margin-right: 5px;
max-width: 48px;
vertical-align: middle;
}
-#ustats li {
- font-size: 10pt;
- margin: 3px 0;
-}
-#column table.iread {
- width: 100%;
-}
-#column table.iread td {
+#ctags a {
+ display: inline-block;
+ min-width: 25px;
text-align: center;
}
-#column table.iread img {
- height: 48px;
- width: 48px;
-}
#column-expander {
cursor: pointer;
@@ -443,41 +420,59 @@ body:not([data-hash]) #user-menu > #menu-expander {
text-align: end;
}
-@media screen and (min-width: 1001px) {
+@media screen and (min-width: 1001px) and (min-height: 750px) {
#column {
position: sticky;
- top: 60px;
+ top: 67px; /* #wrapper margin-top + #column margin-top */
}
}
@media screen and (max-width: 1000px) {
#column-expander {
- display: block;
+ align-items: center;
+ display: flex;
+ height: 100%;
+ justify-content: flex-end;
+ position: absolute;
+ width: 100%;
}
#column:not(.expanded) > *:not(#ctitle) {
display: none;
}
- ul.toolbar {
- display: flex;
- justify-content: space-around;
- padding-top: 10px;
- }
- #ustats ul {
+
+ #column {
display: flex;
flex-flow: row wrap;
- justify-content: space-around;
+ justify-content: space-between;
+ }
+ #ctitle,
+ #ctags,
+ #column > hr {
+ width: 100%;
}
- #ustats li {
- margin: 3px 6px;
+ #column > ul {
+ flex-grow: 1;
+ margin: 0;
+ max-width: 300px;
+ }
+ #column > hr + ul:not(.toolbar) {
+ max-width: 100%;
}
}
@media screen and (max-width: 470px) {
+ #column > form,
#column .inp {
width: 100%;
}
- #ustats li {
- width: 45%;
+ #column > ul {
+ max-width: 100%;
+ }
+ #column > ul.toolbar {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ width: 100%;
}
}
@@ -721,7 +716,7 @@ li.msgthread .msg-cont {
}
}
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 32em /* 512/16 */) {
article > nav.l > a > span,
.msg-cont > nav.l > a > span {
display: none;
@@ -745,7 +740,8 @@ q:before,
q:after {
content: "";
}
-q, blockquote {
+q,
+blockquote {
border-left: 3px solid #CCC;
color: #666;
display: block;