publish.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

@font-face {
	font-family: 'bogart';
	src: url('https://chad-bennett.github.io/links/bogart-semibold.woff2') format('woff2'),
	     url('https://chad-bennett.github.io/links/bogart-semibold.woff') format('woff'),
	     url('https://chad-bennett.github.io/links/bogart-semibold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* set fonts to default system fonts */
:root {
  --font-family-editor: 'DM Sans', inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --font-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --font-title: bogart, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Microsoft YaHei Light", serif;
  --text-highlight-bg: #ccdba4 !important;
  --shadow: 1px 1px 3px #88888888;
  --color-dark: #3E3831 !important;
  --text-normal: #3E3831 !important;
}

* {
  color: #3E3831 !important;
}

/*reset body*/
body {
  background-image: none;
  background: #f5f5f0;
  background: radial-gradient(circle at 47.11% 21.33%, #f5f5f0, transparent 100%),radial-gradient(circle at 14.09% 42.51%, #ffffff, transparent 100%),radial-gradient(circle at 79.38% 44.78%, #f5f5f3, transparent 100%),radial-gradient(circle at 50% 50%, #edebe1, #edebe1 100%);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

.published-container.has-navigation .nav-backdrop {
  background: #f5f5f0;
}

/* font and line spacing */
.markdown-preview-view {
  font-size: 1rem;
  line-height: 1.8 !important;
  letter-spacing: 0rem;
  padding: 0px 40px 20px 40px;
}

.markdown-preview-view h1 {
  font-size: 40px;
  line-height: 2.2rem;
}

.markdown-preview-view h2 {
  font-size: 32px;
  line-height: 2rem;
  text-transform: lowercase;
}

.markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3, .markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6 {
  margin-bottom: 1rem; 
  margin-top: 1rem;
}

.markdown-preview-view p, .markdown-preview-view ul, .markdown-preview-view ol {
  margin-bottom: 1.8rem; 
}


/* lock width of overall layout*/
.site-body {
  margin: auto;
  width:90vw;
  max-width: 1500px;
}

/* more space between page title and content */
.page-header {
  margin-bottom: 1rem;
  display: none;
}

/* left column */
.site-body-left-column {
  background-color: transparent;
  border-right: none;
  max-height: 94%;
  font-size: .8rem;
}

.site-body-left-column::before {
  background-color: transparent;
}

/* add image above left column */
.site-body-left-column-site-name::before {
  background: none;
  display: block;
  content: url(https://chad-bennett.github.io/links/meCircle.png);
  width: 100%;
}

/* paddding on left-side list */
.nav-view-outer {
  padding-right: 1rem;
}

/* middle column */
.site-body-center-column {
  padding: 1.5rem 0;
}

/* right column */
.site-body-right-column {
  margin: 0 20px;
  width: 250px;
  flex: 0 0 250px;
  font-size: .8rem;
}

/* fade side columns until hover */
.site-body-left-column, 
.site-body-right-column {
  opacity: .3;
  transition: opacity .7s;
}

.site-body-left-column:hover, 
.site-body-right-column:hover,
.site-body-left-column:active, 
.site-body-right-column:active {
  opacity: 1;
}

/* bolder site title */
.site-body-left-column-site-name {
  font-weight: 700;
  text-align: center;
  font-family: var(--font-title);
}

.site-header {
  border-bottom: 1px solid var(--color-off);
  font-weight: 700;
  font-family: var(--font-title);
}

/* subheaders */
.published-section-header {
  text-transform: lowercase;
  font-size: 1.4em;
  font-family: var(--font-title);
  color: var(--text-normal);
}

/* search bar tweak */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
  background: #e9e9e4 !important;
}

/* add line separator to backlinks */
.published-container .backlinks {
  border-radius: 0.5rem;
  padding: 20px;
  border-top: 0px solid transparent;
  background-image: none;
  background-color: #e9e9e4;
  box-shadow: inset 1px 1px 3px #88888888;
  border-right: 0.5px solid #88888888
  border-bottom: 0.5px solid #88888888;
}

/* outgoing link arrow */
.external-link::after {
  font-size: 0.9rem;
  color: #888888;
}

/* links on tags pop-up*/
.internal-link {
  color: var(--color-blue) !important;
  text-decoration: none;
}

.internal-link:hover {
  text-decoration: underline;
}

/* fix bullets */
.markdown-preview-view ul {
  list-style-type: none;
}

.markdown-preview-view ul li::before {
  content: "\2022";
  color: var(--color-accent);
  margin-right: 0.3rem;
}

/* hover and active links in menus */
.outline-view-outer .collapsible-item-self.mod-active,
.outline-view-outer .collapsible-item-self:hover,
.nav-view-outer .collapsible-item-self.mod-active,
.nav-view-outer .collapsible-item-self:hover {
  background-color: transparent;
  text-decoration: underline;
  color: var(--color-accent) !important;
  font-weight: 700;
  transition: .5s background-color;
}

/* menu active and hover */
.outline-view-outer .tree-item-self, .tree-item-self.is-clickable {
  background-color: transparent;
  transition: .5s background-color !important;
}

.outline-view-outer .tree-item-self.mod-active,
.nav-view-outer .tree-item-self.mod-active {
  background-color: var(--color-gray-lightest);
  box-shadow: var(--shadow);
  border-right: 0.5px solid #88888888;
  border-bottom: 0.5px solid #88888888;
  width: 99%;
}

.outline-view-outer .tree-item-self:hover,
.tree-item-self.is-clickable:hover {
  background-color: var(--color-gray-lightest-fade);
  width: 99%;
}

.nav-view-outer .tree-item {
  line-height: 1rem;
}

/* remove internal link brackets */
.internal-link::before,
.internal-link::after {
  display: none;
}

/*link styling*/
.markdown-preview-view .internal-link,
.markdown-preview-view a {
  color: var(--color-accent) !important;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  transition: border-bottom .5s;
}

.markdown-preview-view a:hover {
  color: var(--color-blue) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--color-blue);
}

/* blockquote background color */
.markdown-preview-view blockquote {
  background: var(--color-gray-lightest-fade);
}

/* change highlight when selecting an item in the outline - doesn't work yet */
.obsidian-search-match-highlight {
  background: var(--color-green-lightest) !important;
}

/* fix higlight color */
.markdown-preview-view mark {
  background-color: var(--color-green-lightest);
}

/* browser highlight color - doesn't work yet */
::selection {
  background: var(--color-purple-lightest) !important;
}

/* tags */
.markdown-preview-view .tag,
a.tag {
  background-color: var(--color-green-lightest) !important;
  color: var(--color-dark) !important;
  border-radius: 5px;
  border: 0px solid transparent;
  transition: none;
  border-right: 0.5px solid transparent;
  border-bottom: 0.5px solid transparent;
}

.markdown-preview-view .tag:hover,
a.tag:hover {
  background-color: var(--color-green-light) !important;
  color: var(--color-light) !important;
  box-shadow: var(--shadow);
  transform: none;
  text-decoration: none;
}

/* search bar */
.search-view-container .search-bar {
  box-shadow: inset 1px 1px 3px #88888888;
  border-right: 0.5px solid #88888888;
  border-bottom: 0.5px solid #88888888;
}

/* navigation slider on small screens */
@media screen and (max-width: 750px) {
  .published-container.has-navigation .nav-backdrop {
    background-color: var(--color-light);
  }
}

/*interactive graph styling */
.graph-view-container {
  border: 0px solid transparent;
  background-color: #e9e9e4;
  box-shadow: inset 1px 1px 3px #88888888;
  border-right: 0.5px solid #88888888;
  border-bottom: 0.5px solid #88888888;
}

/* svg tweaks */
svg {
  font-family: var(--font-family-editor);
}

/* utility classes */
.right {
  float: right;
  width: 35%;
  max-width: 35%;
  margin-left: .5rem;
  margin-bottom: .5rem;
}

.left {
  float: left;
  width: 35%;
  max-width: 35%;
  margin-right: .5rem;
  margin-bottom: .5rem;
}

.hideSmall {
  display: block;
}

@media screen and (max-width: 500px) {
  .right,
  .left {
    float: none;
    clear: both;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hideSmall {
    display: none;
  }
}

/*graph view styling - does this work?*/

/*for tag color*/
.theme-light .graph-view.color-fill-tag {
  color: #886b97 !important;
}

/*for file attachment color*/
.theme-light .graph-view.color-fill-attachment {
  color: #17a2b8 !important;
}

/*for unresolved (not made but linked)notes*/
.graph-view.color-fill-unresolved {
  color: #8bd1dc60 !important;
  opacity: 1;
}

/*for color of arrow if you enable it in graph settings*/
.graph-view.color-arrow {
  color: #d669bc !important;
}

/*for the color of node*/
.graph-view.color-fill {
  color: #92a85b !important;
}

/*for the color of the strings attaching nodes together*/
.graph-view.color-line {
  color: #b6b5af !important;
}

/*for text on the nodes ( name of notes )*/
.graph-view.color-text {
  color: #696966 !important;
}

/*the node color but when you hover on the node*/
.graph-view.color-fill-highlight {
  color: #117a8b !important;
}

/*the line color which join the notes but when you hover on the node*/
.graph-view.color-line-highlight {
  color: #000000 !important;
}

/* responsive iframe */
.iframeDiv {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border-right: 0.5px solid #88888888;
  border-bottom: 0.5px solid #88888888;
}

/* tooltips */
.tooltip, .mod-top {
  color: #f5f5f0 !important;
}

.site-footer {
  margin-top: 0.5rem;
}

.site-footer a:hover {
  color: var(--color-blue) !important;
}

/* flash of background when choosing an element in the TOC */

.is-flashing {
  background: var(--color-purple-lightest);
}


/* image grid */
/* grid setup for mobile-first design */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
  width: 95%;
  max-width: 80em;
  margin: 2rem auto;
}
.grid figure,
.grid img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
}
.grid img {
  object-fit: cover;
  transition: transform .25s;
  border-radius: .3rem;
}
.grid img:hover {
  transform: scale(1.1);
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.grid figcaption {
  text-align: center;
  font-weight: 300;
  color: var(--black-color);
  padding-bottom: 1rem;
  font-style: italic;
}
/* column layout for larger screens */
@media screen and (min-width: 30em) {
  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .grid .col-full {
    grid-column: 1 /7;
  }
  .grid .col-double-left {
    grid-column: 1 / 5;
  }
  .grid .col-double-right {
    grid-column: 3 / 7;
  }
  .grid .col-half-left {
    grid-column: 1 /4;
  }
  .grid .col-half-right {
    grid-column: 4 / 7;
  }

  .grid  .col-single-left {
    grid-column: 1 / 3;
  }

  .grid .col-single-mid {
    grid-column: 3 / 5;
  }
  .grid  .col-single-right {
    grid-column: 5 / 7;
  }
}