<commit_before>@import 'z52-colours';

$font: 16px "Maven Pro", sans-serif;

::selection {
  background: transparentize($pyro, 0.2);
  color: $white;
}

body {
  position: relative;
  padding-top: 3.5rem;
  background-color: $carbon9;
  color: $carbon1;
  font: $font;
}

h1,
h2,
h3,
h4,
.offset-anchor {
  &::before {
    display: block;
    height: 3.5rem;
    margin-top: -3.5rem;
    visibility: hidden;
    content: ' ';
  }
}

//== Responsive Layout
@media (min-width: 100rem) {
  .container { max-width: 95rem; }
}

//== Header navbar
header .navbar {
  padding: 0;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  color: $white;
  @media (min-width: 34em) {
    background-color: transparent;
    text-align: center;
  }
}

.navbar-brand,
.navbar-nav,
.navbar-nav .nav-item {
  float: none;
  display: inline-block;
  vertical-align: top;
}

.navbar-brand,
.navbar-nav {
  @media (max-width: 34em) {
    margin: 0 0.5rem 0.25rem;
  }
}

.c-navbar {
  @media (min-width: 34em) {
    min-height: 3rem;
    padding: 0.5rem;
    text-align: center;
  }
}

.navbar-toggler {
  clear: both;
  padding: 0.5rem;
}


//== Code elements

pre {
  padding: 1rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: $carbon8;
  counter-reset: line;
}

.c-code-block > code {
  > span { counter-increment: line; }

  > span::before {
    margin: -1.125em;
    margin-right: 0.875em;
    padding: 0.175em 1.125em;
    padding-right: 0.875em;
    background-color: $carbon7;
    content: counter(line);
  }

  > span:first-child::before { padding-top: 1.25em; }
  > span:last-child::before  { padding-bottom: 1.25em; }
}

.c-cmd-block::before {
  margin: -1.125em;
  margin-right: 0.875em;
  padding: 1.25em 1.125em;
  padding-right: 0.875em;
  background-color: $carbon7;
  content: '$';
}



//== Form elements

fieldset { margin-bottom: 0.5rem; }
select[multiple].form-control { padding: 0; }
option { padding: 0.375rem 0.75rem; }

::-webkit-file-upload-button {
  display: inline-block;
  border: 0.0625rem solid;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  color: $white;
  font: $font;
  line-height: 1.5;
  cursor: pointer;
}

// PyroCarbon: colouring
// --------------------------------------------------
header .navbar { background-color: $pyro; }

@media (min-width: 34em) {
  header .navbar {
    background-image: linear-gradient(0, transparentize($pyro, 0.1), $pyro);
  }
}

mark { background-color: $pyro9; }

code {
  background-color: $carbon8;
  color: $pyro;
}

kbd { color: $kbd; }

a {
  &,
  &:hover { color: $pyro; }

  &:active,
  &:focus { color: $pyro3; }

  &.link {
    color: inherit;
    border-bottom: 0.0625rem solid $pyro;

    &:hover,
    &:active,
    &:focus {
      color: $black;
      text-decoration: none;
      border-bottom-width: 0.125rem;
    }
  }
}

.form-control {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  &:focus { border-color: $pyro5; }
}

option:focus,
option:checked { color: $pyro; }

.btn-primary,
::-webkit-file-upload-button {
  border-color: $pyro3;
  background-color: $pyro;

  &:hover,
  &:active,
  &:focus {
    border-color: $pyro2;
    background-color: $pyro3;
  }

  &:active { box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.1); }
}

// PyroCarbon: other styling
// --------------------------------------------------


// Side navbar
// --------------------------------------------------
.c-sidebar {
  padding: 0;

  .navbar {
    line-height: 1.5;

    @media (min-width:  62em) { width: 14.5rem; }
    @media (min-width:  75em) { width: 17.5rem; }
    @media (min-width: 100em) { width: 23rem; }

    &.sticky {
      position: fixed;
      top: 3.5rem;
    }
  }
}

.c-sidebar__title {
  margin: 0 0 0 0.5rem;
  &::before { content: none; }
}

.c-sidebar__nav { // ul.sidenav
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .dropdown-toggle::after {
    display: none;
  }

  a,
  a.active {
    background-color: inherit;
    color: inherit;
  }

  a:hover,
  a.active:hover,
  a.active:focus {
    background-color: $carbon6;
    color: inherit;
  }

  > li > a {
    display: block;
    padding: 0.25rem 0.5rem;
    border-left: 0.2rem solid transparent;
    &.active { border-left: 0.2rem solid $pyro; }
  }

  &.active,
  &.active + ul li {
    background-color: $carbon8;
  }

  > li > ul > li > a {
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    border-left: 0.2rem solid transparent;
    &.active { border-left: 0.2rem solid $pyro5; }
  }

  .dropdown-item { white-space: normal; }
}
<commit_msg>5.2 Reformat stylesheet for clarity<commit_after>// ==================================================
// Preamble
// ==================================================
// Title: Ryan Fung's HTML Template v5.2 styles
// Author: <NAME> (ryanvfung)
// License: MIT



// ==================================================
// Contents
// ==================================================
// * Preamble
// * Contents
// * Imports
// * Variables
// * Element overrides
//   * Universal Elements
//   * Sectioning and structuring elements
//   * Phrasing elements
//   * Form elements
// * Bootstrap overrides
//   * Responsive Layout
//   * Header navbar
// * PyroCarbon theme
//   * Sectioning and structuring elements
//   * Phrasing elements
//   * Form elements
// * HTML Template custom components
//   * Code components
//   * Side navbar components



// ==================================================
// Imports
// ==================================================

@import 'z52-colours';



// ==================================================
// Variables
// ==================================================

$font: 16px 'Maven Pro', sans-serif;



// ==================================================
// Element overrides
// ==================================================


// Universal elements
// --------------------------------------------------

::selection {
  background: transparentize($pyro, 0.2);
  color: $white;
}


// Sectioning and structuring elements
// --------------------------------------------------

body {
  position: relative;
  padding-top: 3.5rem;
  background-color: $carbon9;
  color: $carbon1;
  font: $font;
}

h1,
h2,
h3,
h4,
.offset-anchor {
  &::before {
    display: block;
    height: 3.5rem;
    margin-top: -3.5rem;
    visibility: hidden;
    content: ' ';
  }
}


// Phrasing elements
// --------------------------------------------------

pre {
  padding: 1rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: $carbon8;
  counter-reset: line;
}


// Form elements
// --------------------------------------------------

fieldset { margin-bottom: 0.5rem; }
select[multiple].form-control { padding: 0; }
option { padding: 0.375rem 0.75rem; }

::-webkit-file-upload-button {
  display: inline-block;
  border: 0.0625rem solid;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  color: $white;
  font: $font;
  line-height: 1.5;
  cursor: pointer;
}



// ==================================================
// Bootstrap overrides
// ==================================================


// Responsive Layout
// --------------------------------------------------

@media (min-width: 100rem) {
  .container { max-width: 95rem; }
}


// Header navbar
// --------------------------------------------------

header .navbar {
  padding: 0;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  color: $white;
  @media (min-width: 34em) {
    background-color: transparent;
    text-align: center;
  }
}

.navbar-brand,
.navbar-nav,
.navbar-nav .nav-item {
  float: none;
  display: inline-block;
  vertical-align: top;
}

.navbar-brand,
.navbar-nav {
  @media (max-width: 34em) {
    margin: 0 0.5rem 0.25rem;
  }
}

.c-navbar {
  @media (min-width: 34em) {
    min-height: 3rem;
    padding: 0.5rem;
    text-align: center;
  }
}

.navbar-toggler {
  clear: both;
  padding: 0.5rem;
}



// ==================================================
// PyroCarbon theme
// ==================================================


// Sectioning and structuring elements
// --------------------------------------------------

header .navbar { background-color: $pyro; }

@media (min-width: 34em) {
  header .navbar {
    background-image: linear-gradient(0, transparentize($pyro, 0.1), $pyro);
  }
}


// Phrasing elements
// --------------------------------------------------

a {
  &,
  &:hover { color: $pyro; }

  &:active,
  &:focus { color: $pyro3; }

  &.link {
    color: inherit;
    border-bottom: 0.0625rem solid $pyro;

    &:hover,
    &:active,
    &:focus {
      color: $black;
      text-decoration: none;
      border-bottom-width: 0.125rem;
    }
  }
}

mark { background-color: $pyro9; }

code {
  background-color: $carbon8;
  color: $pyro;
}

kbd { color: $kbd; }

// Form elements
// --------------------------------------------------

.form-control {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  &:focus { border-color: $pyro5; }
}

option:focus,
option:checked { color: $pyro; }

.btn-primary,
::-webkit-file-upload-button {
  border-color: $pyro3;
  background-color: $pyro;

  &:hover,
  &:active,
  &:focus {
    border-color: $pyro2;
    background-color: $pyro3;
  }

  &:active { box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.1); }
}



// ==================================================
// HTML Template custom components
// ==================================================


// Code components
// --------------------------------------------------

.c-code-block > code {
  > span { counter-increment: line; }

  > span::before {
    margin: -1.125em;
    margin-right: 0.875em;
    padding: 0.175em 1.125em;
    padding-right: 0.875em;
    background-color: $carbon7;
    content: counter(line);
  }

  > span:first-child::before { padding-top: 1.25em; }
  > span:last-child::before  { padding-bottom: 1.25em; }
}

.c-cmd-block::before {
  margin: -1.125em;
  margin-right: 0.875em;
  padding: 1.25em 1.125em;
  padding-right: 0.875em;
  background-color: $carbon7;
  content: '$';
}


// Side navbar component
// --------------------------------------------------

.c-sidebar {
  padding: 0;

  .navbar {
    line-height: 1.5;

    @media (min-width:  62em) { width: 14.5rem; }
    @media (min-width:  75em) { width: 17.5rem; }
    @media (min-width: 100em) { width: 23rem; }

    &.sticky {
      position: fixed;
      top: 3.5rem;
    }
  }
}

.c-sidebar__title {
  margin: 0 0 0 0.5rem;
  &::before { content: none; }
}

.c-sidebar__nav { // ul.sidenav
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .dropdown-toggle::after {
    display: none;
  }

  a,
  a.active {
    background-color: inherit;
    color: inherit;
  }

  a:hover,
  a.active:hover,
  a.active:focus {
    background-color: $carbon6;
    color: inherit;
  }

  > li > a {
    display: block;
    padding: 0.25rem 0.5rem;
    border-left: 0.2rem solid transparent;
    &.active { border-left: 0.2rem solid $pyro; }
  }

  &.active,
  &.active + ul li {
    background-color: $carbon8;
  }

  > li > ul > li > a {
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    border-left: 0.2rem solid transparent;
    &.active { border-left: 0.2rem solid $pyro5; }
  }

  .dropdown-item { white-space: normal; }
}

{'fraction_non_alphanumeric': 0.2780544193491019, 'fraction_numerical': 0.03983638627067402, 'mean_word_length': 2.245887445887446, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 26, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2920681', 'n_tokens_mistral': 4368, 'n_tokens_neox': 3921, 'n_words': 850}