mirror of
https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org.git
synced 2024-11-08 18:03:14 +00:00
f5b80082ed
This merge request solves following issues with the current layout: - **h1 header not instantly visible on the first screen on mobile:** changed the order so it appears before the screenshot gallery - **alternation of text and images looking weird in vertical mobile layout:** removed the alternation on mobile - **services and advantages being spread too wide on desktop:** added space on the sides - **advantages having repetitive layout, supporters repeating the look of services:** added variety with sliding effect and alternating background color, removed card-like background Reviewed-on: https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org/pulls/102 Reviewed-by: Inex Code <inex.code@selfprivacy.org> Co-authored-by: nevfy <yaver4.0.0.0@gmail.com> Co-committed-by: nevfy <yaver4.0.0.0@gmail.com>
200 lines
3.7 KiB
SCSS
200 lines
3.7 KiB
SCSS
.td-navbar {
|
|
background: $dark;
|
|
min-height: 5rem;
|
|
z-index: 15;
|
|
.navbar-brand__name {
|
|
display: none;
|
|
}
|
|
.nav-link {
|
|
color: $secondary !important;
|
|
font-weight: 600;
|
|
border-radius: 5px;
|
|
&:hover {
|
|
background-color: #61616144;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
&.nav-link.active {
|
|
background-color: #616161;
|
|
}
|
|
}
|
|
.td-navbar-nav-scroll {
|
|
height: unset !important;
|
|
margin-top: unset !important;
|
|
.nav-link {
|
|
padding: .5rem 1.5rem;
|
|
}
|
|
.navbar-nav {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.td-breadcrumbs__single {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.td-sidebar-nav .td-sidebar-link__page,
|
|
ul.ul-2>.td-sidebar-nav__section-title a {
|
|
color: $gray !important;
|
|
font-weight: 400;
|
|
&:hover {
|
|
color: $blue !important;
|
|
}
|
|
}
|
|
|
|
ul.ul-2 {
|
|
padding: 0;
|
|
&>.td-sidebar-nav__section-title a:hover {
|
|
color: $primary !important;
|
|
background-color: #7EB07F11;
|
|
transition: background-color 0.2s ease-in-out;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
ul.ul-0 li a.tree-root,
|
|
h5.taxonomy-title {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-right: .5rem !important;
|
|
}
|
|
|
|
.td-sidebar-nav-active-item {
|
|
color: $primary !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.td-sidebar-nav a.active {
|
|
color: $primary !important;
|
|
background-color: #7EB07F22;
|
|
}
|
|
|
|
.td-sidebar-link {
|
|
&.td-sidebar-link__section, &.td-sidebar-link__page {
|
|
border-radius: .3rem;
|
|
padding: .3rem .8rem !important;
|
|
margin: .1rem !important;
|
|
|
|
&:hover {
|
|
color: $primary !important;
|
|
background-color: #7EB07F11;
|
|
transition: background-color 0.2s ease-in-out;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.td-toc {
|
|
ul {
|
|
margin-top: 1rem;
|
|
}
|
|
li {
|
|
display: block;
|
|
padding-bottom: .5rem;
|
|
}
|
|
a {
|
|
display: inline !important;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
.tab-pane {
|
|
border: 1px solid rgba(0, 0, 0, 0.125) !important;
|
|
border-radius: 0px .25rem .25rem .25rem;
|
|
max-width: 100% !important;
|
|
}
|
|
ul li, ol li {
|
|
margin-bottom: unset !important;
|
|
}
|
|
div {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
border: none !important;
|
|
a:not(.active).nav-link:hover {
|
|
background-color: #0d6efd11;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
margin-right: .5rem !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
right: 0;
|
|
left: unset;
|
|
padding: 0px;
|
|
box-shadow: $shadow;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
li:has(input[type="checkbox"]) {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.btn,
|
|
.text-secondary {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-content {
|
|
.tab-pane {
|
|
border: none !important;
|
|
box-shadow: $shadow;
|
|
}
|
|
div {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
border: none !important;
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
border: none !important;
|
|
box-shadow: $shadow;
|
|
margin-bottom: -4px;
|
|
}
|
|
.nav-link.active {
|
|
border-color: transparent transparent white transparent !important;
|
|
}
|
|
}
|
|
a:not(.active).nav-link:hover {
|
|
background-color: #0d6efd11;
|
|
}
|
|
}
|
|
|
|
.tab-body {
|
|
background-color: white;
|
|
border: none !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
h3:before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.td-sidebar {
|
|
padding-top: 5rem;
|
|
}
|
|
.td-404 main, .td-main main {
|
|
padding-top: 6.5rem;
|
|
}
|
|
.td-sidebar-toc {
|
|
padding-top: 2.75rem;
|
|
}
|
|
}
|
|
|
|
.carousel-control-next, .carousel-control-prev {
|
|
background-image: none;
|
|
} |