diff --git a/resources/public/css/screen.css b/resources/public/css/screen.css deleted file mode 100644 index 534309c..0000000 --- a/resources/public/css/screen.css +++ /dev/null @@ -1,68 +0,0 @@ -html, -body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - height: 100%; -} -.navbar { - margin-bottom: 10px; -} -.navbar-brand { - float: none; -} -.navbar-nav .nav-item { - float: none; -} -.navbar-divider, -.navbar-nav .nav-item+.nav-item, -.navbar-nav .nav-link + .nav-link { - margin-left: 0; -} -@media (min-width: 34em) { - .navbar-brand { - float: left; - } - .navbar-nav .nav-item { - float: left; - } - .navbar-divider, - .navbar-nav .nav-item+.nav-item, - .navbar-nav .nav-link + .nav-link { - margin-left: 1rem; - } -} - -@-moz-keyframes three-quarters-loader { - 0% { - -moz-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-webkit-keyframes three-quarters-loader { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes three-quarters-loader { - 0% { - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - diff --git a/resources/public/css/yyy-app.css b/resources/public/css/yyy-app.css new file mode 100644 index 0000000..8a46cd2 --- /dev/null +++ b/resources/public/css/yyy-app.css @@ -0,0 +1,173 @@ +/** + * Additional CSS for the main site. Navigation works differently between + * app and the main site; in the app it's driven by React, while in + * the main site it's CSS. + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, + * USA. + */ + + +/* desktops and laptops, primarily. Adapted to mouse; targets may be small */ +@media all and (min-device-width: 1025px) { + /* top-of-page navigation, not editable, provided by Smeagol */ + #nav{ + margin: 0; + padding: 0; + top: 0; + width: 100%; + _position: absolute; + _top: expression(document.documentElement.scrollTop); + z-index: 149; + background:rgba(7,27,51,0.8); + } + + /* only needed for fly-out menu effect on tablet and phone stylesheets */ + #nav-icon { + display: none; + } + + #nav-menu { + margin: 0; + padding: 0; + } + + #nav menu li { + padding: 0; + margin: 0; + display: inline; + } + + #nav menu li a { + color: white; + text-decoration: none; + font-weight: bold; + padding: 0.1em 0.75em; + margin: 0; + } + + #nav menu li.active a { background: gray;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu li#user { + padding: 0 1em; + float: right; + } +} + +/* tablets, primarily. Adapted to touch; targets are larger */ +@media all and (min-device-width: 769px) and (max-device-width: 1024px) { + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + color: silver; + background:rgba(40,40,40,0.9); + } + + #nav a { + color: white; + text-decoration: none; + font-weight: bold; + } + + #nav:hover #nav-menu { + display: block; + list-style-type: none; + width: 100%; + } + + #nav-icon { + padding: 0; + } + + #nav-menu { + display: none; + } + + #nav menu li { + padding: 0.5em 2em 0.5em 0.5em; + margin: 0.5 em; + font-size: 150%; + } + + #nav menu li a { + } + + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu #user { + text-decoration: none; + font-weight: bold; + margin: 0; + } +} + +/* phones, and, indeed, smaller phones. Adapted to touch; display radically + * decluttered */ +@media all and (max-device-width: 768px) { + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + color: silver; + background:rgba(40,40,40,0.9); + } + + #nav:hover #nav-menu { + display: block; + list-style-type: none; + width: 100%; + } + + #nav a { + color: white; + text-decoration: none; + font-weight: bold; + } + + #nav-icon { + padding: 0; + } + + #nav-menu { + list-style-type: none; + display: none; + } + + #nav menu li { + padding: 0.5em 2em 0.5em 0.5em; + margin: 0.5 em; + font-size: 150%; + } + + #nav menu li a { + } + + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu #user { + text-decoration: none; + font-weight: bold; + margin: 0; + } +} diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-common.css similarity index 73% rename from resources/public/css/yyy-static.css rename to resources/public/css/yyy-common.css index 515088f..383b77e 100644 --- a/resources/public/css/yyy-static.css +++ b/resources/public/css/yyy-common.css @@ -201,11 +201,13 @@ th { } -/* left bar for all pages in the Wiki - editable, provided by users. Within main-container */ -#side-bar { - width: 17%; - height: 100%; - float: left; +#big-links { + width: 100%; + min-height: 3.5em; +} + +#content { + clear: both; } /* cookies information box, fixed, in right margin, just above footer */ @@ -337,62 +339,11 @@ th { /* desktops and laptops, primarily. Adapted to mouse; targets may be small */ @media all and (min-device-width: 1025px) { - /* content of the current page in the Wiki - editable, provided by users. Within main-container */ #content { - border: thin solid silver; width: 80%; float: right; padding-bottom: 5em; } - - #phone-side-bar, #phone-credits { - display: none; - } - - /* top-of-page navigation, not editable, provided by Smeagol */ - #nav{ - margin: 0; - padding: 0; - top: 0; - width: 100%; - _position: absolute; - _top: expression(document.documentElement.scrollTop); - z-index: 149; - background:rgba(7,27,51,0.8); - } - - /* only needed for fly-out menu effect on tablet and phone stylesheets */ - #nav-icon { - display: none; - } - - #nav-menu { - margin: 0; - padding: 0; - } - - #nav menu li { - padding: 0; - margin: 0; - display: inline; - } - - #nav menu li a { - color: white; - text-decoration: none; - font-weight: bold; - padding: 0.1em 0.75em; - margin: 0; - } - - #nav menu li.active a { background: gray;} - li.nav-item a:hover { background: rgb( 240, 240, 240) } - li.nav-item a:active { background: gray; color: white; } - - #nav menu li#user { - padding: 0 1em; - float: right; - } } /* tablets, primarily. Adapted to touch; targets are larger */ @@ -410,54 +361,6 @@ th { float: right; padding-bottom: 5em; } - - #nav{ - margin: 0; - padding: 0; - position: fixed; - z-index: 149; - color: silver; - background:rgba(40,40,40,0.9); - } - - #nav a { - color: white; - text-decoration: none; - font-weight: bold; - } - - #nav:hover #nav-menu { - display: block; - list-style-type: none; - width: 100%; - } - - #nav-icon { - padding: 0; - } - - #nav-menu, #phone-side-bar { - display: none; - } - - #nav menu li { - padding: 0.5em 2em 0.5em 0.5em; - margin: 0.5 em; - font-size: 150%; - } - - #nav menu li a { - } - - #nav ul li.active a { background: silver;} - li.nav-item a:hover { background: rgb( 240, 240, 240) } - li.nav-item a:active { background: gray; color: white; } - - #nav menu #user { - text-decoration: none; - font-weight: bold; - margin: 0; - } } /* phones, and, indeed, smaller phones. Adapted to touch; display radically @@ -499,50 +402,4 @@ th { #cookies { display: none; } - - #nav{ - margin: 0; - padding: 0; - position: fixed; - z-index: 149; - color: silver; - background:rgba(40,40,40,0.9); - } - - #nav a { - color: white; - text-decoration: none; - font-weight: bold; - } - - #nav-icon { - padding: 0; - } - - #nav-menu { - list-style-type: none; - } - - #nav menu li { - padding: 0.5em 2em 0.5em 0.5em; - margin: 0.5 em; - font-size: 150%; - } - - #nav menu li a { - } - - #nav ul li.active a { background: silver;} - li.nav-item a:hover { background: rgb( 240, 240, 240) } - li.nav-item a:active { background: gray; color: white; } - - #nav menu #user { - text-decoration: none; - font-weight: bold; - margin: 0; - } - - #side-bar { - display: none; - } } diff --git a/resources/public/css/yyy-site.css b/resources/public/css/yyy-site.css new file mode 100644 index 0000000..0f25301 --- /dev/null +++ b/resources/public/css/yyy-site.css @@ -0,0 +1,170 @@ +/** + * Additional CSS for the app. Navigation works differently between + * app and the main site; in the app it's driven by React, while in + * the main site it's CSS. + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, + * USA. + * + * # The Stylesheet + * + * ## html elements generally in alphabetic order + */ + + +/* desktops and laptops, primarily. Adapted to mouse; targets may be small */ +@media all and (min-device-width: 1025px) { + /* top-of-page navigation, not editable, provided by Smeagol */ + #nav{ + margin: 0; + padding: 0; + top: 0; + width: 100%; + _position: absolute; + _top: expression(document.documentElement.scrollTop); + z-index: 149; + background:rgba(7,27,51,0.8); + } + + /* only needed for fly-out menu effect on tablet and phone stylesheets */ + #nav-icon { + display: none; + } + + #nav-menu { + margin: 0; + padding: 0; + } + + #nav menu li { + padding: 0; + margin: 0; + display: inline; + } + + #nav menu li a { + color: white; + text-decoration: none; + font-weight: bold; + padding: 0.1em 0.75em; + margin: 0; + } + + #nav menu li.active a { background: gray;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu li#user { + padding: 0 1em; + float: right; + } +} + +/* tablets, primarily. Adapted to touch; targets are larger */ +@media all and (min-device-width: 769px) and (max-device-width: 1024px) { + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + color: silver; + background:rgba(40,40,40,0.9); + } + + #nav a { + color: white; + text-decoration: none; + font-weight: bold; + } + + #nav:hover #nav-menu { + display: block; + list-style-type: none; + width: 100%; + } + + #nav-icon { + padding: 0; + } + + #nav-menu, #phone-side-bar { + display: none; + } + + #nav menu li { + padding: 0.5em 2em 0.5em 0.5em; + margin: 0.5 em; + font-size: 150%; + } + + #nav menu li a { + } + + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu #user { + text-decoration: none; + font-weight: bold; + margin: 0; + } +} + +/* phones, and, indeed, smaller phones. Adapted to touch; display radically + * decluttered */ +@media all and (max-device-width: 768px) { + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + color: silver; + background:rgba(40,40,40,0.9); + } + + #nav a { + color: white; + text-decoration: none; + font-weight: bold; + } + + #nav-icon { + padding: 0; + } + + #nav-menu { + list-style-type: none; + } + + #nav menu li { + padding: 0.5em 2em 0.5em 0.5em; + margin: 0.5 em; + font-size: 150%; + } + + #nav menu li a { + } + + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu #user { + text-decoration: none; + font-weight: bold; + margin: 0; + } +} diff --git a/resources/templates/app.html b/resources/templates/app.html index 5c334b5..f313066 100644 --- a/resources/templates/app.html +++ b/resources/templates/app.html @@ -3,7 +3,8 @@ - + + You Yes Yet? diff --git a/resources/templates/base-unauthenticated.html b/resources/templates/base-unauthenticated.html index d1382fc..c243d01 100644 --- a/resources/templates/base-unauthenticated.html +++ b/resources/templates/base-unauthenticated.html @@ -3,8 +3,8 @@ - - + + {{title}} @@ -36,5 +36,20 @@ {% endblock %} +