diff --git a/src/components/icons/LinkOutIcon.tsx b/src/components/icons/LinkOutIcon.tsx
new file mode 100644
index 0000000..9d0a6cb
--- /dev/null
+++ b/src/components/icons/LinkOutIcon.tsx
@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+
+export function LinkOutIcon({
+ width = 24,
+ height = 24,
+}: {
+ width?: CSSProperties['width'];
+ height?: CSSProperties['height'];
+}) {
+ return (
+
+ );
+}
diff --git a/src/components/styles/navigation.css b/src/components/styles/navigation.css
index d096633..e2c2006 100644
--- a/src/components/styles/navigation.css
+++ b/src/components/styles/navigation.css
@@ -1,10 +1,5 @@
.nav-container {
- display: flex;
- align-items: center;
height: 4em;
- background-color: #dee2e6;
- padding: 2px 10px;
- justify-content: space-between;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
border-bottom: 1px solid #c4c8cb;
}
diff --git a/src/configs/home_content.md b/src/configs/home_content.md
deleted file mode 100644
index 0996be0..0000000
--- a/src/configs/home_content.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## Welcome to the Light Curve Viewer
-
-This tool lets you explore light curves interactively. Additionally, users can view and access the underlying data. [Read the documentation](https://github.com/simonsobs/lightview#readme) to learn more.
-
-If you have questions, please [contact us](mailto:TEMP_DEAD_LINK).
-
----
diff --git a/src/index.css b/src/index.css
index 40c6195..a344001 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,7 @@
html,
body {
+ min-height: 100%;
margin: 0;
padding: 0;
background-color: rgb(248, 249, 250);
@@ -19,6 +20,7 @@ body {
#root {
display: flex;
flex-direction: column;
+ min-height: 100vh;
}
main {
@@ -43,11 +45,24 @@ main {
height: 375px;
}
+.home-light-curve {
+ position: relative;
+}
+
+.home-source-link-container {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: flex-end;
+ margin-right: 10px;
+}
+
.home-source-link,
.home-source-link:visited {
- position: relative;
- bottom: 50px;
- left: 10px;
+ margin-right: 10px;
+ margin-bottom: 10px;
color: white;
background-color: #212529de;
padding: 5px 10px;
@@ -55,6 +70,14 @@ main {
border: 1px solid #c0c1c1;
font-size: 0.8em;
border-radius: 5px;
+ display: 'flex';
+ align-items: center;
+}
+
+.home-source-link > span {
+ display: flex;
+ align-items: center;
+ gap: 5px;
}
@media (width > 1440px) {
@@ -74,3 +97,24 @@ main {
.sources-plot-placeholder {
height: 450px;
}
+
+.nav-container,
+footer {
+ display: flex;
+ align-items: center;
+ background-color: #dee2e6;
+ padding: 2px 10px;
+ justify-content: space-between;
+}
+
+footer {
+ box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.075);
+ border-top: 1px solid #c4c8cb;
+ height: 2em;
+ margin-top: auto;
+}
+
+.home-page-header {
+ margin-top: 0;
+ font-size: 1.1em;
+}