diff --git a/blog-post.html b/blog-post.html new file mode 100644 index 0000000..9f562ab --- /dev/null +++ b/blog-post.html @@ -0,0 +1,368 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
23
+
JAN
+
+
+
Tampa: The City in Motion
+
Posted by admin in Journal, + Photography, Web + Deisign | 9 comments +
+
+
+ The Tampa, Florida city skyline. +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis officia dolore + doloremque aliquid quidem alias delectus a quaerat facilis itaque asperiores quam, earum + molestias, + ad laboriosam facere, illum minima! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis officia dolore + doloremque aliquid quidem. +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis officia dolore + doloremque aliquid quidem alias delectus a quaerat facilis itaque asperiores quam, earum + molestias, + ad laboriosam facere, illum minima! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis officia dolore + doloremque aliquid quidem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident + doloribus suscipit perspiciatis doloremque tempore inventore dolores reiciendis, fugiat earum ea + pariatur, facilis quos nam amet dolor accusamus iusto quod dolorum! +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis officia dolore + doloremque aliquid quidem alias delectus a quaerat facilis itaque asperiores quam, earum + molestias. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta non autem ut temporibus sunt + modi + odio eum at. Unde totam temporibus vero ratione molestias quaerat omnis, quisquam aut atque + quidem? + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquam quo cupiditate + soluta + consequuntur officia consectetur? Minus error vero similique accusantium soluta maiores + consectetur + excepturi est facilis provident, vel molestiae? + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem recusandae tenetur + exercitationem praesentium temporibus adipisci reiciendis a autem, blanditiis inventore. Quo, + ullam + perferendis. Velit culpa voluptatum ipsa quod asperiores eros. +

+
+
+
Related Posts
+
+ Sunrise + Forest + Grand Canyon + Tree +
+
+
+
2 Responses to "Tampa: The City in Motion"
+
+ User Avatar +
+
Michael McMasters
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. + Officiis + eos reprehenderit ea, iure voluptas sed facere eaque aut magni nostrum molestiae + obcaecati impedit totam ipsum, deserunt laboriosam aspernatur qui saepe. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit facilis sit. +
+
+
+
+ User Avatar +
+
Nathan Cheeseman
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, + et? Soluta recusandae ipsam ipsum quaerat sunt blanditiis necessitatibus? Doloribus, + earum sequi. Omnis deserunt saepe illum eveniet quibusdam facilis eos tempore? +
+
+
+
+
+
+ Submit a Comment +
+
+ Your email address will not be published. Required fields are marked * +
+
+ + + + + +
+
+
+ + +
+
+ +
+
POPULAR POSTS
+
+ Pier +
+
Vestibum Malesuada Etiam Magna
+
22 Nov, 2020
+
+
+
+ Northern Lights +
+
Mattis Egestas Frinilla Consectetur
+
15 Nov, 2020
+
+
+
+ Sunrise +
+
Justo Lorm Fermentum Ultricies Pharetra
+
April 11, 2020
+
+
+
+ + +
+
SEARCH
+ +
+ + +
+
CUSTOM TEXT
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Exercitationem + nobis + officia dolore + doloremque aliquid quidem alias delectus a quaerat facilis itaque asperiores quam, earum + molestias, +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, quia, fugiat + labore dolor sit amet. +

+
+
+
+
+
+ + + + + + + + + + +
+
+
+
+
POPULAR POSTS
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum +
+
10 Oct, 2020
+
+
+
+ Lorem ipsum dolor sit amet. +
+
14 Nov, 2020
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit amet consectetur adipisicing dolor sit amet consectetur adipisicing. +
+
11 April, 2020
+
+
+
+
TWITTER
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 21 hours ago +
+
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 2 days ago +
+
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 3 days ago +
+
+
+
+
A LITTLE ABOUT ME
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti maiores facere, vitae + laudantium fugit. +
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias incidunt autem tempora + delectus cupiditate, fuga id voluptatum asperiores explicabo laudantium nam sit porro + + +
+
+
+
CONTACT FORM
+
+
+ + + +
+ +
+
+
+
+
+ + + +
+
+
+
© 2020 Ikaros. Theme inspired by elemis.
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/beach.jpg b/images/beach.jpg new file mode 100644 index 0000000..fbc1ecc Binary files /dev/null and b/images/beach.jpg differ diff --git a/blog-post.png b/images/blog-post.png similarity index 100% rename from blog-post.png rename to images/blog-post.png diff --git a/blog.png b/images/blog.png similarity index 100% rename from blog.png rename to images/blog.png diff --git a/images/forest.jpg b/images/forest.jpg new file mode 100644 index 0000000..e866c74 Binary files /dev/null and b/images/forest.jpg differ diff --git a/images/grand-canyon.jpg b/images/grand-canyon.jpg new file mode 100644 index 0000000..bee8432 Binary files /dev/null and b/images/grand-canyon.jpg differ diff --git a/images/greece.jpeg b/images/greece.jpeg new file mode 100644 index 0000000..bcce409 Binary files /dev/null and b/images/greece.jpeg differ diff --git a/images/honolulu.jpg b/images/honolulu.jpg new file mode 100644 index 0000000..6c9404a Binary files /dev/null and b/images/honolulu.jpg differ diff --git a/images/jm-avatar.jpg b/images/jm-avatar.jpg new file mode 100644 index 0000000..7f62e4d Binary files /dev/null and b/images/jm-avatar.jpg differ diff --git a/images/nate-avatar.jpg b/images/nate-avatar.jpg new file mode 100644 index 0000000..df6442f Binary files /dev/null and b/images/nate-avatar.jpg differ diff --git a/images/northern-lights.jpg b/images/northern-lights.jpg new file mode 100644 index 0000000..1532c52 Binary files /dev/null and b/images/northern-lights.jpg differ diff --git a/images/pier2.jpeg b/images/pier2.jpeg new file mode 100644 index 0000000..5b39edd Binary files /dev/null and b/images/pier2.jpeg differ diff --git a/images/sunrise.jpg b/images/sunrise.jpg new file mode 100644 index 0000000..d1d63de Binary files /dev/null and b/images/sunrise.jpg differ diff --git a/images/tampa-skyline.jpg b/images/tampa-skyline.jpg new file mode 100644 index 0000000..71afb8a Binary files /dev/null and b/images/tampa-skyline.jpg differ diff --git a/images/tree.jpg b/images/tree.jpg new file mode 100644 index 0000000..a254ae1 Binary files /dev/null and b/images/tree.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e9845e4 --- /dev/null +++ b/index.html @@ -0,0 +1,427 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ Pier +
+
Pier
+

A pier is a raised structure that rises above a body of water and usually + juts out from its shore, typically supported + by piles or pillars, and provides above-water access to offshore areas. Frequent pier uses + include fishing, boat docking + and access for both passengers and cargo, and oceanside recreation. Bridges, buildings, and + walkways may all be + supported by piers. Their open structure allows tides and currents to flow relatively + unhindered, whereas the more solid + foundations of a quay or the closely spaced piles of a wharf can act as a breakwater, and are + consequently more liable + to silting. Piers can range in size and complexity from a simple lightweight wooden structure to + major structures + extended over 1,600 m (5,200 ft). In American English, a pier may be synonymous with a dock.

+
+ 17, January 2020. + +
+ + 23 +
+
+
+
+
+ Forest +
+
Forest
+

A forest is an area of land dominated by trees.[1] Hundreds of definitions + of forest are used throughout the world, + incorporating factors such as tree density, tree height, land use, legal standing and ecological + function.[2][3][4] + According to the Food and Agriculture Organization definition, a forest is defined as land + spanning more than 0.5 + hectares with trees higher than 5 meters and a canopy cover of more than 10 percent, or trees + able to reach these + thresholds in situ. It does not include land that is predominantly under agricultural or urban + land use[5].

+
+ April, 11 2020 +
+ + 40 +
+
+
+
+
+ Tree +
+
Tree
+

In botany, a tree is a perennial plant with an elongated stem, or trunk, + supporting branches and leaves in most species. + In some usages, the definition of a tree may be narrower, including only woody plants with + secondary growth, plants that + are usable as lumber or plants above a specified height. In wider definitions, the taller palms, + tree ferns, bananas, + and bamboos are also trees. Trees are not a taxonomic group but include a variety of plant + species that have + independently evolved a trunk and branches as a way to tower above other plants to compete for + sunlight. Trees tend to + be long-lived, some reaching several thousand years old. Trees have been in existence for 370 + million years. It is + estimated that there are some three trillion mature trees in the world.[1]

+
+ 4, March 2020 +
+ + 16 +
+
+
+
+
+ Sunrise +
+
Sunrise
+

Sunrise (or sunup) is the moment when the upper limb of the Sun appears on + the horizon in the morning.[1] The term can + also refer to the entire process of the solar disk crossing the horizon and its accompanying + atmospheric effects.[2]

+
+ 19, August 2020. +
+ + 11 +
+
+
+
+
+ Beach +
+
Beach
+

A beach is a landform alongside a body of water which consists of loose + particles. The particles composing a beach are + typically made from rock, such as sand, gravel, shingle, pebbles. The particles can also be + biological in origin, such + as mollusc shells or coralline algae.

+
+ 6, March 2020. +
+ + 23 +
+
+
+
+
+ Honolulu +
+
Honolulu
+

Honolulu (/ˌhɒnəˈluːluː/;[7] Hawaiian: [honoˈlulu]) is the capital and + largest city of the U.S. state of Hawaii. It is + an unincorporated part of and the county seat of the City and County of Honolulu along the + southeast coast of the island + of Oʻahu.[a] The city is the main gateway to Hawaiʻi and a major portal into the United States. + The city is also a major + hub for international business and military defense, as well as being host to a diverse variety + of east–west and Pacific + cultures, cuisine, and traditions.

+
+ 2, September 2019. +
+ + 34 +
+
+
+
+
+ Grand Canyon +
+
Grand Canyon
+

The Grand Canyon (Hopi: Ongtupqa,[2] Yavapai: Wi:kaʼi:la, Navajo: Bidááʼ + Haʼaztʼiʼ Tsékooh,[3][4] Spanish: Gran Cañón) + is a steep-sided canyon carved by the Colorado River in Arizona, United States. The Grand Canyon + is 277 miles (446 km) + long, up to 18 miles (29 km) wide and attains a depth of over a mile (6,093 feet or 1,857 + meters).[5] +

+

+ The canyon and adjacent rim are contained within Grand Canyon National Park, the Kaibab National + Forest, Grand + Canyon–Parashant National Monument, the Hualapai Indian Reservation, the Havasupai Indian + Reservation and the Navajo + Nation. President Theodore Roosevelt was a major proponent of preservation of the Grand Canyon + area and visited it on + numerous occasions to hunt and enjoy the scenery.

+
+ 17, January 2020. +
+ + 14 +
+
+
+
+
+ Greece +
+
Greece
+

Greece (Greek: Ελλάδα, Ellada, [eˈlaða]), officially the Hellenic + Republic,[9][a] also known as Hellas,[b] is a country + located in Southeast Europe. Its population is approximately 10.7 million as of 2018; Athens is + its largest and capital + city, followed by Thessaloniki.

+
+ 5, March 2020 +
+ + 18 +
+
+
+
+
+ Northern-Lights +
+
Northern Lights
+

An aurora (plural: auroras or aurorae),[a] sometimes referred to as polar + lights (aurora polaris), northern lights + (aurora borealis), or southern lights (aurora australis), is a natural light display in the + Earth's sky, predominantly + seen in high-latitude regions (around the Arctic and Antarctic).

+

+ Auroras are the result of disturbances in the magnetosphere caused by solar wind. These + disturbances are sometimes + strong enough to alter the trajectories of charged particles in both solar wind and + magnetospheric plasma. These + particles, mainly electrons and protons, precipitate into the upper atmosphere + (thermosphere/exosphere). +

+

+ The resulting ionization and excitation of atmospheric constituents emit light of varying color + and complexity. The form + of the aurora, occurring within bands around both polar regions, is also dependent on the amount + of acceleration + imparted to the precipitating particles. Precipitating protons generally produce optical + emissions as incident hydrogen + atoms after gaining electrons from the atmosphere. Proton auroras are usually observed at lower + latitudes.[2]. +

+
+ 26, June 2020. +
+ + 23 +
+
+
+
+ +
+ + +
+
+ +
+
+
+ + + + + +
+
+
+
+
POPULAR POSTS
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum +
+
10 Oct, 2020
+
+
+
+ Lorem ipsum dolor sit amet. +
+
14 Nov, 2020
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit amet consectetur adipisicing dolor sit amet consectetur adipisicing. +
+
11 April, 2020
+
+
+
+
TWITTER
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 21 hours ago +
+
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 2 days ago +
+
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + dolor sit. - 3 days ago +
+
+
+
+
A LITTLE ABOUT ME
+
+ Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti maiores facere, vitae + laudantium fugit. +
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias incidunt autem tempora + delectus cupiditate, fuga id voluptatum asperiores explicabo laudantium nam sit porro + + +
+
+
+
CONTACT FORM
+
+
+ + + +
+ +
+
+
+
+
+ + + +
+
+
+
© 2020 Ikaros. Theme inspired by elemis.
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles/blog-post.css b/styles/blog-post.css new file mode 100644 index 0000000..5fc3789 --- /dev/null +++ b/styles/blog-post.css @@ -0,0 +1,211 @@ +img { + transition: opacity 0.2s; +} + +img:hover { + cursor: pointer; + opacity: 0.9; +} + + + + +/* ------- Article Header ------- */ + +.c-header-container { + width: 100%; + height: 5em; + display: flex; +} + +.c-header-title { + color: rgb(85, 85, 85); + font-weight: bold; + font-size: 1.1rem; + padding-bottom: 0.3em; +} + +.c-date { + background-color: rgb(236, 236, 236); + border-radius: 50%; + min-height: 75px; + min-width: 75px; + + color: rgb(85, 85, 85); + font-weight: 500; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + /* Using line height to change horizontal space in-between elements. Because changing marging and padding was not doing anything. */ + line-height: 1.5rem; +} + +/* Use > arrow when using :nth-child so that it only selects direct children. And not children's children. */ +.c-date > :nth-child(1) { + font-size: 2em; +} + +.c-date > :nth-child(2) { + font-size: 1em; +} + +.c-header-container > :nth-child(2) { + flex-grow: 1; + align-self: center; + padding: 1em; + padding-right: 0; +} + +.c-posted-by { + color: rgb(153, 153, 153); + font-size: 0.7rem; + padding-top: 0.3em; +} + + + + + +/* ------- Content Body ------- */ + +.c-main-content-image { + margin: 2rem 0; + width: 100%; + height: 400px; +} + +.c-main-content-body { + font-size: 0.9rem; + padding: 1rem 0; +} + + + + + +/* ------- Related Posts ------- */ + +.c-related-posts-container { + display: flex; + justify-content: space-between; +} + +.c-related-posts-container > img { + width: 23%; + height: 7em; +} + + + + + +/* ------- Comments ------- */ + +.c-comment-container { + display: flex; + align-content: flex-start; + align-items: flex-start; +} + +.c-comment-container > img { + width: 5em; + height: 5em; +} + +.c-comment-body { + padding: 1em 1.3em; + margin-left: 1em; + width: 100%; + background-color: rgb(247, 247, 247);; + border: 1px solid rgb(225, 225, 225); +} + +.c-comment-username { + color: rgb(85, 85, 85); + font-weight: bold; + font-size: 0.91rem; + padding-bottom: 0.3em; +} + + + + + + +/* ------- Comment Input Field ------- */ + +#comment-form { + display: flex; + flex-direction: column; +} + +.c-input, +#comment-form > input { + margin-bottom: 1rem; + padding-left: 0.7rem; + height: 2rem; + font-size: 0.9rem; + background-color: rgb(247, 247, 247); + border: 1px solid rgb(225, 225, 225); +} + +::placeholder { + color: rgb(85, 85, 85); +} + +textarea { + margin-bottom: 1rem; + height: 10rem; + background-color: rgb(247, 247, 247); + border: 1px solid rgb(225, 225, 225); +} + +.c-form-button { + max-width: 15%;; +} + + + + + + +/* ------- Popular Posts ------- */ + +.c-popular-container { + display: flex; + align-content: flex-start; + align-items: flex-start; +} + +.c-popular-container > img { + width: 5em; + height: 5em; +} + +.c-popular-body { + margin-left: 1em; + width: 100%; +} + +.c-popular-title { + color: rgb(85, 85, 85); + font-size: 0.9rem; + padding-bottom: 0.3em; +} + +.c-popular-date { + font-size: 0.7em; + color: rgb(153, 153, 153); +} + +@media (max-width: 768px) { + .c-popular-resp { + border: none; + margin-left: 0; + margin-top: 3rem; + padding-left: 0; + } +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..8859cfd --- /dev/null +++ b/styles/index.css @@ -0,0 +1,61 @@ +.cust-card-border-bottom { + padding-bottom: 3.5em; + border-bottom: 1px dotted gray; +} + +.card { + background-color: var(--color-gray2); + position: relative; + left: 0x; + bottom: 0px; + + transition: 0.2s; +} + +.card:focus, +.card:hover { + cursor: pointer; + background-color: rgb(214, 214, 214); + position: relative; + bottom: 10px; +} + +.cust-card-body-container { + margin: 1.1em 1.1em 0.7rem 1.1em; +} + +.cust-card-body { + margin-top: 0.8em; + font-size: 0.9em; +} + +.cust-card-footer { + padding-top: 10px; + border-top: 1px dotted black; + color: rgb(153, 153, 153); + font-size: 0.8em; + + display: flex; + justify-content: space-between; +} + + +/* Cards Columns don't work with the regular column classes (col-md-4 for example) + They must be defined with @media keys. + Source: First answer - @https://stackoverflow.com/questions/34140793/bootstrap-4-responsive-cards-in-card-columns/43117538#43117538 +*/ +@media (min-width: 34em) { + .card-columns { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } +} + +@media (min-width: 48em) { + .card-columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + } +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..6763dc5 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,275 @@ +/* Any selector starting with c- or cust- means it is not a Booststrap selector. */ + +/* The lower the number, the darker the shade of color */ +.color-theme { + --color-white1: rgb(233, 233, 233); + --color-gray1: rgb(128, 128, 128); + --color-gray2: rgb(253, 253, 253); + --color-black0: rgb(39, 41, 43); + --color-black1: rgb(58, 61, 64); + --color-black2: rgb(74, 77, 80); +} + +body { + background-color: rgv(253, 253, 253); +} + +a { + color: rgb(151, 181, 201); +} + +a:focus, +a:hover { + color: teal; +} + + + + + + +/* Mockup page seems to have different font-sizes for titles. */ +.c-title-small { + font-size: 0.9rem; +} + +.c-title-large { + font-size: 1.0rem; +} + +.c-title-small, +.c-title-large +{ + color: rgb(85, 85, 85); + font-weight: bold; + padding-bottom: 0.3em; +} + + +.c-subtext { + color: rgb(85, 85, 85); + font-size: 0.9rem; +} + +.c-border-bottom { + border-bottom: 1px dotted rgb(153, 153, 153); +} + +.c-border-left { + padding-left: 2rem; + border-left: 1px dotted rgb(153, 153, 153); +} + + + + + + +/* ------- Button ------- */ + +.cust-button { + padding: 0.2rem 1.4rem; + font-size: 0.9rem; + color: white; + background-image: linear-gradient(rgb(153, 199, 228), rgb(111, 153, 180)); + border: 1px solid rgb(82, 118, 140); + border-radius: 2px; + + transition: 0.2s; +} + +.cust-button:hover { + background-image: linear-gradient(rgb(89, 130, 155), rgb(37, 72, 94)); + cursor: pointer; +} + +/* Do this so text stays centered in button when screen is small. */ +@media (max-width: 991px) { + .cust-button { + padding: 0.2rem 0; + min-width: 15%; + } +} + + + + + + +/* ------- Top Navbar ------- */ + +.navbar { + border-bottom: 5px solid var(--color-black2); +} + +.cust-nav-bg { + background-color: var(--color-black1); +} + +.cust-jkaros { + color: var(--color-white1); + font-weight: bold; + font-size: 2rem; + font-style: italic; +} + +.cust-jkaros:hover { + color: teal; +} + +.cust-nav-menu-icon { + color: var(--color-white1); + font-size: 1.8rem; + + display: flex; + align-items: center; +} + +.cust-nav-font-color { + color: rgb(212, 212, 212); +} + +.nav-item { + font-size: 0.7rem; + font-weight: bold; + list-style: none; + box-shadow: 1px 0px rgb(48, 48, 50), 2px 0px rgb(66, 69, 71); +} + +/* Gives Home a border (using box shadow) on its left and right side */ +.c-home-li { + box-shadow: -1px 0px rgb(48, 48, 50), -2px 0px rgb(66, 69, 71), 1px 0px rgb(48, 48, 50), + 2px 0px rgb(66, 69, 71); + color: black; +} + +/* Have to do this to override Bootstrap from setting the color when on home page */ +.c-home-color { + color: rgb(212, 212, 212); +} + +.nav-item:focus, +.nav-item:hover { + background-color: var(--color-black0); +} + +/* This is a bit weird. Bootstrap sets the color for Home automatically but we have to put this here manually for Blog */ +.c-navtab-active { + color: rgb(122, 156, 178); + +} + + + + + + +/* ------- Footer ------- */ + +.cust-footer-background { + background-color: var(--color-black1); + border-top: 5px solid rgb(47, 50, 53); + border-bottom: 3px solid rgb(47, 50, 53); +} + +.cust-footer-border-bottom { + padding-bottom: 1rem; + border-bottom: 0.5px dotted rgb(80, 82, 85); +} + +.cust-foot-header { + color: var(--color-white1); + font-weight: bold; + font-size: 0.9rem; +} + +.cust-footer-body { + margin-top: 1.2em; + color: rgb(175, 175, 175); + font-size: 0.9rem; +} + +.cust-footer-date { + margin-top: 0.7rem; + font-size: 0.7rem; + color: rgb(102, 107, 112); +} + +.cust-footer-age-url { + color: rgb(118, 149, 169); +} + +.cust-footer-input { + margin-bottom: 0.9rem; + background-color: rgb(39, 41, 43); + border: none; + width: 100%; + height: 2rem; + color: white; +} +.cust-footer-input-last { + height: 200px; +} + +@media (max-width: 767px) { + /* When screen is less than this size, categories squish together. This adds margin above each category. */ + .c-resp-mt { + margin-top: 5rem; + } +} + + + + + + +/* ------- Bottom Nav (under footer) ------- */ + +.cust-bottom-nav { + background-color: rgb(47, 50, 53); + padding: 1.5rem; +} + +.cust-nav-content { + /* Add margin to center it. Adding padding to parent div was putting it out of line for some reason. */ + margin-bottom: 6px; + color: rgb(175, 175, 175); + font-size: 0.8rem; +} + +.elemis-url { + color: rgb(116, 148, 168); +} + +.cust-icon-container { + color: white; + font-size: 0.9em; + cursor: pointer; +} + +.fa-rss { + background-color: rgb(248, 144, 46); + padding: 0.4em; +} +.fa-facebook-f { + background-color: rgb(57, 89, 159); + padding: 0.4em; +} + +/* Use custom class instead of fa-twitter so that this doesn't style twitter icon used elsewhere */ +.twitter-icon { + background-color: rgb(69, 176, 227); + padding: 0.4em; +} +.fa-instagram { + background-color: rgb(217, 122, 176); + padding: 0.4em; +} +.fa-pinterest-p { + background-color: rgb(204, 33, 44); + padding: 0.4em; +} +.fa-linkedin-in { + background-color: rgb(83, 143, 228); + padding: 0.4em; +}