Skip to content

Commit 5028d04

Browse files
Tj-TracyTj-Tracy
committed
Rebrand and webpack rework
First wave of rebrand work. I've edited the webpack to combine both the certificate and base styles bundling, along with removal of errant files that were being generated (we don't need js bundles, theres no js in this repo).
1 parent 59866ea commit 5028d04

17 files changed

+870
-129
lines changed

‎edx_credentials_themes/static/edx.org/base/sass/_components.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
// #BANNER
3131
// ------------------------------
3232
.wrapper-banner-user {
33-
background-color: $gray-700;
33+
background-color: $primary-500;
3434
border-top: 1px solid $gray-400;
3535
border-bottom: 1px solid $gray-400;
3636
color: $gray-100;

‎edx_credentials_themes/static/edx.org/certificates/sass/_build.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// ------------------------------
2+
// MIT Professional Education: Shared Build
3+
4+
// About: Shared sass compilation between LTR/RTL produced stylesheets
5+
6+
// #CONFIG: app-centric configuration/overrides
7+
// #LIB: third party libraries and dependencies
8+
// #EXTENSIONS: add-ons and further customizations
9+
10+
// ------------------------------
11+
// #CONFIG
12+
// ------------------------------
13+
@import 'config';
14+
15+
// ------------------------------
16+
// #LIB
17+
// ------------------------------
18+
@import 'lib';
19+
20+
// ------------------------------
21+
// #EXTENSIONS
22+
// ------------------------------
23+
@import 'utilities';
24+
@import 'components-rendering';
25+
@import 'layouts-rendering';
26+
@import 'print-rendering';

‎edx_credentials_themes/static/edx.org/certificates/sass/_components-rendering.scss‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
// ------------------------------
2+
// // edX Web Certificates: Certificate Rendering - Components
3+
4+
// About: (specifically for certificate rendering) styling for specific UI components ranging from global to modular.
5+
6+
// #RENDERING
7+
8+
// ------------------------------
9+
// #RENDERING
10+
// ------------------------------
11+
.wrapper-accomplishment-title {
12+
13+
.accomplishment-title {
14+
@extend .h1;
15+
font-weight: $font-weight-light;
16+
line-height: 1.1;
17+
text-transform: uppercase;
18+
color: $dark-gray;
19+
}
20+
21+
.accomplishment-title-label {
22+
@include margin-left(13px); // fix letterspacing shift
23+
display: block;
24+
font-size: 3.25rem;
25+
letter-spacing: .26em; // letterspacing relates to element font-size
26+
27+
@include media-breakpoint-up(md) {
28+
@include margin-left(0);
29+
font-size: 3.75rem;
30+
}
31+
}
32+
33+
.accomplishment-title-type {
34+
display: block;
35+
font-size: 1.25rem;
36+
37+
@include media-breakpoint-up(md) {
38+
font-size: 1.28rem;
39+
}
40+
}
41+
42+
.deco {
43+
display: inline-block;
44+
vertical-align: middle;
45+
margin-top: -7px;
46+
text-transform: lowercase;
47+
font-style: italic;
48+
font-size: $font-large;
49+
}
50+
}
51+
52+
.wrapper-accomplishment-orgs {
53+
54+
// CASE: single organization
55+
img {
56+
max-width: 100%;
57+
max-height: 100px;
58+
}
59+
60+
.list-orgs {
61+
@extend .list-unstyled;
62+
}
63+
64+
.organization-name {
65+
@extend .h5;
66+
font-weight: $font-weight-semi-bold;
67+
word-wrap: break-word;
68+
text-align: center;
69+
}
70+
71+
// CASE: three organizations
72+
.wrapper-organization:first-child:nth-last-child(3), .wrapper-organization:first-child:nth-last-child(3) ~ .wrapper-organization {
73+
display: block;
74+
margin: 2.5rem auto;
75+
76+
@include media-breakpoint-up(md) {
77+
display: inline-block;
78+
max-width: 32%;
79+
margin: 0;
80+
vertical-align: middle;
81+
82+
.organization {
83+
@include margin-left(2.5rem);
84+
}
85+
}
86+
}
87+
88+
// CASE: two organizations
89+
.wrapper-organization:first-child:nth-last-child(2), .wrapper-organization:first-child:nth-last-child(2) ~ .wrapper-organization {
90+
display: block;
91+
margin: 2.5rem auto;
92+
93+
@include media-breakpoint-up(md) {
94+
display: inline-block;
95+
max-width: 48%;
96+
margin: 0;
97+
vertical-align: middle;
98+
99+
.organization {
100+
@include margin-left(2.5rem);
101+
}
102+
}
103+
}
104+
}
105+
106+
.wrapper-accomplishment-statement {
107+
108+
.accomplishment-recipient {
109+
@extend .h2;
110+
line-height: 1.2;
111+
font-weight: $font-weight-semi-bold;
112+
color: $black;
113+
114+
@include media-breakpoint-up(md) {
115+
font-size: 2.5rem;
116+
}
117+
}
118+
119+
.accomplishment-course,
120+
.accomplishment-program {
121+
@extend .h3;
122+
line-height: 1.2;
123+
font-weight: $font-weight-semi-bold;
124+
color: $black;
125+
126+
@include media-breakpoint-up(md) {
127+
font-size: $font-xxx-large; // @extend .h2; extends not working
128+
}
129+
}
130+
131+
.copy {
132+
@extend %text-meta;
133+
134+
@include media-breakpoint-up(md) {
135+
font-size: $font-large; // @extend %copy-large; extends not working
136+
}
137+
}
138+
}
139+
140+
.wrapper-signatories {
141+
142+
img {
143+
max-width: 100%;
144+
max-height: 150px;
145+
}
146+
}
147+
148+
.signatory {
149+
@extend .mt-4;
150+
151+
.signatory-signature {
152+
max-width: 60%;
153+
max-height: 60px;
154+
}
155+
156+
.signatory-name {
157+
@extend .h6;
158+
font-size: $font-small;
159+
font-weight: $font-weight-semi-bold;
160+
line-height: $line-height-large;
161+
}
162+
163+
.signatory-credentials {
164+
@extend %text-micro;
165+
color: $gray-600;
166+
167+
.role {
168+
white-space: pre-line;
169+
}
170+
171+
.organization {
172+
@extend .mt-1;
173+
display: block;
174+
font-style: italic;
175+
}
176+
}
177+
}
178+
179+
.accomplishment-stamps {
180+
181+
.title {
182+
@extend %h8;
183+
color: $gray-600;
184+
display: block;
185+
margin-bottom: 0;
186+
}
187+
188+
.emphasized {
189+
@extend %text-micro;
190+
display: block;
191+
font-weight: $font-weight-bold;
192+
color: $gray-600;
193+
}
194+
}
195+

‎edx_credentials_themes/static/edx.org/certificates/sass/_config.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// ------------------------------
2+
// edX Web Certificates: Config
3+
4+
// About: variable and configuration overrides
5+
6+
// ------------------------------
7+
// #VARIABLES
8+
// ------------------------------
9+
10+
// Without this, bootstrap's print mode is too wide
11+
$print-body-min-width: 0;

0 commit comments

Comments
 (0)