diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.eot b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.eot
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.eot
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.eot
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.svg b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.svg
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.svg
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.svg
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.ttf b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.ttf
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.ttf
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.ttf
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.woff b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.woff
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.woff
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.woff
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.woff2 b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.woff2
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Bold.woff2
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Bold.woff2
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.eot b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.eot
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.eot
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.eot
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.svg b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.svg
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.svg
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.svg
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.ttf b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.ttf
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.ttf
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.ttf
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.woff b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.woff
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.woff
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.woff
diff --git a/lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.woff2 b/lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.woff2
similarity index 100%
rename from lms/static/sdaia_css/fonts/DIN-Next-LT-Arabic-Medium.woff2
rename to lms/static/certificates/fonts/Din/DIN-Next-LT-Arabic-Medium.woff2
diff --git a/lms/static/certificates/images/certificate-bg.png b/lms/static/certificates/images/certificate-bg.png
new file mode 100644
index 000000000000..813fb72014ab
Binary files /dev/null and b/lms/static/certificates/images/certificate-bg.png differ
diff --git a/lms/static/certificates/sass/_base.scss b/lms/static/certificates/sass/_base.scss
index b6f11c7ee28e..46435aeecffe 100644
--- a/lms/static/certificates/sass/_base.scss
+++ b/lms/static/certificates/sass/_base.scss
@@ -15,10 +15,13 @@ body {
height: 100%;
margin: 0;
padding: 0;
- background: $white;
+ background: $body-bg;
+ color: $primary;
font-family: $font-family-sans;
}
+body { min-width: 320px; }
+
// ------------------------------
// #TYPOGRAPHY
// ------------------------------
diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss
index 11bd2e994776..921a5a8e1ae8 100644
--- a/lms/static/certificates/sass/_build.scss
+++ b/lms/static/certificates/sass/_build.scss
@@ -16,4 +16,5 @@
@import 'layouts';
@import 'views';
@import 'print';
+@import 'sdaia-template';
@import 'overrides';
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss
index 7784a52c4a5b..1dcad25502cf 100644
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -91,33 +91,35 @@
// message to user-centric banner
.wrapper-banner-user {
- box-shadow: inset 0 rem(2) rem(2) 0 $black;
- background: $gray-dark;
+ position: relative;
}
.banner-user {
.message-title {
- color: $white;
font-weight: 600;
margin-top: 0;
}
.message-copy {
- color: $white;
+ position: relative;
}
.message-actions .action {
- @include button-outline-variant($gray-x-back, $gray-dark);
-
+ background: $primary;
+ color: #fff;
padding: 0.625rem;
font-size: rem(14);
transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 5px;
cursor: pointer;
font-family: $font-family-sans;
font-weight: 600;
+ &:hover {
+ background: $secondary;
+ }
+
.icon {
@include margin-right(map-get($spacing-horizontal, x-small));
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
index c196d64d6ab3..e02edcf8d10c 100644
--- a/lms/static/certificates/sass/_config.scss
+++ b/lms/static/certificates/sass/_config.scss
@@ -16,6 +16,11 @@ $gray-transparent: rgba(65, 65, 65, 0.5);
$primary-accent: rgba(41, 145, 195, 100);
$primary-back: rgba(204, 227, 240, 100);
+$body-bg: #f9f8f5;
+$primary: #1c355e;
+$secondary: #ea6852;
+$success: #31b994;
+
// certificate characteristics
$cert-base-color: $gray-dark;
$cert-distinguished-color: $primary-accent;
@@ -121,9 +126,31 @@ $font-path: '../../certificates/fonts';
url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
}
+@font-face {
+ font-family: 'DIN Next LT Arabic';
+ src: url('#{$font-path}/Din/DIN-Next-LT-Arabic-Medium.woff2') format('woff2'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Medium.woff') format('woff'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Medium.ttf') format('truetype'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Medium.eot') format('truetype'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Medium.svg#din-next-lt-arabic-medium') format('svg');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'DIN Next LT Arabic';
+ src: url('#{$font-path}/Din/DIN-Next-LT-Arabic-Bold.woff2') format('woff2'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Bold.woff') format('woff'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Bold.ttf') format('truetype'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Bold.eot') format('truetype'),
+ url('#{$font-path}/Din/DIN-Next-LT-Arabic-Bold.svg#din-next-lt-arabic-bold') format('svg');
+ font-weight: 700;
+ font-style: normal;
+}
+
// typography: config - stacks
$font-family-serif: 'Domine', serif;
-$font-family-sans: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+$font-family-sans: "DIN Next LT Arabic", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
// vertical spacing
$baseline-vertical: 2.5rem !default;
diff --git a/lms/static/certificates/sass/_sdaia-template.scss b/lms/static/certificates/sass/_sdaia-template.scss
new file mode 100644
index 000000000000..b1522e0ccda4
--- /dev/null
+++ b/lms/static/certificates/sass/_sdaia-template.scss
@@ -0,0 +1,252 @@
+html {
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+a {
+ background-color: transparent;
+}
+
+b,
+strong {
+ font-weight: 500;
+}
+
+img {
+ border-style: none;
+ max-width: 100%;
+ height: auto;
+}
+
+.hidden,
+[hidden] {
+ display: none;
+}
+
+.text-primary {
+ color: $success;
+}
+
+.text-secondary {
+ color: $secondary;
+}
+
+
+.certificate-wrapper {
+ background: url(../images/certificate-bg.png) no-repeat;
+ background-size: 100% 100%;
+ padding: 174px 11.9% 179px;
+ color: $primary;
+ font-weight: 500;
+ margin: 0 auto;
+ line-height: 1.15;
+
+ @include media-breakpoint-down(sm) {
+ padding: 100px 11.9%;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+}
+
+.certificate-wrapper * {
+ box-sizing: border-box;
+}
+
+.certificate-header {
+ overflow: hidden;
+ padding: 0 0 66px;
+
+ @include media-breakpoint-down(sm) {
+ padding: 0;
+ }
+
+ img {
+ vertical-align: middle;
+
+ @include media-breakpoint-down(sm) {
+ width: 120px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ display: block;
+ margin: 0 auto 10px;
+ }
+
+ &.sdaia-academy-logo {
+ @include margin-right(19px);
+
+ @include media-breakpoint-down(sm) {
+ width: 150px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ @include margin-right(auto);
+ }
+ }
+ }
+}
+
+.certificate-header-col {
+ float: right;
+ padding: 0 12px 0 0;
+
+ @include media-breakpoint-down(sm) {
+ float: none;
+ padding: 0 0 10px;
+ text-align: center;
+ }
+
+ &:first-child {
+ float: left;
+ padding: 2px 0 0 115px;
+
+ @include media-breakpoint-down(md) {
+ padding: 2px 0 0 47px;
+ }
+
+ @include media-breakpoint-down(sm) {
+ float: none;
+ padding: 0 0 10px;
+ text-align: center;
+ }
+ }
+}
+
+.certificate-heading {
+ padding: 0 0 33px;
+
+ @include media-breakpoint-down(sm) {
+ padding: 0;
+ }
+
+ h1 {
+ font-size: 71px;
+ margin: 0 0 17px;
+
+ @include media-breakpoint-down(sm) {
+ font-size: 40px;
+ }
+ }
+
+ .subtitle {
+ display: block;
+ font-size: 27px;
+ margin: 0 0 30px;
+
+ @include media-breakpoint-down(sm) {
+ font-size: 22px;
+ margin: 0 0 15px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ font-size: 18px;
+ }
+ }
+}
+
+.certificate-body { text-align: center; }
+
+.certificate-main {
+ overflow: hidden;
+
+ p,
+ h2 {
+ margin: 0 0 30px;
+ font-size: 38px;
+ font-weight: 500;
+
+ @include media-breakpoint-down(sm) {
+ margin: 0 0 15px;
+ font-size: 20px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ margin: 0 0 10px;
+ font-size: 18px;
+ }
+ }
+
+ .sub-title,
+ .main-title {
+ margin: 0 0 34px;
+
+ @include media-breakpoint-down(sm) {
+ margin: 0 0 20px;
+ }
+ }
+
+ .limited-text {
+ max-width: 900px;
+ margin: 0 auto 97px;
+ text-align: right;
+
+ @include media-breakpoint-down(sm) {
+ margin: 0 0 40px;
+ }
+
+ @include media-breakpoint-down(xs) {
+ margin: 0 0 20px;
+ }
+
+ .text-secondary {
+ margin: 0 13px;
+
+ @include media-breakpoint-down(sm) {
+ margin: 0 6px;
+ }
+ }
+ }
+}
+
+@media print {
+ body {
+ margin: 0;
+ }
+
+ .certificate-header-col {
+
+ &:first-child {
+ padding-left: 100px;
+ }
+ }
+
+ .certificate-header {
+ padding: 0 0 40px;
+ }
+
+ .certificate-heading {
+ padding: 0;
+
+ h1 {
+ font-size: 50px;
+ }
+ }
+
+ .certificate-main {
+
+ p,
+ h2 {
+ margin: 0 0 25px;
+ font-size: 30px;
+ font-weight: 500;
+ }
+
+ .main-title {
+ margin: 0 0 25px;
+ }
+
+ .limited-text {
+ margin: 0 auto 50px;
+ }
+ }
+
+ .certificate-wrapper {
+ padding: 120px 11.9%;
+ }
+}
diff --git a/lms/static/images/certificate-bg.png b/lms/static/images/certificate-bg.png
deleted file mode 100644
index e73e42191a3c..000000000000
Binary files a/lms/static/images/certificate-bg.png and /dev/null differ
diff --git a/lms/static/sdaia_css/styles.css b/lms/static/sdaia_css/styles.css
deleted file mode 100644
index 62c8e6612612..000000000000
--- a/lms/static/sdaia_css/styles.css
+++ /dev/null
@@ -1,144 +0,0 @@
-@font-face {
- font-family: 'DIN Next LT Arabic';
- src: url('./fonts/DIN-Next-LT-Arabic-Medium.woff2') format('woff2'),
- url('./fonts/DIN-Next-LT-Arabic-Medium.woff') format('woff'),
- url('./fonts/DIN-Next-LT-Arabic-Medium.ttf') format('truetype'),
- url('./fonts/DIN-Next-LT-Arabic-Medium.eot') format('truetype'),
- url('./fonts/DIN-Next-LT-Arabic-Medium.svg#din-next-lt-arabic-medium') format('svg');
- font-weight: 500;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'DIN Next LT Arabic';
- src: url('./fonts/DIN-Next-LT-Arabic-Bold.woff2') format('woff2'),
- url('./fonts/DIN-Next-LT-Arabic-Bold.woff') format('woff'),
- url('./fonts/DIN-Next-LT-Arabic-Bold.ttf') format('truetype'),
- url('./fonts/DIN-Next-LT-Arabic-Bold.eot') format('truetype'),
- url('./fonts/DIN-Next-LT-Arabic-Bold.svg#din-next-lt-arabic-bold') format('svg');
- font-weight: 700;
- font-style: normal;
-}
-
-html {
- line-height: 1.15; /* 1 */
- -webkit-text-size-adjust: 100%; /* 2 */
- background: #030318;
-}
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-a {
- background-color: transparent;
-}
-
-b,
-strong {
- font-weight: 500;
-}
-
-img {
- border-style: none;
- max-width: 100%;
- height: auto;
-}
-
-.hidden,
-[hidden] {
- display: none;
-}
-
-body {
- margin: 0;
- color: #1c355e;
- background: #030318;
- font-family: 'DIN Next LT Arabic', 'Open Sans', Arial, sans-serif;
- font-weight: 500;
-}
-
-.text-primary {
- color: #31b994;
-}
-
-.text-secondary {
- color: #ea6852;
-}
-
-.sdaia-academy-logo {
- margin-right: 19px;
-}
-
-.certificate-wrapper {
- background: url(../images/certificate-bg.png) no-repeat;
- background-size: 100% 100%;
- padding: 174px 11.9% 179px;
- margin: 0 auto;
-}
-
-.certificate-header {
- overflow: hidden;
- padding: 0 0 66px;
-}
-
-.certificate-header img {
- vertical-align: middle;
-}
-
-.certificate-header-col {
- float: right;
- padding: 0 12px 0 0;
-}
-
-.certificate-header-col:first-child {
- float: left;
- padding: 2px 0 0 115px;
-}
-
-.certificate-heading {
- padding: 0 0 33px;
-}
-
-.certificate-heading h1 {
- font-size: 71px;
- margin: 0 0 17px;
-}
-
-.certificate-heading .subtitle {
- display: block;
- font-size: 27px;
- margin: 0 0 30px;
-}
-
-.certificate-body {
- text-align: center;
-}
-
-.certificate-main { overflow: hidden; }
-
-.certificate-main p,
-.certificate-main h2 {
- margin: 0 0 30px;
- font-size: 38px;
- font-weight: 500;
-}
-
-.certificate-main .main-title {
- margin: 0 0 34px;
-}
-
-.certificate-main .sub-title {
- margin: 0 0 34px;
-}
-
-.certificate-main .limited-text {
- max-width: 900px;
- margin: 0 auto 97px;
- text-align: right;
-}
-
-.limited-text .text-secondary {
- margin: 0 13px;
-}
diff --git a/lms/templates/certificates/_accomplishment-rendering.html b/lms/templates/certificates/_accomplishment-rendering.html
index bda7dd167ba4..1bdae34c8075 100644
--- a/lms/templates/certificates/_accomplishment-rendering.html
+++ b/lms/templates/certificates/_accomplishment-rendering.html
@@ -6,7 +6,6 @@
-
SDAIA Academy - Certificate of completion