diff options
Diffstat (limited to 'desk/web/layout/nav.hoon')
| -rw-r--r-- | desk/web/layout/nav.hoon | 310 |
1 files changed, 310 insertions, 0 deletions
diff --git a/desk/web/layout/nav.hoon b/desk/web/layout/nav.hoon new file mode 100644 index 0000000..871ab69 --- /dev/null +++ b/desk/web/layout/nav.hoon @@ -0,0 +1,310 @@ +/+ sigil=sigil-sigil +/* global-css %css /web/index/css +|_ =bowl:gall +++ css ^~ %- trip +''' +body > nav { + box-shadow: inset 0 2px 4px rgba(30, 30, 30, 0.15); + position: sticky; + top: 0; + z-index: 1020; + clear: both; + display: flex; + justify-content: space-between; + width: 100%; + height: 4rem; + text-align: center; + background: black; + color: rgb(220, 220, 220); + padding: 0 1rem; + z-index: 100; + box-sizing: border-box; + + & #top-left { + margin: 1rem 0; + color: inherit; + width: 60px; + } + & .menu{ + height: 55px; + } +& .option{ + display: block; + text-decoration: none; + color: #fff; + text-transform: uppercase; + font-family: 'Montserrat', sans-serif; + font-weight: 500; + font-size: 13px; + letter-spacing: 0.5px; + margin: 1.2rem 0.5rem; +} + + + & ul { + display: flex; + list-style: none; + margin: 0; + padding-left: 0; + position: absolute; + top: 50%; /* position the top edge of the element at the middle of the parent */ + left: 50%; /* position the left edge of the element at the middle of the parent */ + transform: translate(-50%, -50%); /* This is a shorthand of + translateX(-50%) and translateY(-50%) */ + + & li{ + margin: 0 0.5rem; + + & a, nav>form a { + display: block; + text-decoration: none; + color: #fff; + text-transform: uppercase; + font-family: 'Montserrat', sans-serif; + font-weight: 500; + font-size: 13px; + letter-spacing: 0.5px; + } + } + } + & a:hover { + color: rgba(255, 255, 255, 0.7); + } + + /* icon links style + & svg{ + fill: white; + } + & path{ + fill: white; + } + & circle{ + stroke: white; + } + & svg{ + float: left; + margin-top: 10px; + margin-left: 10px; + } + & .nav-right svg{ + height: 4rem; + border-left: 1px solid white; + border-right: 1px solid white; + margin-left: 0.5rem; + } */ + & .icon{ + width: 30px; + } + & form{ + background-color: var(--background-color); + margin: 0.7rem; + padding: 0 0.3rem; + } + & input[type=text]{ + background-color: var(--background-color); + outline: none; + padding: 0.3rem; + border: none; + } + + @media (max-width:935px) { + & input[type=text]{ + display: none; + } + & form{ + background-color: inherit; + width: 50px; + } + & .icon{ + filter: invert(); + } + } + & .sigil{ + padding: 6px 0; + } + +} + +''' +++ mobile-css ^~ %- trip +''' +body > nav{ + padding: 5px 1rem; + & #logo{ + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 25%; + } + & #menu-button{ + width: 30px; + float: right; + } + #nav-menu{ + background-color: black; + position: fixed; + top: 25px; + right: 25px; + height: max-content; + width: 40%; + + & a{ + display: block; + padding: 5px; + color: white; + } + } +} +''' +++ smol +;nav + ;style:"{css}" + ;style:"{mobile-css}" + ;a/"/" + ;img#logo@"https://s3.spandrell.ch/assets/board/ui/tianming.svg"; + == + ;img#menu-button@"https://s3.spandrell.ch/assets/board/ui/menu.svg" + =kaji "toggle" + =targ "#nav-menu" + ; + == + ;div#nav-menu.cp + =role "link" + =kaji "clickaway" + =hidden "" + ;a/"/blog":"BLOG" + ;a/"/chat":"CHAT" + ;a/"/board":"BOARD" + ;a/"/feed":"FEED" + ;a/"/tv":"TV" + ;a/"/wiki":"WIKI" + :: ;a/"/apps/canvas":"CANVAS" + ;a/"/book":"BOOKS" + ;a/"/about":"ABOUT" + ;a/"/search":"SEARCH" + ;+ ?: .=(%pawn (clan:title src.bowl)) + ;a/"/login":"LOGIN" + ;a/"/user":"PROFILE" + == +== +:: TODO figure this out +++ ext ^- manx + =/ sip (scow %p src.bowl) + =/ dap (trip dap.bowl) + ;nav + =kaji "mobile" + =path "/f/mobile-nav" + =hide "clickaway" + ;style:"{css}" + ;style:"{(trip global-css)}" + ;a#top-left/"/" + ;img@"https://s3.spandrell.ch/assets/board/ui/tianming.svg"; + == + ;ul + ;li + ;a/"/blog":"BLOG" + == + ;li + ;a/"/chat":"CHAT" + == + ;li + ;a/"/board":"BOARD" + == + ;li + ;a/"/feed":"FEED" + == + ;li + ;a/"/tv":"TV" + == + ;li + ;a/"/wiki":"WIKI" + == + :: ;li + :: ;a/"/apps/canvas":"CANVAS" + :: == + ;li + ;a/"/book":"BOOKS" + == + ;li + ;a/"/about":"ABOUT" + == + == + ;div.flex.nav-right + :: ;form#global-search.f1 + :: =kaji "search" + :: =path "/search" + :: ;input(type "text", name "query"); + :: ;input.icon@"https://s3.sortug.com/img/icons/search-l.svg"(type "image"); + :: == + ;a.option/"/search":"search" + ;+ ?: .=(%pawn (clan:title src.bowl)) + ;a.option + =href "/login" + ; Login + == + ;a.sigil + =href "/user" + ;+ (sigil(size 48) src.bowl) + == + == + ;script@"/kaji.js"; + ;script@"/kaji-session.js?ship={sip}&dap={dap}"; + == +++ $ ^- manx + ;nav + =kaji "mobile" + =path "/f/mobile-nav" + =hide "clickaway" + ;style:"{css}" + ;a#top-left/"/" + ;img@"https://s3.spandrell.ch/assets/board/ui/tianming.svg"; + == + ;ul + ;li + ;a/"/blog":"BLOG" + == + ;li + ;a/"/chat":"CHAT" + == + ;li + ;a/"/board":"BOARD" + == + ;li + ;a/"/feed":"FEED" + == + ;li + ;a/"/tv":"TV" + == + ;li + ;a/"/wiki":"WIKI" + == + :: ;li + :: ;a/"/apps/canvas":"CANVAS" + :: == + ;li + ;a/"/book":"BOOKS" + == + ;li + ;a/"/about":"ABOUT" + == + == + ;div.flex.nav-right + :: ;form#global-search.f1 + :: =kaji "search" + :: =path "/search" + :: ;input(type "text", name "query"); + :: ;input.icon@"https://s3.sortug.com/img/icons/search-l.svg"(type "image"); + :: == + ;a.option/"/search":"search" + ;+ ?: .=(%pawn (clan:title src.bowl)) + ;a.option + =href "/login" + ; Login + == + ;a.sigil + =href "/user" + ;+ (sigil(size 48) src.bowl) + == + == + == +-- |