diff --git a/images/coffee_black.png b/images/coffee_black.png new file mode 100644 index 0000000..408ffcf Binary files /dev/null and b/images/coffee_black.png differ diff --git a/images/site-logo.png b/images/site-logo.png new file mode 100644 index 0000000..69a64b9 Binary files /dev/null and b/images/site-logo.png differ diff --git a/index.html b/index.html index 95eff03..2ca4bde 100644 --- a/index.html +++ b/index.html @@ -1,206 +1,223 @@ - Better Living Through Coffee + Better Living Through Coffee - - - + + + - - + + - - + + - - + + -
- - -
- - - -
-
-
-

Drinks Menu

- -

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.

- -

Decaf French - Dark Roast
- Smooth, smokey.

- -

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

-
- -
-

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.

-
- -
-
-

Sausage Pepper Quiche
- Peppers, onions & raw chedder.

- -

Spinach Quiche
- Spinach & raw cheddar.

- -

Tamale Pie
- Local grass-fed beef.

- -

Chicken Pot Pie
- Einkorn crust, vegetables.

- -

Salmon Quiche
- Wild salmon, capers.

-
- -
-

Green Salad
- Baby greens, olives, dressing.

- -

Apple Walnut Salad
- Amish cheddar, olives, dressing.

- -

Salmon Salad
- Wild salmon, olives, dressing.

- -

Lentil Soup
- Vegan.

- -

Salmon Chowder
- Creamy. Wild salmon.

- -

Yogurt Parfait
- Yogurt, walnuts, berries, honey.

-
-
-

All food items are made on site using local, organic produce when available, locally raised grass-fed beef, pastured chickens and organic eggs, and wild Alaskan line-caught salmon.

-
-
- - +

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.

+
+
+
+
+ \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 788e2c2..b2a2488 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,23 +1,13 @@ -(function () { +const menuIcon = document.querySelector('.menu__icon'); +menuIcon.addEventListener('click', event => { + const body = document.querySelector('body'); + body.classList.toggle('menu_shown'); +}); - // Defer image loading till last. - function init() { - var imgDefer = document.getElementsByTagName('img'); - for (var i = 0; i < imgDefer.length; i++) { - if (imgDefer[i].getAttribute('data-src')) { - imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src')); - } - } - } - - // When the DOM is ready it'll execute fn(). - function ready(fn) { - if (document.readyState != 'loading'){ - fn(); - } else { - document.addEventListener('DOMContentLoaded', fn); - } - } - - window.onload = init; -})(); +const mobileAnchors = document.querySelectorAll('.menu.mobile a'); +mobileAnchors.forEach(anchor => { + anchor.addEventListener('click', event => { + const body = document.querySelector('body'); + body.classList.toggle('menu_shown'); + }); +}); diff --git a/styles/base.css b/styles/base.css deleted file mode 100644 index 040666e..0000000 --- a/styles/base.css +++ /dev/null @@ -1,141 +0,0 @@ -@import url("normalize.css"); -@import url("fonts.css"); - - -html { - font-size: 1.25em; -} - -body { - 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; -} - -p { - 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 { - margin-top: 0; - font-size: 2.441em; - -} - -h2 { - font-size: 1.953em; -} - -h3 { - font-size: 1.563em; -} - -h4 { - font-size: 1.25em; -} - -small { - font-size: 0.8em; -} - -address { - font-style: inherit; -} - -.byline { - font-size: 1.563em; -} - - -/* Layout */ -img { - max-width: 100%; -} - -.wrapper { - display: flex; - justify-content: space-between; - flex-flow: row wrap; -} - -nav { - width: 100%; - background-color: rgba(0,0,0,.95); - color: white; - - padding-top: 0.25em; - padding-bottom: 0.25em; - - position: fixed; - display: flex; - justify-content: center; - align-items: baseline; - flex-flow: row wrap; -} - nav a { - color: white; - margin-right: 1em; - margin-left: 1em; - font-variant: small-caps; - text-decoration: none; - font-weight: bold; - } - footer a { - color: white; - } - -article header, -body header { - text-align: center; -} - -main { - max-width: 40em; - margin: 0 auto; - padding: 1em; -} - -article { - padding-top: 1.563em; -} - -footer { - background-color: rgba(0,0,0,.95); - color: white; - text-align: center; - - padding: 0 1rem; - - display: flex; - /*justify-content: left;*/ - flex-flow: column; -} - -/* Theme */ -.banner { - padding: 4em 2em; - background-size: cover; - background-image: url(../images/bg.jpg); - background-repeat: no-repeat; - background-position: top center; - - color: white; - text-shadow: 1px 1px 2px black; -} - -.banner a { - color: white; -} \ No newline at end of file diff --git a/styles/fonts.css b/styles/fonts.css index 3c71d74..348614f 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,35 +1,35 @@ /* Eczar */ @font-face { - font-family: 'eczar'; - src: url('../fonts/Eczar/eczar-bold.woff2') format('woff2'), - url('../fonts/Eczar/eczar-bold.woff') format('woff'); - font-weight: 700; - font-style: normal; + font-family: 'eczar'; + src: url('../fonts/Eczar/eczar-bold.woff2') format('woff2'), + url('../fonts/Eczar/eczar-bold.woff') format('woff'); + font-weight: 700; + font-style: normal; } @font-face { - font-family: 'eczar'; - src: url('../fonts/Eczar/eczar-extrabold.woff2') format('woff2'), - url('../fonts/Eczar/eczar-extrabold.woff') format('woff'); - font-weight: bolder; - font-style: normal; + font-family: 'eczar'; + src: url('../fonts/Eczar/eczar-extrabold.woff2') format('woff2'), + url('../fonts/Eczar/eczar-extrabold.woff') format('woff'); + font-weight: bolder; + font-style: normal; } @font-face { - font-family: 'eczar'; - src: url('../fonts/Eczar/eczar-medium.woff2') format('woff2'), - url('../fonts/Eczar/eczar-medium.woff') format('woff'); - font-weight: 500; - font-style: normal; + font-family: 'eczar'; + src: url('../fonts/Eczar/eczar-medium.woff2') format('woff2'), + url('../fonts/Eczar/eczar-medium.woff') format('woff'); + font-weight: 500; + font-style: normal; } @font-face { - font-family: 'eczar'; - src: url('../fonts/Eczar/eczar-regular.woff2') format('woff2'), - url('../fonts/Eczar/eczar-regular.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'eczar'; + src: url('../fonts/Eczar/eczar-regular.woff2') format('woff2'), + url('../fonts/Eczar/eczar-regular.woff') format('woff'); + font-weight: normal; + font-style: normal; } @@ -37,33 +37,33 @@ /* Gentium Basic */ @font-face { - font-family: 'gentium_basic'; - src: url('../fonts/Gentium_Basic/genbasbold.woff2') format('woff2'), - url('../fonts/Gentium_Basic/genbasbold.woff') format('woff'); - font-weight: bold; - font-style: normal; + font-family: 'gentium_basic'; + src: url('../fonts/Gentium_Basic/genbasbold.woff2') format('woff2'), + url('../fonts/Gentium_Basic/genbasbold.woff') format('woff'); + font-weight: bold; + font-style: normal; } @font-face { - font-family: 'gentium_basic'; - src: url('../fonts/Gentium_Basic/genbasbolditalic.woff2') format('woff2'), - url('../fonts/Gentium_Basic/genbasbolditalic.woff') format('woff'); - font-weight: bold; - font-style: italic; + font-family: 'gentium_basic'; + src: url('../fonts/Gentium_Basic/genbasbolditalic.woff2') format('woff2'), + url('../fonts/Gentium_Basic/genbasbolditalic.woff') format('woff'); + font-weight: bold; + font-style: italic; } @font-face { - font-family: 'gentium_basic'; - src: url('../fonts/Gentium_Basic/genbasitalic.woff2') format('woff2'), - url('../fonts/Gentium_Basic/genbasitalic.woff') format('woff'); - font-weight: normal; - font-style: italic; + font-family: 'gentium_basic'; + src: url('../fonts/Gentium_Basic/genbasitalic.woff2') format('woff2'), + url('../fonts/Gentium_Basic/genbasitalic.woff') format('woff'); + font-weight: normal; + font-style: italic; } @font-face { - font-family: 'gentium_basic'; - src: url('../fonts/Gentium_Basic/genbasregular.woff2') format('woff2'), - url('../fonts/Gentium_Basic/genbasregular.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'gentium_basic'; + src: url('../fonts/Gentium_Basic/genbasregular.woff2') format('woff2'), + url('../fonts/Gentium_Basic/genbasregular.woff') format('woff'); + font-weight: normal; + font-style: normal; } diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..0faf909 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,317 @@ +/* ========================================================================== + Base styles and Typography + ========================================================================== */ + +@import url("normalize.css"); +@import url("fonts.css"); + +html { + font-size: 1.25em; +} + +body { + 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; +} + +p { + 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 { + margin-top: 0; + font-size: 2.441em; +} + +h2 { + font-size: 1.953em; +} + +h3 { + font-size: 1.563em; +} + +h4 { + font-size: 1.25em; +} + +small { + font-size: 0.8em; +} + +address { + font-style: inherit; +} + +.byline { + font-size: 1.563em; +} + + + +img { + max-width: 100%; +} + +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4rem; +} + +@media screen and (max-width: 500px) { + .wrapper { + grid-template-columns: 1fr; + } +} + +/* ========================================================================== + Header + ========================================================================== */ + +.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; + + text-align: center; + color: white; + text-shadow: 1px 1px 2px black; +} + +.site__header a { + color: white; +} + +.site__logo { + max-width: 20rem; +} + +/* Nav + ========================================================================== */ +nav { + 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; +} + +nav div { + display: flex; + justify-content: space-between; +} +nav div a:not(:last-child) { + margin-right: 1.5rem; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; +} + +nav a { + 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; +} + +.menu__icon span { + 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; +} + +.menu__icon:before { + top: 0.125rem; + margin-top: -0.125rem; +} + +.menu__icon:after { + bottom: 0.125rem; + margin-bottom: -0.125rem; +} + +.menu_shown .menu__icon span { + background: transparent; +} + +.menu_shown .menu__icon:before { + top: 50%; + transform: rotate(45deg); +} + +.menu_shown .menu__icon:after { + 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%); +} + +#site__name { + z-index: 11; +} + +.mobile.menu a { + color: white; +} + +.menu_shown .mobile.menu { + transform: translateX(0); +} + +.mobile { + display: none; +} + +@media (max-width: 37.5rem) { + .mobile { + display: 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; + } + + nav a, + #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; + } +} + + +/* ========================================================================== + Main + ========================================================================== */ + +main { + max-width: 40em; + margin: 0 auto; + padding: 1em; +} + +article { + padding-top: 1.563em; +} + +article header { + text-align: center; +} + + +/* ========================================================================== + Footer + ========================================================================== */ +footer { + background-color: rgba(0,0,0,.95); + color: white; + text-align: center; + + padding: 0 1rem; + + display: flex; + /*justify-content: left;*/ + flex-flow: column; +} + +footer a { + color: white; +} \ No newline at end of file