mirror of https://github.com/joomla/joomla-cms.git
[4.0] Cassiopeia Header/Banner Style (#18464)
* Cassiopeia header style * Add aria-hidden * Add font TODO / Remove weight * Include search in navbar countmodules * Correct search margin (<md) * Set variables * Move form-inline style to container-header
This commit is contained in:
Ciaran Walsh
George Wilson
parent
62b4cb4665
commit
a28ae9e310
Binary file not shown.
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 177 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400");
|
||||
#flying-focus {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
|
|
@ -135,7 +136,7 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
|
@ -3673,7 +3674,7 @@ button.close {
|
|||
z-index: 1070;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
|
@ -3754,7 +3755,7 @@ button.close {
|
|||
z-index: 1060;
|
||||
display: block;
|
||||
max-width: 276px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
|
@ -8378,8 +8379,9 @@ small,
|
|||
.wrapper0 .notify-alerts {
|
||||
margin-left: 0; }
|
||||
|
||||
.banner img {
|
||||
width: 100%; }
|
||||
.container-banner img {
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.8); }
|
||||
|
||||
.demo-module {
|
||||
text-align: center; }
|
||||
|
|
@ -8429,7 +8431,7 @@ small,
|
|||
.footer .back-top {
|
||||
padding: 8px 11px;
|
||||
color: #fff;
|
||||
background: #1c3d5c;
|
||||
background: #434178;
|
||||
border-radius: 3px; }
|
||||
|
||||
.form-control {
|
||||
|
|
@ -8500,78 +8502,97 @@ legend {
|
|||
.form-control-feedback {
|
||||
display: block; }
|
||||
|
||||
.header {
|
||||
.container-header {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 15px 0;
|
||||
background: #1c3d5c; }
|
||||
.header::after {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 10;
|
||||
background-color: #434178;
|
||||
background-image: linear-gradient(135deg, #112856 0%, #434178 100%);
|
||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset; }
|
||||
.container-header header {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background-color: #006898;
|
||||
background-image: linear-gradient(to right, #59afff 0%, #59daff 100%); }
|
||||
.header .site-description {
|
||||
max-width: 1155px;
|
||||
padding: 0 7.5px;
|
||||
margin: 0 auto; }
|
||||
.container-header nav {
|
||||
padding: 2.5rem 7.5px 4.5rem; }
|
||||
@media (min-width: 1200px) {
|
||||
.container-header nav {
|
||||
padding-bottom: 5.5rem; } }
|
||||
.container-header .site-description {
|
||||
font-size: 1rem;
|
||||
color: #fefefe; }
|
||||
.header .navbar-brand {
|
||||
.container-header .navbar-brand {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 3rem;
|
||||
margin-right: auto;
|
||||
font-size: 2rem;
|
||||
color: #fefefe; }
|
||||
.header .navbar-brand img {
|
||||
width: 200px;
|
||||
min-width: 200px; }
|
||||
.header .navbar-brand:hover, .header .navbar-brand:focus {
|
||||
.container-header .navbar-brand img {
|
||||
width: 290px;
|
||||
min-width: 290px; }
|
||||
.container-header .navbar-brand a {
|
||||
color: #fff; }
|
||||
.container-header .navbar-brand:hover, .container-header .navbar-brand:focus {
|
||||
color: #efefef; }
|
||||
.header .navbar-nav.flex-column {
|
||||
.container-header .navbar-nav.flex-column {
|
||||
flex-direction: row !important; }
|
||||
@media (max-width: 991px) {
|
||||
.header .navbar-nav.flex-column {
|
||||
flex-direction: column !important; } }
|
||||
.header .navbar-nav li {
|
||||
.container-header .navbar-nav.flex-column {
|
||||
flex-direction: column !important;
|
||||
margin-top: 20px; } }
|
||||
.container-header .navbar-collapse {
|
||||
flex-grow: 0; }
|
||||
.container-header .navbar-nav li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-bottom: 3px;
|
||||
margin-right: 20px; }
|
||||
.header .navbar-nav li:last-child {
|
||||
margin-right: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.75px; }
|
||||
.container-header .navbar-nav li:last-child {
|
||||
margin-right: 0; }
|
||||
.header .navbar-nav li::after {
|
||||
.container-header .navbar-nav li::after {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
margin: auto;
|
||||
content: "";
|
||||
background: transparent;
|
||||
transition: width .5s ease, background-color .5s ease; }
|
||||
opacity: .2;
|
||||
transition: all .2s ease, background-color .2s ease; }
|
||||
@media (max-width: 991px) {
|
||||
.header .navbar-nav li::after {
|
||||
.container-header .navbar-nav li::after {
|
||||
display: none; } }
|
||||
.header .navbar-nav li.active::after, .header .navbar-nav li:hover::after {
|
||||
width: 100%;
|
||||
.container-header .navbar-nav li.active::after, .container-header .navbar-nav li:hover::after {
|
||||
right: 2px;
|
||||
left: 0;
|
||||
background: #fff; }
|
||||
.header .navbar-nav li a {
|
||||
.container-header .navbar-nav li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5rem 0;
|
||||
padding: .25rem 0 0;
|
||||
color: #fff;
|
||||
text-decoration: none; }
|
||||
.header .navbar-toggler {
|
||||
.container-header .navbar-toggler {
|
||||
color: #fefefe;
|
||||
cursor: default;
|
||||
border: 1px solid #fefefe; }
|
||||
.header .navbar-toggler .fa {
|
||||
.container-header .navbar-toggler .fa {
|
||||
font-size: 24px; }
|
||||
.container-header .form-inline {
|
||||
margin-left: 1.5rem; }
|
||||
@media (max-width: 991px) {
|
||||
.container-header .form-inline {
|
||||
margin: 1rem 0; } }
|
||||
|
||||
.container-title {
|
||||
padding-top: 13px;
|
||||
padding-bottom: 13px;
|
||||
color: #fff;
|
||||
background-color: #1c3d5c; }
|
||||
background-color: #434178; }
|
||||
.container-title .row {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
|
@ -8585,7 +8606,26 @@ legend {
|
|||
margin-right: 12px;
|
||||
margin-left: 5px;
|
||||
font-size: 1.857rem;
|
||||
color: #285783; }
|
||||
color: #555399; }
|
||||
|
||||
.header-shadow {
|
||||
display: none; }
|
||||
.container-banner + .header-shadow {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 180px;
|
||||
content: "";
|
||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%); }
|
||||
|
||||
.header-shape-bottom {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
border-bottom: 20px solid #fff; }
|
||||
|
||||
.icon-back::before {
|
||||
content: "\e008"; }
|
||||
|
|
@ -8610,6 +8650,7 @@ iframe {
|
|||
|
||||
body > div,
|
||||
body header > nav,
|
||||
body .container-banner,
|
||||
body footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -8810,7 +8851,7 @@ joomla-alert {
|
|||
@supports (display: grid) {
|
||||
.site-grid {
|
||||
display: grid;
|
||||
grid-template-areas: ". head head head head ."
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". main main main main ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". footer footer footer footer ."
". debug debug debug debug .";
|
||||
grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". main main main main ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug .";
|
||||
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
|
||||
grid-gap: 0 15px; }
|
||||
.site-grid > div {
|
||||
|
|
@ -8828,17 +8869,23 @@ joomla-alert {
|
|||
grid-column: full-start / full-end; }
|
||||
@media (max-width: 575px) {
|
||||
.site-grid {
|
||||
grid-template-areas: ". head head head head ."
". banner banner banner banner ."
". main main main main ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". footer footer footer footer ."
". debug debug debug debug ."; } }
|
||||
.site-grid header {
|
||||
margin-bottom: 0; }
|
||||
.site-grid header + div:not(.container-banner) {
|
||||
grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". main main main main ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug ."; } }
|
||||
.site-grid .container-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px; }
|
||||
.site-grid .container-header + div:not(.container-banner) {
|
||||
margin-top: 15px; }
|
||||
.container-banner {
|
||||
margin: 0 0 15px; }
|
||||
z-index: 5;
|
||||
margin: -2rem 0 0;
|
||||
padding: 0 7.5px; }
|
||||
.container-banner p {
|
||||
margin-bottom: 0; } }
|
||||
margin-bottom: 0; }
|
||||
@media (min-width: 1200px) {
|
||||
.container-banner {
|
||||
margin-top: -3rem; } } }
|
||||
|
||||
header {
|
||||
.container-header {
|
||||
grid-area: head; }
|
||||
|
||||
.container-banner {
|
||||
|
|
@ -9090,7 +9137,7 @@ header {
|
|||
.nav.nav-tabs .nav-link {
|
||||
position: relative;
|
||||
padding: .75em 1em;
|
||||
color: #1c3d5c;
|
||||
color: #434178;
|
||||
border: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,45 +1,11 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 376.3 74.8" enable-background="new 0 0 376.3 74.8" xml:space="preserve">
|
||||
<g id="logo">
|
||||
<path fill="#FFFFFF" d="M116.4,14.8v31.3c0,2.8,0.2,5.4-2.3,7.3c-2.3,1.9-6.2,2.5-10.4,2.5c-6.4,0-13.2-1.5-13.2-1.5l-1.5,4
|
||||
c0,0,9.5,2,16.4,2.1c5.8,0.1,10.9-1.2,13.7-4.4c2.3-2.6,3-5.6,2.9-10.7V14.8H116.4"/>
|
||||
<path fill="#FFFFFF" d="M163.1,32.1c-4.2-2.3-9.3-3.5-15.1-3.5c-5.7,0-10.8,1.2-15.1,3.5h0c-5.4,2.9-8.1,7.2-8.1,12.6
|
||||
c0,5.4,2.7,9.7,8.1,12.6c4.3,2.3,9.3,3.5,15.1,3.5c5.7,0,10.8-1.2,15-3.5c5.4-2.9,8.1-7.2,8.1-12.6C171.2,39.2,168.4,35,163.1,32.1
|
||||
M159.8,54.1c-3.3,1.9-7.2,2.8-11.8,2.8c-4.7,0-8.7-0.9-11.9-2.7h0c-3.9-2.2-5.8-5.3-5.8-9.5c0-4.1,2-7.3,5.8-9.5
|
||||
c3.2-1.8,7.2-2.7,11.9-2.7c4.6,0,8.6,0.9,11.9,2.7c3.8,2.2,5.8,5.4,5.8,9.5C165.7,48.7,163.7,51.9,159.8,54.1z"/>
|
||||
<path fill="#FFFFFF" d="M212.3,32.1c-4.2-2.3-9.3-3.5-15.1-3.5c-5.7,0-10.8,1.2-15.1,3.5h0c-5.4,2.9-8.1,7.2-8.1,12.6
|
||||
c0,5.4,2.7,9.7,8.1,12.6c4.3,2.3,9.3,3.5,15.1,3.5c5.7,0,10.8-1.2,15-3.5c5.4-2.9,8.1-7.2,8.1-12.6C220.4,39.2,217.7,35,212.3,32.1
|
||||
M209.1,54.1c-3.3,1.9-7.2,2.8-11.8,2.8c-4.7,0-8.7-0.9-11.9-2.7c-3.9-2.2-5.8-5.3-5.8-9.5c0-4.1,2-7.3,5.8-9.5
|
||||
c3.2-1.8,7.2-2.7,11.9-2.7c4.6,0,8.6,0.9,11.9,2.7c3.8,2.2,5.8,5.4,5.8,9.5C214.9,48.7,212.9,51.9,209.1,54.1z"/>
|
||||
<path fill="#FFFFFF" d="M280.2,31.3c-3-1.8-6.9-2.7-11.5-2.7c-5.9,0-10.6,1.8-14.2,5.4c-3.4-3.6-8.2-5.4-14.1-5.4
|
||||
c-4.8,0-8.7,1-11.7,2.9c0-0.7,0-2.5,0-2.5h-5.3v31.1h5.3V38.9c0.4-1.5,1.4-2.9,3-4.1c2.2-1.5,5-2.3,8.5-2.3c3.1,0,5.7,0.6,7.9,1.9
|
||||
c2.6,1.5,3.8,3.5,3.8,6.3v19.6h5.2V40.6c0-2.8,1.2-4.8,3.8-6.3c2.2-1.2,4.9-1.9,8-1.9c3.1,0,5.8,0.6,8,1.9c2.6,1.5,3.8,3.5,3.8,6.3
|
||||
v19.6h5.3V41.3C285.9,36.9,284,33.5,280.2,31.3"/>
|
||||
<polyline fill="#FFFFFF" points="290.2,14.8 290.2,60.2 295.5,60.2 295.5,14.8 290.2,14.8 "/>
|
||||
<polyline fill="#FFFFFF" points="354.5,14.8 354.5,49.9 359.8,49.9 359.8,14.8 354.5,14.8 "/>
|
||||
<path fill="#FFFFFF" d="M340.7,29c0,0,0,4.3,0,5.3c-4.5-3.8-10.5-5.8-17.9-5.8c-5.9,0-11,1.1-15.2,3.4c-5.2,2.9-7.9,7.1-7.9,12.7
|
||||
c0,5.5,2.7,9.8,8.1,12.6c4.2,2.3,9.3,3.4,15.2,3.4c2.9,0,5.8-0.3,8.4-1c3.7-1,6.8-2.4,9.2-4.3c0,1.1,0,4.8,0,4.8h5.3V29H340.7
|
||||
M305.2,44.7c0-4.1,2-7.3,5.8-9.5c3.2-1.8,7.3-2.7,12-2.7c5.8,0,10.3,1.4,13.5,4.2c2.8,2.5,4.2,5.7,4.2,9.6c0,0,0,3.4,0,3.7
|
||||
c-2.2,2.5-5.5,4.4-9.7,5.7c-2.5,0.8-5.2,1.2-8,1.2c-4.8,0-8.8-0.9-12-2.6C307.1,52,305.2,48.9,305.2,44.7z"/>
|
||||
<path fill="#FFFFFF" d="M357.2,54.3c-3.7,0-4.2,1.9-4.2,3.1c0,1.2,0.6,3.1,4.2,3.1c3.7,0,4.2-2,4.2-3.1
|
||||
C361.4,56.3,360.9,54.3,357.2,54.3z"/>
|
||||
<path fill="#FFFFFF" d="M376.3,20.4c0,3.1-2,5.7-5.6,5.7c-3.6,0-5.6-2.6-5.6-5.7c0-3.1,2-5.7,5.6-5.7
|
||||
C374.3,14.7,376.3,17.3,376.3,20.4z M366.3,20.4c0,2.6,1.6,4.6,4.4,4.6c2.8,0,4.4-2,4.4-4.6c0-2.6-1.6-4.6-4.4-4.6
|
||||
C367.9,15.8,366.3,17.8,366.3,20.4L366.3,20.4z M371.8,21.1c2.2-0.4,2-3.7-0.5-3.7h-2.7v5.8h1.1v-2h1l1.6,2h1.2V23L371.8,21.1
|
||||
L371.8,21.1z M371.2,18.4c1.3,0,1.3,1.9,0,1.9h-1.6v-1.9H371.2z"/>
|
||||
</g>
|
||||
<g id="brandmark">
|
||||
<path id="j-green" fill="#7AC143" d="M13.5,37.7L12,36.3c-4.5-4.5-5.8-10.8-4.2-16.5c-4.5-1-7.8-5-7.8-9.8c0-5.5,4.5-10,10-10
|
||||
c5,0,9.1,3.6,9.9,8.4c5.4-1.3,11.3,0.2,15.5,4.4l0.6,0.6l-7.4,7.4l-0.6-0.6c-2.4-2.4-6.3-2.4-8.7,0c-2.4,2.4-2.4,6.3,0,8.7l1.4,1.4
|
||||
l7.4,7.4l7.8,7.8l-7.4,7.4l-7.8-7.8L13.5,37.7L13.5,37.7z"/>
|
||||
<path id="j-orange" fill="#F9A541" d="M21.8,29.5l7.8-7.8l7.4-7.4l1.4-1.4C42.9,8.4,49.2,7,54.8,8.6C55.5,3.8,59.7,0,64.8,0
|
||||
c5.5,0,10,4.5,10,10c0,5.1-3.8,9.3-8.7,9.9c1.6,5.6,0.2,11.9-4.2,16.3l-0.6,0.6l-7.4-7.4l0.6-0.6c2.4-2.4,2.4-6.3,0-8.7
|
||||
c-2.4-2.4-6.3-2.4-8.7,0l-1.4,1.4L37,29l-7.8,7.8L21.8,29.5L21.8,29.5z"/>
|
||||
<path id="j-red" fill="#F44321" d="M55,66.8c-5.7,1.7-12.1,0.4-16.6-4.1l-0.6-0.6l7.4-7.4l0.6,0.6c2.4,2.4,6.3,2.4,8.7,0
|
||||
c2.4-2.4,2.4-6.3,0-8.7L53,45.1l-7.4-7.4l-7.8-7.8l7.4-7.4l7.8,7.8l7.4,7.4l1.5,1.5c4.2,4.2,5.7,10.2,4.4,15.7
|
||||
c4.9,0.7,8.6,4.9,8.6,9.9c0,5.5-4.5,10-10,10C60,74.8,56,71.3,55,66.8L55,66.8z"/>
|
||||
<path id="j-blue" fill="#5091CD" d="M52.2,46l-7.8,7.8L37,61.2l-1.4,1.4c-4.3,4.3-10.3,5.7-15.7,4.4c-1,4.5-5,7.8-9.8,7.8
|
||||
c-5.5,0-10-4.5-10-10C0,60,3.3,56.1,7.7,55C6.3,49.5,7.8,43.5,12,39.2l0.6-0.6L20,46l-0.6,0.6c-2.4,2.4-2.4,6.3,0,8.7
|
||||
c2.4,2.4,6.3,2.4,8.7,0l1.4-1.4l7.4-7.4l7.8-7.8L52.2,46L52.2,46z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 647 70"><title>logo</title>
|
||||
<path d="M306,248h0c0-19,14-35,35-35s20,4,26,10l-9,11c-5-5-10-8-17-8s-19,9-19,21h0c0,12,8,21,19,21s12-3,17-8l9,10c-7,7-14,12-27,12S306,268,306,248Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M407,214h13l28,68H433l-6-15H399l-6,15H378Zm15,40-9-22-9,22Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M458,272l9-11c6,5,12,8,20,8s10-2,10-6h0c0-4-2-6-13-9s-22-7-22-21h0c0-12,10-20,23-20a38,38,0,0,1,25,9l-8,11c-6-4-12-7-17-7s-9,3-9,6h0c0,4,3,6,14,9s21,9,21,20h0c0,13-10,21-24,21A42,42,0,0,1,458,272Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M523,272l9-11c6,5,12,8,20,8s10-2,10-6h0c0-4-2-6-13-9s-22-7-22-21h0c0-12,10-20,23-20a38,38,0,0,1,25,9l-8,11c-6-4-12-7-17-7s-9,3-9,6h0c0,4,3,6,14,9s21,9,21,20h0c0,13-10,21-24,21A42,42,0,0,1,523,272Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M593,214h15v68H593Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M626,248h0c0-19,15-35,35-35s35,16,35,35h0c0,19-15,35-35,35S626,267,626,248Zm55,0h0c0-12-8-21-20-21s-20,9-20,21h0c0,12,8,21,20,21S682,260,682,248Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M715,214h27c16,0,25,10,25,23h0c0,16-12,24-27,24H729v20H715Zm26,34c7,0,12-4,12-10h0c0-7-5-10-12-10H729v21Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M783,214h50v13H797v14h31v13H797v14h36v13H783Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M852,214h15v68H852Z" transform="translate(-306 -213)" style="fill:#fff"/>
|
||||
<path d="M911,214h13l28,68H937l-6-15H903l-6,15H882Zm15,40-9-22-9,22Z" transform="translate(-306 -213)" style="fill:#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -57,7 +57,7 @@ elseif ($this->params->get('siteTitle'))
|
|||
}
|
||||
else
|
||||
{
|
||||
$logo = '<img src="' . $this->baseurl . '/templates/' . $this->template . '/images/logo.svg' . '" class="logo d-inline-block align-top" alt="' . $sitename . '">';
|
||||
$logo = '<img src="' . $this->baseurl . '/templates/' . $this->template . '/images/logo.svg' . '" class="logo d-inline-block" alt="' . $sitename . '">';
|
||||
}
|
||||
|
||||
// Header bottom margin
|
||||
|
|
@ -84,39 +84,45 @@ $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
|
|||
echo ($this->direction == 'rtl' ? ' rtl' : '');
|
||||
?>">
|
||||
|
||||
<header class="header full-width">
|
||||
<nav class="navbar navbar-expand-lg navbar-full">
|
||||
<div class="navbar-brand">
|
||||
<a href="<?php echo $this->baseurl; ?>/">
|
||||
<?php echo $logo; ?>
|
||||
</a>
|
||||
<?php if ($this->params->get('siteDescription')) : ?>
|
||||
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($this->countModules('menu')) : ?>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo JText::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<jdoc:include type="modules" name="menu" style="none" />
|
||||
<?php if ($this->countModules('search')) : ?>
|
||||
<div class="form-inline">
|
||||
<jdoc:include type="modules" name="search" style="none" />
|
||||
</div>
|
||||
<div class="container-header full-width">
|
||||
<header class="header">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="navbar-brand">
|
||||
<a href="<?php echo $this->baseurl; ?>/">
|
||||
<?php echo $logo; ?>
|
||||
</a>
|
||||
<?php if ($this->params->get('siteDescription')) : ?>
|
||||
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($this->countModules('menu') || $this->countModules('search')) : ?>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" aria-hidden="true" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo JText::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<jdoc:include type="modules" name="menu" style="none" />
|
||||
<?php if ($this->countModules('search')) : ?>
|
||||
<div class="form-inline">
|
||||
<jdoc:include type="modules" name="search" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</nav>
|
||||
<?php if ($this->countModules('banner')) : ?>
|
||||
<div class="container-banner">
|
||||
<jdoc:include type="modules" name="banner" style="xhtml" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<?php if ($this->countModules('banner')) : ?>
|
||||
<div class="container-banner full-width">
|
||||
<jdoc:include type="modules" name="banner" style="xhtml" />
|
||||
<div class="header-shadow"></div>
|
||||
<svg class="header-shape-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 736 15">
|
||||
<path d="M1040,301V285s-75,12-214,12-284-26-524,0v4Z" transform="translate(-302 -285)" fill="#fff"/>
|
||||
</svg>
|
||||
</header>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
<?php if ($this->countModules('top-a')) : ?>
|
||||
<div class="container-top-a">
|
||||
<jdoc:include type="modules" name="top-a" style="cardGrey" />
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
@import "../../../media/vendor/bootstrap/scss/functions";
|
||||
|
||||
// Global
|
||||
$cassiopeia-template-color-dark: #0d1321 !default;
|
||||
$cassiopeia-template-color: #1c3d5c !default;
|
||||
$cassiopeia-container-main-bg: #f2f2f2 !default;
|
||||
$cassiopeia-border-color: #ccc !default;
|
||||
$cassiopeia-box-shadow: 0 0 3px rgba(0,0,0,.04) !default;
|
||||
$cassiopeia-block-header-bg: #f5f5f5 !default;
|
||||
$cassiopeia-template-color-dark: #112856 !default;
|
||||
$cassiopeia-template-color: #434178 !default;
|
||||
$cassiopeia-container-main-bg: #f2f2f2 !default;
|
||||
$cassiopeia-border-color: #ccc !default;
|
||||
$cassiopeia-box-shadow: 0 0 3px rgba(0,0,0,.04) !default;
|
||||
$cassiopeia-block-header-bg: #f5f5f5 !default;
|
||||
$white-offset: #fefefe;
|
||||
$grey: #aaa; // REMMOVE THIS AFTER
|
||||
$cassiopeia-hl-grad-inner: #59afff;
|
||||
$cassiopeia-hl-grad-outer: #59daff;
|
||||
$cassiopeia-header-grad: linear-gradient(135deg, $cassiopeia-template-color-dark 0%, $cassiopeia-template-color 100%);
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
|
|
@ -78,8 +77,8 @@ $theme-colors: (
|
|||
$cassiopeia-toolbar-line-height: 1.8rem;
|
||||
|
||||
// Fonts
|
||||
$font-family-base: Arial, sans-serif;
|
||||
$cassiopeia-inverted-text-color: $cassiopeia-template-color;
|
||||
$font-family-base: 'Fira Sans', Arial, sans-serif;
|
||||
$cassiopeia-inverted-text-color: $cassiopeia-template-color;
|
||||
$font-size-root: 14px;
|
||||
$h1-font-size: 1.857rem;
|
||||
$h2-font-size: 1.571rem;
|
||||
|
|
@ -90,6 +89,11 @@ $h6-font-size: .8571rem;
|
|||
$font-size-sm: .8rem;
|
||||
$fa-font-path: "../../../media/vendor/font-awesome/fonts";
|
||||
|
||||
// Border Radius
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
// Tables
|
||||
$table-bg: transparent !default;
|
||||
$table-bg-accent: rgba(0,0,0,.03) !default;
|
||||
|
|
@ -146,4 +150,4 @@ $badge-default-bg: #5e7082;
|
|||
|
||||
// Gutter
|
||||
$grid-gutter-width: 15px !default;
|
||||
$cassiopeia-grid-gutter: $grid-gutter-width;
|
||||
$cassiopeia-grid-gutter: $grid-gutter-width;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
// Banner
|
||||
|
||||
.banner img {
|
||||
width: 100%;
|
||||
.container-banner {
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,8 +54,9 @@
|
|||
". debug debug debug debug .";
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 0;
|
||||
.container-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
+ div:not(.container-banner) {
|
||||
margin-top: $cassiopeia-grid-gutter;
|
||||
|
|
@ -64,16 +65,23 @@
|
|||
}
|
||||
|
||||
.container-banner {
|
||||
margin: 0 0 $cassiopeia-grid-gutter;
|
||||
z-index: 5;
|
||||
margin: -2rem 0 0;
|
||||
padding: 0 ($cassiopeia-grid-gutter / 2);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
header { grid-area: head; }
|
||||
.container-header { grid-area: head; }
|
||||
.container-banner { grid-area: banner; }
|
||||
.container-top-a { grid-area: top-a; }
|
||||
.container-top-b { grid-area: top-b; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// Global
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400'); // @TODO - Move to script tag once webfontloader added to core.js
|
||||
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,27 @@
|
|||
// Header
|
||||
|
||||
.header {
|
||||
.container-header {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 15px 0;
|
||||
background: $cassiopeia-template-color;
|
||||
z-index: 10;
|
||||
background-color: $cassiopeia-template-color;
|
||||
background-image: $cassiopeia-header-grad;
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,.03) inset;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
header {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background-color: theme-color("primary");
|
||||
background-image: linear-gradient(to right, $cassiopeia-hl-grad-inner 0%, $cassiopeia-hl-grad-outer 100%);
|
||||
max-width: 1155px;
|
||||
padding: 0 ($cassiopeia-grid-gutter / 2);
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 2.5rem ($cassiopeia-grid-gutter / 2) 4.5rem;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: 5.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-description {
|
||||
|
|
@ -25,13 +33,17 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 3rem;
|
||||
margin-right: auto;
|
||||
font-size: 2rem;
|
||||
color: $white-offset;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
width: 290px;
|
||||
min-width: 290px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -45,27 +57,38 @@
|
|||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column !important;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.navbar-nav li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-bottom: 3px;
|
||||
margin-right: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.75px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
margin: auto;
|
||||
content: "";
|
||||
background: transparent;
|
||||
transition: width .5s ease, background-color .5s ease;
|
||||
opacity: .2;
|
||||
transition: all .2s ease, background-color .2s ease;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: none;
|
||||
|
|
@ -74,14 +97,15 @@
|
|||
|
||||
&.active::after,
|
||||
&:hover::after {
|
||||
width: 100%;
|
||||
right: 2px;
|
||||
left: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5rem 0;
|
||||
padding: .25rem 0 0;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -97,6 +121,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
margin-left: 1.5rem;
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.container-title {
|
||||
|
|
@ -122,8 +153,35 @@
|
|||
margin-left: 5px;
|
||||
font-size: $h1-font-size;
|
||||
color: lighten($cassiopeia-template-color, 10%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-shadow {
|
||||
display: none;
|
||||
|
||||
.container-banner + & {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 180px;
|
||||
content: "";
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-shape-bottom {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
border-bottom: 20px solid #fff;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
body {
|
||||
> div,
|
||||
header > nav,
|
||||
.container-banner,
|
||||
footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<name>cassiopeia</name>
|
||||
<version>1.0</version>
|
||||
<creationDate>30/02/2017</creationDate>
|
||||
<author>Charlie Lodder</author>
|
||||
<author>Charlie Lodder / Ciarán Walsh</author>
|
||||
<authorEmail>admin@joomla.org</authorEmail>
|
||||
<copyright>Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.</copyright>
|
||||
<description>TPL_CASSIOPEIA_XML_DESCRIPTION</description>
|
||||
|
|
|
|||
Loading…
Reference in New Issue