CSS Changes-Donation links, fixed list element issues

bookshelf
Gutenberg back end service account 2020-01-16 16:35:01 -05:00
parent 71410351a1
commit 8b1f07966f
6 changed files with 119 additions and 114 deletions

View File

@ -56,7 +56,7 @@
<div class="donate"> <div class="donate">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="new"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="new">
<p>Project Gutenberg appreciates your <a href="/donate/">donation</a> </p> <p>Project Gutenberg appreciates your <a href="/donate/">donation</a>. Direct Paypal Donation Link: </p>
<input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="XKAL6BZL3YPSN" /> <input type="hidden" name="hosted_button_id" value="XKAL6BZL3YPSN" />
<input class="donbtn" type="image" src="/pics/en_US.gif" align="top" name="submit" alt="Donate via PayPal" /> <input class="donbtn" type="image" src="/pics/en_US.gif" align="top" name="submit" alt="Donate via PayPal" />

View File

@ -37,17 +37,16 @@ nav li a {
/*Hover state for top level links*/ /*Hover state for top level links*/
nav li:hover a { nav li:hover a {
/* background: #7A7A7A; */ /* background: #7A7A7A; */
color: #fff; color: #fff;
/* background: #EDDAB7; */ background: #BDAE92;
/* color: #2f3036; */ /* color: #2f3036; */
background: #19c589; /* green */ text-decoration:none;
text-decoration:underline;
/* color: #f00; */ /* color: #f00; */
} }
/*Style for dropdown links*/ /*Style for dropdown links*/
nav li:hover ul a { nav li:hover ul a {
background: #EDDAB7; /* neutral */ background: #EDDAB7;
color: #2f3036; /* gray */ color: #2f3036;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin: 0; margin: 0;
@ -56,8 +55,8 @@ nav li:hover ul a {
} }
/*Hover state for dropdown links*/ /*Hover state for dropdown links*/
nav li:hover ul a:hover { nav li:hover ul a:hover {
background: #7A7A7A; /* gray */ background: #BDAE92;
text-decoration:underline; text-decoration:none;
color: #fff; /* white */ color: #fff; /* white */
} }
/*Hide dropdown links until they are needed*/ /*Hide dropdown links until they are needed*/
@ -144,6 +143,13 @@ nav .donate .donbtn{
display:inline-block; display:inline-block;
cursor: pointer; cursor: pointer;
} }
nav .donate a:link{
text-decoration: underline;
}
nav .donate a:hover{
background: #BDAE92;
color: #fff; /* white */
}
/*Responsive Styles*/ /*Responsive Styles*/
@media screen and /*(orientation: portrait)*/(max-width : 750px){ @media screen and /*(orientation: portrait)*/(max-width : 750px){

View File

@ -156,10 +156,10 @@ div.copyright{margin:2em 1em;font-size:70%;}
.twitter-js-follow-button{width:170px;height:20px;} .twitter-js-follow-button{width:170px;height:20px;}
.rss-follow-button{height:20px;} .rss-follow-button{height:20px;}
th,.shaded,.subcaption,.msgsubcaption,table.tablet,table.tablet td,caption,.caption,.msgcaption,.pagedesc{background-color:#eceadf;} th,.shaded,.subcaption,.msgsubcaption,table.tablet,table.tablet td,caption,.caption,.msgcaption,.pagedesc{background-color:#eceadf;}
a{color:black;} /*a{color:black;}
a:visited{color:#654b24;} a:visited{color:#654b24;}
a:hover{background-color:#eceadf;} a:hover{background-color:#eceadf;
.hover:hover{background-color:#eceadf;} .hover:hover{background-color:#eceadf;}*/
.h1{font-weight:bold;} .h1{font-weight:bold;}
img.cover-art{max-width:100%;} img.cover-art{max-width:100%;}
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:0.5em;} .ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:0.5em;}

View File

@ -29,15 +29,6 @@ html {
} }
/* links */ /* links */
a:active {
color: currentColor;
}
a:hover {
color: currentColor;
text-decoration: underline;
}
a:link { a:link {
color: currentColor; color: currentColor;
text-decoration: none; text-decoration: none;
@ -47,18 +38,27 @@ a:visited {
color: currentColor; color: currentColor;
} }
a:hover {
color: currentColor;
text-decoration: underline;
}
a:active {
color: currentColor;
}
.no-hover:hover { .no-hover:hover {
text-decoration: none; text-decoration: none;
} }
/* text selection */ /* text selection */
::-moz-selection { ::-moz-selection {
background: #0a0a0a; background-color: #0a0a0a;
color: #ffffff; color: #ffffff;
} }
::selection { ::selection {
background: #0a0a0a; background-color: #0a0a0a;
color: #ffffff; color: #ffffff;
} }
@ -262,16 +262,16 @@ library */
column-gap: 0px; column-gap: 0px;
cursor: default; cursor: default;
width: 100%; width: 100%;
height: 620px; /*height: 620px;*/
} }
.bookshelves ul li { /*.bookshelves ul li {
color: #808080; color: #808080;
display: inline-block; display: inline-block;
margin-bottom: 0px; margin-bottom: 0px;
padding-right: 10%; padding-right: 10%;
width: 90%; width: 90%;
} }*/
.page_content .bookshelves h2{ .page_content .bookshelves h2{
border-bottom: 0px none #FFFFFF; border-bottom: 0px none #FFFFFF;
@ -507,12 +507,12 @@ only screen and (max-device-width: 1200px) {
.page_content figure { .page_content figure {
/*border: 3px solid #ddd;*/ /*border: 3px solid #ddd;*/
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
float:right; float:right;
text-align:center; text-align:center;
} }
.page_content figure img{ .page_content figure img{
width:100%; width:100%;
@ -538,12 +538,12 @@ only screen and (max-device-width: 1200px) {
color:#A01F13; color:#A01F13;
}*/ }*/
.page_content h1::before { .page_content h1::before {
display: block; display: block;
content: ""; content: "";
margin-top: -120px; margin-top: -120px;
height: 120px; height: 120px;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
} }
.page_content h1{ .page_content h1{
font-size: 30px; font-size: 30px;
@ -555,12 +555,12 @@ pointer-events: none;
border-bottom: 2px solid #A01F13; border-bottom: 2px solid #A01F13;
} }
.page_content h2::before { .page_content h2::before {
display: block; display: block;
content: ""; content: "";
margin-top: -120px; margin-top: -120px;
height: 120px; height: 120px;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
} }
.page_content h2{ .page_content h2{
font-size: 25px; font-size: 25px;
@ -573,34 +573,28 @@ pointer-events: none;
} }
.page_content h3::before { .page_content h3::before {
display: block; display: block;
content: ""; content: "";
margin-top: -120px; margin-top: -120px;
height: 120px; height: 120px;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
}
.page_content > ul li::before {
content: "\25AA";
color: #A01F13;
display: inline-block;
width: 1em;
margin-left: -1em;
font-size: small;
}
.page_content ul li{
list-style: none;
/*padding: 5px;*/
} }
/*.page_content ul li{ /*.page_content ul{
list-style: none; list-style: square;
}*/
/*.page_content ul li::before {
color: #A01F13;
content: "\25a0";
padding-right: 1em;
font-size:8px;
}*/
.anchor a{
top:-80px;
}
.page_content ul{
list-style: square;
}
/*
.page_content ul li{
padding: 5px;
}*/ }*/
.page_content p{ .page_content p{
@ -610,17 +604,6 @@ font-size:8px;
padding-top:10px; padding-top:10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.page_content a:active {
color: brown;
}
.page_content a:hover {
color: currentColor;
background:#E7E292;
text-decoration: underline;
}
.page_content a:link { .page_content a:link {
color: #003366; color: #003366;
text-decoration: underline; text-decoration: underline;
@ -629,51 +612,66 @@ font-size:8px;
.page_content a:visited { .page_content a:visited {
color: #3E444D; color: #3E444D;
} }
.page_content a:hover {
color: currentColor;
/*background:#E7E292;*/
text-decoration: underline;
background: #BDAE92;
}
.page_content a:active {
color: brown;
}
.anchor a{
top:-80px;
}
.contents{ .contents{
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #a2a9b1; border: 1px solid #a2a9b1;
padding:5px; padding:5px;
display:inline-block; display:inline-block;
} }
.contents ol .inner_1{ .contents ol .inner_1{
list-style-type: lower-roman; list-style-type: lower-roman;
} }
.contents ol .inner_2{ .contents ol .inner_2{
list-style-type: lower-alpha; list-style-type: lower-alpha;
} }
pre{ pre{
border: 1px dashed #2f6fab; border: 1px dashed #2f6fab;
background-color: #f9f9f9; background-color: #f9f9f9;
padding:1em; padding:1em;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
table, th, td{ table, th, td{
background-color: #f8f9fa; background-color: #f8f9fa;
color: #222; color: #222;
margin: 1em 0; margin: 1em 0;
border: 1px solid #a2a9b1; border: 1px solid #a2a9b1;
} }
/*table > * > tr > th{ /*table > * > tr > th{
border: 1px solid #a2a9b1; border: 1px solid #a2a9b1;
text-align:center; text-align:center;
}*/ }*/
.search_category li{ .search_category li{
display:inline-block; display:inline-block;
} }
.search_category a{ .search_category a{
font-weight:bold; font-weight:bold;
} }
.footer { .footer {
text-align:center; text-align:center;
font-size:12px; font-size:12px;
/*position:absolute;*/ /*position:absolute;*/
/*bottom:0; /*bottom:0;
height:60px; Height of the footer */ height:60px; Height of the footer */
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 80%; width: 80%;
@ -682,14 +680,17 @@ font-weight:bold;
} }
.footer ul li{ .footer ul li{
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
} }
.footer img{ .footer img{
align:center; align:center;
} }
/*=====CLASS RULES IMPLEMENTED in pg-desktop-one.css========*/
ul.results li::before {
content: unset;
}
@media only screen and (max-width: 750px) { @media only screen and (max-width: 750px) {
container { container {
left: 0; left: 0;

View File

@ -23,10 +23,7 @@ related content today.
## More about Project Gutenberg ## More about Project Gutenberg
To read more about Project Gutenberg, choose one of these topics: To read more about Project Gutenberg, choose one of these topics:
[Background, History and Philosophy](/about/background/index.html): Various essays and articles. - [Background, History and Philosophy](/about/background/index.html): Various essays and articles.
- [Partners and Affiliates](/about/partners_affiliates.html)
[Partners and Affiliates](/about/partners_affiliates.html) - [Help and how-to](/help/)
- The [Project Gutenberg Literary Archive Foundation](/about/pglaf.html), which operates Project Gutenberg and accepts donations.
[Help and how-to](/help/)
The [Project Gutenberg Literary Archive Foundation](/about/pglaf.html), which operates Project Gutenberg and accepts donations.

View File

@ -79,17 +79,18 @@ These are mostly from reports that still need consideration, or might have some
1. UI/Search: Search output order seems random.**Status: Investigating. Search is handled by PostgreSQL.** 1. UI/Search: Search output order seems random.**Status: Investigating. Search is handled by PostgreSQL.**
2. autocat3/Search: Advanced Search, Author: "Agatha Christie" and "Ernest Hemingway": the two searches give a very different layout. **Status: Investigating.** 2. autocat3/Search: Advanced Search, Author: "Agatha Christie" and "Ernest Hemingway": the two searches give a very different layout. **Status: Investigating.**
3. UI: Should the Search and Browse menu item be "Search & Browse" (it's common to use & in menus) and could the dropdown include Recently added? I'd be tempted to move the Bookshelves to just above offline calalogs. **Status: Being considered** 3. UI: Should the Search and Browse menu item be "Search & Browse" (it's common to use & in menus) and could the dropdown include Recently added? I'd be tempted to move the Bookshelves to just above offline calalogs. **Status: Being considered**
4. UI: "Donate" button and "Donate" link: do we need both? "donation" text isn't underlined, so doesn't look like a link. Should this be "appreciates your donations" rather "appreciates your donation?" **Status: We will incluude some assessment of this in a forthcoming user survey.** 4. UI: "Donate" button and "Donate" link: do we need both? Should this be "appreciates your donations" rather "appreciates your donation?" **Status:Donation Text is now underlined. Added text for direct donation. We will include some assessment of this in a forthcoming user survey.**
5. UI: The "Project Gutenberg" logo in upper left should be bigger. **Status: awaiting user testing.** 5. UI: The "Project Gutenberg" logo in upper left should be bigger. **Status: awaiting user testing.**
6. UI: Do you really need the Help and Information topic for the mainpage since you have a Help item going elsewhere in the site and this particular info isn't really key like the info about books and how tocreate the books. **Status: awaiting user testing.** 6. UI: Do you really need the Help and Information topic for the mainpage since you have a Help item going elsewhere in the site and this particular info isn't really key like the info about books and how tocreate the books. **Status: awaiting user testing.**
7. UI: Printing press in the logo looks like R2D2.**Status: Consider asking about this during user evaluation.** 7. UI: Printing press in the logo looks like R2D2.**Status: Consider asking about this during user evaluation.**
8. UI/Search: Advanced Search has three different button styles. This is distracting for users.**Status: Consider changing; consider asking during user evaluation.** 8. UI/Search: Advanced Search has three different button styles. This is distracting for users.**Status: Consider changing; consider asking during user evaluation.**
9. UI: Perhaps the "Help" top menu item should be at the far right which is a common place for Help on menus. ** Status: Being considered, might be part of user testing.** 9. UI: Perhaps the "Help" top menu item should be at the far right which is a common place for Help on menus. ** Status: Being considered, might be part of user testing.**
10. UI/CSS: It's not clear what the meaning is of the --> arrow aftercertain drop-down menu items. Is it necessary? **Status: Being considered. Can we do a 2nd level pop-up menu?** 10. UI/CSS: It's not clear what the meaning is of the --> arrow aftercertain drop-down menu items. Is it necessary? **Status: Being considered. Can we do a 2nd level pop-up menu?**
11. CSS: Your list elements in the text part of the page such as under "Find Free eBooks", are acting odd -- with the second lineof text wrapping under the bullet rather than being set off from it. **Status: Actively Investigating.** 11. CSS: Your list elements in the text part of the page such as under "Find Free eBooks", are acting odd -- with the second lineof text wrapping under the bullet rather than being set off from it. **Status: Resolved**
12. CSS: I wish the top menu bar and dropdowns used a sans serif font.Sans serif is more common for menus. Do you really need an underlineto appear under the text when you highlight a menu item? **Status: Will Investigate.** 12. CSS: I wish the top menu bar and dropdowns used a sans serif font.Sans serif is more common for menus. Do you really need an underlineto appear under the text when you highlight a menu item? **Status: Actively Investigating.**
13. CSS: It might be worth considering using a san serif for headings andserif (as you are doing) for the main text on the pages. That's avery common typographic style. **Status: Will Investigate** 13. CSS: It might be worth considering using a san serif for headings andserif (as you are doing) for the main text on the pages. That's avery common typographic style. **Status: Actively Investigating**
14. CSS: How to make pop-up menu list display fit better? First, I couldnt figure out how to get less spacing between the pop-up menu items (there is too much space before/after, and should be automatic spacing). Second, and more importantly, on a very small screen the menu items at the bottom of the list are unreachable (i.e., shrink your screen, and youll see they cannot be reached). Can this be some sort of scrollable list? **Status: Will Investigate** 14. CSS: How to make pop-up menu list display fit better? First, I couldnt figure out how to get less spacing between the pop-up menu items (there is too much space before/after, and should be automatic spacing). Second, and more importantly, on a very small screen the menu items at the bottom of the list are unreachable (i.e., shrink your screen, and youll see they cannot be reached). Can this be some sort of scrollable list? **Status: Will Investigate**
### HTML and autocat3 Related Issues ### HTML and autocat3 Related Issues
1. HTML: The site embeds Facebook and Twitter metadata to support rendering nicely on these platforms but doesn't embed structured data for the same effect on Google https://developers.google.com/search/docs/guides/intro-structured-data. **Status: All the headers need to be investigated and updated.** Note especially that autocat3, PHP and gutenbergsite all have different headers (autocat3 actually has multiple headers, via Genshi templates), and that only gutenbergsite is HTML5. So, we need to work towards a single header base that is valid, and suitable for HTML5 and HTML4. 1. HTML: The site embeds Facebook and Twitter metadata to support rendering nicely on these platforms but doesn't embed structured data for the same effect on Google https://developers.google.com/search/docs/guides/intro-structured-data. **Status: All the headers need to be investigated and updated.** Note especially that autocat3, PHP and gutenbergsite all have different headers (autocat3 actually has multiple headers, via Genshi templates), and that only gutenbergsite is HTML5. So, we need to work towards a single header base that is valid, and suitable for HTML5 and HTML4.
2. HTML/autocat3: The session ID is included in the query parameters of Kindle and ePub download links. This could expose the session ID to intermediaries (caches, CDNs, ISPs). **Status: It's not clear whether or why this is necessary, since the downloads are to static files. It might be we can disable this.** 2. HTML/autocat3: The session ID is included in the query parameters of Kindle and ePub download links. This could expose the session ID to intermediaries (caches, CDNs, ISPs). **Status: It's not clear whether or why this is necessary, since the downloads are to static files. It might be we can disable this.**