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].
kellyky · Nov 5, 2024 · d247491 · d247491
1 parent 571ed4d
commit d247491
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 124 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,7 +9,8 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
-  <header>
+  <div class="background">
+    <header>
   <ul>
     <li class="header"><a href="https://aavalam.org/" target="_blank">Aavalam Home</a></li>
     <li class="header">|</li>
@@ -25,7 +26,7 @@
       <li><a href="./notes.html">[wip] Notes</a></li>
     </ul>
 
-  <footer>
+    <footer>
     <hr>
     <br>
     <ul>
@@ -38,5 +39,6 @@
     </ul>
 </footer>
 
+  </div>
 </body>
 </html>
diff --git a/notes.html b/notes.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<RDOCTYPE html>
 <html>
 <head>
   <meta charset='utf-8'>
@@ -10,7 +10,8 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
-  <header>
+  <div class="background"> 
+    <header>
   <ul>
     <li class="header"><a href="https://aavalam.org/" target="_blank">Aavalam Home</a></li>
     <li class="header">|</li>
@@ -21,7 +22,7 @@
 </header>
 
 
-  <article class="notes">
+    <article class="notes">
       <summary><h2>Test feed using `entr`</h2></summary>
 
       <p>When you save a ruby file in that directory, the test refreshes and re-runs.</p>
@@ -40,7 +41,7 @@
           </code>
         </li>
       </ul>
-      
+
       <ul>
         <li><h3>Elixir: Mix</h3></li>
         <li>
@@ -56,7 +57,7 @@
         </li>
       </ul>
 
-  </article>
+    </article>
 
   <footer>
     <hr>
@@ -71,5 +72,6 @@
     </ul>
 </footer>
 
+  </div>
 </body>
 </html>
diff --git a/today_i_learned.html b/today_i_learned.html
@@ -9,6 +9,7 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
+  <div class="background">
   <header>
   <ul>
     <li class="header"><a href="https://aavalam.org/" target="_blank">Aavalam Home</a></li>
@@ -42,5 +43,6 @@ <h1>Posts</h1>
     </ul>
 </footer>
 
+  </div>
 </body>
 </html>
diff --git a/views/index.erb b/views/index.erb
@@ -9,13 +9,15 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
-  <%= render_partial('_header') %>
+  <div class="background">
+    <%= render_partial('_header') %>
 
     <ul>
       <li><a href="./today_i_learned.html">Today I Learned</a></li>
       <li><a href="./notes.html">[wip] Notes</a></li>
     </ul>
 
-  <%= render_partial('_footer') %>
+    <%= render_partial('_footer') %>
+  </div>
 </body>
 </html>
diff --git a/views/notes.erb b/views/notes.erb
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<RDOCTYPE html>
 <html>
 <head>
   <meta charset='utf-8'>
@@ -10,9 +10,10 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
-  <%= render_partial('_header') %>
+  <div class="background"> 
+    <%= render_partial('_header') %>
 
-  <article class="notes">
+    <article class="notes">
       <summary><h2>Test feed using `entr`</h2></summary>
 
       <p>When you save a ruby file in that directory, the test refreshes and re-runs.</p>
@@ -47,8 +48,9 @@
         </li>
       </ul>
 
-  </article>
+    </article>
 
   <%= render_partial('_footer') %>
+  </div>
 </body>
 </html>
diff --git a/views/today_i_learned.erb b/views/today_i_learned.erb
@@ -9,6 +9,7 @@
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
+  <div class="background">
   <%= render_partial('_header') %>
 
   <h1>Posts</h1>
@@ -21,5 +22,6 @@
   </ul>
 
   <%= render_partial('_footer') %>
+  </div>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ html, body { @@
     body {
       font-family: courier, mono;
-      padding: 10px;
     }
     h1 {
@@ Expand Down @@