From f28f467032e4f77a1ce8efe8103191c9ad2de02b Mon Sep 17 00:00:00 2001 From: dweller Date: Tue, 20 Feb 2024 21:01:37 +0200 Subject: add search and page layouts --- style/main.css | 156 ++++++++++++++++++++++++++------------------------- style/man.css | 51 +++++++++++++++++ style/search.css | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 299 insertions(+), 74 deletions(-) create mode 100644 style/man.css create mode 100644 style/search.css (limited to 'style') diff --git a/style/main.css b/style/main.css index 78558a6..f373e37 100644 --- a/style/main.css +++ b/style/main.css @@ -11,13 +11,15 @@ --bg: #FFFFFF; --bg-dark: #F2F2F2; --fg: #202124; - --fg-light: #CACACA; + --fg-mid: #5F6368; + --fg-light: #70757A; --border: #DADCE0; /* query input */ --qbg: transparent; --qborder: var(--border); + --qshadow: transparent; --qbgh: transparent; --qborderh: var(--border); @@ -66,73 +68,6 @@ --logo-d: #34A853; } -@media (prefers-color-scheme: dark) -{ - /* TODO: dew it */ - - :root - { - /* general */ - --bg: #202124; - --bg-dark: #171717; - --fg: #E8EAED; - --fg-light: #BDC1C6; - - --border: #3C4043; - - /* query input */ - --qbg: transparent; - --qborder: #5F6368; - - --qbgh: #303134; - --qborderh: transparent; - --qshadowh: #171717; - - /* buttons */ - --btn-bg: #303134; - --btn-fg: var(--fg); - --btn-shad: transparent; - --btn-brd: transparent; - - --btn-bgh: var(--btn-bg); - --btn-fgh: var(--btn-fg); - --btn-shadh: transparent; - --btn-brdh: #5F6368; - - --btn-bgf: var(--btn-bg); - --btn-fgf: var(--btn-fg); - --btn-shadf: transparent; - --btn-brdf: var(--btn-brdh); - - /* accent buttons */ - --abtn-bg: #8AB4F8; - --abtn-fg: #202124; - --abtn-brd: transparent; - --abtn-shad: transparent; - - --abtn-bgh: #93BAF9; - --abtn-fgh: var(--abtn-fg); - --abtn-brdh: transparent; - --abtn-shadh: transparent; - - --abtn-bgf: #A6C6FA; - --abtn-fgf: var(--abtn-fg); - --abtn-brdf: transparent; - --abtn-shadf: transparent; - - /* links */ - --a-unvis: #8AB4F8; - --a-vis: #C58AF9; - - /* misc */ - --logo-a: #FFFFFF; - --logo-b: #FFFFFF; - --logo-c: #FFFFFF; - --logo-d: #FFFFFF; - } - -} - /* TODO: credit fonts */ @font-face { @@ -181,7 +116,6 @@ a:hover { text-decoration: underline; } align-items: center; justify-content: center; - width: 100dvw; height: 100dvh; } @@ -189,7 +123,7 @@ a:hover { text-decoration: underline; } { display: flex; flex-direction: row; - align-items: flex-start; + align-items: baseline; justify-content: flex-end; flex-grow: 0.75; @@ -199,13 +133,19 @@ a:hover { text-decoration: underline; } padding: 0 1rem; } +#topnav +{ + display: flex; + flex-direction: row; + align-items: baseline; +} + #topnav_icon { display: inline-block; - width: 1.25rem; - height: 1.25rem; - line-height: 2.5rem; + width: 12pt; + height: 12pt; margin: 0 1rem; padding: 0; @@ -221,7 +161,6 @@ a:hover { text-decoration: underline; } height: 3rem; margin: 1rem 0.5rem; - border: 1px solid var(--btn-brd); border-radius: 0.35rem; @@ -321,6 +260,8 @@ button, input { all: unset; } background-color: var(--qbg); border: 1px solid var(--qborder); border-radius: 10rem; + + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow); } #query_wrap:hover @@ -441,3 +382,70 @@ footer, #about_pane display: inline-block; transform: rotate(180deg); } + + +@media (prefers-color-scheme: dark) +{ + :root + { + /* general */ + --bg: #202124; + --bg-dark: #171717; + --fg: #E8EAED; + --fg-mid: #BDC1C6; + --fg-light: #BDC1C6; + + --border: #3C4043; + + /* query input */ + --qbg: transparent; + --qborder: #5F6368; + + --qbgh: #303134; + --qborderh: transparent; + --qshadowh: #171717; + + /* buttons */ + --btn-bg: #303134; + --btn-fg: var(--fg); + --btn-shad: transparent; + --btn-brd: transparent; + + --btn-bgh: var(--btn-bg); + --btn-fgh: var(--btn-fg); + --btn-shadh: transparent; + --btn-brdh: #5F6368; + + --btn-bgf: var(--btn-bg); + --btn-fgf: var(--btn-fg); + --btn-shadf: transparent; + --btn-brdf: var(--btn-brdh); + + /* accent buttons */ + --abtn-bg: #8AB4F8; + --abtn-fg: #202124; + --abtn-brd: transparent; + --abtn-shad: transparent; + + --abtn-bgh: #93BAF9; + --abtn-fgh: var(--abtn-fg); + --abtn-brdh: transparent; + --abtn-shadh: transparent; + + --abtn-bgf: #A6C6FA; + --abtn-fgf: var(--abtn-fg); + --abtn-brdf: transparent; + --abtn-shadf: transparent; + + /* links */ + --a-unvis: #8AB4F8; + --a-vis: #C58AF9; + + /* misc */ + --logo-a: #FFFFFF; + --logo-b: #FFFFFF; + --logo-c: #FFFFFF; + --logo-d: #FFFFFF; + } + +} diff --git a/style/man.css b/style/man.css new file mode 100644 index 0000000..12a00b2 --- /dev/null +++ b/style/man.css @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2024 dwlr + * + * BSD 3-Clause License (BSD-3-Clause) + * See LICENSE for details + */ + +.manpage +{ + font-size: small; + + width: min(100% - 3rem, 9in); + padding: 0.25in; + margin: 1em 0 1em 0; + + border: 1px solid var(--border); + border-radius: 1em; +} + +.head +{ + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + + +@media (width <= 800px) +{ + .manpage + { + width: unset; + border: none; + margin: 0; + padding: 0; + } +} + + +/* TODO: give copyright */ + +table.head, table.foot { width: 100%; } +td.head-rtitle, td.foot-os { text-align: right; } +td.head-vol { text-align: center; } +.Nd, .Bf, .Op { display: inline; } +.Pa, .Ad { font-style: italic; } +.Ms { font-weight: bold; } +.Bl-diag > dt { font-weight: bold; } +code.Nm, .Fl, .Cm, .Ic, code.In, .Fd, .Fn, .Cd { font-weight: bold; font-family: inherit; } diff --git a/style/search.css b/style/search.css new file mode 100644 index 0000000..945d778 --- /dev/null +++ b/style/search.css @@ -0,0 +1,166 @@ +/* + * Copyright (C) 2024 dwlr + * + * BSD 3-Clause License (BSD-3-Clause) + * See LICENSE for details + */ + +:root +{ + --qshadow: var(--qborder); + --qshadowh: #BEC0C4; +} + +#logo { font-size: 1rem; } +#logo > h1 { font-size: 1.5rem; } + +#gc-let { font-size: 1.25em; } +#gc-me { font-size: 1em; } +#gc-man { font-size: 0.9em; } +#gc-that { font-size: 1em; } +#gc-for { font-size: 1.15em; } +#gc-you { font-size: 1em; } + +#main +{ + justify-content: flex-start; + align-items: flex-start; +} + +#main > header +{ + flex-grow: 0; + justify-content: flex-start; + align-items: baseline; + + padding: 1.5rem 2% 1.5rem 5%; + padding-bottom: 0; + + border-bottom: solid 1px var(--border); +} + +#search_pane +{ + max-width: 95%; + flex-grow: 0; +} + +#logo { margin-right: 1.5rem; } + +#mank +{ + background-color: var(--qbg); + color: var(--fg-light); +} + +#man { padding-left: 5pt; } + +#man, #mank +{ + font-size: 13pt; + min-width: 25pt; + margin: 0; + border-radius: 0; +} + +#mank +{ + background-color: transparent; + color: var(--fg-light); + border-color: transparent; +} + +#man:hover, #mank:hover +{ + text-decoration: underline; + box-shadow: none; +} + +#query_wrap +{ + overflow: hidden; + padding: 0; +} + +#query { margin-left: 15pt; } + +#query_icon +{ + display: inline-block; + + background: no-repeat url("/imgs/search-wt.svg"); + background-size: contain; + + height: 12pt; + width: 12pt; + + margin: 3pt 0 0 0; +} + +@keyframes verscale +{ + 0%, 100% { transform: rotate(-10deg); } + 50% { transform: rotate( 10deg); } +} + +#topnav { margin-left: auto; } + +#results +{ + flex-grow: 1; + margin: 0 5%; +} + +#results > p +{ + font-size: small; + margin-bottom: 1.5rem; +} + +#results > dl > dt { font-size: large; } +#results > dl > dd +{ + color: var(--fg-mid); + margin: 5pt 0 2rem 0; + font-size: 12pt; +} + +@media (prefers-color-scheme: dark) +{ + :root + { + --qshadow: transparent; + --qshadowh: #171717; + } + + #query_wrap + { + background-color: var(--qbgh); + border: 1px solid var(--qborderh); + } + + #query_wrap:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); } + + #man { border-color: transparent; } +} + +@media (width <= 970px) +{ + #topnav { display: none; } +} + +@media (width <= 800px) +{ + #main > header + { + justify-content: center; + align-items: center; + + padding: 0; + margin: 0; + } + + #query_wrap { width: min(42rem, 95dvw); } + + #logo { display: none; } +} -- cgit v1.2.3