styles.scss

/*-- scss:defaults --*/

// Import Google Fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

// Create font variables
$spacegrotesk: "Space Grotesk", sans-serif;

// Colors
$color1: #000000;
$color2: #FFFFFF;
$color3: #8ffcff;
$color4: #000000;
$color5: #00f9ff;

// Quarto Sass Variables
$navbar-bg: $color1;
$navbar-fg: $color2;
$navbar-hl: $color3;
$body-bg: $color1;
$body-color: $color1;
$footer-bg: $color5;
$footer-fg: $color4;
$code-block-bg: $color2;

/*-- scss:rules --*/

h1, h2, h3, h4, h5, h6 {
  font-family: $spacegrotesk;
}

h1.page-title {
  display: none;
}

h1, h2 {
  letter-spacing: 5px;
  font_weight: 800;
}

.title {
  color:$color3;
}


.center-text {
  text-align: center;
}


.orange-text {
  text-align: center;
  color: $color5;
  font-size: 2rem;
  font-weight: bold
}

.body-text {
  font-size: 1.2rem; /* Increases the font size slightly */
  line-height: 1.8;  /* Improves line spacing for readability */
  margin: 20px 0;    /* Adds vertical spacing around the block */
  color: $color2;    /* Optional: Ensures the text color is readable */
  text-align: justify; /* Optional: Justifies the text for a clean look */
}

.navbar-brand img {
  max-height: 40px;
  width: auto;
}

nav {
  font-size: 1.2rem; /* Adjust font size of navbar text */
  height: 90px;      /* Change navbar height */
}

nav a {
  font-size: 1.2rem; /* Customize size of links in navbar */
  padding: 10px 20px; /* Add spacing around navbar items */
}

nav .navbar-title {
  font-size: 4.2rem;    /* Change size of the navbar title */
  font-weight: bold;  /* Adjust font weight */
  margin-bottom: 150px;
}


body {
  color: $color2; /* Use the white color variable you've defined */
  background-color: $color1; /* Ensure the background remains dark */
}


.posts {
  padding-top: 100px; /* Adds space before the post listing */
}

a {
  color: #00f9ff;
}

a i {
  color: $color5; /* Default icon color (use your desired color variable) */
  transition: color 0.3s ease; /* Adds a smooth color transition on hover */
}

a:hover i {
  color: #8ffcff; /* Hover color for the icons */
}

a:hover {
  color: #8ffcff; /* Hover color for the icons */
}

/* Dropdown menu background and text color */
.navbar .dropdown-menu {
  background-color: $color1; /* Match the black background */
  color: $color2;            /* Make the text white */
}

/* Ensure dropdown links are white when menu is active */
.navbar .dropdown-menu a {
  color: $color2; /* White text for links */
}

/* Add a hover effect for dropdown links */
.navbar .dropdown-menu a:hover {
  color: #8ffcff; /* Optional: lighter shade on hover */
}

/* Active or focused menu items styled */
.navbar .dropdown-menu a:focus,
.navbar .dropdown-menu a:active {
  color: $color2; /* White text for active/focused links */
  background-color: transparent; /* Optional: no background color on active */
}

pre code {
  color: #00f9ff;
}



/* ===============================
   Quarto Portfolio Pages: Full-width/centered grid with header spacing
   =============================== */

/* 1. Hide the listing taxonomy panel */
.quarto-listing-category-title,
.quarto-listing-category-title + ul,
.quarto-listing-category-title + .quarto-listing-category,
.quarto-listing-category-title ~ * {
  display: none !important;
}

/* 2. Collapse the sidebar wrapper */
#quarto-margin-sidebar {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* 3. Reset the page layout to single column */
#quarto-content {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* 4. Center the main content with spacing from header */
#quarto-document-content {
  max-width: 1200px;      /* adjust width as needed */
  margin: 2rem auto 0 auto; /* space above the main content */
  padding: 2rem 1rem 0 1rem; /* top padding for extra spacing */
  width: 100% !important;
}

/* 5. Add spacing between the page title and the posts grid */
h1#page-title {
  margin-bottom: 2rem; /* space between header and listing grid */
}

/* 6. Style the listing grid for responsive columns */
.quarto-listing-container-grid .list.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: 2rem; /* spacing between cards */
  justify-items: stretch !important;
}

/* 7. Ensure each card fills its grid column */
.quarto-grid-item {
  width: 100% !important;
}


.quarto-grid-item:hover .card-title {
  color: #8ffcff !important;
}

/* Code block background */
pre {
  background-color: #000000 !important;
}

/* Code inside blocks */
pre code {
  background-color: transparent !important;
  color: #00f9ff;
}

/* Inline code (within sentences) */
code:not(pre code) {
  background-color: #111111;
  color: #8ffcff;
}


/* Force inline code styling for dark backgrounds */
p code:not(.sourceCode),
li code:not(.sourceCode),
td code:not(.sourceCode),
dd code:not(.sourceCode) {
  background-color: #111 !important;
  color: #8ffcff;
  padding: 0.2em 0.35em;
  border-radius: 4px;
}


/* Code block background (R + Python chunks) */
pre,
pre code,
div.sourceCode {
  background-color: #1c1c1c !important;  // dark gray
  color: #eaeaea;
  border-radius: 8px;
}