From d247491de6ab24a386d610dc585bcd3cddd7801f Mon Sep 17 00:00:00 2001 From: Kelly Popko Date: Tue, 5 Nov 2024 01:27:19 -0600 Subject: [PATCH] Move background-image attribute: - Create div with class "background" which holds page content - Add div to the page-erb files & bin/render the new html pages Also removes some extraneous styling [cleanup]. --- assets/css/header_footer.css | 3 +- assets/css/index.css | 12 ++--- assets/css/main.css | 1 - assets/css/notes.css | 33 ++++--------- assets/css/today_i_learned.css | 85 +++------------------------------- index.html | 6 ++- notes.html | 12 +++-- today_i_learned.html | 2 + views/index.erb | 6 ++- views/notes.erb | 10 ++-- views/today_i_learned.erb | 2 + 11 files changed, 48 insertions(+), 124 deletions(-) diff --git a/assets/css/header_footer.css b/assets/css/header_footer.css index cc161d9..c1b9d72 100644 --- a/assets/css/header_footer.css +++ b/assets/css/header_footer.css @@ -15,9 +15,10 @@ footer hr { } footer ul { - display: inline-block; + display: block; } footer li { padding: 10px; } + diff --git a/assets/css/index.css b/assets/css/index.css index 02ca6f7..020c7c3 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,9 +1,9 @@ -body { +.background { background-image: url("../images/keem_achill.jpg"); - background-repeat:no-repeat; - background-position: center; - background-color: black; + height: 100%; + width: auto; background-size: cover; - overflow: scroll; + background-position: center; + background-repeat: no-repeat; + padding: 20px; } - diff --git a/assets/css/main.css b/assets/css/main.css index 4082a0f..7af69f0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -5,7 +5,6 @@ html, body { body { font-family: courier, mono; - padding: 10px; } h1 { diff --git a/assets/css/notes.css b/assets/css/notes.css index 0613251..2d8a6bc 100644 --- a/assets/css/notes.css +++ b/assets/css/notes.css @@ -1,11 +1,16 @@ body { + text-align: right; +} + +.background { background-image: url("../images/keel_achill.jpg"); - background-repeat:no-repeat; - background-position: center; - background-color: black; + height: 100%; + width: auto; background-size: cover; + background-position: center; + background-repeat: no-repeat; overflow: scroll; - text-align: right; + padding: 20px; } article { @@ -27,24 +32,8 @@ code { border-radius: 10px; } -h2 { - font-family: tahoma; -} - -header { - color: black; -} - -/* ul { */ -/* display: block; */ -/* } */ - /* Links */ -a { - text-decoration: none; -} - /* unvisited link */ a:link { color: indigo; @@ -60,7 +49,3 @@ a:hover { color: hotpink; } -footer { - position: relative; -} - diff --git a/assets/css/today_i_learned.css b/assets/css/today_i_learned.css index f18474f..208c763 100644 --- a/assets/css/today_i_learned.css +++ b/assets/css/today_i_learned.css @@ -3,86 +3,13 @@ html, body { color: yellow; } -body { +.background { background-image: url("../images/myajima.png"); - background-repeat:no-repeat; - background-position: center; - background-color: black; - background-size: cover; - overflow: scroll; - font-family: courier, mono; - padding: 10px; -} - -h1 { - text-align: right; - text-transform: uppercase; -} - -/* Lists */ - -ul { - color: white; - text-align: right; -} - -li { - text-align: right; - padding-top: 5px; - list-style: none; -} - -code { - background-color: white; - opacity: 0.9; - color: black; - font-weight: bold; - padding: 15px; - border-radius: 15px; -} - -article { - background-color: black; height: 100%; - opacity: 0.4; - margin: 5px; - padding: 15px; - border-radius: 15px; -} - -article li { - color: yellow; - text-align: left; - display: flex; -} - -/* Links */ - -a { - text-decoration: none; -} - -/* unvisited link */ -a:link { - color: pink; -} - -/* visited link */ -a:visited { - color: white; -} - -/* mouse over link */ -a:hover { - color: hotpink; -} - -#index { - float: right; - text-align: right; + width: auto; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding: 20px; } -hr { - float: right; - width: 200px; -} diff --git a/index.html b/index.html index bc86ecb..07c1312 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ -
+
+
-
+

    @@ -38,5 +39,6 @@
+
diff --git a/notes.html b/notes.html index 42e6a87..3ff7a55 100644 --- a/notes.html +++ b/notes.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,8 @@ -
+
+
-
+

Test feed using `entr`

When you save a ruby file in that directory, the test refreshes and re-runs.

@@ -40,7 +41,7 @@ - +

  • Elixir: Mix

  • @@ -56,7 +57,7 @@
-
+
@@ -71,5 +72,6 @@
+
diff --git a/today_i_learned.html b/today_i_learned.html index e0886b9..b6924df 100644 --- a/today_i_learned.html +++ b/today_i_learned.html @@ -9,6 +9,7 @@ +
+
diff --git a/views/index.erb b/views/index.erb index c50ddc5..b49569d 100644 --- a/views/index.erb +++ b/views/index.erb @@ -9,13 +9,15 @@ - <%= render_partial('_header') %> +
+ <%= render_partial('_header') %> - <%= render_partial('_footer') %> + <%= render_partial('_footer') %> +
diff --git a/views/notes.erb b/views/notes.erb index 498dab2..11cd70b 100644 --- a/views/notes.erb +++ b/views/notes.erb @@ -1,4 +1,4 @@ - + @@ -10,9 +10,10 @@ - <%= render_partial('_header') %> +
+ <%= render_partial('_header') %> -
+

Test feed using `entr`

When you save a ruby file in that directory, the test refreshes and re-runs.

@@ -47,8 +48,9 @@ -
+
<%= render_partial('_footer') %> +
diff --git a/views/today_i_learned.erb b/views/today_i_learned.erb index 43e7ffe..59e30b2 100644 --- a/views/today_i_learned.erb +++ b/views/today_i_learned.erb @@ -9,6 +9,7 @@ +
<%= render_partial('_header') %>

Posts

@@ -21,5 +22,6 @@ <%= render_partial('_footer') %> +