sass/_variables.scss

/*
 * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT)
 * which was forked from new.css (MIT)
 * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT)
 * Supplemented code from Basic.css: https://github.com/vladocar/Basic.css (MIT)
 * Supplemented code from AttriCSS: https://github.com/raj457036/attriCSS (MIT)
 * Feather Icons: https://github.com/feathericons/feather (MIT)
 * Tabler Icons: https://github.com/tabler/tabler-icons/find/master (MIT)
 *
 * Bamboo, New, Pico: based on Normalize.css & Sanitize.css
 *  Normalize: https://github.com/necolas/normalize.css (MIT)
 *  Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal)
 */

// Config
// ––––––––––––––––––––

// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: true !default;

// Enable responsive typography
// Fixed root element size if disabled
$enable-responsive-typography: true !default;

// Enable responsive spacings for <header>, <main>, <footer>, <section>
// Fixed spacings if disabled
$enable-responsive-spacings: false !default;

// Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Fluid layout until it reaches a defined size, then becomes a centered viewport
$enable-maxwidth: true !default;
$mw:60% !default;// max-width
$mb:1200px !default;// value at which to switch from fluid layout to using max-width

// Enable a centered viewport for <header>, <main>, <footer> inside <body>
// This option will only work if $enable-maxwidth: false
$enable-viewport: false !default;

// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)

// Breakpoints
$breakpoints: (
  // 'null' disable the breakpoint
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

// Viewports
$viewports: (
  // 'null' disable the viewport on a breakpoint
  sm: 510px,
  md: 700px,
  lg: 920px,
  xl: 1130px
) !default;

// Enable svg css icons
$enable-icons: true !default; // setting this to false disables ALL icons, to use icons set to true.
$ic: true !default; // icon color - set to true for colorized icons, otherwise a neutral gray #888 is used.
// to use icons set enable-icons:true above and also enable individual icons that you need below.  https://deepthought-theme.netlify.app/
$icon-rss: true !default;
$icon-mail: true !default;// email mail envelope
$icon-mastodon: true !default;
$icon-element: true !default;
$icon-matrix: false !default;
$icon-buymeacoffee: true !default;
$icon-twitter: true !default;
$icon-facebook: true !default;
$icon-linkedin: true !default;
$icon-codeberg: true !default;
$icon-gitlab: true !default;
$icon-github: true !default;
$icon-github-sponsor: true !default;
$icon-bitbucket: true !default;
$icon-python: true !default;
$icon-docker: true !default;
$icon-stack: true !default;
$icon-instagram: true !default;
$icon-pinterest: true !default;
$icon-discord: true !default;
$icon-twitch: true !default;
$icon-youtube: true !default;
$icon-researchgate: true !default;

$icon-x: true !default;// x symbol
$icon-search: true !default;//search
$icon-adjust: true !default;//theme switcher
$icon-angll: true !default;//first page
$icon-angl: true !default;//previous page
$icon-angr: true !default;//next page
$icon-angrr: true !default;//last page
$icon-angu: true !default;//back to top

$icon-ffolder: false !default;
$icon-folder: false !default;// categories folder
$icon-ftag: false !default;
$icon-tag: false !default;// tag
$icon-check: false !default;// check mark
$icon-chevron: false !default;// chevron down
$icon-clock: false !default;// time analog clock
$icon-date: false !default;// calendar
$icon-globe: false !default;
$icon-home: false !default;
$icon-minus: false !default;// minus symbol
$icon-moon: false !default;// dark moon
$icon-sun: false !default;// light sun
// add an icon link to an html template like this:  <a href="#"><span class="svg home"></span></a>

:root {
  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
  --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;

  // Spacings
  --s1: .5rem;
  --s2: 1rem;
  --rc: .5rem; //radius corners

  // Borders
  --br: 0.25rem; //border radius
  --bw: 0.0625rem; //border width
  --ow: 0.1875rem; //outline width

  --fs: 1rem; //font-size
  --lh: 1.5; //line-height
  --lhh: 1.2; //line-height headers
  --fw: 400; //font-weight
  --fh: 700; //font-weight h1-h6

  // Responsive typography
  @if $enable-responsive-typography {
    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        --fs: 1rem;
      }
    }
    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        --fs: 1.04rem;
      }
    }
    @if map-get($breakpoints, "lg") {
      @media (min-width: map-get($breakpoints, "lg")) {
        --fs: 1.08rem;
      }
    }
    @if map-get($breakpoints, "xl") {
      @media (min-width: map-get($breakpoints, "xl")) {
        --fs: 1.12rem;
      }
    }
  }

  // Responsives spacings
  @if $enable-responsive-spacings {
    // Sectionning
    header, main, footer,
    section {
      @if map-get($breakpoints, "sm") {
        @media (min-width: map-get($breakpoints, "sm")) {
          --s1: .5rem;
        }
      }
      @if map-get($breakpoints, "md") {
        @media (min-width: map-get($breakpoints, "md")) {
          --s1: .6rem;
        }
      }
      @if map-get($breakpoints, "lg") {
        @media (min-width: map-get($breakpoints, "lg")) {
          --s1: .7rem;
        }
      }
      @if map-get($breakpoints, "xl") {
        @media (min-width: map-get($breakpoints, "xl")) {
          --s1: .8rem;
        }
      }
    }
  }
}