Methods

When transcribing and marking up the letters from the travel journal, we decided it would be best to keep the typos and take note of any other markings or errors in order to preserve the original state of the material since this is an "archive" project. Of course, you can see those errors in the pictures of the original letters, so our xml tag <imp>—short for imperfection—includes a correction attribute corr to use when converting the text to a readable format.

We also decided to include line breaks for a similar reason—to preserve the form of the original letter and give a consistent reading experience.

<person> is a generic tag to mark any person Mrs. Behrend talks about.

<location> is for marking all the locations she talks about. There are attributes category and desc to provide further information about the location.

<drawing> provides an alt text-like description of any drawings/doodlings found within the letters.

Schema

start = xml # root element
xml = element xml {meta, letter}

meta = element meta {title, date?, source, summary, editors}
    title = element title {titleID, text}
        titleID = attribute titleID {text}
    source = element source {text}
    summary = element summary {text}
    editors = element editors {editor+}
        editor = element editor {"JJB" | "MRS" | "AMA"}

letter = element letter {page+} 
    page = element page {num, photo, headLine?, (p | drawing)*} # for multi-page letters to remain in the same document
        num = attribute num {xsd:integer} # page number
        photo = attribute photo {text}
        
        headLine = element headLine {mixed{(location | time | date | imp)*}} # metadata (where & when)
        
        # wasn't able to make "ln" elements required because sometimes they are mixed into person or location elements, so please remember to add them
        p = element p {(mixed{(ln | imp | location | date | person | time)*})} # paragraphs
            ln = element ln {n, indent?} # numbered lines
                n = attribute n {xsd:integer} # line number
                indent = attribute indent {"yes" | "center"} # optional note for indent
            imp = element imp {type, corr?, (text | imp | ln)*} # imperfections
                type = attribute type {"typo" | "missing" | "spelling" | "cutoff" | "writing" | "overwrite" | "underline" | "crossout" | "properEnglish" | "unknown"} # types of imperfections
                corr = attribute corr {text} # the corrected revision
        drawing = element drawing {mixed{(location | imp)*}}
        
# Generic elements used multiple places
location = element location {loc, category?, desc?, (text | imp | ln)*} 
    loc = attribute loc {text}
    category = attribute category {"ship" | "city" | "country" | "department" | "commune" | text} # still adding specific categories as we come across them
    desc = attribute desc {text}
time = element time {(text | imp | ln)*}
date = element date {when, (text | imp | ln)*}
    when = attribute when {xsd:date | xsd:gYear | xsd:gMonthDay}
person = element person {note?, (text | imp | ln)*}
    note = attribute note {text}

CSS Styling

body {
    background-image: url("Images/newBG.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: courier, cursive;
}

h1 {
    font-family: 'Special Elite', cursive;
    font-size: 40px;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
    text-align: center;
    color: #342a1e;
}
h2 {
    font-family: 'Special Elite', cursive;
    text-align: center;
    font-size: 60px;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
    color: #342a1e;
}

h3 {
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
    color: #342a1e;
}

code { /* needs help */
    font-family: 'Monaco', monospace;
    background-color: #f4f4f4;
    padding: 2px 5px;
    border-radius: 4px;
}

pre {
    max-width: 85%;
    height: 300px;
    overflow: auto;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 4px solid #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.text-box {
    display: flex;
    flex-direction: column;
    margin: 30px auto;
    padding: 15px;
    background-color: rgba(255, 248, 248, 0.8);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    color: #342a1e;
}

.home {
    display: flex;
    margin: 30px;
    padding: 9px;
    background-color: rgba(255, 248, 248, 0.8);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    border-radius: 10px;
}

.logo {
    position: absolute; /* This will position the logo relative to the page */
    top: 10px; /* Adjust the top distance */
    left: 10px; /* Adjust the left distance */
    z-index: 10; /* Ensures it stays above other elements */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 1.5em;
    width: 500px;
}

/* Image size */
.logo img {
    width: 500px; /* Adjust logo size */
    height: 150px; /* Adjust logo size */
}

.top {
    padding-bottom: 150px;
}

/* ------------------------------------------------------------------------------------------ */
/* Read View CSS */

.transcript {
    margin-top: 20px; /* Adds space between metadata and transcript */
    padding: 10px;
    color: #342a1e;
}
.letterText {
    display: flex;
    margin: 30px;
    padding: 9px;
    background-color: rgba(255, 248, 248, 0.8);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    border-radius: 10px;
    color: #342a1e;
}

/* ------------------------------------------------------------------------------------------ */
/* Gallery CSS */

.image-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 9px;
}
.text-box {
    border-radius: 10px;

}

.image-container figure {
    width: 48%;
    box-sizing: border-box;
    float: left;
    margin: 1%;
    color: white;
    font-size: 50px;
    text-shadow: -1px 1px 0 #000, 
1px 1px 0 #000, 
1px -1px 0 #000, 
-1px -1px 0 #000;
}

.image-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
    height: 800px;
    display: block;
    border: solid black;
}

.image-container figcaption {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    font-family: 'Special Elite', cursive;
    font-size: 35px;
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
    color: #342a1e;
    top: 15px;

}
/* Letter 4 specific */
/* Layout container for letter 4 images and text */
.letter4-image-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px;
    overflow: hidden;
}


.letter4-image-container .image-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 48%;
}

/* style for the images */
.letter4-image-container img {
    width: 100%;
    height: auto;
    border: solid black;
}

/* right side text */
.letter4-letterText {
    flex: 1;
    padding: 10px;
    background-color: rgba(255, 248, 248, 0.8);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #342a1e;
    margin-left: 20px;
}
.letter4-image-container figcaption {
    text-align: left;
    margin-top: 5px;
    font-family: 'Special Elite', cursive;
    font-size: 40px;
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
    color: #342a1e;
    top: 15px;
}

/* -------------------------------------------------------------------------------------------- */

/* Nav Bar CSS */

/* Navbar container */
.navbar {
    background-color: #ffeed6;
    font-family: Courier;
    position: absolute;
    top: 50px;
    left: 630px;
    border: 2px solid #d4a373;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
    display: flex; /* Ensures items stay horizontal */
    align-items: center;
    padding: 0;
    width: auto; /* Automatically size based on content */
}

/* Links inside the navbar */
.navbar a {
    font-size: 18px;
    color: #342a1e;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dropdown container */
.dropdown {
    position: relative;
}


/* Dropdown button */
.dropdown .dropbtn {
    font-family: inherit; /* Inherit font-family from the parent */
    font-size: 18px;
    color: #342a1e;
    padding: 14px 20px;
    background-color: inherit;
    font-weight: bold;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none; /* Hidden initially */
    position: absolute;
    top: 100%; /* Aligns below the dropdown button */
    left: 0;
    background-color: #cc9966;
    min-width: 160px;
    border-radius: 5px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensures it appears on top */
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #342a1e;
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Display links vertically */
    text-align: left;
    transition: background-color 0.3s ease;
}

/* Show dropdown content on hover */
.dropdown:hover .dropdown-content {
    display: block; /* Show dropdown */
}

/* Hover effects */
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropdown-content a:hover {
    background-color: #ab7a49;
    color: #fff;
}



/* About Section Styling */
.about-section {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px;
}

.card {
    background-color: rgba(232, 219, 200, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    margin-bottom: 20px;

}

.card:hover {
    transform: translateY(-10px);
}

.team {
    margin-bottom: 50px;
    font-size: 1.5em;
    text-align: center;
}

.member-photo {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;

}

.member-name {
    font-size: 2.0em;
    margin-bottom: 10px;
    color: #342a1e;
    text-decoration: none;
}

.member-description {
    font-size: 1em;
    color: #342a1e;
    margin-bottom: 15px;
    text-align: left;
}

.member-description ul {
    list-style: none;
    padding-left: 20px;
}

.member-description li {
    margin-bottom: 20px;
}

.map {
    display: flex;
    flex-direction: column;
    margin: 30px auto;
    padding: 15px;
    max-width: 1000px;
    height: 600px;
    flex-direction: column;
    background-color: #ffeed6;
    border: 2px solid #342a1e;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.map iframe {
    width: 100%;
    height: 100%;
    border: none;
    border: none;
    border-radius: 8px;
}

/* styling for footer */
.footer {
    background-color: #e8dbc8;
    color: #342a1e;
    text-align: center;
    padding: 10px;
    font-family: 'Special Elite', cursive;
    font-size: 16px;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    left: 50%; /* Moves the footer to the middle of the screen */
    transform: translateX(-50%); /* Centers it horizontally */



}

.footer a {
    color: #342a1e;
    text-decoration: underline;
    font-weight: bold;

}

.footer a:hover {
    text-decoration: underline;
}

/* Hide corrected text by default */
.corrected {
    display: none;
    color: red;
    font-weight: bold;
}

/* Show corrected text when active */
.show-corrected .original {
    display: none;
}

.show-corrected .corrected {
    display: inline;
}

/* Slider container */
.slider-container {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.slider {
    appearance: none;
    width: 60px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    outline: none;
}

.slider:before {
    content: '';
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.slider:checked:before {
    left: 40px;
    background: #4caf50;
}

a{
   color: #342a1e;
}

a:hover{
    color: #d4a373;
}

We encourage you to take a closer look at our code for things like HTML and XSLT by checking out our github repository!

d