simon/smeagol
1
0
Fork 0
mirror of https://github.com/journeyman-cc/smeagol.git synced 2026-04-12 18:05:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

#18: A lot better, but not there yet

Browse source 
Looks fine on desktops. On phones the wiki page looks reasonable, but for some reason I can't yet fathom has a huge right margin; tablets I haven't tackled yet.
This commit is contained in:
simon 2017-03-12 19:26:26 +00:00
parent 6873b11fbd
commit 136057a09e
9 changed files with 313 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

266
resources/public/content/stylesheet.css
View file

@ -82,10 +82,6 @@ header h1 {
margin-top: 0;
}
header img {
float: right;
}
input {
background-color: white;
}
@ -115,14 +111,6 @@ label {
display: inline-block;
}
menu li {
display: inline;
}
menu li::before {
content: "|| ";
}
table {
border: 2px solid black;
border-collapse: collapse;
@ -147,58 +135,6 @@ th {
## ids generally in document order
*/
/* 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(40,40,40,0.8);
}
#user {
font-height: 66%;
float: right;
padding: 0.1em 0.75em;
margin: 0;
color: white;
}
#user a {
color: silver;
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav-menu {
margin: 0;
padding: 0;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
#nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#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; }
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
#main-container{
}
@ -211,14 +147,6 @@ li.nav-item a:active { background: gray; color: white; }
float: left;
}
/* content of the current in the Wiki - editable, provided by users. Within main-container */
#content {
border: thin solid silver;
width: 80%;
float: right;
padding-bottom: 5em;
}
/* cookies information box, fixed, in right margin, just above footer */
#cookies {
width: 30%;
@ -312,3 +240,197 @@ li.nav-item a:active { background: gray; color: white; }
margin: 0;
}
/* 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(40,40,40,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) {
/* content of the current in the Wiki - editable, provided by users. Within main-container */
#content {
border: thin solid silver;
width: 80%;
float: right;
padding-bottom: 5em;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
background:rgba(40,40,40,0.8);
font-size: larger;
}
#nav:hover #nav-menu {
display: inline;
}
#nav-icon {
padding: 0.25em;
float: left;
}
#nav-menu {
display: none;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
#nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#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; }
}
/* phones, and, indeed, smaller phones. Adapted to touch; display radically
* decluttered */
@media all and (max-device-width: 768px) {
footer {
display: none;
}
h1 {
/* I wouldn't normally use a px value, but the menu icon is 49px wide */
padding: 0.25em 5%;
text-align: right;
}
/* content of the current in the Wiki - editable, provided by users. Within main-container */
#content {
border: thin solid silver;
width: 100%;
padding-bottom: 2em;
}
#main-container {
width: 100%;
margin: 0;
padding: 0;
}
#cookies {
display: none;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
font-size: 200%;
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav:hover #nav-menu, #nav:hover #phone-side-bar {
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;
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;
}
}