_dd-custom-styles.scss

/*! Styles that either extend / replace bootstrap styles or are unique to this
    site.
    MIT License. Copyright (c) 2020 Peter Johnson <gravatar.com/delphidabbler>
*/

// Remove top margin of 1st child element of <main id="content">
//** Custom
main#content > *:first-child {
  margin-top: 0;
}

// Paragraphs
p {
  &.condensed,
  &.condensed-top {
    margin-top: 0;
  }
  &.condensed,
  &.condensed-bottom {
    margin-bottom: 0;
  }
}

// Lists
//** Bootstrap override
ol,
ul {
  margin-left: $list-indent;
  padding-left: 0;

  .narrow {
    margin-bottom: ($line-height-computed / 2);
  }

  li {
    padding-left: $list-item-offset;
  }
  ol,
  ul {
    margin-left: $list-item-offset;
  }
  &.wide li {
    // margin based on bootstrap's styling of the p tag
    margin: ($line-height-computed / 2) 0 ($line-height-computed / 2) 0;
  }
  &.narrow li {
    margin: 0;
  }
  &.list-group {
    margin-left: 0;
  }
}
// Lists with spaced list items
//** Custom

// Definition lists
//** Bootstrap override
dl {
  margin-left: $dl-indent;
  margin-bottom: ($line-height-computed / 2);
  dt {
    margin-top: ($line-height-computed / 2);
  }
  dd {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: $dd-indent;
  }
  &.light {
    dt {
      font-weight: normal;
    }
  }
  &.narrow {
    dt {
      margin-top: 0;
    }
  }
}


// Images
//** Custom
img {
  // Scalable responsive image
  &.scale {
    max-width: 100%;
    object-fit: fit;
    display: block;
  }
  // Float on large screens, centered as a block on small screens
  &.pull-right-xs {
    max-width: 100%;
    object-fit: fit;
    margin-bottom: ($line-height-computed / 2);
    @media (min-width: $screen-xs-min) {
      float: right !important;
      margin: 0;
      margin-left: 12px;
      display: inline;
    }
  }
}

// Class that can be applied to <pre> tags to make them appear similar to <kbd> tags
//** Custom
pre.kbd {
  color: $kbd-color;
  background-color: $kbd-bg;
}
// Class that makes <pre> tags that have a <code> styling have same dimensions as <pre> tags with .kbd styling.
//** Custom
pre.code {
  padding: 2px 4px;
  font-size: 90%;
  border-radius: $border-radius-small;
}

// Styling for a collapsible <h3> tag: displays + when closed and - when open
//** Custom
h3.collapsible {
  cursor: pointer;
  &.collapsed:after {
    font-family: $font-family-glyph;
    font-size: 80%;
    content: "  \f196";
  }
  &:after {
    font-family: $font-family-glyph;
    font-size: 80%;
    content: "  \f147";
  }
}

// Pair of classes used to mark text or links where something remains to be done.
// .todo indicates something is incomplete - e.g. a link is required or more content is needed.
// .tochange indicates someting needs to be changed - e.g. a link needs to change.
// Use a title attribute to explain what's to be done if necessary
// Mainly for use with <span> and <a> tags.
//** Custom
.todo,
.tochange {
  &::after {
    vertical-align: super;
    font-size: 80%;
  }
}
.todo::after {
    content: " [TO-DO]";
}
.tochange::after {
    content: " [TO-CHANGE]";
}

.indent {
  margin-left: $list-item-offset
}

.indent-lg {
  margin-left: 2.5 * $list-item-offset;
}

// Additional typography: extends typographic classes exposed by Bootstrap
//** Custom
.text-smallcaps {
  font-variant: small-caps;
}
var, .var {
  color: $var-color;
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
em, .em {
  font-style: italic;
}
samp, .samp, .kbd {
  @extend kbd;
}
samp, .samp, kbd, .kbd {
  font-weight: normal;
}
samp, .samp {
  background-color: $samp-bg;
  color: $samp-color;
}

h1, h2, h3, h4, h5, h6 {
  var, .var, .kwd {
    color: $headings-color;
  }
}

// Style links
//** Bootstrap overrides
.alert {
  a {
    text-decoration: underline;
  }
}
.alert-success {
  @include alert-link($alert-success-text, $alert-success-bg);
}
.alert-info {
  @include alert-link($alert-info-text, $alert-info-bg);
}
.alert-warning {
  @include alert-link($alert-warning-text, $alert-warning-bg);
}
.alert-danger {
  @include alert-link($alert-danger-text, $alert-danger-bg);
}

// Adds an external link glyph to links whose hrefs start with http:// or
// https://
// If the link is a direct download that does not load another page then you can
// specify the .direct-dl class replace the external link glyph with a cloud
// download glyph.
// http:// links display same glyphs as https://, but with an additional
// warning symbol
//** Custom

// Suffix glyphs for http://
a[href^="http:"] {
  &::after {
    content: "\f071\202f\f08e"
  }
  &.direct-dl::after {
    content: "\f071\202f\f0ed";
  }
}

// Suffix gylphs for https://
a[href^="https:"] {
  &::after {
    // font-family: $font-family-glyph;
    // margin-left: 4px;
    content: "\f08e";
    // font-size: 70%;
  }
  &.direct-dl::after {
    content: "\f0ed";
  }
}

// Style & remove trailing glyphs for some classes for http:// and https://
// MUST come after the SASS setting suffi gylphs above
a[href^="http"] {
  &::after {
    font-family: $font-family-glyph;
    margin-left: 4px;
    font-size: 70%;
  }
  &.btn::after,
  &.label::after,
  &.no-external-glyph::after {
    content: "";
  }
}

// Prepends an appropriate glyph to messages in alert boxes when .glyph class included.
//** Custom
.glyph {
  &.alert-info::before,
  &.alert-success::before,
  &.alert-warning::before,
  &.alert-danger::before,
  &.text-info::before,
  &.text-success::before,
  &.text-warning::before,
  &.text-danger::before {
    font-family: $font-family-glyph;
    margin-right: 0.25em;
  }
  &.alert-info::before,
  &.text-info::before {
    content: "\f05a";
  }
  &.alert-success::before,
  &.text-success::before {
    content: "\f058";
  }
  &.alert-warning::before,
  &.text-warning::before {
    content: "\f024";
  }
  &.alert-danger::before,
  &.text-danger::before {
    content: "\f071";
  }
}

// Extra style for Font Awesome to pad glyphs on right
// Any class whose name begins with fa-x provides additional classes for use
// with Font Awesome/
//** Custom
.fa-x-pad-right {
  padding-right: 5px;
}
.fa-x-pad-left {
  padding-left: 5px;
}

// Callouts
//** Custom
.callout {
  padding: floor($alert-padding / 2) $alert-padding;
  margin-bottom: $line-height-computed;
  border: 1px solid $gray-lighter;
  border-left-width: 5px;
  border-radius: 3px;

  *:last-child {
    margin-bottom: 0;
  }
  *:first-child {
    margin-top: 0;
  }
  & + .callout {
    margin-top: -5px;
  }
}
.callout-primary {
  @include callout-setup($brand-primary);
}
.callout-success {
  @include callout-setup($brand-success);
}
.callout-info {
  @include callout-setup($brand-info);
}
.callout-warning {
  @include callout-setup($brand-warning);
}
.callout-danger {
  @include callout-setup($brand-danger);
}


// Customise appearance of navbar to match branding
//** Overrides bootstrap class
.navbar {
  border: none;
  border-top: 1px $gray-light solid;
}

// Ensure that dividers in drop-down menus don't display on collapsed version of menu
//** Overrides bootstrap class
.dropdown-menu .divider {
  display: none;
  @media (min-width: $screen-sm-min) {
    display: block;
  }
}

// Change background colour of Menu button used on collapsed menu
//** Overrides bootstrap class
.navbar-default .navbar-toggle {
  background-color: $navbar-default-toggle-bg;
  color: $navbar-default-toggle-color;
}

// Reset page header margins and borders
//** Overrides bootstrap class
.page-header {
  margin: $page-margin-top 0 0 0;
  padding: 0;
  border: none;
}

// General strapline
//** Custom
.strapline {
  font-family: $branding-strapline-font-family;
  font-style: italic; // MUST be italic, no other style available for this font
  font-weight: normal;
}

// Styling of logo and strapline etc.
//** Custom
.branding {
  display: none;
  @media (min-width: $screen-sm-min) {
    display: block;
    color: $branding-color;
    background-color: $branding-bg;
    margin: $branding-margin;
    padding: $branding-base-padding;
  }
}

// Sets style of logo on large page header and of brand displayed on collapsed
// nav bar
//** .brandng > .logo is custom
//** .navbar-brand overrides a bootstrap class
.branding > .logo,
.navbar-brand {
  font-family: $branding-logo-font-family;
  font-weight: bold;
  color: $branding-logo-color;
  opacity: $branding-logo-opacity;
  text-shadow: $branding-logo-shadow;
  a,
  a:link,
  a:hover,
  a:visited {
    color: $branding-logo-color;
    text-decoration: none;
  }
}

// Set size of logo displayed on larger screens (not displayed when menu
// collapsed)
//** Custom
.branding > .logo {
  font-size: $branding-logo-font-size;
}


// Shows and hides navbar brand (logo on collapsed menu) and reduces size of
// logo text on tiny screens
//** Overrides bootstrap class
.navbar-brand {
  display: inline;
  font-size: $branding-logo-font-size-xs;
  @media (min-width: $screen-xs-min) {
    font-size: $branding-logo-font-size-sm;
  }
  @media (min-width: $screen-sm-min) {
    display: none;
  }
}

.navbar-nav {
  li {
    padding-left: $navbar-item-padding-horizontal;
    padding-right: $navbar-item-padding-horizontal;
  }
}

// Sets padding on navbar "toggle" - used to display menu button. Padding is
// less on tiny screens
//** Overrides bootstrap class
.navbar-toggle {
  padding-top: 4px;
  padding-bottom: 4px;

  .navbar-toggle-caption-text {
    display: none;
  }

  @media (min-width: $screen-xs-min) {
    padding-top: 8px;
    padding-bottom: 8px;
    .navbar-toggle-caption-text {
      display: inline;
    }
  }
}

// Sets font size on text of navbar "toggle" - this is the menu button text
//** Custom (.navbar-toggle comes from bootstrap, .navbar-toggle-caption is custom
.navbar-toggle > .navbar-toggle-caption {
  @extend .text-uppercase;
  font-size: $font-size-small;
  @media (min-width: $screen-xs-min) {
    font-size: $font-size-base;
  }
}

// Styles the strapline that appears below logo on pages with un-collapsed menus
//** Custom
.branding > .strapline {
  display: none;
  @extend .strapline;
  font-size: $branding-strapline-font-size;
  color: $branding-strapline-color;
  opacity: $branding-strapline-opacity;
  text-shadow: $branding-strapline-shadow;
  letter-spacing: $branding-strapline-letter-spacing;
  @media (min-width: $screen-sm-min) {
    display: block;
  }
}

// Styles page footer
//** Custom
.pagefoot {
  padding: $padding-small-vertical $padding-small-horizontal;
  background-color: $pagefoot-bg;
  color: $pagefoot-color;
  @extend .small;
  margin-bottom: $page-margin-bottom;
  margin-top: $page-margin-top * 2;

  a {
    color: $pagefoot-link-color;
  }

  p {
    margin-top: 0;
    margin-bottom: ($line-height-computed ) / 4;
  }

  .pagefoot-links,
  .pagefoot-credits  {
    @extend .text-center;
    & > *:last-child {
      margin-bottom: 0;
    }
  }

  .pagefoot-credits {
      color: $pagefoot-credits-color;
  }
}

// Customise panel styling
//** Bootstrap override
.panel {

  .panel-body {
    > *:last-child {
      margin-bottom: 0;
      > *:last-child {
        // ensures that if last child is a container, it's last child has no bottom margin
        margin-bottom: 0;
      }
    }
  }
  h2 {
    font-size: floor($font-size-h2 * 0.8);
  }
  h3 {
    font-size: floor($font-size-h3 * 0.9);
  }
  .panel-body {
    h2, h3 {
      margin-top: ($line-height-computed / 2);
      margin-bottom: ($line-height-computed / 2);
    }
  }
  .panel-heading {
    h2, h3 {
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }
}

// Accordion control with plus-minus buttons
//** Custom - based on code from https://tinyurl.com/rsb2vha
.accordion {
  .panel-title {
    > a:before {
      float: right !important;
      font-family: $font-family-glyph;
      content: " \f147";
      padding-right: 5px;
    }
    > a.collapsed:before {
      float: right !important;
      content: " \f196";
    }
  }
  a {
    text-decoration: none;
  }
}

// Heading that collapses associated text
//** Custom
h3.collapsible {
  cursor: pointer;
  &.collapsed:after {
    font-family: $font-family-glyph;
    font-size: 80%;
    content: "  \f196";
  }
  &:after {
    font-family: $font-family-glyph;
    font-size: 80%;
    content: "  \f147";
  }
}

// Jumbotron-like box
//** Custom
.box {
  background-color: $box-bg;
  color: $box-color;
  padding: $box-padding;
  margin: $box-margin-top 0 $box-margin-bottom 0;
  border-radius: $border-radius-large;

  > .strapline {
   @extend .strapline;
    opacity: 0.75;
  }

  p {
    font-size: $box-font-size;
  }

  h1 {
    margin-top: 0;
  }

  a {
    color: $box-color;
  }

  > .link-boxes {
    @extend .text-right;
    .label {
      padding: $box-label-padding;
    }
  }

  // remove bottom margin from last child in box
  > *:last-child {
    margin-bottom: 0;
  }

  @media screen and (min-width: $screen-sm-min) {
    padding-top:    ($box-padding * 1.6);
    padding-bottom: ($box-padding * 1.6);
    margin-bottom:  ($box-margin-bottom * 1.6);

    p {
      font-size: ceil($box-font-size * 1.2);
    }

    h1,
    .h1 {
      font-size: ceil($font-size-h1 * 1.2);
    }

    > .link-boxes {
      .label {
        padding: $box-label-padding * 1.5;
      }
    }

  }

}

// Box used to display software page title and download buttons etc.
//** Custom
.sw-page-header {
  @extend .box;
  @extend .text-center;

  //margin-top: 0;

  .strapline {
    font-size: $sw-page-header-strapline-font-size;
  }

  h1,
  .h1 {
    font-size: ceil($font-size-h1 * 0.8);
  }

  a {
    font-size: $font-size-small;
  }

  @media screen and (min-width: $screen-sm-min) {
    .strapline {
      font-size: $sw-page-header-strapline-font-size * 1.3;
    }
    h1,
    .h1 {
      font-size: ceil($font-size-h1);
     }
  }

  &.mothballed {
    background-color: $state-warning-bg;
    color: $state-warning-text;
  }
  &.obsolete {
    background-color: $state-danger-bg;
    color: $state-danger-text;
  }
}

// Stying of div that wraps software meta data
//** Custom
div.sw-meta {
  border: 1px $panel-default-border solid;
  border-radius: $border-radius-base;
  margin-bottom: $line-height-computed;
  table {
    width: 100%;
    padding: 0;
    border-collapse: collapse;
    td, th {
      border: none;
      padding: 4px 10px;
    }
    th {
      text-align: right;
      width: 10%;
      border-right: 1px $panel-default-border solid;
      background-color: $panel-default-heading-bg;
    }
  }
}

// Table styling
// ** Bootstrap override
.table {
  border-collapse: collapse;

  // Set table head background
  > thead {
    background-color: $table-head-bg;
  }

  // Middle align for column headings
  > thead > tr > th {
    vertical-align: middle;
    border-bottom: $table-border-color solid 1px;
  }
  // Add top border to thead
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: $table-border-color solid 2px;
      }
    }
  }
  > caption {
    var, .var, .kwd {
      color: $table-caption-color;
    }
  }
  // Add bottom border to tbody
  > tbody:last-child {
    > tr:last-child {
      > th,
      > td {
        border-bottom: $table-border-color solid 2px;
      }
    }
  }
}



// Styling for source code example frames (mainly used in articles)
// ** Custom

.frame {
  margin-bottom: ceil($line-height-computed / 2);
}
.frame div.code-pascal {
  @extend .pre-scrollable;
}
.frame > table {
  margin-bottom: 0;
}
.frame > pre.source-body,
.frame > .code-pascal pre {
  margin-bottom: 0;
  line-height: 125%;
  @extend samp;
}
.frame table code {
  background-color: transparent;
}
.frame .caption {
  color: $gray-light;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: $font-size-small;
  font-variant: small-caps;
}

// Sets top and bottom borders of a div to emulate that of a p tag
// ** Custom
div.para {
  margin-bottom: ceil($line-height-computed / 2);
  margin-top: ceil($line-height-computed / 2);
}

// Styling for references to figures (tables, listings etc.) Used mainly in articles
// ** Custom
.figureref {
  font-variant: small-caps;
}

// Styling for source code highlighting for use with HTML generated by PasHi v2: https://github.com/delphidabbler/pashi
// ** Custom
.code-pascal {
  @extend samp;
  pre {
    border: none;
  }
  pre.highlight { // not a class generated by PasHi - must be added manually to <pre> tag to highlight a line
    background-color: lighten($samp-bg, 15%);
  }
  pre .linenum {
    background-color: darken($samp-bg, 5%);
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-right: 0.5em;
  }
  .comment {
    color: #c0c0c0;
    font-style: italic;
  }
  .kwd {
    color: #f5a4e6;
  }
  .ident {
    color: #fafa5a;
  }
  .sym {
    color: #80e880;
  }
  .str {
    color: #43f0f0;
  }
  .num,
  .float,
  .hex {
    color: #ff00ff;
  }
  .preproc {
    color: #c0c0c0;
  }
  .asm {
    color: #00ff00;
  }
  .err {  /* Classic's "Illegal Char" */
    color: #ff0000;
  }
  .nothing {
    color: #ffffff;
  }
}

// Additional source code related definition for styling keywords outside a .code-pascal class
// ** Custom
.kwd {
  font-weight: bold;
  color: $kwd-color;
}

// Styling for references to Keys on the keyboard
// ** Custom
.keycap {
  @extend .badge;
  font-weight: normal;
  @extend .text-smallcaps;
}

// Make var, .var and .kwd take on on link colour when inside a link tag
// ** Bootstrap override
a {
  var,
  .var,
  .kwd {
    color: $link-color;
  }
}


// Styling of any (news) flash boxes
// ** Custom
.flash {
    display: none;
}

// Styling for cookie confirmation pop-up
// ** Custom
#cookie-popup {

  background-color: $navbar-default-bg;
  color: white;
  border: 1px white solid;
  padding: 1rem;
  font-size: $font-size-small;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  margin: 0;
  width: 100%;

  &:hover {
    opacity: 1;
  }

  p.cookie-msg {
    padding: 0;
    margin-bottom: $line-height-computed / 4;

    a {
      text-decoration: underline;
      color: white;
    }
}

  p.cookie-btn {

    padding: 0;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;

    button {

      border: 1px white solid;
      margin-right: 1rem;
      font-size: $font-size-small;
      padding: 2px 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

#cookie-consent--opt-out-text {
  display: none;
}

.panel-list-group {

  .list-group-item {
    margin: 0;
    margin-bottom: $line-height-computed;
    padding: 0;
    border-color: $brand-primary;
  
  }

  .panel {
    margin: 0;
    padding: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

}