+
{{ content }}
-
- {% if site.comments == true and page.comments != false %}
-
- {% endif %}
-
-
\ No newline at end of file
+
diff --git a/_posts/2020-04-25-test.markdown b/_posts/2020-04-25-test.markdown
deleted file mode 100644
index 77ddeec..0000000
--- a/_posts/2020-04-25-test.markdown
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: page
-title: ""
----
-
-Landing page for my stream of consciousness.
diff --git a/_posts/2024-10-31-roots.markdown b/_posts/2024-10-31-roots.markdown
new file mode 100644
index 0000000..be68c6c
--- /dev/null
+++ b/_posts/2024-10-31-roots.markdown
@@ -0,0 +1,12 @@
+---
+layout: page
+icon: "/assets/roots.png"
+title: "I Need To Grow Away From These Roots"
+---
+## I Need To Grow Away From These Roots
+Ambient music generation inspired by the audio component of David Whiting's artistic piece, [I Need To
+Grow Away From These Roots](https://www.vitling.xyz/i-need-to-grow-away-from-these-roots/).
+All credit to the original artist.
+
+### Code
+All code can be found on my Github [here](https://github.com/TimothyFDavison/I-Need-To-Grow-Away-From-These-Roots).
diff --git a/_posts/2024-10-31-roots2.markdown b/_posts/2024-10-31-roots2.markdown
new file mode 100644
index 0000000..be68c6c
--- /dev/null
+++ b/_posts/2024-10-31-roots2.markdown
@@ -0,0 +1,12 @@
+---
+layout: page
+icon: "/assets/roots.png"
+title: "I Need To Grow Away From These Roots"
+---
+## I Need To Grow Away From These Roots
+Ambient music generation inspired by the audio component of David Whiting's artistic piece, [I Need To
+Grow Away From These Roots](https://www.vitling.xyz/i-need-to-grow-away-from-these-roots/).
+All credit to the original artist.
+
+### Code
+All code can be found on my Github [here](https://github.com/TimothyFDavison/I-Need-To-Grow-Away-From-These-Roots).
diff --git a/_sass/homepage.scss b/_sass/homepage.scss
new file mode 100644
index 0000000..cecabd3
--- /dev/null
+++ b/_sass/homepage.scss
@@ -0,0 +1,20 @@
+// Setting homepage layout variables.
+.homepage-banner {
+ text-align: center;
+ margin: 50px auto;
+ max-width: 700px;
+}
+
+.homepage-banner h1 {
+ font-size: 2.5em;
+ font-weight: bold;
+ margin-bottom: 10px;
+ line-height: 1.2;
+ color: #333; /* Change color if you prefer */
+}
+
+.homepage-banner p {
+ font-size: 1.2em;
+ color: #666;
+ margin-bottom: 20px;
+}
diff --git a/_sass/icons.scss b/_sass/icons.scss
new file mode 100644
index 0000000..783238a
--- /dev/null
+++ b/_sass/icons.scss
@@ -0,0 +1,61 @@
+// Posts grid
+.post-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between; /* Adjusts spacing between boxes */
+ margin: 0 -10px;
+}
+
+.post-box {
+ position: relative;
+ flex: 0 1 calc(50% - 20px); /* 3 boxes per row with spacing */
+ margin: 10px; /* Space between boxes */
+ box-sizing: border-box;
+ overflow: hidden;
+ text-align: center;
+ font-size: .4em;
+ transition: transform 0.2s;
+}
+
+@media (max-width: 768px) {
+ .post-box {
+ flex: 0 1 calc(100% - 20px); /* 2 boxes per row on smaller screens */
+ }
+}
+
+@media (max-width: 480px) {
+ .post-box {
+ flex: 0 1 100%; /* 1 box per row on mobile */
+ }
+}
+
+
+// Hover, icons, title
+.post-box:hover {
+ transform: scale(1.05);
+}
+
+.post-icon img {
+ width: 100%; /* Make icon take up the entire container */
+ height: 100%;
+ object-fit: cover; /* Ensure the image fits within the box */
+ border-radius: 8px; /* Optional: round corners */
+}
+
+.post-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
+ color: #fff;
+ font-size: 0.4em;
+ padding: 5px;
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.post-box:hover .post-title {
+ opacity: 1;
+}
diff --git a/_sass/style.scss b/_sass/style.scss
new file mode 100644
index 0000000..783ab21
--- /dev/null
+++ b/_sass/style.scss
@@ -0,0 +1,42 @@
+// Define defaults for each variable.
+$base-font-family: Bitter, "Apple SD Gothic Neo", "Noto Sans", "Source Han Sans", "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans CJK KR", "Source Han Sans KR", NanumBarunGothic, AppleGothic, "Malgun Gothic", Dotum, sans-serif !default;
+$monospace-font-family: Monaco, Menlo, Consolas, "Courier New", DotumChe, monospace !default;
+$base-font-size: 16px !default;
+$base-font-weight: 400 !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit: 30px !default;
+
+$text-color: #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color: #2568ba !default;
+
+$grey-color: #757575 !default;
+$grey-color-light: adjust-color($grey-color, $lightness: 45%) !default;
+$grey-color-dark: adjust-color($grey-color, $lightness: -20%) !default;
+
+// Width of the content area
+$content-width: 800px !default;
+$on-palm: 600px !default;
+$on-laptop: 800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+// .wrapper {
+// padding-right: $spacing-unit * 0.5;
+// padding-left: $spacing-unit * 0.5;
+// }
+// }
+@mixin media-query($device) {
+ @media screen and (max-width: $device) {
+ @content;
+ }
+}
+
+// Import partials.
+@import
+ "whiteglass/base",
+ "whiteglass/layout",
+ "whiteglass/syntax-highlighting"
+;
diff --git a/assets/roots.png b/assets/roots.png
new file mode 100644
index 0000000..b2df3ee
Binary files /dev/null and b/assets/roots.png differ
diff --git a/assets/tim.jpg b/assets/tim.jpg
new file mode 100644
index 0000000..406b95c
Binary files /dev/null and b/assets/tim.jpg differ
diff --git a/main.scss b/main.scss
new file mode 100644
index 0000000..434a064
--- /dev/null
+++ b/main.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "_sass/style";
+@import "_sass/homepage";
+@import "_sass/icons";