diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..3cf82e4 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,17 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.js] +indent_size = 2 + +[*.html] +indent_size = 2 + +[*.css] +indent_size = 2 \ No newline at end of file diff --git a/images/fair_trade_stamp.png b/images/fair_trade_stamp.png new file mode 100644 index 0000000..d41c7dc Binary files /dev/null and b/images/fair_trade_stamp.png differ diff --git a/images/usda_organic.jpg b/images/usda_organic.jpg new file mode 100644 index 0000000..4881369 Binary files /dev/null and b/images/usda_organic.jpg differ diff --git a/index.html b/index.html index 26fb75d..22133e8 100644 --- a/index.html +++ b/index.html @@ -1,220 +1,253 @@ + - Better Living Through Coffee + Better Living Through Coffee - - - + + + - - + + - - + + - - + + + - -
- - -

Open everyday: 7:30am - 5pm

-

Phone: (360) 385-3388

-

Better Living Through Coffee is located in the beautiful,
historic downtown district of Port Townsend, Washington.

+

Open everyday: 7:30am - 5pm

+

Phone: (360) 385-3388

+

Better Living Through Coffee is located in the beautiful,
historic downtown district of Port Townsend, + Washington.

-

Fair-trade, organic, locally roasted drip coffee and espresso.

+

Fair-trade, organic, locally roasted drip coffee and espresso.

-

Organic herbal teas, and specialty drinks.

-

Location

-
- 100 Tyler St,
- Port Townsend,
- WA 98368 -
-
-
-
-
- -

Coffee

-

Fair-trade, organic, locally roasted drip coffee and espresso;
- organic herbal teas, smoothies, and specialty drinks.

-
-
-
-

Drip Coffee

-

Nicaragua - Mild Roast
- Central American. Medium body. Good acidity.

-

Dante’s Tornado - Medium Roast (Full City)
- Good body. Rounded flavor. Medium acidity.

-

Sumatra - Dark Roast
- Low acid. Heavy body. Like a Vienna roast.

-

Ethiopa Sidamo - Dark Roast
- Earthy, fruity, wild and complex. Good body.

-

Loop d’ Loop - Dark Roast
- Smooth. Well-rounded. Good body. Chocolatey.

-

Pantomime - Very Dark French Roast
- Smokey, caramel flavors.

-

Decaf French - Dark Roast
- Smooth, smokey.

-
-
-

Espresso

-

Espresso
- Double ristretto.

-

Macchiato
- Espresso marked with foam.

-

Con Panna
- Espresso marked with whipped cream.

-

Americano
- Espresso in hot water.

-

Cappuccino
- Dry foam over espresso.

-

Caffè Latte
- Microfoam over espresso.

-

Caffè Breve
- Dry foam.

-

Flavored Latte
- Vanilla, hazelnut, or caramel.

-

Caffè Vienois
- Vanilla, cinnamon.

-

Caffè Mocha
- Organic cocoa.

-

Caffè Arancia
- Organic cocoa, orange peel, vanilla.

-

Caffè Chetzemocha
- Cocoa, spices, chipotle peppers.

-

Salted Caramel Latte
- House-made caramel.

-
-
-
-
-
-

Food Menu

-

Freshly baked, delicious, nutrient-dense:
- pastries, soups, quiches, and other treats made with organic ingredients.

-
-
-
-

NYC Bagels from Midtown Manhattan
- Saturday & Sunday Mornings

-

Fresh Pastries

-

Organic Cookies

-

Spinach Quiche

-

Sausage Quiche

-
-
-

Salmon Quiche

-

Vegetarian Tamale Pie

-

Salmon Chowder

-

Lentil Soup

-

Apple Walnut Salad

-
-
-
-
-
-

Tea

-

Organic herbal teas, and specialty drinks.

-
-
-
-

Black

-

Assam
- Tasting notes: Full bodied, lovely balanced astringency with jammy hints of malt and toast. A good stout Assam.

-

Ceylon
- Tasting notes: A classic Ceylong tea. Light liquoring with hints of delicate floral notes. A lovely afternoon tea.

-

Darjeeling
- Tasting notes: Wonderful muscatel highlights with delicate strength — the hallmark of a premium 2nd flush Darjeeling.

-

Earl Grey
- Tasting notes: An unbelievable aroma that portends an unbelievable taste. We have been told repeatedly: “This is the best Earl Grey I have ever tasted!”

-

Keemun
- Tasting notes: A winey and fruity tea with depth and complexity. Takes milk very well.

-

Lapsang Souchong
- Tasting notes: A superior leaf Lapsang Souchong offering a crisp character with the remarkable and heady aroma of an oak fire.

-

Mango
- Tasting notes: Piquant and exotic with mysterious fruit notes. Sweet and delicate hints of island musk that peep out. Makes a superb iced tea.

-
-
-

Green

-

Oolong
- Tasting notes: Floral-like orchid notes with a smooth and haunting finish. This is an excellent vintage Ti Kuan Yin that has no calories when consumed without milk or sugar.

-

Jasmine
- Tasting notes: A green tea with surprising body and a captivating floral character accentuated by specially selected May Jasmine blossoms.

-

Sencha
- Tasting notes: A delicious green tea character with depth, body and some pungency. Cup tends bright forest green.

-
-
-
-
-

Herbal

-

Chamomile
- Tasting notes: Lively and relaxing. On the nose, the cup offers a soothing floral bouquet. On the tongue, the infusion impresses with exceptionally lively honey notes. Aromatic with a fruity tending floral flavor.

-

Licorice
- Tasting notes: Slight sweetness glows in the cup.Tending somewhat herbaceous and woody but with an enchanting sweet licorice lightly spice finish.

-

Nettle
- Tasting notes: Dark and mysterious cup with a dry herbaceous finish.

-

Peppermint
- Tasting notes: Sourced from an excellent family grower in Washington State, it exhibits all the character and nuance we look for in herbal leaf teas. Pungent, cool, fresh, menthol.

-

Yummy Berry
- Tasting notes: A full flavored tea with deep berry notes. The infused cup is burgundy red and provides strength and character. A terrific tasting herbal tea.

-
-
-

Yerba Mate

-

Fresh Yerba Mate
- Tasting notes: Smooth, creamy, grassy flavor with a round texture and a refreshing finish.

-

Roasted Yerba Mate
- Tasting notes: Rich and toasty with a oaky and nutty notes.

-

Chai Yerba Mate
- Tasting notes: Traditional Indian spices make for a sharp flavor with medium body.

-
-
-
-
- + + +
+
+

Tea

+

Organic herbal teas, and specialty drinks.

+
+
+
+

Black

+

Assam
+ Tasting notes: Full bodied, lovely balanced astringency with jammy hints of malt and toast. A good stout + Assam.

+

Ceylon
+ Tasting notes: A classic Ceylong tea. Light liquoring with hints of delicate floral notes. A lovely + afternoon tea.

+

Darjeeling
+ Tasting notes: Wonderful muscatel highlights with delicate strength — the hallmark of a premium 2nd flush + Darjeeling.

+

Earl Grey
+ Tasting notes: An unbelievable aroma that portends an unbelievable taste. We have been told repeatedly: + “This is the best Earl Grey I have ever tasted!”

+

Keemun
+ Tasting notes: A winey and fruity tea with depth and complexity. Takes milk very well.

+

Lapsang Souchong
+ Tasting notes: A superior leaf Lapsang Souchong offering a crisp character with the remarkable and heady + aroma of an oak fire.

+

Mango
+ Tasting notes: Piquant and exotic with mysterious fruit notes. Sweet and delicate hints of island musk that + peep out. Makes a superb iced tea.

+
+
+

Green

+

Oolong
+ Tasting notes: Floral-like orchid notes with a smooth and haunting finish. This is an excellent vintage Ti + Kuan Yin that has no calories when consumed without milk or sugar.

+

Jasmine
+ Tasting notes: A green tea with surprising body and a captivating floral character accentuated by specially + selected May Jasmine blossoms.

+

Sencha
+ Tasting notes: A delicious green tea character with depth, body and some pungency. Cup tends bright forest + green.

+
+
+
+
+

Herbal

+

Chamomile
+ Tasting notes: Lively and relaxing. On the nose, the cup offers a soothing floral bouquet. On the tongue, + the infusion impresses with exceptionally lively honey notes. Aromatic with a fruity tending floral flavor. +

+

Licorice
+ Tasting notes: Slight sweetness glows in the cup.Tending somewhat herbaceous and woody but with an + enchanting sweet licorice lightly spice finish.

+

Nettle
+ Tasting notes: Dark and mysterious cup with a dry herbaceous finish.

+

Peppermint
+ Tasting notes: Sourced from an excellent family grower in Washington State, it exhibits all the character + and nuance we look for in herbal leaf teas. Pungent, cool, fresh, menthol.

+

Yummy Berry
+ Tasting notes: A full flavored tea with deep berry notes. The infused cup is burgundy red and provides + strength and character. A terrific tasting herbal tea.

+
+
+

Yerba Mate

+

Fresh Yerba Mate
+ Tasting notes: Smooth, creamy, grassy flavor with a round texture and a refreshing finish.

+

Roasted Yerba Mate
+ Tasting notes: Rich and toasty with a oaky and nutty notes.

+

Chai Yerba Mate
+ Tasting notes: Traditional Indian spices make for a sharp flavor with medium body.

+
+
+
+ + - + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 5ec5d5d..919713f 100644 --- a/styles/main.css +++ b/styles/main.css @@ -6,77 +6,80 @@ @import url("fonts.css"); html { - font-size: 1.25em; + font-size: 1.25em; } body { - background-color: white; - font-family: 'gentium_basic', serif; - font-weight: 400; - line-height: 1.45; - color: #333; + background-color: white; + font-family: 'gentium_basic', serif; + font-weight: 400; + line-height: 1.45; + color: #333; - padding: 0; - max-width: 100%; - margin: 0 auto; + padding: 0; + max-width: 100%; + margin: 0 auto; } p { - margin-bottom: 1.3em; + margin-bottom: 1.3em; } -h1, h2, h3, h4 { - font-family: "eczar"; - margin: 1.414em 0 0.5em; - font-weight: bold; - line-height: 1.2; +h1, +h2, +h3, +h4 { + font-family: "eczar"; + margin: 1.414em 0 0.5em; + font-weight: bold; + line-height: 1.2; } h1 { - margin-top: 0; - font-size: 2.441em; + margin-top: 0; + font-size: 2.441em; } h2 { - font-size: 1.953em; + font-size: 1.953em; } h3 { - font-size: 1.563em; + font-size: 1.563em; } h4 { - font-size: 1.25em; + font-size: 1.25em; } small { - font-size: 0.8em; + font-size: 0.8em; } address { - font-style: inherit; + font-style: inherit; } .byline { - font-size: 1.563em; + font-size: 1.563em; } img { - max-width: 100%; + max-width: 100%; } .wrapper { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4rem; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4rem; } @media screen and (max-width: 500px) { - .wrapper { - grid-template-columns: 1fr; - } + .wrapper { + grid-template-columns: 1fr; + } } /* ========================================================================== @@ -84,53 +87,54 @@ img { ========================================================================== */ .site__header { - min-height: 100vh; - padding: 6rem 2rem 2em; - margin: 0; - background-color: rgba(0, 0, 0, 0.35); - background-image: url("/images/bg.jpg"); - background-blend-mode: multiply; - background-size: cover; - background-repeat: no-repeat; - background-position: top center; + min-height: 100vh; + padding: 6rem 2rem 2em; + margin: 0; + background-color: rgba(0, 0, 0, 0.35); + background-image: url("/images/bg.jpg"); + background-blend-mode: multiply; + background-size: cover; + background-repeat: no-repeat; + background-position: top center; - text-align: center; - color: white; - text-shadow: 1px 1px 2px black; + text-align: center; + color: white; + text-shadow: 1px 1px 2px black; } .site__header a { - color: white; + color: white; } .site__logo { - max-width: 20rem; - width: 100%; + max-width: 20rem; + width: 100%; } /* Nav ========================================================================== */ nav { - width: 100%; - background-color: rgba(0,0,0,.95); - color: white; - margin: 0; - padding: 1rem; + width: 100%; + background-color: rgba(0, 0, 0, .95); + color: white; + margin: 0; + padding: 1rem; - position: fixed; - display: flex; - justify-content: space-between; - align-items: baseline; - flex-flow: row wrap; - box-sizing: border-box; + position: fixed; + display: flex; + justify-content: space-between; + align-items: baseline; + flex-flow: row wrap; + box-sizing: border-box; } nav div { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } + nav div a:not(:last-child) { - margin-right: 1.5rem; + margin-right: 1.5rem; } nav ul { @@ -140,154 +144,156 @@ nav ul { } nav a { - color: white; - text-decoration: none; - font-weight: bold; - font-variant: small-caps; - text-transform: lowercase; + color: white; + text-decoration: none; + font-weight: bold; + font-variant: small-caps; + text-transform: lowercase; } .menu__icon { - height: 2rem; - width: 2.25rem; - margin: 0.75rem 1rem; - position: absolute; - top: 0; - right: 0; - vertical-align: middle; - z-index: 20; + height: 2rem; + width: 2.25rem; + margin: 0.75rem 1rem; + position: absolute; + top: 0; + right: 0; + vertical-align: middle; + z-index: 20; } .menu__icon span { - display: block; - background: white; - width: 100%; - height: 0.25rem; - margin-top: -0.125rem; - position: absolute; - left: 0; - top: 50%; + display: block; + background: white; + width: 100%; + height: 0.25rem; + margin-top: -0.125rem; + position: absolute; + left: 0; + top: 50%; } .menu__icon:before, .menu__icon:after { - content: ""; - display: block; - background: white; - width: 100%; - height: 0.25rem; - position: absolute; - left: 0; - transform-origin: center center; - transform: rotate(0deg); - transition: all 0.3s ease; + content: ""; + display: block; + background: white; + width: 100%; + height: 0.25rem; + position: absolute; + left: 0; + transform-origin: center center; + transform: rotate(0deg); + transition: all 0.3s ease; } .menu__icon:before { - top: 0.125rem; - margin-top: -0.125rem; + top: 0.125rem; + margin-top: -0.125rem; } .menu__icon:after { - bottom: 0.125rem; - margin-bottom: -0.125rem; + bottom: 0.125rem; + margin-bottom: -0.125rem; } .menu_shown .menu__icon span { - background: transparent; + background: transparent; } .menu_shown .menu__icon:before { - top: 50%; - transform: rotate(45deg); + top: 50%; + transform: rotate(45deg); } .menu_shown .menu__icon:after { - bottom: 50%; - transform: rotate(-45deg); + bottom: 50%; + transform: rotate(-45deg); } .mobile.menu { - font-size: 1.5rem; - position: absolute; - margin: 0; - top: 0; - left: 0; - width: 100%; - min-height: 100vh; - background: black; - z-index: 10; - transition: all 0.4s ease-in-out; - transform: translateX(-100%); + font-size: 1.5rem; + position: absolute; + margin: 0; + top: 0; + left: 0; + width: 100%; + min-height: 100vh; + background: black; + z-index: 10; + transition: all 0.4s ease-in-out; + transform: translateX(-100%); } #site__name { - z-index: 11; + z-index: 11; } .mobile.menu a { - color: white; + color: white; } .menu_shown .mobile.menu { - transform: translateX(0); + transform: translateX(0); } .mobile { - display: none; + display: none; } @media (max-width: 37.5rem) { - .mobile { - display: block; - } + .mobile { + display: block; + } - .menu__icon { - display: inline-block; - } + .menu__icon { + display: inline-block; + } - .desktop { - display: none; - } - nav { - position: fixed; - background-color: black; - top: 0; - right: 0; - left: 0; - margin: 0; - padding: 1rem; - } + .desktop { + display: none; + } - nav a, - #site__name { - color: white; - } + nav { + position: fixed; + background-color: black; + top: 0; + right: 0; + left: 0; + margin: 0; + padding: 1rem; + } - .mobile.menu { - display: grid; - grid-template-columns: 1fr; - gap: 1rem; - justify-items: center; - align-content: center; - } + nav a, + #site__name { + color: white; + } - .menu_shown #site__name { - color: white; - } + .mobile.menu { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + justify-items: center; + align-content: center; + } + + .menu_shown #site__name { + color: white; + } } /* Site notice ========================================================================== */ .site__notice { - background-color: rgba(0, 0, 0, 0.6); - padding: 1rem; - max-width: 25rem; - margin: 0 auto; + background-color: rgba(0, 0, 0, 0.6); + padding: 1rem; + max-width: 25rem; + margin: 0 auto; } + .site__notice h4 { - margin: 0; + margin: 0; } @@ -296,17 +302,27 @@ nav a { ========================================================================== */ main { - max-width: 40em; - margin: 0 auto; - padding: 1em; + max-width: 40em; + margin: 0 auto; + padding: 1em; } article { - padding-top: 1.563em; + padding-top: 1.563em; } article header { - text-align: center; + text-align: center; +} + +.stamp-gallery { + display: flex; + justify-content: center; + gap: 2rem; +} + +.stamp-gallery img { + max-height: 4rem; } @@ -314,17 +330,17 @@ article header { Footer ========================================================================== */ footer { - background-color: rgba(0,0,0,.95); - color: white; - text-align: center; + background-color: rgba(0, 0, 0, .95); + color: white; + text-align: center; - padding: 0 1rem; + padding: 0 1rem; - display: flex; - /*justify-content: left;*/ - flex-flow: column; + display: flex; + /*justify-content: left;*/ + flex-flow: column; } footer a { - color: white; -} + color: white; +} \ No newline at end of file