Revision as of 14:16, 15 April 2019

<head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>GCbootstrap - GCpedia, GCpedicure and Bootstrap</title>

   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

   <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>

</head>

</html> <html lang="en"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" lang="en"> <a class="navbar-brand" href="http://www.gcpedia.gc.ca/" style="padding-top:13px;"> <img src="http://www.gcpedia.gc.ca/gcwiki/images/1/1d/GcpediaNextGen.png" height="26" width="105" alt="GCpedia"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> </button>

</nav> </html>

</head>

<html>

Display 1

</html> <html> <section class="footer fixed-bottom">

Contact Information: <a href="mailto:marco.battilana@dfo-mpo.gc.ca" class="text-info"> Your Contact</a>

<a href="http://www.gcpedia.gc.ca/wiki/GCbootstrap">Powered by GCbootstrap</a>

</section>

   </section>

</body> </html> <html> <style> /* ===== core.css Purpose: To extend the wonderful GCpedicure (by Chris - Global Affairs Canada's Innolab) by being able to utilize default Bootstrap's common look and feel and retain GCpedia's functionality.

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada GCconnex: gcconnex.gc.ca/profile/crazybat Twitter: @crazybat

Revision History:

Version 1.0 (16 Oct 2018) - Using existing methodology of GCpedicure and having the added benefit of showing most of the default stylings of Bootstrap. You can now use Bootstrap framework directly - including almost all scripts, styles, etc.

Known Issues: - Need an easier way to add the Edit link (SOLVED! See override.css Version 1.0) - Incorporate existing GCpedia functionality: Language flipper, log in, etc. (SOLVED! See override.css Version 1.0)

Version 1.1 (31 Oct 2018) - Created override.css to bring back some of the default GCpedia functionality, language flipper, log in, etc.

Known Issues: - <multilang> does weird things to GCpedia include files. See if we can flip language using this. Otherwise, keep the built-in flipper for now.

References: GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure Bootstrap: getbootstrap.com

*/

html { position: relative; min-height: 100%; -ms-overflow-style: none; }

html, body { height: 100%; }

body { overflow-y: hidden; background-color: #fff; /*min-height: 75rem;*/ /*margin-top: 4.5rem;*/ /*margin-bottom: 4.5rem;*/ }

/* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */ .super-body {

 position: fixed;
 overflow-y: scroll;
 overflow-x: hidden;
 -ms-overflow-x: hidden;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10000;
 background-color: #fff;
 -webkit-overflow-scrolling: touch;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 /* moved from body as GCpedia renders it out */
 /*min-height: 75rem;
 margin-top: 4.5rem;
 margin-bottom: 4.5rem;*/

} /* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */

/* === GCbootstrap icon ===*/

icon-gcb {

position: absolute; display: block; /*bottom: 30px;*/ bottom: 22px; right: 23px; z-index: 10005; }

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */ div#mw-head {

 position: absolute;
 top: 145px;
 right: 0;
 width: 100%;
 display: none;

} div#mw-panel {

 position: absolute;
 top: 160px;
 padding-top: 1em;
 width: 10em;
 left: 0;
 display: none;

}

footer {

 display: none;

}

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */

/* === Globals: Building rows, column for proper spaces and shading, inheriting font sizes, visibility, etc. === */

/* == For debugging only! Puts boxes around all grid elements == */ /*[class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); }*/

/* == Content container that's NOT a header, nav, or footer == */ div[role*="main"] {

 margin-top: 5em;
 margin-bottom: 4em;

}

@media screen { ul { list-style-image: inherit; margin-left: 0; } } @media screen { .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin-top: 0; } } @media screen { .mw-content-ltr nav ul, .mw-content-rtl .mw-content-ltr nav ul { margin-left: 0; } }

@media screen { .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { margin: inherit; padding: inherit; } } @media screen { .mw-content-ltr nav ol, .mw-content-rtl .mw-content-ltr nav ol { margin: inherit; padding: inherit; } } div[class*="container"] ul[class*="list-group"], div[class*="container"] ul[class*="nav"], div[class*="container"] ul[class*="pagination"] { margin-left: 0; }

input[type=checkbox], input[type=radio] { margin-left: 0; position: inherit; }

.collapse, .collapse .show {

 visibility: inherit;

}

.row {

 margin-bottom: 1rem;

}

.btn-primary {

 background-color: #007bff !important;

} .fade {

 opacity: inherit;

}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {

 font-family: inherit;
 margin-bottom: .25em;
 padding-bottom: 5px;
 padding-top: inherit;
 border-bottom: solid 1px transparent;

}

.mw-body-content {

 font-size: inherit;

}

@media screen { .mw-body h1 { font-size: 2.5rem; line-height: 1.2; margin-top: 0; } } @media screen { .mw-body h2 { font-size: 2rem; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h3 { font-size: 1.75rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h4 { font-size: 1.5rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h5 { font-size: 1.25rem; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h6 { font-size: 1rem; line-height: 1.2; margin-top: 0; } } .modal-backdrop { z-index: -1; }

/* == Main Navigation bar == */ .navbar {

 border-radius: 0;

}

.navbar-default {

 background-color: #fff;
 border-color: #e7e7e7;

}

.navbar-default .navbar-brand {

 color: #222;

}

.navbar-brand { padding: 0; }

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {

 color: #5e5e5e;
 background-color: transparent;

}

.navbar-default .navbar-text {

 color: #222;

}

.navbar-default .navbar-nav>li>a {

 color: #222;

}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {

 color: #111;
 background-color: transparent;

}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {

 color: #555;
 background-color: #e7e7e7;

}

.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:hover, .navbar-default .navbar-nav>.disabled>a:focus {

 color: #ccc;
 background-color: transparent;

}

.navbar-default .navbar-toggle {

 border-color: #ddd;

}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {

 background-color: #ddd;

}

.navbar-default .navbar-toggle .icon-bar {

 background-color: #888;

}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {

 border-color: #e7e7e7;

}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {

 color: #555;
 background-color: #e7e7e7;

}

@media (max-width: 767px) {

 .navbar-default .navbar-nav .open .dropdown-menu>li>a {

color: #777;

 }
 .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {

color: #333; background-color: transparent;

 }
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {

color: #555; background-color: #e7e7e7;

 }
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {

color: #ccc; background-color: transparent;

}

.navbar-default .navbar-link {

 color: #777;

}

.navbar-default .navbar-link:hover {

 color: #333;

}

.navbar-default .btn-link {

 color: #777;

}

.navbar-default .btn-link:hover, .navbar-default .btn-link:focus {

 color: #333;

}

.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus {

 color: #ccc;

}

.navbar-default .navbar-nav>li>a:visited {

 color: #222;

}

ul.dropdown-menu {

 padding: 0;

}

.dropdown-menu>li>a {

 display: block;
 padding: 15px 20px;
 clear: both;
 line-height: 1.42857143;
 color: #333;
 white-space: nowrap;
 border-bottom: 1px solid #e8e8e8;

}

/*= Pretty nav effects =*/ .nav-item::after{ content:; display:block; width:0px; height:2px; background:#a07dff; transition: 0.2s; } .nav-item:hover::after { width:100%; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color:#a07dff; } .nav-link { padding:15px 5px; transition:0.2s; } .dropdown-item.active, .dropdown-item:active { color:#212529; } .dropdown-item:focus, .dropdown-item:hover { background:#a07dff; }

/* == Cards, specific styles ==*/ .card { border: solid 1px #c8ced3; } .card-accent-primary {

   border-top-color: #20a8d8;
   border-top-width: 5px;

} .card-accent-secondary {

   border-top-color: #c8ced3;
   border-top-width: 5px;

} .card-accent-success {

   border-top-color: #4dbd74;
   border-top-width: 5px;

} .card-accent-danger {

   border-top-color: #f86c6b;
   border-top-width: 5px;

} .card-accent-warning {

   border-top-color: #ffc107;
   border-top-width: 5px;

} .card-accent-info {

   border-top-color: #63c2de;
   border-top-width: 5px;

} .card-accent-dark {

   border-top-color: #2f353a;
   border-top-width: 5px;

}

/* == Main Footer == */ .footer a, .footer a:link, .footer a:visited { color: #a07dff !important; } .footer a:focus, .footer a:hover, .footer a:active { color: #e7e7e7 !important; text-decoration: underline; } /* == Sticky bottom == */ .fixed-bottom {

 position: fixed;
 bottom: 0;
 width: 100%;
 height: 60px; /* Set the fixed height of the footer */
 line-height: 60px; /* Vertically center the text */
 background-color: #333;
 z-index: 10001;

}

@media (max-width: 767px) { .fixed-bottom { position: relative; bottom: none; width: 100%; height: 60px; /* Set the fixed height of the footer */ line-height: 60px; /* Vertically center the text */ background-color: #333; z-index: 10001; } }

/* === Content-specific styles ===*/ /* == Youtube Player styles == */

.youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; }

.youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; }

.youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; }

.youtube-player img:hover { -webkit-filter: brightness(75%); }

.youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://www.gcpedia.gc.ca/gcwiki/images/e/ef/Play-button.png") no-repeat; cursor: pointer; }

/*== Gallery ==*/ .thumbnail {

   position:relative;
   overflow:hidden;

}

.caption {

   position:absolute;
   top:-100%;
   right:0;
   background: rgba(102, 75, 229, 0.75);
   width:100%;
   height:100%;
   padding:2%;
   text-align:center;
   color:#fff !important;
   z-index:2;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;

} .thumbnail:hover .caption {

   top:0%;

}

/*== Personas ==*/ .our-team-main { width:100%; height:auto; border-top:5px #323233 solid; background:#fff; overflow:hidden; position:relative; transition:0.5s; margin-bottom:28px; } .our-team-main h3 { font-size:20px; font-weight:700; }

.our-team-main p { margin-bottom:0; }

.team-back { width:100%; height:auto; position:absolute; top:0; left:0; padding-right: 90px; text-align:left; background:#fff;

} .team-back img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

   filter: grayscale(100%);

filter: gray; }

.team-front { width:100%; height:auto; position:relative; z-index:10; background:#fff; bottom:0px; transition: all 0.5s ease; text-align:left; }

.our-team-main:hover .team-front { bottom:-300px; transition: all 0.5s ease; }

.our-team-main:hover { border-color:#777; transition:0.5s; }

/*== FAQs ==*/

accordian ul {

   margin-left: 35px;

}

accordion .card {

   border: medium none;
   border-radius: 0;
   box-shadow: none;
   margin: 0 0 15px 0;

}

accordion .card-header {

   border-radius: 30px;
   padding: 0;

background-color: none; border-bottom: none; border-top-color: #c8ced3;

   border-top-width: 5px;

}

accordion h5 {

background: #fff; margin-bottom: 0; padding: 5px 15px 5px 0; }

accordion .card-title a {

   background: #28a745 none repeat scroll 0 0;
   border: 1px solid transparent;
   border-radius: 5px;
   color: #fff;
   display: block;
   padding: 12px 20px 12px 60px;
   position: relative;
   transition: all 0.3s ease 0s;

}

accordion .card-title a.collapsed {

   background: #fff none repeat scroll 0 0;
   border: 1px solid #bbb;

border-top-color: #c8ced3;

   border-top-width: 5px;  
   color: #333;

}

accordion .card-title a::after {

   background: #28a745 none repeat scroll 0 0;
   border: 1px solid transparent;
   border-radius: 50%;
   color: #fff;
   content: '\02C5';
   height: 55px;
   left: -1px;
   line-height: 55px;
   position: absolute;
   text-align: center;
   top: -5px;
   transition: all 0.3s ease 0s;
   width: 55px;

}

accordion .card-title a.collapsed::after {

   background: #fff none repeat scroll 0 0;
   border: 1px solid #bbb;

box-shadow: none;

   color: #333;
   content: '\003E';

}

accordion .card-body {

   background: transparent none repeat scroll 0 0;
   border-top: medium none;
   padding: 20px 0 10px 9px;
   position: relative;

border: 1px solid #28a745; margin-right: 15px; }</style></html> <html> <style>

/* ===== override.css Purpose: To override the initial core.css styles.

Dependancy: - core.css (runs first) -- override.css (runs second)

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada Twitter: @crazybat

Revision History:

Version 1.0 (26 Oct 2018) - Brought in existing GCpedia functionality for pages. Uses same links, just styled and displayed different.

Known Issues: - Incorporate additional GCpedia functionality: Language flipper, log in, etc. (PARTIALLY SOLVED! Still need to bring over remaining GCpedia items) -- Search GCpedia -- Categories -- Others???

References: GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure Bootstrap: getbootstrap.com

*/

/* ==== To override the initial override from core.css. DO NOT REMOVE ==== */

/* === GCpedia Head content (Personal, GCpedia Tools) === */ div#mw-head {

 position: absolute;
 top: -145px;
 display: block;
 height: 0;

} div#mw-head #left-navigation, div#mw-head #right-navigation .pull-left, div#mw-head #right-navigation #p-cactions {

 display: none;

}

div#mw-head #p-personal { position: fixed; /*bottom: -97px;*/ bottom: -109px; /*right: 140px;*/ right: 82px; display: block; width: auto; }

/* == NOTE: The Eng / Fr button only changed the language of GCpedia UI, NOT YOUR CONTENT. ==*/ div#mw-head #right-navigation #p-views {

 position: fixed;
 /*bottom: -30px;*/
 bottom: -40px;
 display: block;
 right: 20px;

} div#mw-head #right-navigation #p-views ul { background: #eee;

   border: solid hsla(0, 0%, 96%, 0.5);
   transition: 0.2s;

border-top-left-radius: 10px; border-top-right-radius: 10px; } div#mw-head #p-personal ul { transition: 0.2s; }

div#mw-head #right-navigation #p-views ul::before { color: white; background: #222; display: block; float: right; margin-bottom: 5px; content: ' Views \A\A\A\A\A'; white-space: pre-wrap; position: relative; top: -30px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: solid 1px #777; padding: 0 5px; } div#mw-head #p-personal ul::before { color: white; background: #222; display: block; float: right; margin-bottom: 5px; content: ' Personal Tools \A\A\A\A'; white-space: pre-wrap; position: relative; top: -30px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: solid 1px #777; padding: 0 5px; }

div#mw-head #right-navigation #p-views:hover { bottom: 30px; transition: 0.2s; z-index: 10000; } div#mw-head #p-personal:hover { /*bottom: -35px;*/ bottom: -43px; transition: 0.2s; }

div#mw-head #right-navigation #p-views ul li, div#mw-head #p-personal ul li { background-image: none; background: #eee; height: 30px; text-align: center; }

div#mw-head #right-navigation #p-views ul li#ca-ve-edit { display: none; }

div#mw-head #right-navigation #p-search #simpleSearch { height: inherit; position: fixed; right: 16px; top: 29px; } /*TO DO Have search show on very small devices, but results don't show very well on older template. Staying invisible for now.*/ @media (max-width: 767px) { div#mw-head #right-navigation #p-search { display: none; } } @media screen { div#mw-head #right-navigation #p-search #simpleSearch #searchInput { font-size: inherit; padding: 0 0 0 5px; } } @media screen { div#mw-head #right-navigation #p-search #simpleSearch input { background-color: none; } }

@media screen { div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { background-color: #ccc; } }

.icon#ca-unfavorite a, .icon#ca-favorite a {

   padding-top: 2.3em;

}

@media screen { div.vectorTabs { background-image: none; background-image: none !ie; } } @media screen { div.vectorTabs span { display: inherit; background-image: none; background-image: none !ie; } } @media screen { div.vectorTabs ul { height: auto; } } @media screen { div.vectorTabs ul li { line-height: 0; } } @media screen { #p-personal { top: auto; background: #eee; border: solid hsla(0, 0%, 96%, 0.5); border-top-left-radius: 10px; border-top-right-radius: 10px; } } @media screen { #p-personal ul { padding-left: 0; } } @media screen { #p-personal li { font-size: 0.8em; padding: 0 0.375em; } }

/*TO DO: Figure out a way to make GCpedia tools not sticky on the footer with small resolutions. For now, don't show as it's hard to edit a GCpedia page with such a small window.*/ @media (max-width: 767px) { div#mw-head #right-navigation #p-views { display: none; } } @media (max-width: 767px) { div#mw-head #p-personal { display: none; } }

/* === GCpedia Left Navigation content === */ /* == Eng / Fr button (Used to flip the language of your CONTENT ==*/

div#mw-panel {

 position: absolute;
 left: -9999px;
 display: block;

}

div#mw-panel #p-lang .interlanguage-link { position: fixed; top: -2px; right: 17px; display: block; font-size: inherit; }

@media (max-width: 767px) { div#mw-panel #p-lang .interlanguage-link { position: fixed; /*top: -4px;*/ left: 0; width: 95px; height: 0px; } } div#mw-panel #p-lang .interlanguage-link a { color: #fff; /*padding: 15px;*/ padding-left: 71px; padding-right: 71px; line-height: 2.1rem; display: block; /*background: #333;*/ /*border: solid 1px #aaa;*/ font-weight: bold; } @media (max-width: 767px) { div#mw-panel #p-lang .interlanguage-link a { line-height: 0; padding-left: 10px; padding-right: 10px; display: inline; } } div#mw-panel #p-lang .interlanguage-link a::after { /*content:; display:block; width:0px; height:2px; background:#00d6fe; transition: 0.2s;*/ } div#mw-panel #p-lang .interlanguage-link a:hover::after { /*width:100%;*/ }

</style> </html>

@@ Line 1: / Line 1: @@
+<head>
 {{GCb-head-bootest-eng}}
 {{GCb-nav-bootest-eng}}
+</head>
 <html>

Difference between revisions of "Bootstrap Test"

Revision as of 14:16, 15 April 2019

Display 1

Navigation menu

Search