[wip] Break up CSS:

Into header/footer, main, and file specific css files Use different photo for index, til, notes
kellyky · Oct 31, 2024 · bd5fbd1 · bd5fbd1
1 parent 9a60c56
commit bd5fbd1
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 34 deletions.
diff --git a/assets/css/header_footer.css b/assets/css/header_footer.css
@@ -0,0 +1,23 @@
+li.header, li.footer {
+  display: inline-block;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  padding: 10px;
+  right: 0;
+  z-index: 10;
+}
+
+footer hr {
+  margin: 10px;
+}
+
+footer ul {
+  display: inline-block;
+}
+
+footer li {
+ padding: 10px;
+}
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -0,0 +1,9 @@
+body {
+  background-image: url("../images/keem_achill.jpg");
+  background-repeat:no-repeat;
+  background-position: center;
+  background-color: black;
+  background-size: cover;
+  overflow: scroll;
+}
+
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -4,12 +4,6 @@ html, body {
 }
 
 body {
-  background-image: url("../images/keem_achill.jpg");
-  background-repeat:no-repeat;
-  background-position: center;
-  background-color: black;
-  background-size: cover;
-  overflow: scroll;
   font-family: courier, mono;
   padding: 10px;
 }
@@ -32,10 +26,6 @@ li {
   list-style: none;
 }
 
-li.header, li.footer {
-  display: inline-block;
-}
-
 code {
   background-color: white;
   opacity: 0.9;
@@ -60,14 +50,6 @@ article li {
   display: flex;
 }
 
-footer {
-  position: absolute;
-  bottom: 0;
-  padding: 10px;
-  right: 0;
-  z-index: 10;
-}
-
 /* Links */
 
 a {
@@ -98,15 +80,3 @@ hr {
   float: right;
   width: 200px;
 }
-
-footer hr {
-  margin: 10px;
-}
-
-footer ul {
-  display: inline-block;
-}
-
-footer li {
- padding: 10px;
-}
diff --git a/assets/css/notes.css b/assets/css/notes.css
@@ -0,0 +1,9 @@
+body {
+  background-image: url("../images/keel_achill.jpg");
+  background-repeat:no-repeat;
+  background-position: center;
+  background-color: black;
+  background-size: cover;
+  overflow: scroll;
+}
+
diff --git a/assets/css/today_i_learned.css b/assets/css/today_i_learned.css
@@ -0,0 +1,88 @@
+html, body {
+  height: 100%;
+  color: yellow;
+}
+
+body {
+  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;
+}
+
+hr {
+  float: right;
+  width: 200px;
+}
diff --git a/assets/images/myajima.png b/assets/images/myajima.png
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
   <title>Kelly's Site</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/index.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <header>
@@ -21,7 +23,7 @@
 
     <ul>
       <li><a href="./today_i_learned.html">Today I Learned</a></li>
-      <li><a href="./notes.html">Notes</a></li>
+      <li><a href="./notes.html">[wip] Notes</a></li>
     </ul>
 
   <footer>

diff --git a/notes.html b/notes.html
@@ -6,7 +6,9 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Notes</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
-  <link rel='stylesheet' type='text/css' media='screen' href='style/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/notes.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <header>

diff --git a/today_i_learned.html b/today_i_learned.html
@@ -6,6 +6,8 @@
   <title>Today I Learned...</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/today_i_learned.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <header>

diff --git a/views/.index.erb.swo b/views/.index.erb.swo
diff --git a/views/index.erb b/views/index.erb
@@ -6,13 +6,15 @@
   <title>Kelly's Site</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/index.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <%= render_partial('_header') %>
 
     <ul>
       <li><a href="./today_i_learned.html">Today I Learned</a></li>
-      <li><a href="./notes.html">Notes</a></li>
+      <li><a href="./notes.html">[wip] Notes</a></li>
     </ul>
 
   <%= render_partial('_footer') %>

diff --git a/views/notes.erb b/views/notes.erb
@@ -6,7 +6,9 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Notes</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
-  <link rel='stylesheet' type='text/css' media='screen' href='style/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/notes.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <%= render_partial('_header') %>

diff --git a/views/today_i_learned.erb b/views/today_i_learned.erb
@@ -6,6 +6,8 @@
   <title>Today I Learned...</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/today_i_learned.css'>
+  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/header_footer.css'>
 </head>
 <body>
   <%= render_partial('_header') %>