com web/people: Set all width/lengths in the "responsive" part of the css - last: styles.css
| From: | Hannes Magnusson | Date: | Thu, 12 Dec 2013 21:20:15 +0000 |
| Subject: | com web/people: Set all width/lengths in the "responsive" part of the css - last: styles.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17554@lists.php.net to get a copy of this message | ||
Commit: 88c49b579ce56549f9c5c05b6153a8566cf991cd
Author: Hannes Magnusson <bjori@mongodb.com> Thu, 12 Dec 2013 13:20:15 -0800
Parents: cd864f5822923be73fb13d19d8bfd6c9a70596e3
Branches: master
Link: http://git.php.net/?p=web/people.git;a=commitdiff;h=88c49b579ce56549f9c5c05b6153a8566cf991cd
Log:
Set all width/lengths in the "responsive" part of the css - last
Changed paths:
M styles.css
Diff:
diff --git a/styles.css b/styles.css
index a22cf21..ae66e2b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,109 +1,4 @@
/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */
-/* {{{ widths blatantly stolen from bootstrap */
-.fullscreen {
- width: 940px;
-}
-.fullscreen {
- 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;
-}
-#mainmenu-toggle:checked + nav {
- /* This just has to be big enough to cover whatever's in nav. */
- max-height: 50em;
-}
-@media (max-width:465px) {
-
- #mainmenu-toggle-overlay {
- background: #669 url(http://php.net/images/mobile-menu.png) no-repeat center center;
- float: right;
- display: block;
- height: 32px;
- width: 34px;
- margin-top: 10px;
- margin-right: 10px;
- border-radius: 5px;
- }
- #mainmenu-toggle {
- height: 32px;
- width: 34px;
- line-height: 32px;
- margin-top: 10px;
- margin-right: -34px;
- float: right;
- border-bottom: 0 none;
- display: inline-block;
- opacity: 0;
- }
- nav {
- max-height: 0;
- overflow: hidden;
- display: block;
- }
- nav ul, nav li, nav a {
- display: block;
- }
- header {
- position: absolute;
- }
-}
-@media (max-width: 767px) {
- .fullscreen {
- width: auto;
- padding: 0px 10px 0px 10px;
- }
- body {
- margin: 100px 0 0 0;
- }
- .secondscreen {
- width: 100%;
- }
-}
-@media (min-width: 768px) and (max-width: 979px) {
- .fullscreen {
- width: 724px;
- }
- .mainscreen {
- width: 538px;
- }
- .secondscreen {
- width: 166px;
- }
-}
-@media (min-width: 1200px) {
- .fullscreen {
- width: 1170px;
- }
- .mainscreen {
- width: 870px;
- }
- .secondscreen {
- margin-left: 10px;
- width: 270px;
- }
-}
-
-@media (min-width: 1500px) {
- .fullscreen {
- width: 1440px;
- }
-}
-/* }}} */
body {
@@ -242,3 +137,105 @@ section.fullscreen {
color: #660000;
}
+/* {{{ widths blatantly stolen from bootstrap */
+.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;
+}
+#mainmenu-toggle:checked + nav {
+ /* This just has to be big enough to cover whatever's in nav. */
+ max-height: 50em;
+}
+@media (max-width:465px) {
+
+ #mainmenu-toggle-overlay {
+ background: #669 url(http://php.net/images/mobile-menu.png) no-repeat center center;
+ float: right;
+ display: block;
+ height: 32px;
+ width: 34px;
+ margin-top: 10px;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+ #mainmenu-toggle {
+ height: 32px;
+ width: 34px;
+ line-height: 32px;
+ margin-top: 10px;
+ margin-right: -34px;
+ float: right;
+ border-bottom: 0 none;
+ display: inline-block;
+ opacity: 0;
+ }
+ nav {
+ max-height: 0;
+ overflow: hidden;
+ }
+ nav ul, nav li, nav a {
+ display: block;
+ }
+ header {
+ position: absolute;
+ }
+}
+@media (max-width: 767px) {
+ .fullscreen {
+ width: auto;
+ padding: 0px 10px 0px 10px;
+ }
+ body {
+ margin: 100px 0 0 0;
+ }
+ .secondscreen {
+ width: 100%;
+ }
+}
+@media (min-width: 768px) and (max-width: 979px) {
+ .fullscreen {
+ width: 724px;
+ }
+ .mainscreen {
+ width: 538px;
+ }
+ .secondscreen {
+ width: 166px;
+ }
+}
+@media (min-width: 1200px) {
+ .fullscreen {
+ width: 1170px;
+ }
+ .mainscreen {
+ width: 870px;
+ }
+ .secondscreen {
+ margin-left: 10px;
+ width: 270px;
+ }
+}
+
+@media (min-width: 1500px) {
+ .fullscreen {
+ width: 1440px;
+ }
+}
+/* }}} */