From f08bbda621863ebb2b43d38ec508a7ec8074f578 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Thu, 30 Jun 2016 17:00:56 +0100 Subject: [PATCH] Overhauled Certificates --- server/views/certificate/back-end.jade | 42 ++++- server/views/certificate/data-vis.jade | 42 ++++- server/views/certificate/font.jade | 45 ----- server/views/certificate/front-end.jade | 42 ++++- server/views/certificate/full-stack.jade | 42 ++++- server/views/certificate/index.jade | 7 - server/views/certificate/script.jade | 8 - server/views/certificate/styles.jade | 208 +++++++++++++++++++++++ 8 files changed, 352 insertions(+), 84 deletions(-) delete mode 100644 server/views/certificate/font.jade delete mode 100644 server/views/certificate/index.jade delete mode 100644 server/views/certificate/script.jade create mode 100644 server/views/certificate/styles.jade diff --git a/server/views/certificate/back-end.jade b/server/views/certificate/back-end.jade index 2b45d7a9d0..d6bc7e288b 100644 --- a/server/views/certificate/back-end.jade +++ b/server/views/certificate/back-end.jade @@ -1,6 +1,36 @@ -include font -#name.cert-name= name -img#cert.img-abs(src='//i.imgur.com/yBKoMVP.jpg') -.cert-date= date -.cert-link verify this certification at: http://freecodecamp.com/#{username}/back-end-certification -include script +meta(name='viewport', content='width=device-width, initial-scale=1') +link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css') +include styles + +.certificate-wrapper.container + .row + header + .col-md-5.col-sm-12 + .logo + img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo") + .col-md-7.col-sm-12 + .issue-date Issued + strong #{date} + + section.information + .information-container + h3 This certifies that + h1 + strong= name + h3 has successfully completed the + h1 + strong Back End Development Projects + h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates) + + footer + .row.signatures + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature") + p + strong Quincy Larson + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature") + p + strong Michael D. Johnson + .row + p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/back-end-certification diff --git a/server/views/certificate/data-vis.jade b/server/views/certificate/data-vis.jade index 68ab41883e..7efcb0064b 100644 --- a/server/views/certificate/data-vis.jade +++ b/server/views/certificate/data-vis.jade @@ -1,6 +1,36 @@ -include font -#name.cert-name= name -img#cert.img-abs(src='//i.imgur.com/l7tIptn.jpg') -.cert-date= date -.cert-link verify this certification at: http://freecodecamp.com/#{username}/data-visualization-certification -include script +meta(name='viewport', content='width=device-width, initial-scale=1') +link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css') +include styles + +.certificate-wrapper.container + .row + header + .col-md-5.col-sm-12 + .logo + img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo") + .col-md-7.col-sm-12 + .issue-date Issued + strong #{date} + + section.information + .information-container + h3 This certifies that + h1 + strong= name + h3 has successfully completed the + h1 + strong Data Visualization Projects + h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates) + + footer + .row.signatures + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature") + p + strong Quincy Larson + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature") + p + strong Michael D. Johnson + .row + p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/data-visualization-certification diff --git a/server/views/certificate/font.jade b/server/views/certificate/font.jade deleted file mode 100644 index 54b76b935f..0000000000 --- a/server/views/certificate/font.jade +++ /dev/null @@ -1,45 +0,0 @@ -style. - @font-face { - font-family: "Sax Mono"; - src: url("/fonts/saxmono.ttf") format("truetype"); - } - - body { - display: inline-block; - font-family: "Sax Mono", monospace; - margin: 0; - position: absolute; - text-align: center; - } - - .img-abs { - left 0; - position: relative; - top: 0; - width: 2000px - } - - .cert-name { - font-size: 64px; - left: 1000px; - position: absolute; - top: 704px; - z-index: 1000; - } - - .cert-date { - font-size: 60px; - left: 760px; - position: absolute; - top: 1004.8px; - z-index: 1000; - } - - .cert-link { - font-size: 22px; - left: 120px; - position: absolute; - top: 1488px; - z-index: 1000; - } - diff --git a/server/views/certificate/front-end.jade b/server/views/certificate/front-end.jade index 436d88b126..4186cbb436 100644 --- a/server/views/certificate/front-end.jade +++ b/server/views/certificate/front-end.jade @@ -1,6 +1,36 @@ -include font -#name.cert-name= name -img#cert.img-abs(src='//i.imgur.com/ToFZKBd.jpg') -.cert-date= date -.cert-link verify this certification at: http://freecodecamp.com/#{username}/front-end-certification -include script +meta(name='viewport', content='width=device-width, initial-scale=1') +link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css') +include styles + +.certificate-wrapper.container + .row + header + .col-md-5.col-sm-12 + .logo + img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo") + .col-md-7.col-sm-12 + .issue-date Issued + strong #{date} + + section.information + .information-container + h3 This certifies that + h1 + strong= name + h3 has successfully completed the + h1 + strong Front End Development Projects + h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates) + + footer + .row.signatures + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature") + p + strong Quincy Larson + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature") + p + strong Michael D. Johnson + .row + p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/front-end-certification diff --git a/server/views/certificate/full-stack.jade b/server/views/certificate/full-stack.jade index 33fed4a85d..c2517db5b4 100644 --- a/server/views/certificate/full-stack.jade +++ b/server/views/certificate/full-stack.jade @@ -1,6 +1,36 @@ -include font -#name.cert-name= name -img#cert.img-abs(src='//i.imgur.com/Z4PgjBQ.jpg') -.cert-date= date -.cert-link verify this certification at: http://freecodecamp.com/#{username}/full-stack-certification -include script +meta(name='viewport', content='width=device-width, initial-scale=1') +link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css') +include styles + +.certificate-wrapper.container + .row + header + .col-md-5.col-sm-12 + .logo + img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo") + .col-md-7.col-sm-12 + .issue-date Issued + strong #{date} + + section.information + .information-container + h3 This certifies that + h1 + strong= name + h3 has successfully completed the + h1 + strong Full Stack Development Projects + h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates) + + footer + .row.signatures + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature") + p + strong Quincy Larson + .col-md-6 + img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature") + p + strong Michael D. Johnson + .row + p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/full-stack-certification diff --git a/server/views/certificate/index.jade b/server/views/certificate/index.jade deleted file mode 100644 index 51e0294db2..0000000000 --- a/server/views/certificate/index.jade +++ /dev/null @@ -1,7 +0,0 @@ -extends ../layout -block content - .panel.panel-info - .panel-heading.text-center - h1 Certificate - .panel-body - p foo diff --git a/server/views/certificate/script.jade b/server/views/certificate/script.jade deleted file mode 100644 index ccb83323c5..0000000000 --- a/server/views/certificate/script.jade +++ /dev/null @@ -1,8 +0,0 @@ -script. - (function() { - var containerWidth = document.getElementById('cert').offsetWidth; - var nameDiv = document.getElementById('name'); - var nameWidth = nameDiv.offsetWidth; - console.log(containerWidth, nameWidth); - nameDiv.style.left = ((containerWidth - nameWidth) / 2) + 15; - })(); diff --git a/server/views/certificate/styles.jade b/server/views/certificate/styles.jade new file mode 100644 index 0000000000..b9dcc31195 --- /dev/null +++ b/server/views/certificate/styles.jade @@ -0,0 +1,208 @@ +style. + @media print { + * { + display: none !important; + } + } + + @font-face { + font-family: "Sax Mono"; + src: url("/fonts/saxmono.ttf") format("truetype"); + } + + * { + margin: 0; + padding: 0; + } + + .container { + max-width: 1500px; + width: 100%; + padding: 30px; + border: darkgreen 15px solid; + border-radius: 3px; + } + + .row { + margin: 0; + } + + .col-sm-12 { + padding: 0; + } + + .certificate-wrapper { + top: 0; + position: relative; + font-family: "Sax Mono", monospace; + } + + header { + width: 100%; + height: 140px; + /*background-image: url('https://i.imgur.com/1FK6aaN.png'); + background-repeat: no-repeat; + background-position: top; + background-size: cover;*/ + background-color: darkgreen; + } + + .logo { + display: flex; + align-items: center; + height: 140px; + margin-left: 100px; + } + + .logo img { + max-width: 500px; + width: 100%; + } + + .issue-date { + line-height: 140px; + font-size: 20px; + text-align: right; + margin-right: 100px; + color: #fff; + } + + .information { + margin-top: -20px; + height: 380px; + background-color: #efefef; + } + + .information-container { + position: relative; + top: 50%; + transform: translateY(-50%); + margin: 0px 100px; + } + + p { + margin: 0; + } + + h3 { + font-size: 30px; + } + + h4 { + margin-top: 25px; + font-size: 20px; + } + + h1 { + font-size: 40px; + color: #006400; + } + + .signatures .col-md-6 { + text-align: center; + margin: 0 auto; + background-color: #efefef; + } + + .signatures img { + max-width: 300px; + width: 100%; + margin: 0 auto; + } + + .signatures p { + font-size: 18px; + padding-top: 10px; + } + + .verify { + padding: 30px 0; + font-size: 15px; + text-align: center; + word-wrap: break-word; + background-color: #efefef; + } + + /*adds vertical alignment when the height is bigger than required to display everything*/ + @media screen and (min-height: 700px) { + body { + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; + } + } + + /*mobile media queries*/ + @media screen and (max-width: 992px) { + header { + height: 160px; + } + + .logo { + margin-left: 0; + padding: 20px; + justify-content: center; + height: 80px; + } + + .logo img { + margin-top: 20px; + } + + .issue-date { + margin-top: 10px; + margin-right: 0; + text-align: center; + line-height: 0px; + word-wrap: break-word; + } + + .issue-date strong { + display: block; + margin-top: 15px; + line-height: 25px; + } + + .information { + height: 300px; + } + + .information-container { + margin: 0px 15px; + text-align: center; + word-wrap: break-word; + } + + h3 { + font-size: 25px; + } + + h1 { + font-size: 28px; + } + } + + @media screen and (max-width: 350px) { + .container { + padding: 0; + border: 0; + } + + header { + height: 190px; + } + + h3 { + font-size: 15px; + } + + h1 { + font-size: 17px; + } + + h4 { + font-size: 15px; + margin-top: 20px; + } + }