Ivory Siege Tower

mobile construct built of thoughts and parentheses

SiegeTower Styles

css sass siegetower styles

Styles and formatters section. Mostly generated with npm.

In the following snippets src_dir stands for temporary build location and dist_path is the website templates' collection repository.

§ Bulma Custom CSS Compilation

Styles for the whole website are generated with Bulma, in particular here Bulma with node-sass installation is used.

Obtain required node packages:

  mkdir -p $src_path
  cd $src_path
  npm init -y
  npm install node-sass --save-dev
  npm install bulma --save-dev
  sed -i -e 's/index\.js/sass\/siegetower\.scss/g' package.json
  sed -i '/"scripts"/a \ \ \ \ "compile:sass": "node-sass --omit-source-map-url sass/siegetower.scss css/siegetower.css",' package.json 
  mkdir sass

Define custom styles:

  @charset "utf-8";

  /// Imports
  // Import a Google Font
  @import url('https://fonts.googleapis.com/css?family=PT+Mono:regular,bold,italic,bolditalic');

  /// Init variables

  /// Update Bulma's global variables
  // Fonts:
  $family-mono: "PT Mono", regular;
  $family-primary: $family-mono;

  // Colors
  // Redefining basics for SiegeTower scheme
  $green:               #a7f070;
  $orange:              #ef7d57;
  $yellow:              #ffcd75;
  $red:                 #ff6a6a;
  $cyan:                #73eff7;
  $blue:                #41a6f6;
  $purple:              #d57dff;
  $white:               #f4f4f4;
  $light:               #b7d7ec;
  $dark:                #161e3b;

  // Global colors tweaks:
  $body-background-color: $dark;
  $background:            #333c57;

  $text:                        $white;
  $text-invert: findColorInvert($text);
  $text-light:                  $light;
  $text-strong:                 $white;

  $primary:        #6877a4;
  // $primary:        #93a2cf;
  // $primary:        #4e66ae;
  $primary-invert: findColorInvert($primary);
  $primary-light:  lighten($primary, 15%);
  $primary-dark:   darken($primary,  10%);

  $warning:        $orange;
  $warning-invert: findColorInvert($warning);
  $warning-light:  findLightColor($warning);
  $warning-dark:   findDarkColor($warning);

  $info:           $blue;
  $info-invert:    findColorInvert($info);
  $info-light:     findLightColor($info);
  $info-dark:      findDarkColor($info);

  $link:                 $green;
  $link-invert:          $light;
  $link-light:           darken($link, 15%);
  $link-dark:            lighten($link, 15%);
  $link-visited:         $link;

  $link-hover:           lighten($red, 20%);
  $link-hover-border:    lighten($red, 20%);

  $link-focus:           lighten($purple, 20%);
  $link-focus-border:    lighten($purple, 20%);

  $link-active:          lighten($purple, 20%);
  $link-active-border:   lighten($purple, 20%);

  $border:               $primary;
  $border-hover:         $primary;
  $border-light:         $light;
  $border-light-hover:   $light;

  // Custom color definitions:
  // $custom-colors: (
  //   "steelblue":  (#333c57),
  // );

  $code:                 $cyan;
  $code-background:      $background;

  $pre-background:       #333c57;

  $footer-background-color: $dark;

  $navbar-background-color: $primary;
  $navbar-dropdown-background-color: $primary;

  // $navbar-tab-hover-background-color: $light;

  $navbar-item-hover-color: $dark;
  $navbar-item-hover-background-color: $light;

  // $navbar-dropdown-hover-background-color: $light;
  // $navbar-dropdown-active-background-color: $light;
  $navbar-dropdown-item-hover-background-color: $light;
  $navbar-dropdown-item-active-background-color: $light;

  // Layout:
  $control-radius: 0.0;

  $navbar-dropdown-radius: 0.0;

  // $body-background-color: $st-background-dark;
  // $background-light: $st-background-light;

  // Imoprt all I need from Bulma
  // (should go in the end):
  @import "../node_modules/bulma/bulma.sass";

Tangle the customized style definitions above:

  (org-babel-tangle)

Compile and put the style to the distribution.

  npm run compile:sass
  cp $src_path/css/siegetower.css $dist_path/rootdir/css/

§ Lightense Image Preview Library

I use Lightense Images library for zoom preview of images.

  mkdir -p $src_path
  cd $src_path
  npm install lightense-images --save
  cp $src_path/node_modules/lightense-images/dist/lightense.min.js $dist_path/rootdir/js/

Social Timeline: