From bc7d659b1fb61b453ca90e34f7cfb295542295e1 Mon Sep 17 00:00:00 2001 From: scottj Date: Sat, 14 Aug 2021 15:21:48 -0700 Subject: created about page layout, modified website css, added to readme file, adjusted erb files and page linking --- README.md | 2 ++ about.html | 42 ++++++++++++++++++++++++++ footer.html.erb | 4 +-- header.html.erb | 8 +++-- index.html | 2 +- output/recipes.html | 15 ++++++---- style/style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++-- template.html.erb | 3 +- 8 files changed, 146 insertions(+), 16 deletions(-) create mode 100644 about.html diff --git a/README.md b/README.md index 187c916..83c713a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # pantry-of-plants +The making of a new vegan cooking/baking blog with a focus on simplicity and legibility. + ## Development Setup We suggest using [chruby](https://github.com/postmodern/chruby) and [ruby-install](https://github.com/postmodern/ruby-install): diff --git a/about.html b/about.html new file mode 100644 index 0000000..a3dc16a --- /dev/null +++ b/about.html @@ -0,0 +1,42 @@ + + + + Pantry of Plants + + + +
+ +
+
+

About

+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+
+
+
+ + + \ No newline at end of file diff --git a/footer.html.erb b/footer.html.erb index a87e194..1853f01 100644 --- a/footer.html.erb +++ b/footer.html.erb @@ -1,4 +1,4 @@ diff --git a/header.html.erb b/header.html.erb index d5444da..cf687d0 100644 --- a/header.html.erb +++ b/header.html.erb @@ -1,5 +1,7 @@ diff --git a/index.html b/index.html index ecc53d7..5e3b251 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
Recipes - About + About
diff --git a/output/recipes.html b/output/recipes.html index fcde2fd..07ed63e 100644 --- a/output/recipes.html +++ b/output/recipes.html @@ -1,12 +1,15 @@ - Hello + Pantry of Plants +

Big Header Boi

@@ -26,8 +29,8 @@

apple

diff --git a/style/style.css b/style/style.css index 71a9867..74118bb 100644 --- a/style/style.css +++ b/style/style.css @@ -42,7 +42,7 @@ nav a:hover { } .content { - background-color: #758B7A; + background-color: #B8C5BB; color: #F1F1F1; border-radius: 20px; } @@ -91,7 +91,7 @@ footer p { } .active, .dot:hover { - background-color: #B8C5BB; + background-color: #758B7A; } /* Fading animation */ @@ -135,7 +135,7 @@ footer p { } .button:hover { - background-color: #B8C5BB; + background-color: #758B7A; color: #F1F1F1; } @@ -160,6 +160,37 @@ footer p { /* styling for home page */ /* -------------------------------------------------------------------------- */ +#active { + color: #B8C5BB; +} + +.text { + background-color: #F1F1F1; + color: #5E5750; + border-radius: 20px; + width: 100%; + padding: 6px; + font-weight: bold; + font-size: 16px; +} + +.image { + border-radius: 20px; + width: 100%; + padding-bottom: 10px; +} + +h1 { + font-size: 28px; + font-weight: bold; + padding-top: 10px; + padding-left: 10px; +} + +.image-and-text { + padding: 10px; + align-items: center; +} @media only screen and (min-width: 355px) { .logo { @@ -212,6 +243,12 @@ footer p { .slideshow-container { padding: 20px 20px 10px 20px; } + + h1 { + font-size: 36px; + padding-top: 20px; + padding-left: 20px; + } } @@ -260,6 +297,23 @@ footer p { .slideshow-container { padding: 40px 40px 20px 40px; } + + .text { + width: 50%; + padding: 6px; + } + + .image { + width: 50%; + padding-bottom: 10px; + padding-right: 20px; + } + + .image-and-text { + margin-top: -20px; + display: flex; + padding: 20px; + } } @@ -321,6 +375,32 @@ footer p { width: 20px; margin-bottom: -4px; } + + .image-and-text { + padding: 40px; + display: flex; + } + + h1 { + font-size: 48px; + padding-top: 40px; + padding-left: 40px; + } + + .text { + padding: 10px; + } + + .image { + padding-bottom: 10px; + padding-right: 40px; + } + + .image-and-text { + margin-top: -20px; + display: flex; + padding: 40px; + } } @media only screen and (min-width: 1500px) { diff --git a/template.html.erb b/template.html.erb index 4b1cef3..1d9db76 100644 --- a/template.html.erb +++ b/template.html.erb @@ -1,6 +1,7 @@ - Hello + Pantry of Plants + <%= render "header.html.erb" %> -- cgit v1.2.3