summaryrefslogtreecommitdiff
path: root/style
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--style/main.css156
-rw-r--r--style/man.css51
-rw-r--r--style/search.css166
3 files changed, 299 insertions, 74 deletions
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 <dweller@cabin.digital>
+ *
+ * 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 <dweller@cabin.digital>
+ *
+ * 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; }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-27 10:55:13 +0000