Initial commit

assets/css/dfi_style.css

@@ -0,0 +1,227 @@
+/* TOCBOT styling */
+.gh-content {
+  position: relative;
+}
+
+.gh-content a,
+.gh-toc .is-active-link::before {
+  text-decoration: none;
+}
+
+.gh-toc > .toc-list {
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+}
+
+.gh-toc .is-active-link::before {
+  background-color: var(
+    --dfi-accent-color
+  ); /* Defines TOC accent color based on Accent color set in Ghost Admin */
+}
+
+.menu-button,
+.close-button {
+  display: none;
+}
+
+.gh-toc li {
+  color: #848484;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 146.667% */
+}
+
+.toc-list {
+  font-size: 1.1em;
+}
+
+.close-button {
+  position: absolute;
+  z-index: 1005;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  font-size: 24px; /* Make the "X" larger */
+  margin-right: 10px;
+  color: black;
+  display: none; /*Intially hidden*/
+}
+
+.close-button.visible {
+  display: block; /* Display when visible class is added */
+}
+
+/* Media Queries */
+@media (min-width: 1300px) {
+  .gh-sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin-top: 4vmin;
+    margin-right: 20px;
+    font-size: 0.8em;
+    grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
+    color: gray;
+  }
+
+  .gh-toc {
+    position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
+    top: 4vmin;
+    text-align: left;
+  }
+
+  .gh-article {
+    --container-width: 1300px;
+  }
+}
+
+@media (max-width: 1299px) {
+  .gh-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    overflow-y: auto;
+    transition: 0.2s;
+    z-index: 1002;
+    background-color: rgb(207, 207, 207);
+    padding: 20px;
+    display: none;
+    margin-right: 20px;
+    font-size: 0.8em;
+    margin-top: 0px;
+  }
+
+  .gh-sidebar.active {
+    width: 250px;
+    box-shadow: 10px 0 5px -5px #eee;
+    display: block;
+    width: 326px;
+    background: white;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
+
+  .menu-button {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    display: block;
+    z-index: 1001; /* High z-index to make sure it's above other elements */
+    width: 131.54px;
+    height: 45px;
+    background: #de5757;
+    border-radius: 10px;
+    border-color: white;
+    box-shadow: 0;
+    color: var(--White, #fff);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 27px; /* 168.75% */
+  }
+}
+
+/* FOOTNOTE STYLING */
+.lf-sup {
+  /* Add styles if needed */
+}
+
+.lf-anchor {
+  color: #de5757;
+  font-weight: 600;
+}
+
+.lf-aside {
+  border-color: #abd9ce;
+  border-shadow: none;
+}
+
+.lf-content {
+  background: #e7f7f3;
+  border-radius: 5px;
+  padding: 15px;
+  color: #000;
+  font-family: Raleway, sans-serif;
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.3em;
+}
+
+/* DFI Homepage Grid Styles */
+
+.dfi-home-grid {
+  /* width: 700px; */
+  margin: 0 auto;
+}
+
+.dfi-post-collection {
+  margin-top: 30px;
+}
+
+.dfi-overview-article-content {
+  flex: 1;
+}
+
+.dfi-overview-article-image {
+  flex: 1;
+}
+
+.gh-container-title {
+  display: block;
+  color: #de5757;
+  font-size: 14px;
+}
+
+.gh-feed {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+}
+
+.dfi-secondary-article {
+  height: 100px;
+  flex: 1;
+}
+
+/* Responsive images */
+.dfi-overview-article-image img {
+  width: 100%;
+  height: auto;
+  display: block; /* ensures that the image is a block-level element and takes the full width */
+}
+
+figure.dfi-overview-article-image {
+  margin-right: 20px;
+}
+
+.dfi-secondary-article-image {
+  flex: 1;
+  padding-right: 20px;
+  height: 100px;
+  background-size: cover;
+}
+
+.dfi-secondary-article-content {
+  flex: 3;
+  padding-left: 20px;
+}
+
+/* Ensure text content is aligned correctly */
+.dfi-overview-article-content {
+  padding-right: 20px; /* Adjust as necessary */
+  flex: 1;
+}
+
+.dfi-overiew-article {
+  flex: 1; /* takes 2/3 of the space */
+  display: flex; /* new line: make left-article a flex container */
+  flex-direction: row; /* new line: lay out children in a row */
+}
+
+.posts-collection {
+  margin-bottom: 50px;
+}