aboutsummaryrefslogtreecommitdiff
path: root/documentation/themes/beastie/assets/styles/header.scss
diff options
context:
space:
mode:
Diffstat (limited to 'documentation/themes/beastie/assets/styles/header.scss')
-rw-r--r--documentation/themes/beastie/assets/styles/header.scss379
1 files changed, 281 insertions, 98 deletions
diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss
index b0f724dda1..fb07877df4 100644
--- a/documentation/themes/beastie/assets/styles/header.scss
+++ b/documentation/themes/beastie/assets/styles/header.scss
@@ -1,6 +1,6 @@
/*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
- * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
+ * Copyright (c) 1994-2025, The FreeBSD Documentation Project
+ * Copyright (c) 2021-2025, Sergio Carlavilla <carlavilla@FreeBSD.org>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
@@ -27,139 +27,322 @@
*/
header {
- position: fixed;
+ position: sticky;
+ top: 0;
+ z-index: 9999;
+ padding: .5rem 1rem;
background-color: var(--header-background);
- box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
+}
+
+.header-container {
+ display: flex;
width: 100%;
- z-index: 9999;
+ max-width: var(--max-width);
+ margin-left: auto;
+ margin-right: auto;
+ align-items: center;
+}
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- overflow: hidden;
- background-color: var(--header-background);
+.logo-menu-bars-container {
+ display: flex;
+ align-items: center;
+}
- li {
- list-style: none;
+.logo {
+ display: flex;
+ align-items: center;
+ margin-right: 1rem;
+}
- a {
- display: block;
- padding: 20px 20px;
- border-right: 1px solid var(--header-background);
- text-decoration: none;
- color: var(--header-font-color);
- font-weight: bolder;
- }
- }
- }
+header nav {
+ margin-left: 0;
+ margin-right: 0;
+}
- .logo {
- display: block;
- float: left;
- font-size: 2em;
- padding: 10px 20px;
- text-decoration: none;
- }
+header ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ overflow: hidden;
+}
- .menu {
- clear: both;
- max-height: 0;
- transition: max-height .2s ease-out;
+header ul li {
+ list-style: none;
+}
- .first-element{
- border-top: 1px solid transparent;
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
- }
- }
+.menu-bars {
+ display: none;
+ margin-left: auto;
+ color: var(--white);
+ cursor: pointer;
+}
- .menu-icon {
- cursor: pointer;
- display: inline-block;
- float: right;
- padding: 28px 20px;
- position: relative;
- user-select: none;
- margin-top: 5px;
-
- .navicon {
- background: var(--white);
- display: block;
- height: 2px;
- position: relative;
- transition: background .2s ease-out;
- width: 18px;
- }
- }
-}
-
-header li a:hover,
-header .menu-btn:hover {
- background-color: var(--header-background);
+input[type='checkbox'] {
+ display: none;
+}
+
+.menu {
+ display: flex;
+ padding: 0;
+ margin: 0;
+}
+
+.menu-item {
+ display: flex;
+ margin-right: 1rem;
+ align-items: center;
+ color: var(--white) !important;
+ margin-top: 0px !important;
+}
+
+.menu-item a {
+ padding: 1rem 0;
+ color: inherit;
+}
+
+.menu-item a,
+.donate a {
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.menu-item a:hover,
+.donate a:hover {
+ text-decoration: none;
}
-header .menu-icon .navicon:before,
-header .menu-icon .navicon:after {
- background: var(--white);
- content: '';
- display: block;
- height: 100%;
+.donate a {
+ color: var(--black) !important;
+}
+
+.menu-item i {
+ margin-left: .1rem;
+}
+
+.sub-menu {
+ visibility: hidden;
position: absolute;
- transition: all .2s ease-out;
- width: 100%;
+ top: 55px;
+ padding: 1rem .75rem;
+ min-width: 250px;
+ background-color: var(--white);
+ border-radius: .4rem;
+ color: #444;
+ border: 1px solid #CDCDCD;
+ z-index: 999;
}
-header .menu-icon .navicon:before {
- top: 5px;
+.sub-menu:hover {
+ visibility: visible;
}
-header .menu-icon .navicon:after {
- top: -5px;
+.menu-item a:hover+.sub-menu {
+ visibility: visible;
}
-header .menu-btn {
- display: none;
+.sub-menu li {
+ margin-top: 0;
+ padding: .75rem .6rem;
}
-header .menu-btn:checked ~ .menu {
- max-height: 300px;
+.sub-menu .title {
+ border-bottom: 1px solid #E5E7EB;
}
-header .menu-btn:checked ~ .menu-icon .navicon {
- background: transparent;
+.sub-menu li a {
+ font-weight: normal !important;
}
-header .menu-btn:checked ~ .menu-icon .navicon:before {
- transform: rotate(-45deg);
+.sub-menu .title a {
+ font-weight: bolder !important;
}
-header .menu-btn:checked ~ .menu-icon .navicon:after {
- transform: rotate(45deg);
+.search-donate-container {
+ display: flex;
+ align-items: center;
+ margin-top: 0px;
+ margin-left: auto;
}
-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
- top: 0;
+.search {
+ display: flex;
+ border-radius: .4rem;
+ background-color: var(--white);
+ border: 1px solid var(--white);
+ margin-top: 0px;
+}
+
+.search input[type='text'] {
+ display: inline-block;
+ width: 100%;
+ padding: .3rem .8rem;
+ border: none;
+ border-radius: .4rem;
+ appearance: none;
+ outline: none;
+ background-color: var(--white);
+ color: var(--black);
}
-@media (min-width: 55em) {
- header li {
- float: left;
- list-style: none;
+.search button {
+ background-color: var(--white);
+ border: none;
+ border-radius: .4rem;
+}
+
+.search button i {
+ color: var(--black);
+}
+
+.donate {
+ margin-left: .5rem;
+}
+
+.donate a {
+ display: inline-block;
+ padding: .5rem 1rem;
+ background-color: var(--white);
+ border-radius: .4rem;
+}
+
+.donate a .heart,
+.heart .heart {
+ font-size: 1.2rem;
+ color: #E38582;
+}
+
+.donate:hover a .heart,
+.heart:hover .heart {
+ color: #D1332E;
+}
+
+@media screen and (max-width: 1100px) {
+ .header-container {
+ flex-direction: column;
+ }
+
+ .logo-menu-bars-container {
+ width: 100%;
+ padding: .5rem 0;
+ }
+
+ nav {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ .menu-bars {
+ display: block;
+ }
+
+ .menu {
+ display: none;
+ width: 100%;
}
- header li a {
- padding: 20px 30px;
+ #menu-bars:checked~nav .menu {
+ display: block !important;
+ }
+
+ .menu-item {
+ flex-direction: column;
+ width: 100%;
+ margin-right: 0px;
+ border-top: 1px solid var(--white);
+ cursor: pointer;
+ }
+
+ .menu-item a {
+ width: 100%;
+ }
+
+ .menu-item a:hover+.sub-menu {
+ visibility: visible;
+ }
+
+ .menu-item-description {
+ display: flex;
+ width: 100%;
+ cursor: pointer;
}
- header .menu {
- clear: none;
- float: right;
- max-height: none;
+ .menu-item-description i {
+ margin-left: auto;
}
- header .menu-icon {
+ .sub-menu {
display: none;
+ flex-direction: column;
+ width: 100%;
+ padding: 0px;
+ position: static;
+ visibility: visible;
+ border: none;
+ background-color: inherit;
+ color: inherit;
+ box-shadow: inherit;
}
+ .sub-menu .title {
+ display: none;
+ border-bottom: none;
+ }
+
+ .sub-menu li {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ #about:checked~.sub-menu,
+ #download:checked~.sub-menu,
+ #documentation:checked~.sub-menu,
+ #community:checked~.sub-menu {
+ display: flex;
+ }
+
+ .search-donate-container {
+ display: none;
+ }
+
+ .search {
+ width: 100%;
+ }
+
+ #menu-bars:checked~.search-donate-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-left: unset;
+ padding-top: .2rem;
+ }
+
+ .donate {
+ display: flex;
+ width: 100%;
+ margin-left: unset;
+ padding-top: .8rem;
+ }
+
+ .donate a {
+ width: 100%;
+ text-align: center;
+ }
+
+ .donate a .heart {
+ font-size: 1.2rem;
+ color: #D1332E;
+ }
+}
+
+@media screen and (min-width: 900px) {
+ header {
+ padding: .5rem 2rem;
+ }
+}
+
+@media screen and (min-width: 1451px) {
+ header {
+ padding: .5rem 5rem;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-18 01:51:56 +0000