selfprivacy.org/assets/scss/docsy_overrides.scss
nevfy f5b80082ed Update layout (#102)
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>
2024-04-18 21:41:36 +03:00

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;
}