35
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + − Line 25:
Line 24: − − − var randX = randomDoubleFromInterval((-30),(-20)); − − var randY = randomDoubleFromInterval((20),(30)); − − − $(".link-box")[0].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)"; − − randAngle = randomDoubleFromInterval((-3),(3)); − − randX = randomDoubleFromInterval((-30),(-20)); − − randY = randomDoubleFromInterval((20),(30)); − − $(".link-box")[1].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)"; − − } − − function selectTab(selectedTab) { − − $("div.page-content-container").hide(); − − $("div#"+selectedTab.id+".page-content-container").show(); − − $("div.tab-style").removeClass("selected"); − − selectedTab.classList.add("selected"); − − − //animateLinkBox(); − − } − − function randomDoubleFromInterval(min,max) // min and max included − − { − − return Math.random()*(max-min+1)+min; − − } − − $(document).ready(function(){ − − animateLinkBox(); − − }) − − − </script> − − <style> − − <nowiki>*</nowiki>, *:before, *:after { − − box-sizing: border-box; /* Set all sizing to include border size */ − − } − − .grid-container { − − display: grid; − − grid-template-columns: [col1-start] 1fr [col1-end col2-start] 10px [col2-end col3-start] 1fr [col3-end col4-start] 2fr [col4-end]; − − grid-template-rows: [row1-start] 1fr [row1-end row2-start] auto [row2-end row3-start] auto [row3-end]; − − − display: -ms-grid; − − -ms-grid-columns: 1fr 10px 1fr 2fr; − − -ms-grid-rows: 1fr auto auto; − − } − − .btn { − − border: 2px solid black; − − background-color: white; − − color: black; − − padding: 14px 28px; − − font-size: 16px; − − cursor: pointer; − − } − − .links{ − − border-color: #BB1B8D; − − color: black; − − } − − .links:hover { − − background-color: #BB1B8D; − − color: white; − − } − − .tab-style { − − border-top-right-radius: 10px; − − border-top-left-radius: 10px; − − /* Unselected tab background and font colour */ − − background: #e0e0ba; − − color: black; − − − /* Unselected tab margin and padding */ − − padding: 10px 20px; − − − min-width: 250px; − − − − /* Unselected tab font size, and weight*/ − − font-size:20px; − − font-weight: bold; − − font-family: sans-serif; − − text-align: center; − − line-height: initial; − − overflow:hidden; − − cursor:pointer; − − box-shadow: 0 5px 0 #e0e0ba, 0 0 1px #333; − − − transition: opacity 0.25s ease-out; − − } − − .tab-style:hover { /* Label hover effect */ − − box-shadow: 0 5px 0 #000000, 0 0 5px #888; − − } − − .selected { − − background-color: #fcfccf; − − color: black; − − − /*border-left: 1px solid #333333; − − border-right: 1px solid #333333; − − border-top: 1px solid #333333; − − border-bottom: 0;*/ − − − box-shadow: 0 5px 0 #fcfccf, 0 0 5px #888; − − z-index: 1; − − } − − .tab1 { − − grid-column-start: col1-start; − − grid-column-end: col1-end; − − grid-row-start: row2-start; − − grid-row-end: row2-end; − − − -ms-grid-column: 1; − − -ms-grid-column-span: 1; − − -ms-grid-row: 2; − − -ms-grid-row-span: 1; − − } − − div.tab-style>p.tab1-label { − − margin: 0; − − background: white; − − border-top: 10px solid black; − − border-radius: 5px; − − padding: 8px; − − − box-shadow: − − 0px 1px 1px rgba(000,000,000,0.5), − − inset 0px 0px 2px rgba(255,255,255,1); − − } − − .tab2 { − − grid-column-start: col3-start; − − grid-column-end: col3-end; − − grid-row-start: row2-start; − − grid-row-end: row2-end; − − − -ms-grid-column: 3; − − -ms-grid-column-span: 1; − − -ms-grid-row: 2; − − -ms-grid-row-span: 1; − − } − − div.tab-style>p.tab2-label { − − margin: 0; − − background: white; − − border-top: 10px solid black; − − border-radius: 5px; − − padding: 8px; − − − box-shadow: − − 0px 1px 1px rgba(000,000,000,0.5), − − inset 0px 0px 2px rgba(255,255,255,1); − − } − − .tab-gap1 { − − grid-column-start: col2-start; − − grid-column-end: col2-end; − − grid-row-start: row2-start; − − grid-row-end: row2-end; − − /*border-bottom: 1px solid #333333;*/ − − − -ms-grid-column: 2; − − -ms-grid-column-span: 1; − − -ms-grid-row: 2; − − -ms-grid-row-span: 1; − − } − − .tab-gap2 { − − grid-column-start: col4-start; − − grid-column-end: col4-end; − − grid-row-start: row2-start; − − grid-row-end: row2-end; − − /*border-bottom: 1px solid #333333;*/ − − − -ms-grid-column: 4; − − -ms-grid-column-span: 1; − − -ms-grid-row: 2; − − -ms-grid-row-span: 1; − − } − − .page-content-container { − − grid-column-start: col1-start; − − grid-column-end: col4-end; − − grid-row-start: row3-start; − − grid-row-end: row3-end; − − − -ms-grid-column: 1; − − -ms-grid-column-span: 4; − − -ms-grid-row: 3; − − -ms-grid-row-span: 1; − − − display: grid; − − grid-template-columns: [col1-start] 3fr [col1-end col2-start] 1fr [col2-end]; − − grid-template-rows: [row1-start] 300px [row1-end row2-start] auto [row2-end]; − − − display: -ms-grid; − − -ms-grid-columns: 3fr 1fr; − − -ms-grid-rows: 300px auto; − − − − border-top-right-radius: 7px; − − /*border-bottom-right-radius: 7px; − − border-bottom-left-radius: 7px;*/ − − /*border-left: 1px solid #333333; − − border-right: 1px solid #333333; − − border-bottom: 1px solid #333333;*/ − − − box-shadow: 0 0 5px #888; − − background-color: #fcfccf; − − } − − .page-content-back { − − grid-column-start: col1-start; − − grid-column-end: col2-end; − − grid-row-start: row1-start; − − grid-row-end: row2-end; − − − -ms-grid-column: 1; − − -ms-grid-column-span: 2; − − -ms-grid-row: 1; − − -ms-grid-row-span: 2; − − − padding: 20px; − − margin: 15px; − − background: #FFFFF9; − − box-shadow: − − 0px 1px 3px rgba(000,000,000,0.5), − − inset 0px 0px 2px rgba(255,255,255,1); − − } − − .page-content { − − grid-column-start: col1-start; − − grid-column-end: col1-end; − − grid-row-start: row1-start; − − grid-row-end: row2-end; − − − -ms-grid-column: 1; − − -ms-grid-column-span: 1; − − -ms-grid-row: 1; − − -ms-grid-row-span: 2; − − − padding: 20px; − − margin: 15px; − − } − − .page-content-style { − − font-family: sans-serif; − − /*font-weight: ;*/ − − font-size: 1.1em; − − } − − div .page-content-header-style { − − font-family: sans-serif; − − font-weight: bold; − − font-size: 1.3em; − − margin: 0; − − border: 0; − − } − − .page-content-rule-style { − − border-width: 2px; − − border-color: black; − − margin: 0; − − margin-bottom: 10px; − − } − − .link-box { − − grid-column-start: col2-start; − − grid-column-end: col2-end; − − grid-row-start: row1-start; − − grid-row-end: row1-end; − − − -ms-grid-column: 2; − − -ms-grid-column-span: 1; − − -ms-grid-row: 1; − − -ms-grid-row-span: 1; − − − /*border: 2px solid black; − − border-radius: 5px;*/ − − margin: 25px; − − box-shadow: − − 0px 1px 3px rgba(000,000,000,0.5), − − inset 0px 0px 2px rgba(255,255,255,1); − − − − transform: translateY(5px); − − } − − .link-box-style { − − padding: 10px; − − font-size: 1.2em; − − font-family: sans-serif; − − background-color: #ffff88; − − } − − .link-box>ul, − − div.page-content-style>ul, − − .checklist-style>ul, − − td.table-content-style>ul{ − − list-style: none; − − } − − .link-box>ul>li:before, − − div.page-content-style>ul>li:before, − − .table-content-style>ul>li:before{ − − content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ − − color: black; /* Change the color */ − − font-weight: bold; /* If you want it to be bold */ − − font-size: 1.2em; − − display: inline-block; /* Needed to add space between the bullet and the text */ − − width: 1em; /* Also needed for space (tweak if needed) */ − − margin-left: -1em; /* Also needed for space (tweak if needed) */ − − vertical-align: middle; − − } − − .page-content-style .checklist-style>ul>li:before{ − − content: "\25A1"; /* Add content: \25A1 is the CSS Code/unicode for a square */ − − color: black; /* Change the color */ − − font-weight: bold; /* If you want it to be bold */ − − font-size: 1.5em; − − display: inline-block; /* Needed to add space between the bullet and the text */ − − width: 1em; /* Also needed for space (tweak if needed) */ − − margin-left: -1em; /* Also needed for space (tweak if needed) */ − − } − − .checklist-style>ul>li{ − − padding: 10px; − − } − − .title-container { − − grid-column-start: col1-start; − − grid-column-end: col4-end; − − grid-row-start: row1-start; − − grid-row-end: row1-end; − − − /*align-self: end;*/ − − − -ms-grid-column: 1; − − -ms-grid-column-span: 4; − − -ms-grid-row: 1; − − -ms-grid-row-span: 1; − − − /*-ms-grid-row-align: end;*/ − − } − − .title-content { − − text-align: center; − − font-size: 3em; − − text-transform: uppercase; − − font-weight: bold; − − /*text-shadow: 0.25vw 0.15vw grey;*/ − − font-family: sans-serif; − − } − − a.link-style { − − font-weight: bold; − − text-decoration: none; − − color: royalblue; − − } − − a.link-style:visited { − − color: royalblue; − − } − − a.link-style:hover { − − color: darkblue; − − text-shadow: − − 0px 1px 3px rgba(000,000,000,0.5), − − inset 0px 0px 2px rgba(255,255,255,1); − − } − − <nowiki>#</nowiki>onboardHeader, #onboardHeaderFR { − − background-size: contain; − − background-repeat: no-repeat; − − background-position: center; − − − width: 100%; − − height: 400px; − − } − − <nowiki>#</nowiki>onboardHeader { − − background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/2/2d/HSIBOnboardingHeader.jpg</nowiki>"); − − } − − <nowiki>#</nowiki>onboardHeaderFR { − − background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/0/0a/HSIBOnboardingHeaderFR.jpg</nowiki>"); − − } − − </style> − − <style> /* Style set to remove certain GCpedia elements from the page */ − − .firstHeading { − − display: none; − − } − − <nowiki>#</nowiki>contentSub { − − display: none; − − } − − <nowiki>#</nowiki>content { − − background-color: aliceblue; − − } − − </style> − − </head> − − </html> − − <!-- End of template for HSIB onboarding page --><div class="grid-container">[[File:Employee Welcome Kit Placemat - Test for GCwiki.pdf|thumb|Test for Wiki]] − [[File:2. Policy on COVID-19 Vaccination.docx|thumb|policy on COVID-19 vaccination]] − [[File:Employee Welcome Kit Placemat.pdf|thumb|Test]]
Replaced content with "<!-- Template for HSIB onboarding page --> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com..."
<!-- Template for HSIB onboarding page -->
<!--Employee Welcome Kit.Onboarding -->
<html>
<html>
//var randY = y[Math.floor(Math.random() * y.length)];
//var randY = y[Math.floor(Math.random() * y.length)];
