From 1159c4ab65daebdb35f05da396c8365fe65571bf Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 14 Aug 2018 12:13:18 +0200 Subject: [PATCH] docs responsive + assets/css cleaning --- docs/src/_includes/header.pug | 46 ++-- docs/src/_includes/newsletter-form.pug | 7 + docs/src/_layouts/homepage.pug | 16 +- docs/src/_layouts/two-columns.pug | 22 +- docs/src/_styles/components.css | 182 +++++++++++++++ docs/src/_styles/docs.css | 36 +++ docs/src/_styles/docsearch.css | 2 +- .../assets/{ => community}/angular-icon.svg | 0 .../assets/{ => community}/community-logo.svg | 0 .../{ => community}/instantsearch-icon.svg | 0 .../assets/{ => community}/jekyll-icon.svg | 0 .../src/assets/{ => community}/react-icon.svg | 0 docs/src/assets/{ => community}/vue-icon.svg | 0 docs/src/assets/docsearch-avatar.png | Bin 0 -> 16045 bytes .../assets/{ => icons}/arrow-separator.svg | 0 docs/src/assets/icons/close.svg | 10 + .../{github-logo.svg => icons/github.svg} | 0 .../assets/{ => icons}/magnifying-glass.svg | 0 docs/src/assets/icons/menu.svg | 10 + docs/src/js/main.js | 46 ++-- docs/src/style.css | 215 +----------------- 21 files changed, 314 insertions(+), 278 deletions(-) create mode 100644 docs/src/_includes/newsletter-form.pug create mode 100644 docs/src/_styles/docs.css rename docs/src/assets/{ => community}/angular-icon.svg (100%) rename docs/src/assets/{ => community}/community-logo.svg (100%) rename docs/src/assets/{ => community}/instantsearch-icon.svg (100%) rename docs/src/assets/{ => community}/jekyll-icon.svg (100%) rename docs/src/assets/{ => community}/react-icon.svg (100%) rename docs/src/assets/{ => community}/vue-icon.svg (100%) create mode 100644 docs/src/assets/docsearch-avatar.png rename docs/src/assets/{ => icons}/arrow-separator.svg (100%) create mode 100644 docs/src/assets/icons/close.svg rename docs/src/assets/{github-logo.svg => icons/github.svg} (100%) rename docs/src/assets/{ => icons}/magnifying-glass.svg (100%) create mode 100644 docs/src/assets/icons/menu.svg diff --git a/docs/src/_includes/header.pug b/docs/src/_includes/header.pug index b992e9e7..be2616a4 100644 --- a/docs/src/_includes/header.pug +++ b/docs/src/_includes/header.pug @@ -5,63 +5,67 @@ a.cursor-pointer.text-0(href="https://www.algolia.com/", target="_blank") img.h-1.sm_h-1x(src="assets/algolia-logo.svg", alt="Algolia") //- Separator - .hidden.sm_flex.fln.flrnw.flc + .hidden.sm_flex.fln.flrnw.flc.mr-1 .w-1.h-1.sm_w-1x.sm_h-1x.text-telluric.fill-current - include ../assets/arrow-separator.svg + include ../assets/icons/arrow-separator.svg //- Community logo .hidden.lg_flex.custom-community-link.fln.flcnw.flc.px-0x.relative a.cursor-pointer.text-0(href="https://community.algolia.com/", target="_blank") - img.h-1.sm_h-1x.lg_h-2(src="assets/community-logo.svg", alt="Algolia Community") + img.h-1.sm_h-1x.lg_h-2(src="assets/community/community-logo.svg", alt="Algolia Community") .custom-community-projects.hidden.sm_block.absolute.z-5.pin-t.mt-3.ml-3.border.border-proton.rounded-auto.bg-white-pure.shadow-1 .flex.flrw.pt-0x a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/talksearch/") .fln.bg-teal.rounded-auto.w-2x.h-2x - img.w-100(src="assets/talksearch-icon.svg", alt="TalkSearch") + img.w-100(src="assets/community/talksearch-icon.svg", alt="TalkSearch") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula TalkSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/jekyll-algolia/") .fln.bg-purple.rounded-auto.w-2x.h-2x - img.w-100(src="assets/jekyll-icon.svg", alt="Jekyll") + img.w-100(src="assets/community/jekyll-icon.svg", alt="Jekyll") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Jekyll a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/instantsearch.js/") .fln.bg-yellow.rounded-auto.w-2x.h-2x - img.w-100(src="assets/instantsearch-icon.svg", alt="InstantSearch") + img.w-100(src="assets/community/instantsearch-icon.svg", alt="InstantSearch") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/react-instantsearch/") .fln.bg-blue.rounded-auto.w-2x.h-2x - img.w-100(src="assets/react-icon.svg", alt="React InstantSearch") + img.w-100(src="assets/community/react-icon.svg", alt="React InstantSearch") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula React InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline .fln.bg-green.rounded-auto.w-2x.h-2x(href="https://community.algolia.com/vue-instantsearch/") - img.w-100(src="assets/vue-icon.svg", alt="Vue InstantSearch") + img.w-100(src="assets/community/vue-icon.svg", alt="Vue InstantSearch") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Vue InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/angular-instantsearch/") .fln.bg-red.rounded-auto.w-2x.h-2x.flex.flrnw.flc - img.w-80(src="assets/angular-icon.svg", alt="Angular InstantSearch") + img.w-80(src="assets/community/angular-icon.svg", alt="Angular InstantSearch") .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Angular InstantSearch a.fla.flex.flrnw.p-0x.flc.text-solstice.bold.bg-moon.rounded-auto.py-1(href="https://discourse.algolia.com/") |Community forum //- Separator - .hidden.lg_flex.fln.flrnw.flc + .hidden.lg_flex.fln.flrnw.flc.mr-1 .w-1.h-1.sm_w-1x.sm_h-1x.text-telluric.fill-current - include ../assets/arrow-separator.svg + include ../assets/icons/arrow-separator.svg + //- Project link .flex.fln.flrnw.flc.pl-1.sm_pl-0 - a.cursor-pointer.uppercase.tracking-poppins.poppins.text-solstice.hover_text-nebula.hover_no-underline(href=site.url)=site.title + a.hidden.sm_block.cursor-pointer.uppercase.tracking-poppins.poppins.text-solstice.hover_text-nebula.hover_no-underline(href=site.url)=site.title + a.sm_hidden(href=site.url) + img(src="assets/docsearch-avatar.png" width=40 alt="DocSearch logo") - //- Filler - .flex.fla.md_hidden //- DocSearch - .hidden.md_flex.fla.flrnw.flrcv.flrar.ml-2 + .flex.fla.flrnw.flrcv.flrar.ml-2.mr-1 .w-100.flrnw.flex.flrar - .custom-search-wrapper.fln.h-60.w-50.border.border-proton.rounded-auto.relative + .custom-search-wrapper.fln.h-60.w-100.rounded-auto.relative label.absolute.pin-left.z-1.w-1.h-100.ml-05.text-solstice.fill-current.cursor-pointer(for="docsearch") - include ../assets/magnifying-glass.svg + include ../assets/icons/magnifying-glass.svg input.custom-search-input.w-100.h-100.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-transparent#docsearch(placeholder="Search the documentation...") //- Links - .flex.fln.flrnw.flc.px-2 - a.cursor-pointer.text-2.text-solstice.hover_text-nebula.hover_no-underline(href="./what-is-docsearch.html") Documentation - .flex.fln.flrnw.flc.pr-0x + .hidden.sm_flex.justify-start.items-center + a.text-2.text-solstice.hover_text-nebula.hover_no-underline.mr-1(href="./what-is-docsearch.html") Documentation + a.w-1x.h-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank") + include ../assets/icons/github.svg + + .sm_hidden a.w-1x.h-1x.text-solstice.fill-current(href=site.repo, target="_blank") - include ../assets/github-logo.svg + include ../assets/icons/menu.svg diff --git a/docs/src/_includes/newsletter-form.pug b/docs/src/_includes/newsletter-form.pug new file mode 100644 index 00000000..587f1b88 --- /dev/null +++ b/docs/src/_includes/newsletter-form.pug @@ -0,0 +1,7 @@ +.text-5.mb-1 Sign Up to our Newsletter +.text-2.mb-2.text-nova Follow project updates and general vector loveliness +.max-w-sm.flex.m-auto.mt-1 + .fla + input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email") + .fla.pl-1 + .button.c-button.w-100 Sign Up diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index eaa36454..fe79475a 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -156,7 +156,7 @@ block content .pb-3.text-3.leading-2.text-white.text-center Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us! include ../_includes/apply-form.pug - .text-center.p-2.pb-4 + .text-center.p-2.pb-2 p.text-2.mb-2.leading-2 Docsearch 2015-2018 • Designed and built with love by a(href="https://www.algolia.com/") img.align-top.pl-1(src="assets/algolia-logo.svg", alt="search by Algolia", width=110) @@ -172,17 +172,11 @@ block content li.p-1.w-100.md_w-auto.inline-block a(href="https://discourse.algolia.com/tags/docsearch") Community Forum li.p-1.w-100.md_w-auto.inline-block - a(href="https://discord.gg/ax4NkP") Discord + a(href="https://discord.gg/qqCWs99") Discord - - .text-5.mb-1 Sign Up to our Newsletter - .text-2.mb-2.text-nova Follow project updates and general vector loveliness - .max-w-sm.flex.m-auto.mt-1 - .fla - input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email") - .fla.pl-1 - .button.c-button.w-100 Sign Up - .hide + //include ../_includes/newsletter.pug + + .hidden .my-popper .popper__arrow(x-arrow='right') img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200) diff --git a/docs/src/_layouts/two-columns.pug b/docs/src/_layouts/two-columns.pug index 74580510..97b47b5d 100644 --- a/docs/src/_layouts/two-columns.pug +++ b/docs/src/_layouts/two-columns.pug @@ -1,16 +1,13 @@ extends main.pug block content - .bgtb-white-pure-moon.pt-3x.pb-3.poppins - .max-w-lg.m-auto.text-center - .text-6.lg_text-8.uppercase.tracking-poppins.text-solstice.bold=current.title - .bgtb-moon-white-pure - .flex.flrnw.max-w-lg.m-auto - .fla + .bgtb-moon-white-pure.px-2 + .md_flex.max-w-lg.m-auto + .navigation-sidebar.hidden.absolute.z-90.top-16.w-full.border-b.md_static.md_bg-transparent.md_w-25.md_block.md_border-0 // Adding subsections from markdown - .sticky.pin-t.top-3.h-100vh-3.pl-1.lg_pl-2.overflow-y-auto + .sticky.pin-t.top-3.h-100vh-3.pl-1.lg_pl-2.overflow-y-auto.pt-3 each category in sidebar - .category.text-nebula.poppins.uppercase.mt-1=category.title - ul.list-reset.pt-05.pb-1.text-2 + .category.text-nebula.poppins.uppercase=category.title + ul.list-reset.pt-05.pb-1.text-1.mb-1 each page in category.pages - var isCurrent = current.url === page.url - var additionalClasses = isCurrent ? 'text-nebula' : 'text-solstice' @@ -23,7 +20,12 @@ block content li a.block.py-0x.text-telluric(href=`${page.url}#${heading.anchor}`)=heading.title - .documentation-content.fln.w-md.text-2.pb-2.pr-1.sm_px-2.overflow-hidden + .documentation-content.text-1.pt-2.md_pt-3.max-w-md + .block.md_hidden.mb-1 + a(href="https://community.algolia.com/") DocSearch + span  >  + a(href="https://community.algolia.com/documentation") Documentation + .text-5.lg_text-6.uppercase.tracking-poppins.text-solstice.bold.mb-2=current.title !=current.content // Include the apply form if current.includeForm diff --git a/docs/src/_styles/components.css b/docs/src/_styles/components.css index 46275771..7198fe91 100644 --- a/docs/src/_styles/components.css +++ b/docs/src/_styles/components.css @@ -53,3 +53,185 @@ .c-card:hover { @apply no-underline; } + +/* Backgrounds */ +.bg-docsearch-hero { + background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa); + background-size: cover; + background-repeat: no-repeat; + background-position: center calc(100% - 18px); +} + +.bg-analytics { + background-image: url('assets/bg-analytics.svg'); + background-size: 1800px; + background-repeat: no-repeat; + background-position: center 450px; +} + +.bg-footer { + background-image: url('assets/bg-footer.svg'); + background-color: #FDFDFE; + background-size: 1600px; + background-repeat: no-repeat; + background-position: center top; +} + +/* Logo slider (gslide) */ +.glide__slide { + border-radius: 8px; + background: white; + overflow: hidden; + + img { + padding: 4px; + display: inline-block; + vertical-align: middle; + } +} + +/* Live Demo */ +.docsearch-live-demo-input-wrapper { + margin-top: 5px; + margin-right: 8px; + float: right; + width: 50%; + max-width: 450px; + min-width: 250px; + + input, form { + box-shadow: none !important; + width: 100%; + } +} + +.demo-header-wrapper{ + height: 42px; + background: url("assets/bg-docsearch-live-demo-bootstrap.png") #563E7C no-repeat; + background-size: 1200px; + background-position: left top; +} + +.demo-content-wrapper{ + height: 400px; + background: url("assets/bg-docsearch-live-demo-bootstrap.png") no-repeat; + background-size: 1200px; + background-position: center -46px; +} + +/* Tooltips (popper.js) */ +.my-popper { + padding: 24px; + min-width: 350px; + max-width: 48%; + margin: 0 auto; + box-shadow: 0 0 10px 2px #ccc; + background: #FFFFFF; + box-shadow: 0 8px 18px 0 rgba(37,44,97,0.15), 0 2px 4px 0 rgba(93,100,148,0.2); + z-index: 200; + font-size: 14px; + color: #8A8AAB; + line-height: 28px; + text-align: center; + background-image: linear-gradient(#fff, #f5f5fa); + border-radius: 2px; + border-top: solid 3px #5468ff; +} + +.my-popper .popper__arrow{ + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 8px; +} + +.my-popper .popper__arrow { + border-color: white; +} + +.my-popper[x-placement^="bottom"] { + margin-top: 8px; +} + +.my-popper[x-placement^="bottom"] .popper__arrow { + border-width: 0 8px 8px 8px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: -8px; + left: calc(50% - 8px); + margin-top: 0; + margin-bottom: 0; +} + +/* Forms */ +.control-label { + display: inline-block; + margin-bottom: 4px; + font-weight: bold; + text-transform: uppercase; +} + +.form-control { + border-radius: 4px; + border: solid 1px #DBDBE7; + padding: 8px 16px; + width: 100%; + margin-bottom: 8px; +} + +.form-control-primary { + background: #FFFFFF; + box-shadow: 0 2px 0 0 rgba(255,255,255,0.80), inset 0 2px 9px 0 rgba(93,100,148,0.30); + border-radius: 24px; + height: 42px; + padding: 0 16px; +} + +.elevation { + background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%); + box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15); + border-radius: 5px; +} + + +/* Custom styles */ +.custom-community-projects { + width: 400px; + opacity: 0; + pointer-events: none; + transition-property: opacity; + transition-duration: 0.25s; + will-change: opacity; +} +.custom-community-link:hover .custom-community-projects { + opacity: 1; + pointer-events: auto; +} + +/** + * When we need to show code in action, we often need to show screenshots or + * screencasts. This class will still an element to make it look like a browser + * window. + **/ +.fake-browser { + padding: 24px 1px 1px 1px; + @apply bg-grey; + border-radius: 6px; + position: relative; + overflow: hidden; + &:before { + content: ""; + position: absolute; + top: 6px; + left: 16px; + @apply bg-red; + display: block; + border-radius: 50%; + width: 14px; + height: 14px; + box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5), + 50px 0 0 rgba(236, 139, 99, 0.5); + } +} diff --git a/docs/src/_styles/docs.css b/docs/src/_styles/docs.css new file mode 100644 index 00000000..bc179d47 --- /dev/null +++ b/docs/src/_styles/docs.css @@ -0,0 +1,36 @@ +/* Content converted form markdown */ +.documentation-content { + /* Paragraphs */ + p { + @apply .leading-2 my-1; + } + ul { + @apply .leading-2 my-1; + } + /* Titles */ + h2 { + @apply .text-solstice .text-4 .normal; + @apply .mb-1 .mt-2; + /* Trick to have heading scroll into view and not being hidden by header */ + &:before { + content: ""; + @apply hidden .h-3; + } + &:target:before { + @apply block; + } + .anchor { + @apply .hidden; + &:after { + content: "#"; + } + } + &:hover .anchor { + @apply .inline-block; + } + } +} + +.navigation-sidebar{ + min-width: 200px; +} diff --git a/docs/src/_styles/docsearch.css b/docs/src/_styles/docsearch.css index 6eee63aa..c05fef1c 100644 --- a/docs/src/_styles/docsearch.css +++ b/docs/src/_styles/docsearch.css @@ -20,6 +20,6 @@ /* Dropdown menu */ /* purgecss start ignore */ .ds-dropdown-menu { - @apply w-100; + //@apply w-100; } /* purgecss end ignore */ diff --git a/docs/src/assets/angular-icon.svg b/docs/src/assets/community/angular-icon.svg similarity index 100% rename from docs/src/assets/angular-icon.svg rename to docs/src/assets/community/angular-icon.svg diff --git a/docs/src/assets/community-logo.svg b/docs/src/assets/community/community-logo.svg similarity index 100% rename from docs/src/assets/community-logo.svg rename to docs/src/assets/community/community-logo.svg diff --git a/docs/src/assets/instantsearch-icon.svg b/docs/src/assets/community/instantsearch-icon.svg similarity index 100% rename from docs/src/assets/instantsearch-icon.svg rename to docs/src/assets/community/instantsearch-icon.svg diff --git a/docs/src/assets/jekyll-icon.svg b/docs/src/assets/community/jekyll-icon.svg similarity index 100% rename from docs/src/assets/jekyll-icon.svg rename to docs/src/assets/community/jekyll-icon.svg diff --git a/docs/src/assets/react-icon.svg b/docs/src/assets/community/react-icon.svg similarity index 100% rename from docs/src/assets/react-icon.svg rename to docs/src/assets/community/react-icon.svg diff --git a/docs/src/assets/vue-icon.svg b/docs/src/assets/community/vue-icon.svg similarity index 100% rename from docs/src/assets/vue-icon.svg rename to docs/src/assets/community/vue-icon.svg diff --git a/docs/src/assets/docsearch-avatar.png b/docs/src/assets/docsearch-avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..4054e4419f39c89e6f39105bbbe9ac5a07fd59c7 GIT binary patch literal 16045 zcmeHug;!K<+waUU-~fWOl+@5IDLqI^OLs^&(lNjwARwufqzD4i4N?PQfpkj_C?zdO zNXXfv&-;AuTIVk~XML{4TC?}v_rBtH{jSS69W50i0$KtP2t;&GRZ$lN0%L%`PcS^- z&F^U4Y7mH^-dRCG=bnNBla9BigR`4G2&5X9o^ee-)r9I3=A>BMlnJ7HcTbfA^^^7q z(=E3s))bw)8Zah*J1?j*1tlpj4!6PE`&>eXyvEc}-Y*=nuU~(&e*5?{vYX7`e|R^) zQ$qYCz+*80(b+&0<5gkRN^^e#V{0U>N)9NzD@eWQ}$Vd;Dn_7Ie5%*s){aC9mX zWMfY{#?-TunkzlHkeYjEaI8%9>GC41>l#Sgp-!<6l)`aR=vbHfRMJke#}Gnnh1y?1 zd$=*gNA6Qa4UUfsv;Si4`51Sl&+*Gsl-yp_q|%N?dsxUmkP&VC{G;iQaE4D;%|Au@ z1{i{4Q-caoUaVv6!+fG})sK(fs6PgS}IlwOZsO2jge7s}k>c zN4FbVJ9?kfP}xWIZxW7CLHjp-vV_*2gu)%}#O-}bJ4)?K$X(_Q`}v55s#F;|xVy^N zAJ4j6pFjSg;gU7(!tU_kRAc5$!_p4rraa|#!~9`or8x2QC!>s;ihWZs;Z8fzXlI*- zhF8D(5588yW*V}3`^DaIRd(0TNZQoXMBLcNecKyDT!;wPpz^7uMJtSHtIZYLalX!>1B9ZLNhmykTvki1cW z>;}IGED_=PQb3S^{oUtUb~o5?Buy;`JyfMfeaS9RBA0OeUCy%i8(LXtOV9d}>pq_` zL08l#9gx!9Q5{K6LJFMKL;|G`MbC6tCTR7U%dZ|EXwwnb(VgI#a1^1^R2m

Z7Eq~?zgfgH;ova50hp5@vsZtaAK2lhJ78HF> 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 MB`wA3yVj5X4@$Slxc~qF literal 0 HcmV?d00001 diff --git a/docs/src/assets/arrow-separator.svg b/docs/src/assets/icons/arrow-separator.svg similarity index 100% rename from docs/src/assets/arrow-separator.svg rename to docs/src/assets/icons/arrow-separator.svg diff --git a/docs/src/assets/icons/close.svg b/docs/src/assets/icons/close.svg new file mode 100644 index 00000000..55b02fbe --- /dev/null +++ b/docs/src/assets/icons/close.svg @@ -0,0 +1,10 @@ + + + + UI/icons/dark/close + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/src/assets/github-logo.svg b/docs/src/assets/icons/github.svg similarity index 100% rename from docs/src/assets/github-logo.svg rename to docs/src/assets/icons/github.svg diff --git a/docs/src/assets/magnifying-glass.svg b/docs/src/assets/icons/magnifying-glass.svg similarity index 100% rename from docs/src/assets/magnifying-glass.svg rename to docs/src/assets/icons/magnifying-glass.svg diff --git a/docs/src/assets/icons/menu.svg b/docs/src/assets/icons/menu.svg new file mode 100644 index 00000000..eb627a93 --- /dev/null +++ b/docs/src/assets/icons/menu.svg @@ -0,0 +1,10 @@ + + + + UI/icons/dark/menu + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/src/js/main.js b/docs/src/js/main.js index 87c3b512..d9294cd4 100644 --- a/docs/src/js/main.js +++ b/docs/src/js/main.js @@ -1,4 +1,25 @@ +/* global Glide, docsearch, Popper */ + window.onload = function() { + let i = 0; + let txt; + let query = ''; + + docsearch({ + apiKey: 'e3082526e1d5f37055241c335ab10f72', + indexName: 'talksearch', + inputSelector: '.custom-search-input', + debug: false, + }); + + const demoDocsearch = docsearch({ + apiKey: '5990ad008512000bba2cf951ccf0332f', + indexName: 'bootstrap', + inputSelector: '.docsearch-live-demo-input', + enhancedSearchInput: true, + debug: false, + }); + const reference = document.querySelector( '.docsearch-live-demo-input-wrapper' ); @@ -23,10 +44,6 @@ window.onload = function() { } } - let i = 0; - let txt; - let query = ''; - document.querySelectorAll('.ds-sample-query').forEach(el => { el.onclick = function() { txt = el.getAttribute('data-sample'); @@ -44,24 +61,11 @@ window.onload = function() { perView: 16, autoplay: 1300, breakpoints: { - 600: { perView: 4 }, + 400: { perView: 4 }, + 600: { perView: 6 }, 800: { perView: 8 }, - 1200: { perView: 10 }, + 1000: { perView: 10 }, + 1200: { perView: 12 }, }, }).mount(); }; - -docsearch({ - apiKey: 'e3082526e1d5f37055241c335ab10f72', - indexName: 'talksearch', - inputSelector: '.custom-search-input', - debug: false, -}); - -var demoDocsearch = docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', - indexName: 'bootstrap', - inputSelector: '.docsearch-live-demo-input', - enhancedSearchInput: true, - debug: false, -}); diff --git a/docs/src/style.css b/docs/src/style.css index 4cc5ff12..5a2fde94 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -3,149 +3,9 @@ @import "./_styles/components.css"; @import "./_styles/fonts.css"; @import "./_styles/highlight.css"; +@import "./_styles/docs.css"; @import "./_styles/docsearch.css"; -/* Backgrounds */ -.bg-docsearch-hero { - background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa); - background-size: cover; - background-repeat: no-repeat; - background-position: center calc(100% - 18px); -} - -.bg-analytics { - background-image: url('assets/bg-analytics.svg'); - background-size: 1800px; - background-repeat: no-repeat; - background-position: center 450px; -} - -.bg-footer { - background-image: url('assets/bg-footer.svg'); - background-color: #FDFDFE; - background-size: 1600px; - background-repeat: no-repeat; - background-position: center top; -} - -/* Logo slider (gslide) */ -.glide__slide { - border-radius: 8px; - background: white; - overflow: hidden; - - img { - padding: 4px; - display: inline-block; - vertical-align: middle; - } -} - -/* Live Demo */ -.docsearch-live-demo-input-wrapper { - margin-top: 5px; - margin-right: 8px; - float: right; - width: 50%; - max-width: 450px; - min-width: 250px; - - input, form { - box-shadow: none !important; - width: 100%; - } -} - -.demo-header-wrapper{ - height: 42px; - background: url("assets/bg-docsearch-live-demo-bootstrap.png") #563E7C no-repeat; - background-size: 1200px; - background-position: left top; -} - -.demo-content-wrapper{ - height: 400px; - background: url("assets/bg-docsearch-live-demo-bootstrap.png") no-repeat; - background-size: 1200px; - background-position: center -46px; -} - -/* Tooltips (popper.js) */ -.my-popper { - padding: 24px; - min-width: 350px; - max-width: 48%; - margin: 0 auto; - box-shadow: 0 0 10px 2px #ccc; - background: #FFFFFF; - box-shadow: 0 8px 18px 0 rgba(37,44,97,0.15), 0 2px 4px 0 rgba(93,100,148,0.2); - z-index: 200; - font-size: 14px; - color: #8A8AAB; - line-height: 28px; - text-align: center; - background-image: linear-gradient(#fff, #f5f5fa); - border-radius: 2px; - border-top: solid 3px #5468ff; -} - -.my-popper .popper__arrow{ - width: 0; - height: 0; - border-style: solid; - position: absolute; - margin: 8px; -} - -.my-popper .popper__arrow { - border-color: white; -} - -.my-popper[x-placement^="bottom"] { - margin-top: 8px; -} - -.my-popper[x-placement^="bottom"] .popper__arrow { - border-width: 0 8px 8px 8px; - border-left-color: transparent; - border-right-color: transparent; - border-top-color: transparent; - top: -8px; - left: calc(50% - 8px); - margin-top: 0; - margin-bottom: 0; -} - -/* Forms */ -.control-label { - display: inline-block; - margin-bottom: 4px; - font-weight: bold; - text-transform: uppercase; -} - -.form-control { - border-radius: 4px; - border: solid 1px #DBDBE7; - padding: 8px 16px; - width: 100%; - margin-bottom: 8px; -} - -.form-control-primary { - background: #FFFFFF; - box-shadow: 0 2px 0 0 rgba(255,255,255,0.80), inset 0 2px 9px 0 rgba(93,100,148,0.30); - border-radius: 24px; - height: 42px; - padding: 0 16px; -} - -.elevation { - background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%); - box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15); - border-radius: 5px; -} - /* Antialiasing */ * { -webkit-font-smoothing: antialiased; @@ -173,76 +33,3 @@ code { @apply .rounded-1; font-size: .9em; } - -/* Content converted form markdown */ -.documentation-content { - /* Paragraphs */ - p { - @apply .leading-2 my-1; - } - ul { - @apply .leading-2 my-1; - } - /* Titles */ - h2 { - @apply .text-solstice .text-5 .normal; - @apply .mb-1 .mt-2; - /* Trick to have heading scroll into view and not being hidden by header */ - &:before { - content: ""; - @apply hidden .h-3; - } - &:target:before { - @apply block; - } - .anchor { - @apply .hidden; - &:after { - content: "#"; - } - } - &:hover .anchor { - @apply .inline-block; - } - } -} - -/* Custom styles */ -.custom-community-projects { - width: 400px; - opacity: 0; - pointer-events: none; - transition-property: opacity; - transition-duration: 0.25s; - will-change: opacity; -} -.custom-community-link:hover .custom-community-projects { - opacity: 1; - pointer-events: auto; -} - -/** - * When we need to show code in action, we often need to show screenshots or - * screencasts. This class will still an element to make it look like a browser - * window. - **/ -.fake-browser { - padding: 24px 1px 1px 1px; - @apply bg-grey; - border-radius: 6px; - position: relative; - overflow: hidden; - &:before { - content: ""; - position: absolute; - top: 6px; - left: 16px; - @apply bg-red; - display: block; - border-radius: 50%; - width: 14px; - height: 14px; - box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5), - 50px 0 0 rgba(236, 139, 99, 0.5); - } -}