Significant progress, but a long way from finished.
This commit is contained in:
parent
7439e5ae15
commit
e5d399b86d
14 changed files with 496 additions and 234 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
173
resources/public/css/yyy-app.css
Normal file
173
resources/public/css/yyy-app.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
170
resources/public/css/yyy-site.css
Normal file
170
resources/public/css/yyy-site.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue