8000 add make task for compiling static assets in docker compose · python/pythondotorg@850df6f · GitHub
[go: up one dir, main page]
Skip to content

Commit 850df6f

Browse files
ewdurbinewdurbin
committed
add make task for compiling static assets in docker compose
1 parent 9bd3afe commit 850df6f

File tree

3 files changed

+62
-192
lines changed

3 files changed

+62
-192
lines changed

‎Makefile

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,7 @@ test: .state/db-initialized ## Run tests
5353
docker_shell: .state/db-initialized ## Open a bash shell in the web container
5454
docker compose run --rm web /bin/bash
5555

56+
static: Dockerfile.static
57+
docker compose run --rm static bin/compile-static
58+
5659
.PHONY: help serve migrations migrate manage shell clean test docker_shell

‎bin/compile-static

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/bash
2+
cd static
3+
bundle exec sass --compass --scss -I $(dirname $(dirname $(gem which susy))) sass/*.scss

‎static/sass/_debug.scss

Lines changed: 56 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,57 @@
1-
/**
2-
* This file was taken from http://www.tomato-root.com/sandbox/holmes/
3-
* and adapted to remove some annoying warnings that I really don't care about.
4-
* Also removed .holmes-debug namespace, so I can just include stylesheet as following.
5-
*
6-
* <%= stylesheet_link_tag "debug" if Rails.env.development? %>
7-
*
8-
* ------------------------
9-
*
10-
* Debug colours and what they mean
11-
*
12-
* - tomato denotes an error, invalid markup or a missing attribute
13-
* - gold denotes a warning, so potentionally erroneous markup or bad practice
14-
* - goldenrod denotes a deprecated element or element with deprecated or Non-W3C attributes
15-
* - darkorchid denotes missing translation. Authors should add the class in while working, and remove it when done.
16-
*
17-
* -------------------------
1+
@charset "UTF-8";
2+
/* Define constants for the application and to configure the blueprint framework. */
3+
/* ===== Compass Imports ===== */
4+
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
5+
/* @import "compass/css3/columns" */
6+
/* @import "compass/css3/hyphenation"; */
7+
/* Needed for the link-colors() function */
8+
/* Needed for the horizontal-list() function */
9+
/* When remembering whether or not there's a hyphen in white-space is too hard */
10+
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
11+
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
12+
/* Other interesting functions:
13+
@import "compass/utilities/color/contrast";
14+
detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
15+
Used to pass two colors into a get out the most readable color.
16+
Good for situations where we dont want to create a new color,
17+
but be sure that colors from variables are always going to be readable
1818
*/
19-
20-
21-
/****************
22-
Modernizr Tests
23-
****************/
24-
25-
@mixin modernizr_links {
26-
27-
/*modernizr*/ .fontface .fontface-test,
28-
.generatedcontent .generatedcontent-test,
29-
.svg .svg-test,
30-
.inlinesvg .inlinesvg-test,
31-
.retina .retina-test {
32-
display: block;
33-
color: #ff7;
34-
background-color: #333;
35-
36-
.yes { font-weight: bold; display: inline; color: green; }
37-
.no { display: none; color: white; }
38-
}
39-
.no-fontface .fontface-test,
40-
.no-generatedcontent .generatedcontent-test,
41-
.no-svg .svg-test,
42-
.no-inlinesvg .inlinesvg-test,
43-
.no-retina .retina-test {
44-
display: block;
45-
color: #ff7;
46-
background-color: red;
47-
48-
.yes { display: none; color: white; }
49-
.no { font-weight: bold; display: inline; color: white; }
50-
}
51-
52-
.lt-ie8 .test-suite {
53-
display: block !important;
54-
}
55-
}
56-
57-
/**************
58-
LINKS
59-
**************/
60-
61-
@mixin debug_links {
62-
63-
a:not([href]),
64-
a[href=""],
65-
a[href="%"] {
66-
outline: 2px solid tomato;
67-
}
68-
69-
a[href="#"],
70-
a[href^="javascript"] {
71-
outline: 2px solid gold;
72-
}
73-
}
74-
75-
/**************
76-
IMAGES
77-
**************/
78-
79-
@mixin debug_images {
80-
81-
img:not([alt]),
82-
img[alt=""] {
83-
outline: 2px solid tomato;
84-
}
85-
}
86-
87-
/*************************
88-
MISC ATTRIBUTES
89-
**************************/
90-
91-
@mixin debug_misc {
92-
93-
/* empty or missing "for" tags on labels, "names" on inputs, selects and textareas, abbr without a title, empty class or is declarations */
94-
label:not([for]),
95-
label[for=""],
96-
input:not([name]),
97-
input[name=""],
98-
select:not([name]),
99-
select[name=""],
100-
textarea:not([name]),
101-
textarea[name=""],
102-
103-
abbr:not([title]),
104-
abbr[title=""],
105-
106-
[class=""],
107-
[id=""] {
108-
outline: 2px solid tomato;
109-
}
110-
111-
/*
112-
Warnings here, for inline styles and event calls,
113-
ideally they should be external (CSS) and JS applied by JS scripts,
114-
keep markup purely presentational!
115-
*/
116-
[style],
117-
[onclick],
118-
[onblur],
119-
[onfocus],
120-
[onselect],
121-
[onload],
122-
[onunload] {
123-
outline: 2px solid gold;
124-
}
125-
}
126-
127-
/*************************************************************************
128-
DEPRECATED & NON-W3C CONTENT ELEMENTS (goldenrod)
129-
Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
130-
*************************************************************************/
131-
132-
@mixin debug_deprecated {
133-
134-
applet,
135-
acronym,
136-
center,
137-
dir,
138-
font,
139-
strike,
140-
u,
141-
/*i, apparently not deprecated
142-
b, apparently not deprecated */
143-
big,
144-
tt,
145-
marquee, /* i've left this because it is a stupid thing to use */
146-
plaintext,
147-
xmp {
148-
outline: 2px solid goldenrod;
149-
}
150-
151-
/************************************************************************
152-
DEPRECATED NON-W3C ATTRIBUTES (goldenrod)
153-
Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
154-
************************************************************************/
155-
156-
body[bgproperties],
157-
body[topmargin],
158-
body[rightmargin],
159-
body[bottommargin],
160-
body[leftmargin] {
161-
outline: 2px solid goldenrod;
162-
}
163-
164-
*[bordercolor],
165-
*[bordercolordark],
166-
*[bordercolorlight],
167-
table[frame] {
168-
outline: 2px solid goldenrod;
169-
}
170-
}
171-
172-
/*********************
173-
EMPTY ELEMENTS (warning level for now)
174-
**********************/
175-
176-
@mixin debug_empty {
177-
178-
div:empty,
179-
span:empty,
180-
li F438 :empty,
181-
p:empty,
182-
td:empty,
183-
th:empty {
184-
outline: 2px solid gold;
185-
}
186-
187-
/*********************
188-
MISSING TRANSLATIONS
189-
**********************/
190-
.translation_missing {
191-
outline: 2px solid #B516A9;
192-
}
193-
}
19+
/* ! ===== Grid ===== */
20+
/*
21+
* Susy: Un-obtrusive grids for designers
22+
* By: Eric A. Meyer and OddBird
23+
* Site: susy.oddbird.net
24+
*
25+
* Would like to remove the dependence on Susy by using a simpler grid structure : J. Hogue
26+
*/
27+
/* Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
28+
* Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.
29+
* We are using Susy 1.0. Update your GEM file by deleting the old and downloading the new.
30+
*/
31+
/* ! ===== Variables ===== */
32+
/* Colors */
33+
/* Confusing, but in some cases, this can be set to a dark color */
34+
/* Python blue */
35+
/* Python yellow */
36+
/* Also used for error messages */
37+
/* Set a generic border color here to keep them consistent */
38+
/* Typography */
39+
/* True here means that all computed values will be in EMs */
40+
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
41+
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
42+
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
43+
/* Calculate the font-size-adjust of Flux:
44+
* http://www.cs.tut.fi/~jkorpela/x-height.html
45+
* Or, in this case, we did it by hand by comparing Flux to Arial, side by side.
46+
* We then adjusted it further visually, as Flux is more condensed and therefore line-length changes pretty dramatically.
47+
*/
48+
/*
49+
Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin
50+
A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
51+
52+
Note: The line height is relative to the constant $base-line-height.
53+
The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems.
54+
Don’t worry about nested elements etc, Compass will do the maths for you :)
55+
*/
56+
/* Defaults */
57+
/* Positive is down */

0 commit comments

Comments
 (0)
0