Have a better narrative web site
10341: When we are on a mobile phone or a small device, we suppress the navigation tab. In place, we have a new icon on the upper left which is used to show the dropdown menu. Thanks to Theo van Rijn for showing me the way to do that. 10962: For Home, Introduction and Contact, If we have an image and this image contains regions, show the regions. We can go directly to the person page associated to this region. If we click on the image, we go directly to the associated media page. This will be true only if we selected "include images and media objects" and "create and only use thumbnail" is unselected 11018: The first line identifying a family will be more legible. The link is not useful in the parents and pedigree section for the current person. Adapt some css files. 11029: sort the place references either by date or by name. Resolves #10341, #10962, #11018, #11029
This commit is contained in:
SNoiraud
Nick Hall
@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -59,7 +61,7 @@ the page.
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
font-size: 100%;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
background-color: #EEE;
|
||||
@@ -67,6 +69,13 @@ body {
|
||||
body > div {
|
||||
clear: both;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
@@ -75,9 +84,19 @@ body > div {
|
||||
float: right;
|
||||
margin: 2em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -205,6 +224,93 @@ div#alphanav ul li a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #EEE;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table {
|
||||
@@ -367,7 +473,16 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
border: solid 1px #999;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#GalleryDetail h3 {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -384,13 +499,10 @@ div#SourceDetail {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Contact #summaryarea {
|
||||
width: 50em;
|
||||
margin: 2em auto;
|
||||
padding: 3em;
|
||||
background-color: #EEE;
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #GalleryDisplay img {
|
||||
float: right;
|
||||
border: solid 1px #999;
|
||||
}
|
||||
@@ -404,6 +516,12 @@ div#SourceDetail {
|
||||
#Contact #city:after {
|
||||
content: ",";
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Contact,
|
||||
#Contact #GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Download
|
||||
----------------------------------------------------- */
|
||||
@@ -413,20 +531,29 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -449,12 +576,33 @@ div#families table.attrlist td.ColumnType {
|
||||
|
||||
/* Subsection : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery h4 + .thumbnail {
|
||||
margin-left: 15px;
|
||||
@@ -462,6 +610,40 @@ div#families table.attrlist td.ColumnType {
|
||||
* first thumnail on each next row should also have a margin-left
|
||||
* of 15 px. */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
@@ -469,6 +651,9 @@ div#families table.attrlist td.ColumnType {
|
||||
/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
|
||||
display: none; */
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsection : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -532,6 +717,7 @@ a.familymap {
|
||||
}
|
||||
#footer > * {
|
||||
background-color: #EEE;
|
||||
font-size: 80%;
|
||||
}
|
||||
#footer p#createdate {
|
||||
float: left;
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
# Gramps - a GTK+/GNOME based genealogy program
|
||||
#
|
||||
# Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
# Copyright (C) 2018 Theo van Rijn
|
||||
# Copyright (C) 2019 Serge Noiraud
|
||||
#
|
||||
# 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
|
||||
@@ -72,6 +74,13 @@ img {
|
||||
.thumbnail a:hover {
|
||||
background: none;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
@@ -94,6 +103,10 @@ img {
|
||||
width: 96px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
@@ -101,6 +114,12 @@ img {
|
||||
padding: 0;
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -221,6 +240,55 @@ p#user_header {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Navigation
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #EEE; /* needed by IE7 */
|
||||
background-color: #13A926;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
div#nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#subnavigation ul {
|
||||
border-bottom: solid 1px #999;
|
||||
}
|
||||
div#nav ul li, #subnavigation ul li {
|
||||
float: left;
|
||||
}
|
||||
div#nav ul li a, #subnavigation ul li a {
|
||||
display: block;
|
||||
font-size: smaller;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
border-bottom: solid 1px #EEE;
|
||||
}
|
||||
div#nav ul li a:hover, #subnavigation ul li a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #CCC;
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
div#nav ul li.CurrentSection a {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
border: solid 1px #999;
|
||||
border-bottom-style: none;
|
||||
background-color: white;
|
||||
}
|
||||
#nav ul li.CurrentSection a:hover {
|
||||
background-color: #903;
|
||||
}
|
||||
|
||||
/* Webcal
|
||||
----------------------------------------------------- */
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
----------------------------------------------------- */
|
||||
div#footer {
|
||||
@@ -270,6 +338,129 @@ div#footer p#copyright img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
div#alphanav {
|
||||
background-color: #EEE;
|
||||
}
|
||||
div#alphanav ul {
|
||||
list-style: none;
|
||||
border-width: 2px 0px 4px 0px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
margin: 0px;
|
||||
padding-left: 15px;
|
||||
/* float container stretch, see www.quirksmode.org/css/clearing.html */
|
||||
overflow: hidden;
|
||||
}
|
||||
div#alphanav ul li {
|
||||
float: left;
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#alphanav ul li:after {
|
||||
content: " |";
|
||||
}
|
||||
div#alphanav ul li a {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
line-height: 100%;
|
||||
float: left;
|
||||
|
||||
}
|
||||
div#alphanav ul li a:hover {
|
||||
text-decoration: none;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
/* position: absolute; */
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #13A926;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table.infolist {
|
||||
@@ -578,6 +769,26 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#Gallery table.infolist tbody tr td {
|
||||
border-bottom: dashed 1px #000;
|
||||
}
|
||||
@@ -627,7 +838,16 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
|
||||
}
|
||||
#GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#GalleryDetail div#summaryarea{
|
||||
margin: 0;
|
||||
padding: 2em 0 0 0;
|
||||
@@ -679,48 +899,51 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
|
||||
/* Contact
|
||||
------------------------------------------------- */
|
||||
#Contact #summaryarea {
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 3em;
|
||||
border: double 4px #000;
|
||||
background-color: #BCEAF6;
|
||||
}
|
||||
#Contact #summaryarea img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
#researcher {
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Contact, #Contact #summaryarea #researcher,
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#Contact #summaryarea #researcher {
|
||||
font: normal 1.5em/1.4em serif;
|
||||
margin-top: .3em;
|
||||
}
|
||||
#researcher h3 {
|
||||
#Contact #summaryarea #researcher h3 {
|
||||
font: normal 1.2em/1.4em serif;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
#researcher span {
|
||||
float: left;
|
||||
#Contact #summaryarea #researcher span {
|
||||
display: block;
|
||||
font: normal .9em/1.4em serif;
|
||||
margin-right: .4em;
|
||||
}
|
||||
#streetaddress {
|
||||
#Contact #summaryarea #streetaddress {
|
||||
width: 100%;
|
||||
}
|
||||
#locality, .locality {
|
||||
#Contact #summaryarea #locality, .locality {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
#city:after {
|
||||
#Contact #summaryarea #city:after {
|
||||
content: ",";
|
||||
}
|
||||
#country {
|
||||
#Contact #summaryarea #country {
|
||||
clear: left;
|
||||
}
|
||||
#email {
|
||||
#Contact #summaryarea #email {
|
||||
clear: left;
|
||||
}
|
||||
#email a {
|
||||
#Contact #summaryarea #email a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -813,17 +1036,29 @@ div#AddressBookList table.addressbook tbody tr td.ColumnWebLinks {
|
||||
|
||||
/* Subsections
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction, #Contact {
|
||||
padding: 2em 0 3em 0;
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay,
|
||||
#Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
margin: 0 20px 1em 20px;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0 20px 3em 2em;
|
||||
}
|
||||
#Home a, #Introduction a, #Contact a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
@@ -927,6 +1162,15 @@ div#families {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div#families .infolist h4 {
|
||||
font: bold 1.2em sans-serif;
|
||||
color: #FFF;
|
||||
padding: 0px 0px 0px 20px;
|
||||
border-width: 4px 0px 4px 0px;
|
||||
border-style: solid;
|
||||
border-color: #00029D;
|
||||
background-color: #13A926;
|
||||
}
|
||||
div#families table.infolist tbody tr.BeginFamily {
|
||||
border-top: solid 1px #000;
|
||||
}
|
||||
@@ -1094,6 +1338,7 @@ div.Residence table.infolist tr td {
|
||||
float: left;
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery div.thumbnail a {
|
||||
display: block;
|
||||
@@ -1117,6 +1362,43 @@ div.Residence table.infolist tr td {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsections : Narrative
|
||||
----------------------------------------------------- */
|
||||
|
||||
@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -59,7 +61,7 @@ the page.
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
font-size: 100%;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
background-color: #454;
|
||||
@@ -67,6 +69,13 @@ body {
|
||||
body > div {
|
||||
clear: both;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: white;
|
||||
border-top: solid 1px #7C8F7C;
|
||||
@@ -75,9 +84,19 @@ body > div {
|
||||
float: right;
|
||||
margin: 2em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -209,6 +228,98 @@ div#alphanav ul li a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: #454;
|
||||
background-color: #E0E6E0;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
.nav.responsive li#CurrentSection a {
|
||||
color: #454;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table {
|
||||
@@ -413,7 +524,16 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
border: solid 1px #7C8F7C;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#GalleryDetail h3 {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -430,13 +550,10 @@ div#SourceDetail {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Contact #summaryarea {
|
||||
width: 40em;
|
||||
margin: 2em auto;
|
||||
padding: 3em;
|
||||
background-color: #E0E6E0;
|
||||
border: solid 1px #7C8F7C;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
float: right;
|
||||
border: solid 1px #7C8F7C;
|
||||
}
|
||||
@@ -463,20 +580,31 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -499,12 +627,33 @@ div#families table.attrlist td.ColumnType {
|
||||
|
||||
/* Subsection : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery h4 + .thumbnail {
|
||||
margin-left: 15px;
|
||||
@@ -512,6 +661,40 @@ div#families table.attrlist td.ColumnType {
|
||||
* first thumnail on each next row should also have a margin-left
|
||||
* of 15 px. */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #7C8F7C;
|
||||
}
|
||||
@@ -519,6 +702,9 @@ div#families table.attrlist td.ColumnType {
|
||||
/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
|
||||
display: none; */
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsection : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -577,6 +763,7 @@ a.familymap {
|
||||
#footer {
|
||||
clear: both;
|
||||
color: #E0E6E0;
|
||||
font-size: 80%;
|
||||
padding-top: 1em;
|
||||
background-color: #9DBF9D;
|
||||
border-top: solid 1px #454;
|
||||
|
||||
@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -67,6 +69,13 @@ body {
|
||||
body > div {
|
||||
clear: both;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: #FAFAFF;
|
||||
border-top: solid 1px #669;
|
||||
@@ -75,9 +84,19 @@ body > div {
|
||||
float: right;
|
||||
margin: 2em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -207,6 +226,93 @@ div#alphanav ul li a:hover {
|
||||
color: #FAFAFF;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #669;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table {
|
||||
@@ -406,6 +512,14 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
border: solid 1px #669;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#GalleryDetail h3 {
|
||||
text-align: center;
|
||||
@@ -423,13 +537,10 @@ div#SourceDetail {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Contact #summaryarea {
|
||||
width: 40em;
|
||||
margin: 2em auto;
|
||||
padding: 3em;
|
||||
background-color: #E0E0E9;
|
||||
border: solid 1px #669;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
float: right;
|
||||
border: solid 1px #669;
|
||||
}
|
||||
@@ -456,20 +567,31 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -492,12 +614,33 @@ div#families table.attrlist td.ColumnType {
|
||||
|
||||
/* Subsection : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery h4 + .thumbnail {
|
||||
margin-left: 15px;
|
||||
@@ -505,6 +648,40 @@ div#families table.attrlist td.ColumnType {
|
||||
* first thumnail on each next row should also have a margin-left
|
||||
* of 15 px. */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #669;
|
||||
}
|
||||
@@ -512,6 +689,9 @@ div#families table.attrlist td.ColumnType {
|
||||
/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
|
||||
display: none; */
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsection : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -575,6 +755,7 @@ a.familymap {
|
||||
}
|
||||
#footer > * {
|
||||
background-color: #E0E0E9;
|
||||
font-size: 80%;
|
||||
}
|
||||
#footer p#createdate {
|
||||
float: left;
|
||||
|
||||
@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -59,7 +61,7 @@ the page.
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
font-size: 100%;
|
||||
color: #36220B;
|
||||
margin: 0px;
|
||||
background-color: #FFE09F;
|
||||
@@ -67,6 +69,13 @@ body {
|
||||
body > div {
|
||||
clear: both;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: #FFFBE7;
|
||||
border-top: solid 1px #8C581C;
|
||||
@@ -75,9 +84,19 @@ body > div {
|
||||
float: right;
|
||||
margin: 2em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -207,6 +226,93 @@ div#alphanav ul li a:hover {
|
||||
color: #FFFBE7;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #FFC35E;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table {
|
||||
@@ -406,6 +512,14 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
border: solid 1px #EA8414;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#GalleryDetail h3 {
|
||||
text-align: center;
|
||||
@@ -423,13 +537,10 @@ div#SourceDetail {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Contact #summaryarea {
|
||||
width: 40em;
|
||||
margin: 2em auto;
|
||||
padding: 3em;
|
||||
background-color: #FFE09F;
|
||||
border: solid 1px #EA8414;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
float: right;
|
||||
border: solid 1px #EA8414;
|
||||
}
|
||||
@@ -456,13 +567,24 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
padding-left: 15px;
|
||||
@@ -492,12 +614,33 @@ div#families table.attrlist td.ColumnType {
|
||||
|
||||
/* Subsection : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery h4 + .thumbnail {
|
||||
margin-left: 15px;
|
||||
@@ -505,6 +648,40 @@ div#families table.attrlist td.ColumnType {
|
||||
* first thumnail on each next row should also have a margin-left
|
||||
* of 15 px. */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #8C581C;
|
||||
}
|
||||
@@ -512,6 +689,9 @@ div#families table.attrlist td.ColumnType {
|
||||
/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
|
||||
display: none; */
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsection : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -575,6 +755,7 @@ a.familymap {
|
||||
}
|
||||
#footer > * {
|
||||
background-color: #FFE09F;
|
||||
font-size: 80%;
|
||||
}
|
||||
#footer p#createdate {
|
||||
float: left;
|
||||
|
||||
@@ -21,6 +21,9 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -59,7 +62,7 @@ the page.
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
font-size: 100%;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
background-color: #EAEEF4;
|
||||
@@ -67,6 +70,13 @@ body {
|
||||
body > div {
|
||||
clear: both;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
background-color: #FFF;
|
||||
border-top: solid 1px #7CA3DD;
|
||||
@@ -75,9 +85,19 @@ body > div {
|
||||
float: right;
|
||||
margin: 2em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.fullclear {
|
||||
clear: both;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Text
|
||||
----------------------------------------------------- */
|
||||
@@ -207,6 +227,93 @@ div#alphanav ul li a:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #EEE;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table {
|
||||
@@ -406,6 +513,14 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
border: solid 1px #7CA3DD;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#GalleryDetail h3 {
|
||||
text-align: center;
|
||||
@@ -423,13 +538,10 @@ div#SourceDetail {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Contact #summaryarea {
|
||||
width: 40em;
|
||||
margin: 2em auto;
|
||||
padding: 3em;
|
||||
background-color: #EAEEF4;
|
||||
border: solid 1px #7CA3DD;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
float: right;
|
||||
border: solid 1px #7CA3DD;
|
||||
}
|
||||
@@ -456,20 +568,31 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction {
|
||||
overflow: hidden;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -492,12 +615,33 @@ div#families table.attrlist td.ColumnType {
|
||||
|
||||
/* Subsection : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery h4 + .thumbnail {
|
||||
margin-left: 15px;
|
||||
@@ -505,6 +649,40 @@ div#families table.attrlist td.ColumnType {
|
||||
* first thumnail on each next row should also have a margin-left
|
||||
* of 15 px. */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #7CA3DD;
|
||||
}
|
||||
@@ -512,6 +690,9 @@ div#families table.attrlist td.ColumnType {
|
||||
/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
|
||||
display: none; */
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsection : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -575,6 +756,7 @@ a.familymap {
|
||||
}
|
||||
#footer > * {
|
||||
background-color: #EAEEF4;
|
||||
font-size: 80%;
|
||||
}
|
||||
#footer p#createdate {
|
||||
float: left;
|
||||
|
||||
@@ -19,6 +19,8 @@ Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2011 Michiel D. Nauta
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -62,7 +64,7 @@ General Elements
|
||||
-----------------------------------------------------------------*/
|
||||
body {
|
||||
font-family: Georgia, serif;
|
||||
font-size: 90%;
|
||||
font-size: 100%;
|
||||
color: #7D5925;
|
||||
background: url(../images/Web_Mainz_Bkgd.png) black repeat;
|
||||
}
|
||||
@@ -73,15 +75,33 @@ body > div {
|
||||
overflow: hidden;
|
||||
padding: 0px 1.5em;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
padding: 1.5em 1.5em;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
div.snapshot a {
|
||||
display: inline;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* General Text
|
||||
-----------------------------------------------------------------*/
|
||||
@@ -204,6 +224,93 @@ div#alphanav ul li a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #D8C19F;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
-----------------------------------------------------------------*/
|
||||
table {
|
||||
@@ -361,6 +468,14 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
margin: 0px auto;
|
||||
display:block;
|
||||
border: solid 1px #7D5925;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sources
|
||||
@@ -376,7 +491,7 @@ div#SourceDetail {
|
||||
padding-bottom: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
#Contact img {
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
display: block;
|
||||
margin: 0px auto 1em auto;
|
||||
border: solid 1px #7D5925;
|
||||
@@ -402,16 +517,31 @@ div#SourceDetail {
|
||||
|
||||
/* SubSection
|
||||
-----------------------------------------------------------------*/
|
||||
#Home img, #Introduction img {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home a, #Introduction a, #Contact a {
|
||||
color: black;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -428,9 +558,32 @@ div#families table.fixed_subtables table.eventlist th:first-child {
|
||||
div#families table.fixed_subtables table.eventlist th:last-child {
|
||||
width: 5em;
|
||||
}
|
||||
div#families .infolist h4 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* SubSection : Gallery
|
||||
-----------------------------------------------------------------*/
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery {
|
||||
/* float container stretch, see www.quirksmode.org/css/clearing.html */
|
||||
overflow: hidden;
|
||||
@@ -441,6 +594,7 @@ div#families table.fixed_subtables table.eventlist th:last-child {
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.5em;
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery img {
|
||||
border: solid 1px #7D5925;
|
||||
@@ -449,6 +603,43 @@ div#families table.fixed_subtables table.eventlist th:last-child {
|
||||
/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery
|
||||
display: none; */
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* SubSection : Narrative
|
||||
-----------------------------------------------------------------*/
|
||||
@@ -515,6 +706,9 @@ div.grampsstylednote p {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
#footer > * {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* Overwritten
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
@@ -19,6 +19,8 @@ Go to <http://gramps-project.org/> to learn more!
|
||||
Copyright 2008 Jason M. Simanek
|
||||
Copyright 2009 Stephane Charette
|
||||
Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
|
||||
Copyright 2018 Theo van Rijn
|
||||
Copyright (C) 2019 Serge Noiraud
|
||||
|
||||
This file is part of the GRAMPS program.
|
||||
|
||||
@@ -82,10 +84,21 @@ img {
|
||||
.thumbnail a:hover {
|
||||
background:none;
|
||||
}
|
||||
#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 98%;
|
||||
}
|
||||
#outerwrapper > div {
|
||||
clear: both;
|
||||
}
|
||||
.content {
|
||||
padding-top: 1cm;
|
||||
background-color:#FFF;
|
||||
}
|
||||
#ThumbnailPreview div.snapshot {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.content div.snapshot {
|
||||
float:right;
|
||||
margin:1.6em;
|
||||
@@ -100,6 +113,12 @@ img {
|
||||
.content div.snapshot div.thumbnail span {
|
||||
display:none;
|
||||
}
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
.fullclear {
|
||||
width:100%;
|
||||
height:1px;
|
||||
@@ -254,6 +273,100 @@ div#subnavigation ul li.CurrentSection a {
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
a.navIcon {
|
||||
display: none;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
div#header::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div#nav::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Use less & all realestate on mobiles. */
|
||||
div#outerwrapper {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: none; /* Works in IE too. */
|
||||
/*
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Undo some of the #nav styles - to enable the class .nav */
|
||||
.nav ul, #subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: unset;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav ul li, #subnavigation ul li {
|
||||
float: unset;
|
||||
display: unset
|
||||
}
|
||||
|
||||
/* Start with hidden menu options */
|
||||
/* .nav li:not(:first-child) {display: none;} */
|
||||
.nav li {display: none;}
|
||||
.nav ul {display: none;}
|
||||
|
||||
a.navIcon {
|
||||
font-size:1.3em;
|
||||
display: block;
|
||||
margin: 0.1em 0.4em 0.4em 0.4em;
|
||||
float: left;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive ::after {
|
||||
/* need to remove the "|" when we are in the dropdown menu. */
|
||||
color: #A97;
|
||||
background-color: #A97;
|
||||
}
|
||||
.nav.responsive li {
|
||||
/* float: left; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
background-color: #A97;
|
||||
/* required by IE */
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
----------------------------------------------------- */
|
||||
table.infolist {
|
||||
@@ -634,6 +747,14 @@ table.eventlist tbody tr td.ColumnSources {
|
||||
}
|
||||
#GalleryDisplay img {
|
||||
margin:0 auto;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#GalleryDetail div#summaryarea{
|
||||
margin:0;
|
||||
@@ -679,7 +800,6 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
|
||||
/* Contact
|
||||
----------------------------------------------------- */
|
||||
#Contact #summaryarea {
|
||||
width:500px;
|
||||
margin:0 auto;
|
||||
padding:3em;
|
||||
background-color:#F1ECE2;
|
||||
@@ -697,7 +817,6 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
|
||||
padding:0;
|
||||
}
|
||||
#researcher span {
|
||||
float:left;
|
||||
display:block;
|
||||
font:normal .9em/1.4em serif;
|
||||
margin-right:.4em;
|
||||
@@ -779,20 +898,32 @@ table.download td.Modified {
|
||||
|
||||
/* Subsections
|
||||
----------------------------------------------------- */
|
||||
#Home, #Introduction, #Contact {
|
||||
padding:2em 0 3em 0;
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#Home p, #Introduction p {
|
||||
margin:0 20px 1em 20px;
|
||||
}
|
||||
#Home img, #Introduction img {
|
||||
float:right;
|
||||
margin:0;
|
||||
padding:0 20px 3em 2em;
|
||||
}
|
||||
#Home a, #Introduction a, #Contact a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.subsection{
|
||||
padding-bottom:.5em;
|
||||
@@ -926,6 +1057,26 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
|
||||
|
||||
/* Subsections : Gallery
|
||||
----------------------------------------------------- */
|
||||
#gallery {
|
||||
background-color: green;
|
||||
}
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
#gallery .thumbnail {
|
||||
font-size: smaller;
|
||||
margin: 3em auto;
|
||||
}
|
||||
#indivgallery h4 {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
@@ -934,6 +1085,41 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
|
||||
float:left;
|
||||
width:130px;
|
||||
text-align:center;
|
||||
background-color: white;
|
||||
}
|
||||
#gallery div.indexno {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#indivgallery div.date {
|
||||
float: right;
|
||||
width: 1.8em;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
background-color: #CCC;
|
||||
color: #555;
|
||||
}
|
||||
#indivgallery .thumbnail ul {
|
||||
font-size: smaller;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
#indivgallery .thumbnail ul li:first-child {
|
||||
border-style: none;
|
||||
}
|
||||
#indivgallery .thumbnail ul li {
|
||||
border-top: dashed 1px #CCC;
|
||||
border-top-style: dashed;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#gallery img {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
#indivgallery .thumbnail a {
|
||||
display:block;
|
||||
@@ -957,6 +1143,9 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
|
||||
margin:0 auto;
|
||||
padding:0;
|
||||
}
|
||||
div.snapshot div.thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subsections : Narrative
|
||||
----------------------------------------------------- */
|
||||
@@ -1070,6 +1259,9 @@ div#pedigree {
|
||||
background-color: #542;
|
||||
border-top: solid 8px #A97;
|
||||
}
|
||||
#footer > * {
|
||||
font-size: 80%;
|
||||
}
|
||||
#footer a, #footer a:visited {
|
||||
text-decoration: none;
|
||||
color: #C1B398;
|
||||
|
||||
Reference in New Issue
Block a user