Inskinerator

Check-in Differences
Log In
☰Timeline Branches Tags Bugs Wishes Wiki
Hide Diff Invert Patch Path Side-by-Side Diff

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Difference From 3becf19c66c33076 To fd974dcf22e0c793

2020-11-09
11:13
Reworked the "adjust" and "late-vars" features to allow for the first Amber VT derivative: "green bar". check-in: 6b73476a58 user: tangent tags: trunk
08:28
Created the late-defined variable feature which allows several variables to be defined in terms of the four key variables unless they're provided on the command line. Then readjusted the skins in terms of these and rejiggered the location of a few definitions to allow clean overrides. check-in: fd974dcf22 user: tangent tags: trunk
06:51
Assorted tweaks to bring the variables used for Amber VT & default into line. check-in: 3becf19c66 user: tangent tags: trunk
06:17
Consolidated two near-identical colors in the default skin conversion. check-in: cc427ee0c8 user: tangent tags: trunk

Changes to README.md.

︙
66
67
68
69
70
71
72

73
74
75










76
77
78
79
80


81
82


83
84
85
86
87
88
89
90
91


92
93
94


95
96
97


98
99
100
101
102
103
104

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

95
96
97
98
99
100
101
102
103


104
105
106
107
108
109
110
111
112

113
114
115
116
117
118
119
120
121








+



+
+
+
+
+
+
+
+
+
+





+
+

-
+
+







-
-
+
+



+
+


-
+
+









This tool is more useful for creating new variations on the default skin.
For example, you can use `-D` to pass HTML color names to create a
[“fire” themed variant][d2]:

    ./inskinerator -b default \
        -D text-color=lightyellow \
        -D header-color=yellow \
        -D background-color=black \
        -D pri-accent-color=red \
        -D sec-accent-color=darkorange

Note that we don’t necessarily have to override any of the late-defined
colors, as they get the following defaults if not overridden:

| Variable         | Late-Defined Value           |
|------------------|------------------------------|
| title-color      | $pri-accent-color            |
| header-color     | $text-color                  |
| footer-color     | $text-color + 40% lightness  |
| ter-accent-color | inverse of $pri-accent-color |

Or, you can use HTML RGB specs to create this [“PDP-11/70” theme][d3]:

    ./inskinerator -b default \
        -D text-color=\#000 \
        -D header-color=\#B3003B \
        -D title-color=\#622A5A \
        -D pri-accent-color=\#B3003B \
        -D sec-accent-color=\#AE98CD
        -D sec-accent-color=\#AE98CD \
        -D ter-accent-color=\#B3003B

Note that `background-color` isn’t needed: we got that from the default
skin.  We can’t do without “black” for the text color, since the default
uses [a very dark gray](/file/skins/default/vars.scss), not black.  But
note also that we pass such strings through as-is, so that HTML’s
allowance for the #000 shortcut works.

You may also mix HTML color names and RGB specs to create this [mint
green variant][d4] of the default skin:
You may also mix HTML color names and RGB specs to create this
[mint green variant][d4] of the default skin:

     ./inskinerator -b default \
        -D text-color=\#003300 \
        -D header-color=darkgreen \
        -D title-color=green \
        -D background-color=mintcream \
        -D pri-accent-color=lightseagreen \
        -D sec-accent-color=\#CCFFE6
        -D sec-accent-color=\#CCFFE6 \
        -D ter-accent-color=darkgreen

[Fizzbuck Light][d5]:

    ./inskinerator -b default \
        -D text-color=black \
        -D pri-accent-color=\#3B579A \
        -D sec-accent-color=lightgray
︙

Changes to inskinerator.

︙
51
52
53
54
55
56
57


58

59
60










61
62
63
64
65
66
67

51
52
53
54
55
56
57
58
59
60
61


62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78








+
+

+
-
-
+
+
+
+
+
+
+
+
+
+








    print <<USAGE;
usage: inskinerator --base/-b BASE [--override/-o OVERRIDE] \
        [--output/-f OUTPUT] [--define/-D VAR=VALUE]

    All skins allow overriding at least these variables:

        -D text-color=COLOR
        -D pri-accent-color=COLOR
        -D sec-accent-color=COLOR
        -D background-color=COLOR

        -D pri-accent-color=COLOR
        -D sec-accent-color=COLOR
        -D title-color=COLOR
        -D header-color=COLOR
        -D footer-color=COLOR
        -D ter-accent-color=COLOR

    The final group are late-defined variables, defined by default in
    terms of the first group.  If you don't override them, you get the
    default definitions without duplicating their late definitions.
    Thus, a "complete" variables-only override can be done by redefining
    only variables in the first group.

    VALUEs for COLOR variables are any legal CSS color: 'white',
    '#abcdef', '#888', etc.

    Output goes to stdout if you don't give a file name via --output/-f.

USAGE
︙
119
120
121
122
123
124
125






126
127
128
129
130
131
132

130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149








+
+
+
+
+
+









# Build SCSS to compile
my $scss = $common_vars . $base_vars;
$scss .= $override_vars if defined $override_vars;
for my $vname (keys %vars) {
    $scss .= "\$$vname: $vars{$vname};\n";
}
$scss .= <<LATE_VARIABLES;
    \$footer-color:     adjust-color(\$text-color, \$lightness: +40) !default;
    \$title-color:      \$pri-accent-color !default;
    \$header-color:     \$text-color !default;
    \$ter-accent-color: invert(\$pri-accent-color) !default;
LATE_VARIABLES
$scss .= $base_adjust     if defined $base_adjust;
$scss .= $override_adjust if defined $override_adjust;
$scss .= $common_css;
$scss .= $base_css;
$scss .= $override_css    if defined $override_css;
$scss .= $override_prism  if defined $override_prism;
$scss .= $base_media      if defined $base_media;
︙

Changes to skins/amber-vt/css.scss.

︙
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

82
83
84
85
86
87
88

56
57
58
59
60
61
62



63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86








-
-
-
















+








  border-radius: 3px;
  padding: 2px;
}


/**** Headers, footers, menus, and titles ****/

h1, h2, h3, h4, h5 {
  color: $header-color;
}
h1      { font-size: 2.00em; margin-left: 10pt; }
h2      { font-size: 1.50em; margin-left: 20pt; }
h3      { font-size: 1.15em; margin-left: 30pt; }
h4      { font-size: 1.05em; margin-left: 50pt; }
h5, pre {                    margin-left: 50pt; }

.header {
  .status, .title { font-weight: bold; }
  .status {
    color: $header-color;
    text-align: right;
    white-space: nowrap;
  }
}
.title {
  h1 {
    color: $title-color;
    font-size: 2.00em;
    &:after { color: $header-color; }
  }
}
.submenu {
    a, label { color: $header-color; }
}
︙

Changes to skins/default/css.scss.

︙
31
32
33
34
35
36
37
38

39
40
41
42
43
44
45
46
47
48
49
50

31
32
33
34
35
36
37

38
39
40
41
42

43
44
45
46
47
48
49








-
+




-








  text-decoration: underline;
}


/* Page title, above menu bars */

.title {
  color: $pri-accent-color;
  color: $title-color;
  float: left;
}
.title h1 {
  display: inline;
  color: $header-color;
}
.title h1:after {
  content: " / ";
  color: $light-text-color;
  font-weight: normal;
}
.status {
︙
70
71
72
73
74
75
76
77

78
79
80
81
82
83
84

69
70
71
72
73
74
75

76
77
78
79
80
81
82
83








-
+








  text-decoration: none;
  color: $light-text-color;
  border-right: 1px solid $sec-accent-color;
}
.mainmenu a.active,
.mainmenu a:hover {
  color: $dark-text-color;
  border-bottom: 2px solid $pri-accent-color;
  border-bottom: 2px solid $ter-accent-color;
}
div#hbdrop {
  background-color: $background-color;
  border: 1px solid $dark-text-color;
  border-top: $background-color;
  border-radius: 0 0 0.5em 0.5em;
  display: none;
︙
119
120
121
122
123
124
125




126
127
128
129
130
131
132

118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135








+
+
+
+









/* Main document area; elements common to most pages. */

.content {
  padding-top: 10px;
  font-size: 0.8em;
  color: $text-color;

  h1, h2, h3, h4, h5 {
    color: $header-color;
  }
}
.content blockquote {
  padding: 0 15px;
}
.content h1 {
  font-size: 1.25em;
}
︙

Changes to skins/default/vars.scss. 

1
2




3
4
5
6



1
2
3
4





-
-
+
+
+
+
-
-
-
-

$text-color:       #444;        /* 27% lightness */
$background-color: white;
$text-color:       hsl(0, 0, 27);       /* #454545 */
$pri-accent-color: hsl(210, 53, 51);    /* #4082C4 */
$sec-accent-color: hsl(0, 0, 92);       /* #EBEBEB */
$background-color: white;               /* #FFFFFF */
$pri-accent-color: #4183C4;     /* hsl(210, 53, 51) */
$sec-accent-color: #EAEAEA;     /* 92% lightness */
$header-color:     $pri-accent-color;
$footer-color:     adjust-color($text-color, $lightness: +40);

This page was generated in about 0.01s by Fossil 2.25 [8f798279d5] 2024-11-06 12:59:09