diff --git a/theme/themes/pastanaga/collections/menu.overrides b/theme/themes/pastanaga/collections/menu.overrides index 1806fd4..fcce7fb 100644 --- a/theme/themes/pastanaga/collections/menu.overrides +++ b/theme/themes/pastanaga/collections/menu.overrides @@ -1,7 +1,6 @@ /******************************* Theme Overrides *******************************/ - .ui.menu .item.personal-bar { position: fixed; bottom: 68px; @@ -37,8 +36,7 @@ margin: 4px -14px 0; background-repeat: no-repeat; background-size: 64px 18px; - transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045), - margin 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); + transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045), margin 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .ui.menu.collapsed .item.logo > .image { @@ -104,28 +102,53 @@ .navigation, .tools { - .menu { - margin-top: 0; + margin-left: 40px; + @media only screen and (max-width: @largestTabletScreen) { + margin-left: 0; + margin-top: 0.5rem; + } + + .ui.pointing.secondary.stackable.computer.large.screen.widescreen.only.menu { + @media only screen and (max-width: 1071px) and (min-width:992px) { + display: flex !important; + } } - margin: 0 0 0 40px; - .ui.secondary.pointing.menu { - border: 0; + .ui.secondary.pointing.menu { + border: 0; @media only screen and (max-width: @largestTabletScreen) { margin-bottom: 20px; margin-left: 0; } + a { + &:hover { + color: rgba(white, .5); + border-color: transparent; + } + } + .item { - padding-top: @relativeBig; - margin: 0; + font-weight: 300; + font-size: 14px; text-transform: uppercase; - color: white; + color: rgba(white, .8); + //padding-top: @relativeBig; + margin: 0; - @media only screen and (min-width: @largestTabletScreen) { - padding: 1.7em 0 @relativeBig; - margin: 0 unit(@relativeLarge * 2, em) 0 0; + &.active { + font-weight: 700; + color: white; + border-color: transparent; + + &:hover { + color: rgba(white, .8); + } } + /*@media only screen and (min-width: @largestTabletScreen) { + padding: 1.7em 0 @relativeBig; + margin: 0 unit(@relativeLarge * 2, em) 0 0; + }*/ } } } @@ -159,14 +182,12 @@ color: @black; } } - @media only screen and (max-width: 767px) { .ui.menu.stackable > .menu, .ui.menu.stackable > .menu.right { display: block; } } - /* Pagination */ .pagination-wrapper { text-align: center; @@ -186,6 +207,8 @@ .active.item { background: none; - color: @textColor; + color: @linkColor; + font-weight: 700; + border-bottom: 2px solid @linkColor; } } diff --git a/theme/themes/pastanaga/elements/header.overrides b/theme/themes/pastanaga/elements/header.overrides index 7aab72e..4ec2182 100644 --- a/theme/themes/pastanaga/elements/header.overrides +++ b/theme/themes/pastanaga/elements/header.overrides @@ -1,7 +1,6 @@ /******************************* Theme Overrides *******************************/ - .ui.basic.segment.header-wrapper { margin-bottom: 0; background-color: @primaryColor; @@ -15,39 +14,49 @@ .logo-nav-wrapper { display: flex; flex-grow: 2; + @media only screen and (max-width: @largestTabletScreen) { + align-items: initial; + justify-content: start; + flex-direction: row-reverse; + flex-grow: 0; + } .logo { flex: 0 0 auto; + @media only screen and (max-width: @largestTabletScreen) { + margin-left: 2rem; + } } .navigation { + .hamburger-inner { + background: white; + + &:after, + &:before { + background: white; + } + } // -ms-overflow-style: none; /* IE 10+ */ // overflow-x: auto; - &::-webkit-scrollbar { - height: 0; /* remove scrollbar space */ - background: transparent; /* optional: just make scrollbar invisible */ + height: 0; + /* remove scrollbar space */ + background: transparent; + /* optional: just make scrollbar invisible */ } - /* optional: show position indicator in red */ &::-webkit-scrollbar-thumb { background: #f00; } - @media only screen and (max-width: @largestTabletScreen) { overflow-x: initial; } } } - @media only screen and (max-width: @largestTabletScreen) { - flex-direction: column; + //flex-direction: initial; align-items: initial; - - .logo-nav-wrapper { - align-items: initial; - justify-content: space-between; - } } .tools-search-wrapper { @@ -58,6 +67,15 @@ align-items: center; justify-content: flex-end; margin-left: @huge; + width: 20%; + /* @media only screen and (max-width: 560px){ + + } */ + @media only screen and (max-width: @largestTabletScreen) { + width: 20%; + height: 20%; + justify-content: end; + } & > * { display: flex; @@ -73,9 +91,11 @@ } } - .header-container { width: 80%; margin: 0 auto; - max-width: 1600px; -} \ No newline at end of file + //max-width: 1600px; + @media only screen and (max-width: 982px) { + width: auto; + } +} diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides index 7accda2..d34df57 100644 --- a/theme/themes/pastanaga/globals/site.overrides +++ b/theme/themes/pastanaga/globals/site.overrides @@ -1,13 +1,52 @@ /******************************* Global Overrides *******************************/ - +.ui.vertical.padded.segment.footerWrapper > .ui.container { + width: 80% !important; + @media only screen and (max-width: @largestTabletScreen) { + margin: 0 2rem !important; + width: auto !important; + } +} .footerWrapper { - background-color: @primaryColor !important; - color: white; + background-color: @primaryColor !important; + + .ui.container { + padding-top: 2rem; + + .six.wide.column { + flex: 2 0 auto; + } + @media only screen and (min-width: 425px) and (max-width: @largestTabletScreen) { + .row { + /*.three.wide.column, .six.wide.column { + width: 100% !important; + }*/ + .three.wide.column:last-child { + width: 100% !important; + } + } + } + @media only screen and (max-width: 600px) { + .row { + flex-direction: column; + + .six.wide.column, + .three.wide.column { + width: 100% !important; + } + + .six.wide.column { + margin-top: .5rem; + flex-direction: row; + } + } + } + } .unlist { + padding-left: 0; margin: 0; list-style-type: none; text-decoration: underline; @@ -19,21 +58,35 @@ text-decoration: underline; font-weight: bold; } + + p { + color: white; + } } +#page-document.ui.container { + @media only screen and (min-width: 982px) { + width: 80% !important; + margin-top: 4rem !important; + } + @media only screen and (max-width: @largestTabletScreen) { + margin: 2rem !important; + } +} .widthSidebar { display: flex; #page-document.hasSidebar { width: 70%; - background-color: #f6f6f6; + background-color: @lightPrimaryColor; padding: 3rem; + text-align: left; } .page-document-sidebar { width: 30%; - background-color: #7c7c7c; + background-color: @lightSecondaryColor; display: flex; min-height: 100vh; @@ -42,26 +95,51 @@ margin-left: auto; display: inline-flex; position: relative; - margin-right: 1rem; - margin-top: 2rem; + margin-right: 2rem; + margin-top: 4rem; + width: 58%; a { - color: white; - font-size: 1.2rem; + color: @bodyColor; + font-size: 1rem; + + &.tabs__item { + padding-bottom: 2rem; + + &.tabs__item_active { + font-weight: 700; + color: @linkColor; + } + } } } } + + .hasSidebar { + padding-right: 10rem !important; + + h1.documentFirstHeading { + text-align: center; + } + } } .tabs.section-tabs { - display: flex; - justify-content: center; + width: 80%; + margin: 0 auto; a { - color: #3f3f3f; - font-size: 1.2rem; + color: @bodyColor; + font-size: 18px; margin-right: 4rem; line-height: 3; + padding-bottom: 1rem; + + &.tabs__item_active { + font-weight: 700; + color: @primaryColor; + border-bottom: 1rem solid @primaryColor; + } } } @@ -71,21 +149,35 @@ } h1.documentFirstHeading { + text-align: center; +} + +h1.documentFirstHeading, +h2, +h3 { font-size: 36px; - border-bottom: none !important; + color: @primaryColor; + font-weight: 700; + border-bottom: none!important; &:before { display: none !important; } } +p { + color: @bodyColor; + font-weight: 300; + + &.documentDescription { + color: @fullBlack; + } +} + .breadcrumbs { display: none; } - - - .detailed-link-block { display: flex; flex-wrap: wrap; @@ -94,9 +186,7 @@ h1.documentFirstHeading { flex-direction: column; } - .detailed-link-block-item-title { - // font-family: 'Roboto Condensed'; font-size: 28px; font-weight: 500; margin-bottom: 1.5rem; @@ -129,27 +219,22 @@ h1.documentFirstHeading { .article-list-row { display: flex; margin-bottom: 20px; - @media only screen and (max-width: 500px) { flex-wrap: wrap; - margin-bottom: 40px + margin-bottom: 40px; } - .article-img { width: 200px; border-radius: 20px; margin-right: 25px; - @media only screen and (max-width: 500px) { width: 90%; } } - - .article-title { - color: #ED776A; + color: @linkColor; font-weight: 500; font-size: 20px; margin-top: 10px; @@ -199,4 +284,4 @@ h1.documentFirstHeading { .search-text { margin: 10px !important; font-size: 20px !important; -} \ No newline at end of file +} diff --git a/theme/themes/pastanaga/globals/site.variables b/theme/themes/pastanaga/globals/site.variables index 5cb1bba..03c5477 100755 --- a/theme/themes/pastanaga/globals/site.variables +++ b/theme/themes/pastanaga/globals/site.variables @@ -6,7 +6,7 @@ Fonts --------------------*/ -@fontName : 'Poppins'; +@fontName : 'Source Sans Pro'; @googleFontSizes : '300,400,500,700,400italic,700italic'; @@ -16,6 +16,7 @@ --------------------*/ + /*------------------- Border Radius --------------------*/ @@ -24,11 +25,18 @@ /*------------------- Brand Colors --------------------*/ -@primaryColor : @darkBlue; -@secondaryColor : @brown; +@primaryColor : @lightblue; + +@secondaryColor : @darkBlue; + +@bodyColor : @bodyGrey; + +@darkPrimaryColor : @darkOrange; -@lightSecondaryColor : @lightGrey; +@lightPrimaryColor : @lightBodyGrey; + +@lightSecondaryColor : @lightOrange; /*-------------- @@ -84,7 +92,7 @@ Links --------------------*/ -@linkColor : @blue; +@linkColor : @lighterOrange; /*------------------- @@ -117,6 +125,11 @@ Breakpoints --------------------*/ +@mobileBreakpoint : 320px; +@tabletBreakpoint : 903px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1200px; +@widescreenMonitorBreakpoint : 1920px; /*------------------- Site Colors @@ -132,11 +145,20 @@ @brown : #826A6A; // Palette: reddishGrey @grey : #68778D; // Palette: blueishGrey @black : #252525; // Palette: darkishGrey -@darkBlue : #005384; +@darkBlue : #32536B; +@darkOrange : #D63D27; +@darkGreen : #009590; + /*--- Light Colors ---*/ @lightOlive : #C9EAB1; // Palette: lightSage @lightGrey : #878F93; +@lightblue : #4296B2; +@lightOrange : #F3EFEE; +@lighterOrange : #ED776A; +@lightBodyGrey : #F6F6F6; +@greyBlue : #6C8BA2; + /*--- Neutrals ---*/ @fullBlack : #000000; @@ -144,6 +166,8 @@ @darkWhite : #F3F4F5; @midWhite : #DCDDDE; @white : #FFFFFF; +@bodyGrey : #333333; + /*--- Colored Backgrounds ---*/ @redBackground : #F5C1C1; // Palette: alertError @@ -254,6 +278,10 @@ /* Responsive */ +@largestMobileScreen : (@tabletBreakpoint - 1px); +@largestTabletScreen : (@computerBreakpoint - 1px); +@largestSmallMonitor : (@largeMonitorBreakpoint - 1px); +@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px); /*------------------- diff --git a/theme/themes/pastanaga/modules/search.overrides b/theme/themes/pastanaga/modules/search.overrides index d5a76ff..28d11da 100644 --- a/theme/themes/pastanaga/modules/search.overrides +++ b/theme/themes/pastanaga/modules/search.overrides @@ -2,25 +2,39 @@ Theme Overrides *******************************/ .glossary-search { - max-width: 964px; - margin : 2rem auto; + //max-width: 964px; + width: 80%; + margin: 2rem auto; - .searchbox { - border-left: none!important; - } + .searchbox { + border-left: none!important; + } - .input { - border-radius: 30px; - height : 50px; - background : #F6F6F6; - padding-left : 1rem; - } + .input { + border-radius: 30px; + height: 50px; + background: #EDEDED; + padding-left: 1.5rem; + font-weight: 300; + font-size: 18px; + color: @bodyColor; + /* + &:before{ + font-family: "Font Awesome 5 Free"; + font-weight: 700; + content: "\f007"; + margin: auto 1rem; + color: @secondaryColor; + } + */ + } - button { - background: #008173!important; - border-radius: 30px; - padding: 0 2rem!important; - color: white!important; - margin-left: 1rem; - } -} \ No newline at end of file + button { + background: @secondaryColor !important; + border-radius: 30px; + padding: 0 2rem !important; + color: white!important; + font-weight: 700; + margin-left: 1rem; + } +}