com web/shared: Rewrite widths and paddings: styles/defaults.css
| From: | Hannes Magnusson | Date: | Wed, 18 Dec 2013 07:13:17 +0000 |
| Subject: | com web/shared: Rewrite widths and paddings: styles/defaults.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17715@lists.php.net to get a copy of this message | ||
Commit: 1c08b51142877028efddb5979f45e8ce34a6fc09
Author: Hannes Magnusson <bjori@mongodb.com> Tue, 17 Dec 2013 23:13:17 -0800
Parents: 580cbc805a9bcb0f3ee3a0094efa6fd4b2419223
Branches: master
Link: http://git.php.net/?p=web/shared.git;a=commitdiff;h=1c08b51142877028efddb5979f45e8ce34a6fc09
Log:
Rewrite widths and paddings
Fixes flow when resizing
Fixes the #anchor problem also in a better way, by making it relative to the content
containers.. No need to offset the IDs
Changed paths:
M styles/defaults.css
Diff:
diff --git a/styles/defaults.css b/styles/defaults.css
index 8a3ae0d..dcfa10c 100644
--- a/styles/defaults.css
+++ b/styles/defaults.css
@@ -25,7 +25,11 @@ body {
font: normal 1em Tahoma, Arial, sans-serif, serif, monospace;
background-color: #E3E3F1;
height: 100%;
+ width: 100%;
font-size: 1em;
+ height: 100%;
+ position: fixed;
+ margin: 0 !important;
}
header {
top: 0px;
@@ -39,9 +43,15 @@ header {
z-index: 1;
}
footer {
- width: 100%;
border-top: .25em solid #99C;
background-color: #262626 !important;
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 45px;
+}
+footer nav {
+ margin: 0 auto;
}
nav {
line-height: 2.5;
@@ -54,6 +64,7 @@ nav ul {
list-style: none;
list-style-type: none;
margin: 0;
+ padding: 0;
}
nav li {
display: inline-block;
@@ -115,17 +126,17 @@ p {
margin: .75em 0;
}
-/* Pad the #fragment below the header */
-section *[id]:not(input){
- margin-top: -50px;
- padding-top: 50px;
+#padder {
+ position: fixed;
+ height: 100%;
+ overflow-y: scroll;
}
+/* Pad the #fragment below the header */
section.fullscreen {
/* Force the content below the fixed header */
display: block;
- height: 100%;
background: #fff;
- padding: 1.5em;
+ padding-bottom: 50px;
}
.secondscreen {
vertical-align: top;
@@ -158,24 +169,6 @@ section.fullscreen {
}
/* {{{ Responsive styles */
-.fullscreen {
- width: 940px;
- margin-right: auto;
- margin-left: auto;
- *zoom: 1;
-}
-.mainscreen, .secondscreen {
- display: inline-block;
-}
-.mainscreen {
- width: 700px;
-}
-.secondscreen {
- width: 220px;
-}
-body {
- margin: 50px 0 0 0;
-}
#mainmenu-toggle-overlay, #mainmenu-toggle {
display: none;
}
@@ -183,7 +176,7 @@ body {
/* This just has to be big enough to cover whatever's in nav. */
max-height: 50em;
}
-@media (max-width:465px) {
+@media (max-width:640px) {
#mainmenu-toggle-overlay {
background: #669 url(http://php.net/images/mobile-menu.png) no-repeat center center;
@@ -206,60 +199,99 @@ body {
display: inline-block;
opacity: 0;
}
- nav {
+ header nav {
max-height: 0;
- overflow: hidden;
+ }
+ nav {
+ overflow: auto;
+ clear: both;
}
nav ul, nav li, nav a {
display: block;
- padding: 0;
+ text-align: center;
}
- header {
+ .home {
position: absolute;
+ top: 0;
}
-}
-@media (max-width: 767px) {
- .fullscreen {
- width: auto;
- padding: 0px 10px 0px 10px;
- }
- section.mainscreen {
- width: auto;
- }
+ #padder,
+ .fullscreen,
+ .mainscreen,
.secondscreen {
+ display: block;
width: 100%;
}
+ #padder {
+ top: 50px;
+ }
body {
- margin: 100px 0 0 0;
+ margin: 0;
+ background-color: #fff;
}
-}
-@media (min-width: 768px) and (max-width: 979px) {
- .fullscreen {
- width: 724px;
+ footer {
+ max-height: 0;
}
- .mainscreen {
- width: 538px;
+ img {
+ max-width: 100%;
+ }
+}
+@media (min-width: 641px) {
+ #padder {
+ width: 100%;
}
+ .fullscreen,
+ .mainscreen,
.secondscreen {
- width: 166px;
+ width: 90%;
+ display: inline-block;
+ }
+ #padder {
+ top: 85px;
+ }
+ header, footer, #padder {
+ padding: 0 10%;
+ }
+ img {
+ max-width: 100%
}
}
-@media (min-width: 1200px) {
+
+@media (min-width: 1020px) {
+ #padder,
.fullscreen {
- width: 1170px;
+ display: block;
+ }
+ .fullscreen {
+ width: 85%;
+ }
+ #padder {
+ top: 45px;
+ width: 100%;
+ background-color: #E3E3F1;
+ }
+ #padder .fullscreen {
+ margin-bottom: 50px;
+ }
+ header, footer, #padder {
+ padding: 0 75px;
}
.mainscreen {
- width: 870px;
+ width: 70%;
+ display: inline-block;
+ }
+ .mainscreen {
+ padding: 0;
}
.secondscreen {
- margin-left: 10px;
- width: 270px;
+ width: 250px;
}
}
-
-@media (min-width: 1500px) {
+@media (min-width: 1250px) {
.fullscreen {
- width: 1440px;
+ width: 90%;
+ }
+ .mainscreen {
+ padding: 0 40px;
}
}
/* }}} */