/* File update Aug 10, 2025
For the following directries
(does not include auto-index directories. They use Nginx-designated style sheet)
folks
e-thomas-harnish
index,htm
e-t-harnish-birth-chart.htm
memoirs
index.htm
memoirs-skin-2025.css < is still in place, not removed yet
e-thomas-harnish-photos
helen-i-harnish
helens-photo-project
progress log, files changed
e-t-harnish-birth-chart.htm
NEW STRUCTURE AVAILABLE
THIS IS GOVERNING CSS STARTING AUG 2025, ALL OTHER CSS CONSOLIDATE
Old files to consolidate:
harnish.css
folks.css
DID NOT INCLUDE:
clippings.css
memoirs-skin.css
index-style-sheet.css
newspapers-theme.css
CSS for autoindex is here:
/nginx-theme/css/style.css
nginx config:
add_before_body "/nginx-theme/nginx-before.html";
add_after_body "/nginx-theme/nginx-after.html";
*/
html,
body {
background: #232323;
}
body {
text-align: left;
font-family: verdana, tahoma, ariel, sans-serif;
font-size: 20px;
line-height: 1.8rem;
color: #fefefe;
/* color: yellow;
color: lightgreen; */
}
/* new structure August 6, 2025 */
#mainwrapper {
text-align: center;
border: 0px solid pink;
}
#container {
text-align: left;
width: 100%;
max-width: 700px;
margin: 1rem auto;
padding-left: 3px;
padding-right: 3px;
border: 0px solid lightgreen;
border-bottom: 150px solid transparent;
}
#logo {
height: 120px;
padding: 0;
}
/* this must also go into the nginx-theme css sheet */
#top,
.top {
margin: 1.5rem 0 1.5rem 0;
}
#top span,
.top span {
display: inline-block;
margin-right: 10px;
}
#header,
.header {
margin-top: 1.5rem;
text-align:center;
}
/* "header-image-div" has a float. "image-div" does not */
.header-image-div {
float: left;
width: 300px;
}
.header-right {
float: left;
width: 250px;
margin-left: 2rem;
font-size: 80%;
border: 0px solid red;
}
#image-div,
.image-div {
width: 100%;
margin: 5px auto;
text-align: center;
}
@media only screen and (max-width: 559px) {
#image-div,
.image-div {
width: 100%;
margin: 5px auto;
float: none;
text-align: center;
}
.image-div img,
#image-div img {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
#links,
.links {
margin-top: 1.2rem;
}
p {
padding-top: 0px;
margin-top: 0px;
}
.alert {
color: yellow;
font-size: 2rem;
}
.note,
p.note,
span.note {
font-size: 85%;
}
.center {
text-align: center;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.strong {
font-weight: bold;
}
h1,
h2,
h3 {
text-align: center;
}
h1,
h2,
h3,
p {
line-height: 1.8em;
}
h1 {
font-size: 125%;
border: 0px solid blue;
}
h2 {
font-size: 110%;
border: 0px solid green;
}
h3 {
font-size: 100%;
border: 0px solid yellow;
}
#photos h2 {
text-align: left;
}
/* defailt is 18px */
h1.tight,
h2.tight,
h3.tight,
p.tight {
margin-bottom: 5px;
}
/* these styles were taken from Vindy Obit */
#article {
width: 100%;
max-width: 600px;
border: 0px solid yellow;
margin: 0 auto;
}
@media only screen and (max-width: 600px) {
#mainwrapper {
width: 100%;
max-width: 100%;
}
#maincontent {
width: 100%;
max-width: 100%;
}
}
.left-image-div {
float: left;
margin-top: 8px;
margin-left: 0px;
margin-right: 20px;
}
.right-image-div {
float: right;
margin-top: 8px;
margin-right: 10px;
margin-left: 20px;
}
/*
Global styles
#abdcfb is a tint of lightskyblue, which is #87cefa
https://www.color-hex.com/color/87cefa
*/
a:link {
color: #abdcfb;
text-decoration: none;
}
a:active {
color: pink;
text-decoration: none;
}
a:visited {
color: #abdcfb;
text-decoration: none;
}
a:hover {
color: lightgreen;
text-decoration: underline;
}
p.thumbnails-message {
font-size: 80%;
color: lightgreen;
color: inherit;
}
span.scans-message {
font-size: 85%;
font-size: inherit;
color: lightyellow;
color: inherit;
}
ul.no-bullet {
list-style: none;
}
hr {
margin-left: 25px;
margin-left: 0;
}
ul li {
margin-top: 0;
margin-bottom: 1rem;
}
img.thumb.horiz {
margin-top: 5px;
width: 100%;
max-width: 400px;
}
img.thumb.vert {
margin-top: 5px;
height: 500px;
}
p.indent {
margin-left: 2.1rem;
}
p.scroll-to-top {
margin-top: 2rem;
margin-bottom: 2rem;
}
p.scroll-to-top a {
padding: 10px;
background: #345;
}
/* without this, the blank space to the right of the thumbnail is clickable */
p.display {
border: 0px solid yellow;
width: fit-content;
max-width: 300px;
font-size: 90%;
}
/* this is needed so the thumbnail can have a top margin,
below the image number and description.
Easier than using a lable for the text. */
p.display a {
display: block;
margin-top: 8px;
}
span.page {
display: inline-block;
width: 300px;
margin-left: 0;
}
span.directory {
display: inline-block;
margin-left: 0rem;
width: 200px;
}
@media screen and (max-width: 550px) {
span.directory {
margin-left: 2.5rem;
margin-top: 1rem;
}
}
span.nowrap {
white-space: nowrap;
}
#links ul.no-bullet {
margin-left: 0;
padding-left: 0;
border: 0px solid yellow;
}
span.label {
margin-left: 10px;
}
/* the following are untested Aug 2025 */
/* the following are untested Aug 2025 */
/* the following are untested Aug 2025 */
td {
text-align: left;
vertical-align: top;
}
/* end */