Tutorial Videos

Website Fact Sheet

WEBSITE HOST

Provider: Squarespace.com
user: admin@VashonHeritage.org
pw: 98pssalish0701 ( via Google login )
Annual automatic renewal: January 14th / $276. yr. / Core Plan

DOMAIN NAME
Your Domain Name is: VashonHeritageMuseum.org
Provider: Squarespace Domain Names

user: admin@VashonHeritage.org
pw: 98pssalish0701 ( via Google login )

WEBSITE FONTS

Headings—Palatino Linotype
Paragraphs—Tenor Sans

WEBSITE COLORS

1. Yellow
Hex #F8CD31
RGB 248-205-49

2. Olive
Hex #5F5830
RGB 95-88-49

3. Pale Background
Hex #E9E9E0
RGB 233-233-224

TECH SUPPORT

After launch, your website package includes 30 days of complimentary email support for questions, minor issues, or general guidance related to your website. While this period doesn’t include design changes or new feature requests, I’m always happy to help you navigate questions or troubleshoot along the way. Please feel free to reach out anytime during this period at kristine@twistdesign.biz.

SQUARESPACE HELP

support.squarespace.com

online videos, help guide, forum, webinars

Live Chat:
Monday-Friday 4am to 8pm Eastern ( 1am to 5pm Pacific )

Email
24/7

WEBSITE MAINTENANCE

Please keep in mind that technology is constantly evolving, and your website will likely need some periodic maintenance, and I will be glad to help you. Please email me, and I’ll do my best to get you on my schedule as quickly as possible.

Thank you for trusting me with your website, I really enjoyed working with you!

Kristine

Email Kristine

CUSTOM CSS CODE

// -- GENERAL -- //

//Menu Dropdown Background Transparent//

.header-nav-folder-content {

background-color: transparent !important;

}

// ( Sam's?) Nav opacity on hover //

div.header-nav-item a:hover {

opacity: 0.5 !important;

}

div.header-nav-item a {

transition: all 0.1s !important;

}

// Change dropdown menu padding //

.header-nav-folder-content a{

padding-top: 4px !important;

padding-bottom: 4px !important;

}

/*Add underline to nav hover*/

.header-nav-item--collection:hover{

text-decoration:underline!important;

text-underline-offset:11px !important;}

/*Nav Folders */

.header-nav-item--folder{

transition:all .5s cubic-bezier(0.76, 0, 0.24, 1)!important;}

/*Folder Title */

.header-nav-folder-title{

display:flex!important;

gap: 10px;

align-items:center;

&:after{

content:"⌵";

margin-top:-6px;

line-height:0!important;

transition: 0.3s

}

.header-nav-item--folder:hover{

.header-nav-folder-title:after{

transform:rotateX(180deg);

margin-top: 6px;

transition: 0.3s;

}

// Color Variables //

@color1: #FFFFFF;

@color2: #D3B575;

@color3: #E82B02;

@color4: #373838;

@color5: #000000;

// Proper anchor scrolling //

html {

scroll-behavior: smooth;

}

.anchor-link {

scroll-margin: 150px;

}

// Remove play button on animation //

.background-pause-button {

display: none !important

}

// -- HOME -- //

// -- BLOG -- //

// -- CONTACT -- //

// -- FOOTER -- //

// Remove Default Link Underline //

footer {

.sqs-block-html a, .image-title-wrapper a, .image-subtitle-wrapper a, .sqs-image-caption a, .image-caption a, .sqs-block-newsletter a, .list-item-content__description a, .list-section-title a, .header .header-nav-wrapper a{

text-decoration-line:none!important;

background: none !important;

}

// Link hover effect footer //

footer {

a:hover {

text-decoration: underline !important;

transition: 0.2s !important;

}

// -- MOBILE OPTIMISATION -- //

@media screen and (max-width: 640px) {

// Footer alignment //

footer *{

text-align: left !important;

}

// -- END MOBILE OPTIMISATION -- //

}

/*Change FORM BUTTON COLOR*/

.sqs-background-enabled.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-background-enabled.sqs-block-form .sqs-editable-button {

background: #5F5830;

}

/*SQMOD LIST EXPAND FOR BIOS*/

// TURN TEXT LINK INTO A BUTTON

.list-item-content__fh__readmore {

color: #333 !important; // Text color inside the button

padding: 6px 20px; // Padding within the button

border-radius: 50px; // Radius of the button

border: 1px solid #000; // Border design

margin-top: 0px; // Do not touch

margin-bottom: 10px; // Adds some padding above the expanding text

display: inline-block; // Do not touch

text-decoration: none !important; // Removes the underline

background-image: none !important; // Removes the underline

}

// REMOVE UNDERLINE LINKS

a {

text-decoration: none !important;

}

// END

//NEWSLETTER SIGN UP BOX RECTANGULAR OUTLINE SHAPED//

/**

* Outlined newsletter input & button with hover state

* From: Robo-Will

**/

#block-f5c2cd3dc3310e45dffe {

.newsletter-form-field-element,

.newsletter-form-button {

border-radius: 0 !important;

border: 1px solid #C4C0B6 !important;

background-color: transparent !important;

}

.newsletter-form-field-element {

color: #C4C0B6 !important;

&::placeholder {

color: #C4C0B6 !important;

opacity: 1 !important;

}

.newsletter-form-button {

color: #C4C0B6 !important;

}

.newsletter-form-button:hover {

background-color: #C4C0B6 !important;

color: #FFFFFF !important;

}

/**

* 2px rule below announcement bar

* From: Robo-Will

**/

.sqs-announcement-bar-dropzone::after {

content: "";

display: block;

width: 100%;

height: 2px;

background-color: #E9E9E0;

}

/**

* 3px top border on footer across all pages

* From: Robo-Will

**/

#footer .page-section {

border-top: 3px solid #E9E9E0;

}

<style>

.membership-table {

width: 100%;

border-collapse: collapse;

margin: 2em 0;

font-family: inherit;

}

.membership-table th,

.membership-table td {

padding: 1em;

text-align: center;

border: 1px solid #5F5830;

}

.membership-table thead th {

background-color: #5F5830;

color: #ffffff;

font-weight: 400;

font-size: 1rem;

border-right: 1px solid #e9e9e0;

border-bottom: 1px solid #e9e9e0;

}

.membership-table thead th:first-child {

background-color: #5F5830;

border: 1px solid #5F5830;

border-right: 1px solid #e9e9e0;

border-bottom: 1px solid #e9e9e0;

color: #ffffff;

text-align: left;

font-size: 1.6rem;

}

.membership-table thead th:last-child {

border-right: 1px solid #5F5830;

}

.membership-table tbody td {

background-color: transparent;

font-size: 0.95rem;

}

.membership-table tbody td:first-child {

background-color: #5F5830;

color: #ffffff;

font-weight: 400;

text-align: left;

border-bottom: 1px solid #e9e9e0;

}

.membership-table tbody tr:not(:last-child) td:nth-child(2),

.membership-table tbody tr:not(:last-child) td:nth-child(3),

.membership-table tbody tr:not(:last-child) td:nth-child(4) {

border-bottom: 1px solid #e9e9e0;

}

.membership-table tbody tr:last-child td:nth-child(2),

.membership-table tbody tr:last-child td:nth-child(3),

.membership-table tbody tr:last-child td:nth-child(4) {

border-bottom: 1px solid #5F5830;

}

.membership-table tbody tr:nth-child(even) {

background-color: rgba(95, 88, 48, 0.15);

}

.membership-table .check-icon {

color: #5F5830;

font-size: 1.5rem;

font-weight: 400;

}

@media (max-width: 767px) {

.membership-table thead {

display: none;

}

.membership-table,

.membership-table tbody,

.membership-table tr,

.membership-table td {

display: block;

width: 100%;

}

.membership-table tbody tr {

margin-bottom: 1.5em;

border: 2px solid #5F5830;

background-color: transparent;

}

.membership-table tbody tr:nth-child(even) {

background-color: transparent;

}

.membership-table tbody td {

border: none;

border-bottom: 1px solid #e9e9e0;

padding: 0.75em 1em;

text-align: left;

position: relative;

padding-left: 50%;

}

.membership-table tbody td:last-child {

border-bottom: none;

}

.membership-table tbody td:first-child {

background-color: #5F5830;

color: #ffffff;

text-align: center;

font-size: 1.1rem;

padding: 1em;

border-bottom: 2px solid #5F5830;

}

.membership-table tbody td:not(:first-child):before {

content: attr(data-label);

position: absolute;

left: 1em;

width: calc(50% - 2em);

font-weight: 600;

color: #5F5830;

}

.membership-table .check-icon {

font-size: 1.3rem;

}

</style>

<thead>

<tr>

<th>Membership Benefits</th>

<th>Student / Senior<br>$25</th>

<th>Individual<br>$60</th>

<th>Household*<br>$75</th>

<th>Supporter<br>$100</th>

</tr>

</thead>

<tbody>

<tr>

<td>10% Store Discount</td>

</tr>

<tr>

<td>Voting Rights</td>

</tr>

<tr>

<td>NARM Membership</td>

</tr>

<tr>

<td>Historical Photo Reprint</td>

</tr>

<tr>

<td>1 Free Meeting Space Rental</td>

</tr>

</tbody>

</table>

//MEMBERSHIP CHART FOR MOBILE//

<style>

.membership-mobile {

display: grid;

gap: 1.5em;

margin: 2em 0;

font-family: inherit;

}

.membership-card {

border: 2px solid #5F5830;

border-radius: 8px;

overflow: hidden;

background-color: #ffffff;

}

.membership-card__header {

background-color: #5F5830;

color: #ffffff;

padding: 1.25em 1em;

text-align: center;

}

.membership-card__title {

font-size: 1.3rem;

font-weight: 400;

margin: 0 0 0.25em 0;

line-height: 1.2;

}

.membership-card__price {

font-size: 1.5rem;

font-weight: 600;

margin: 0;

}

.membership-card__body {

padding: 0;

}

.membership-card__row {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0.9em 1em;

border-bottom: 1px solid #e9e9e0;

}

.membership-card__row:last-child {

border-bottom: none;

}

.membership-card__row:nth-child(even) {

background-color: rgba(95, 88, 48, 0.08);

}

.membership-card__benefit {

font-size: 0.95rem;

color: #333333;

flex: 1;

}

.membership-card__status {

flex-shrink: 0;

margin-left: 1em;

}

.check-icon {

color: #5F5830;

font-size: 1.4rem;

font-weight: 400;

}

.check-icon--empty {

color: #cccccc;

font-size: 1.2rem;

}

</style>

<h3 class="membership-card__title">Student / Senior</h3>

</div>

<span class="membership-card__benefit">10% Store Discount</span>

</div>

<span class="membership-card__benefit">Voting Rights</span>

</div>

<span class="membership-card__benefit">NARM Membership</span>

</div>

<span class="membership-card__benefit">Historical Photo Reprint</span>

</div>

<span class="membership-card__benefit">1 Free Meeting Space Rental</span>

</div>

<h3 class="membership-card__title">Individual</h3>

</div>

<span class="membership-card__benefit">10% Store Discount</span>

</div>

<span class="membership-card__benefit">Voting Rights</span>

</div>

<span class="membership-card__benefit">NARM Membership</span>

</div>

<span class="membership-card__benefit">Historical Photo Reprint</span>

</div>

<span class="membership-card__benefit">1 Free Meeting Space Rental</span>

</div>

<h3 class="membership-card__title">Household*</h3>

</div>

<span class="membership-card__benefit">10% Store Discount</span>

</div>

<span class="membership-card__benefit">Voting Rights</span>

</div>

<span class="membership-card__benefit">NARM Membership</span>

</div>

<span class="membership-card__benefit">Historical Photo Reprint</span>

</div>

<span class="membership-card__benefit">1 Free Meeting Space Rental</span>

</div>

<h3 class="membership-card__title">Supporter</h3>

</div>

<span class="membership-card__benefit">10% Store Discount</span>

</div>

<span class="membership-card__benefit">Voting Rights</span>

</div>

<span class="membership-card__benefit">NARM Membership</span>

</div>

<span class="membership-card__benefit">Historical Photo Reprint</span>

</div>

<span class="membership-card__benefit">1 Free Meeting Space Rental</span>

</div>

/** Adjust padding **/

padding: 15px; /* Larger background */

/** Adjust roundness **/

border-radius: 50%; /* Circular background */

border-radius: 8px; /* More rounded corners */

}

/** Change floating cart background color

* From: Robo-Will

**/

#floatingCart.floating-cart,

#floatingCart.floating-cart .cart-container {

background-color: #F8CD31 !important; /* Replace with your color */

}

Tutorial Videos

Website Fact Sheet

CUSTOM CSS CODE

Hours

Admission

Location