Subversion Repositories wimsdev

Rev

Rev 17748 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /* CSS rules to display Mendeleiev's table of elements  */
  2.  
  3. /************
  4.  * SETTINGS *
  5.  ************
  6.  * DIV for each element
  7.  **********************
  8.  * width
  9.  *    div_width = {{ div_width }}
  10.  * height
  11.  *    div_height = {{ div_height }}
  12.  *
  13.  * Symbol
  14.  ********
  15.  * vertical position
  16.  *    symbol_top = {{ symbol_top }}
  17.  * font size
  18.  *    symbol_font_size = {{ symbol_font_size }}
  19.  *
  20.  * Z (atomic number)
  21.  *******************
  22.  * vertical position
  23.  *    Z_top = {{ Z_top }}
  24.  * horizontal position
  25.  *    Z_left = {{ Z_left }}
  26.  * font size
  27.  * Z_font_size = {{ Z_font_size }}
  28.  *
  29.  * Molar mass
  30.  ************
  31.  * vertical position
  32.  *    mass_top = {{ mass_top }}
  33.  * font size
  34.  *    mass_font_size = {{ mass_font_size }}
  35.  *
  36.  * Electronic structure
  37.  **********************
  38.  * displaying
  39.  *    struct_display = {{ struct_display }}
  40.  * vertical position
  41.  *    struct_top = {{ struct_top }}
  42.  * horizontal position
  43.  *    struct_left = {{ struct_left }}
  44.  * font size
  45.  *    struct_font_size = {{ struct_font_size }}
  46.  * line height
  47.  *    struct_line_height = {{ struct_line_height }}
  48.  *
  49.  * ROWS
  50.  ******
  51.  * enumeration of positions [{"i": <int>, "top": <int>}, ...]
  52.  *    row_enum = {{ row_enum }}
  53.  *
  54.  * COLUMNS
  55.  *********
  56.  * enumeration of positions [{"i": <int>, "left": <int>}, ...]
  57.  *    col_enum = {{ col_enum }}
  58.  **/
  59.  
  60. div.element {
  61.     display: inline-block;
  62.     position: absolute;
  63.     width: {{ div_width }}px;
  64.     height: {{ div_height }}px;
  65.     border: 1px solid black;
  66.     border-radius: 3px;
  67.     background: lightyellow;
  68. }
  69.  
  70. p.symbol {
  71.     position: absolute;
  72.     top: {{ symbol_top }}px;
  73.     width: {{ div_width }}px;
  74.     text-align: center;
  75.     font-size: {{ symbol_font_size }}px;
  76. }
  77.  
  78. p.Z {
  79.     position: absolute;
  80.     top: {{ Z_top }}px;
  81.     left: {{ Z_left }}px;
  82.     font-size: {{ Z_font_size }}px;
  83. }
  84.  
  85. p.mass {
  86.     position: absolute;
  87.     top: {{ mass_top }}px;
  88.     width: {{ div_width }}px;
  89.     text-align: center;
  90.     font-size: {{ mass_font_size }}px;
  91. }
  92.  
  93. /* electronic structures */
  94.  
  95. p.str0 {
  96.     display: {{ struct_display }};
  97.     position: absolute;
  98.     top: {{ struct_top }}px;
  99.     left: {{ struct_left }}px;
  100.     font-size: {{ struct_font_size }}px;
  101.     line-height: {{ struct_line_height }}px;
  102. }
  103.  
  104. /* ROWS */
  105.  
  106. {% for re in row_enum %}
  107. div.r{{ re.i }} {
  108.     top: {{ re.top }}px
  109. }
  110. {% endfor %}
  111.  
  112. /* COLUMNS */
  113.  
  114. {% for ce in col_enum %}
  115. div.c{{ ce.i }} {
  116.     left: {{ ce.left }}px;
  117. }
  118. {% endfor %}
  119.