style: make use of calculation and variable in SCSS

[cousquer]

Is your feature request related to a problem? Please describe.
use calculation and var in SCSS

Dependencies
do this after having merged and solved these issues:

• add support for japanese top->down #31 jp/zn
• style: Improve general Typography in left-to-right writing #68 typography ltr
• follow ref article on CSS custom variable (see comments)

Additional context
Add any other context or screenshots about the feature request here.

[cousquer]

ref : #92 CSS of Holy Albatross example

[cousquer]

Logical Operations with CSS Variables
Ref: https://css-tricks.com/logical-operations-with-css-variables/

[cousquer]

ref article on custom variable :
https://github.com/castastrophe/wc-theming-standards/wiki