---
---

//Typography
$body-font: 'Helvetica', sans-serif
$code-font: monospace

//Colour Palette
$sunc-yellow: #FEE04E
$light-blue: #55ACEE
$hungry-mind-blue: #268BD2

$primary-color: #000000
$secondary-color: #FEE04E

//Screen size for responsiveness
$small-screen: 320px
$mid-screen: 768px
$large-screen: 1024px

@import '1-tools/-tools-dir'
@import '2-base/-base-dir'
@import '3-sections/-sections-dir'

/* This is an example style sheet that comes default - just delete everything after this comment this to start from a blank slate */

html
  height: 100%

body
  height: 100%
  min-height: 100%

// Light (default)
.site-container
  --bg-color: white
  --text-color: black
  --link-color: #0000f0
  --link-visited-color: #551b8c
  --code-bg-color: #f5f5f5
  --log-bg-color: #f0f0f0
  --log-color: #808080
  --target-color: #dddddd
  --meeting-index-color: #606060
  --icon-color: black

// Dark mode using media query
@media (prefers-color-scheme: dark)
  html, body
    background-color: #1D1E20

  .site-container
    --bg-color: #1D1E20
    --text-color: #C4C4C5
    --link-color: #58a6ff
    --link-visited-color: #824bb7
    --code-bg-color: #37383E
    --log-bg-color: #37383E
    --log-color: #080808
    --target-color: #3a3939
    --meeting-index-color: #8c5e5e
    --icon-color: white

a
  color: var(--link-color)

a
  &:visited
    color: var(--link-visited-color)

a
  &:hover
    color: $secondary-color

.site-container
  margin: 0
  padding: 1rem 2rem 0 2rem
  background-color: var(--bg-color)
  color: var(--text-color)
  min-height: 100%
  overflow: auto

.page-content
  max-width: 1200px
  margin: 0 auto

.logo
  text-decoration: none
  color: var(--text-color)
  font:
    size: 48px
  a
    color: var(--text-color)

.dt-published
  color: #828282
  font-size: 0.95em

.host
  color: #828282
  font-size: 0.95em

.author
  color: #828282
  font-size: 0.95em

\:target
  background: var(--target-color)

.question
  font-size: 1.2em
  font-weight: bold

.meetings-index-section
  margin-top: 0.4em
  margin-bottom: 0.4em
  color: var(--meeting-index-color)

.Home-posts-post-date
  min-width: 94px
  vertical-align: text-top

.Home-posts-post-arrow
  padding-right: 4px
  vertical-align: text-top

.Home-posts-post-pr
  font-weight: bold

.padded
  padding: 1rem 1rem 0 0

.log-line
  margin-block-start: 0px
  margin-block-end: 0px
  font-family: monospace
  border-spacing: 0px

.log-row
  vertical-align: top

.log-lineno
  background-color: var(--log-bg-color)
  \:target
    background-color: var(--target-color)
  a
    color: (--log-color)
    text-decoration: none
    user-select: none

.log-time
  color: var(--link-color)
  padding-left: 6px
  padding-right: 6px

.log-nick
  font-weight: bold
  color: green

.log-msg
  padding-left: 0px
  white-space: pre-wrap

.social-media-links
  font-size: 50%
  display: flex
  align-items: flex-end

.fa
  color: var(--icon-color)
