mirror of
https://github.com/caddyserver/website.git
synced 2025-04-24 22:16:15 -04:00
docs: Start building quick-assist feature
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
23e904381c
commit
4c837b4f06
10 changed files with 709 additions and 292 deletions
|
|
@ -2,6 +2,7 @@
|
|||
.light {
|
||||
--body-bg: white;
|
||||
--text-color: #222;
|
||||
--text-color-muted: #7087a0;
|
||||
--header-bg: rgba(118, 179, 194, 0.11);
|
||||
--header-border-color: #ebf0f2;
|
||||
--topbar-link-color-hover: black;
|
||||
|
|
@ -21,7 +22,8 @@
|
|||
--dropdown-link-hover-color: #142633;
|
||||
--dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent);
|
||||
--dropdown-featured-hover-bg: rgb(223, 233, 238); /* rgb(232, 255, 254); */
|
||||
--dropdown-shadow-color: rgb(0 0 0 / .4);
|
||||
--dropdown-shadow-color: rgb(0 0 0 / .25);
|
||||
--box-bg: var(--header-border-color);
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -47,6 +49,7 @@
|
|||
--dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent);
|
||||
--dropdown-featured-hover-bg: rgb(64, 82, 92);
|
||||
--dropdown-shadow-color: black;
|
||||
--box-bg: var(--header-bg);
|
||||
}
|
||||
|
||||
.dark #logo-light,
|
||||
|
|
@ -100,6 +103,16 @@ body {
|
|||
tab-size: 4;
|
||||
background-color: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
background-image:
|
||||
radial-gradient(at calc(50% - min(25vw, 800px)) -10%, hsl(137.64deg, 100%, 92.42%) 0px, transparent min(15%, 500px)),
|
||||
radial-gradient(at calc(50% + min(25vw, 800px)) -10%, hsl(201.2deg, 68%, 90.2%) 0px, transparent min(15%, 500px));
|
||||
}
|
||||
|
||||
/* TODO: clean this up */
|
||||
.dark body {
|
||||
background-image:
|
||||
radial-gradient(at calc(50% - min(35vw, 700px)) -10%, hsl(129.5deg, 100%, 12.4%) 0px, transparent min(25%, 600px)),
|
||||
radial-gradient(at calc(50% + min(35vw, 700px)) -10%, hsl(201deg, 100%, 19.33%) 0px, transparent min(25%, 600px))
|
||||
}
|
||||
|
||||
main a {
|
||||
|
|
@ -212,7 +225,6 @@ header nav ul {
|
|||
.navbar .button {
|
||||
text-decoration: none;
|
||||
transition: all 200ms;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -242,27 +254,35 @@ header nav ul {
|
|||
gap: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
padding: .6em 1.5em;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
||||
/* necessary for hoversplash: */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button.primary,
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.primary:hover,
|
||||
.button.primary:hover {
|
||||
color: #1a71cb;
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active {
|
||||
transition: all 75ms;
|
||||
transform: scale(.95);
|
||||
|
|
@ -294,12 +314,14 @@ header nav ul {
|
|||
animation: 1s cubic-bezier(.16, 1, .3, 1) hoverSplash;
|
||||
}
|
||||
|
||||
.button.primary .hover-splash {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
button .hover-splash,
|
||||
.button .hover-splash {
|
||||
background-color: rgba(24, 156, 233, 0.6);
|
||||
}
|
||||
|
||||
.button.secondary .hover-splash {
|
||||
background-color: rgba(24, 156, 233, 0.6);
|
||||
button.primary .hover-splash,
|
||||
.button.primary .hover-splash {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -311,7 +333,7 @@ header nav ul {
|
|||
border-radius: 15px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 75px var(--dropdown-shadow-color);
|
||||
box-shadow: 0 50px 75px var(--dropdown-shadow-color);
|
||||
visibility: hidden;
|
||||
top: calc(100% - 5px);
|
||||
left: 0;
|
||||
|
|
|
|||
43
new/resources/css/docs-home.css
Normal file
43
new/resources/css/docs-home.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.quick-assist-history {
|
||||
font-size: 90%;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.quick-assist-history > * {
|
||||
display: inline-block;
|
||||
color: var(--text-color-muted);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-assist-history > *:hover {
|
||||
color: #216688;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quick-assist-history > :not(:first-child):before {
|
||||
content: '>';
|
||||
margin-right: .5em;
|
||||
display: inline-block;
|
||||
color: #809783;
|
||||
}
|
||||
|
||||
h3.quick-assist-question {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.quick-assist-options {
|
||||
margin-top: 1.5em;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.quick-assist button,
|
||||
.quick-assist .button {
|
||||
font-size: 100%;
|
||||
min-height: 3.5em;
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
:root, .light {
|
||||
--header-bg: white;
|
||||
--button-secondary-color: rgb(64, 131, 153);
|
||||
--button-secondary-border-color: rgb(198, 217, 223);
|
||||
--button-secondary-color-hover: rgb(7, 86, 134);
|
||||
--button-secondary-border-color-hover: rgb(155, 191, 213);
|
||||
--header-bg: transparent;
|
||||
--button-color: rgb(64, 131, 153);
|
||||
--button-border-color: rgb(198, 217, 223);
|
||||
--button-color-hover: rgb(7, 86, 134);
|
||||
--button-border-color-hover: rgb(155, 191, 213);
|
||||
--nav-current-bg: linear-gradient(to right, #ecf1f3, transparent);
|
||||
--nav-link-hover-shadow-color: rgba(0, 0, 0, 0.15);
|
||||
--nav-link-hover-before-bg: #d2e5e7;
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
|
||||
.dark {
|
||||
--header-bg: rgba(44, 130, 164, 0.11);
|
||||
--button-secondary-color: rgb(36, 166, 208);
|
||||
--button-secondary-border-color: rgb(38, 116, 140);
|
||||
--button-secondary-color-hover: rgb(0, 194, 255);
|
||||
--button-secondary-border-color-hover: rgb(0, 194, 255);
|
||||
--button-color: rgb(36, 166, 208);
|
||||
--button-border-color: rgb(38, 116, 140);
|
||||
--button-color-hover: rgb(0, 194, 255);
|
||||
--button-border-color-hover: rgb(0, 194, 255);
|
||||
--nav-current-bg: linear-gradient(to right, #1a3c4d, transparent);
|
||||
--nav-link-hover-shadow-color: rgba(255, 255, 255, 0.15);
|
||||
--nav-link-hover-before-bg: #32494f;
|
||||
|
|
@ -50,21 +50,27 @@ header {
|
|||
.topbar {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
color: var(--button-color);
|
||||
border: 1px solid var(--button-border-color);
|
||||
}
|
||||
button:hover,
|
||||
.button:hover {
|
||||
color: var(--button-color-hover);
|
||||
border: 1px solid var(--button-border-color-hover);
|
||||
}
|
||||
button.primary,
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, #7ece98 25%, rgb(49, 155, 208) 80%);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
button.primary:hover,
|
||||
.button.primary:hover {
|
||||
color: white;
|
||||
}
|
||||
.button.secondary {
|
||||
color: var(--button-secondary-color);
|
||||
border: 1px solid var(--button-secondary-border-color);
|
||||
}
|
||||
.button.secondary:hover {
|
||||
color: var(--button-secondary-color-hover);
|
||||
border: 1px solid var(--button-secondary-border-color-hover);
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
|
|
@ -86,8 +92,12 @@ main {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.docs nav {
|
||||
.docs nav,
|
||||
#pagenav {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.docs nav {
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
|
|
@ -98,6 +108,9 @@ main {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#pagenav .heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -240,6 +253,7 @@ article {
|
|||
|
||||
max-width: 1100px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -248,7 +262,7 @@ server-side from markdown to have a constrained
|
|||
width, a few elements should be allowed to
|
||||
extend to the borders of the page
|
||||
*/
|
||||
article > :not(.fullwidth),
|
||||
article > :not(.fullwidth, .fullspan),
|
||||
article > .fullwidth > *,
|
||||
.pad {
|
||||
padding-left: 8%;
|
||||
|
|
@ -579,9 +593,54 @@ td code {
|
|||
}
|
||||
|
||||
|
||||
.box {
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
font-size: 18px;
|
||||
border: 2px solid var(--box-bg);
|
||||
}
|
||||
|
||||
.box-filled {
|
||||
border: none;
|
||||
background: var(--box-bg);
|
||||
}
|
||||
|
||||
.box-capped {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box-capped > * {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.box-cap {
|
||||
border-bottom: 1px solid var(--box-bg);
|
||||
}
|
||||
|
||||
.box-filled .box-cap {
|
||||
border-bottom: 1px solid var(--button-border-color); /* #d0dfe6; */
|
||||
}
|
||||
|
||||
.box > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.box > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.box:not(.box-capped) > :first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.box:not(.box-capped) > :last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.box h3 {
|
||||
font-size: 125%;
|
||||
margin: 0 0 .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
#autonav {
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@
|
|||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
.button {
|
||||
color: rgb(54 206 255);
|
||||
border: 1px solid rgb(54 206 255);
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
.button:hover {
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
.button.cool {
|
||||
position: relative;
|
||||
color: rgb(226 254 214);
|
||||
border: none;
|
||||
|
||||
/* necessary for gradient dropshadow: */
|
||||
transform-style: preserve-3d;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue