Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update template design for website #752

Merged
merged 3 commits into from
Mar 28, 2023
Merged

update template design for website #752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c9c600
add typescript support for offline plugin
Mar 8, 2023
00ac9cf
Merge branch 'jaredwray:main' into main
chrisllontop Mar 21, 2023
0c15a33
update template design for website
Mar 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/website/site/_data/site.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"authorName": "Jared Wray",
"footer": "License MIT and Copyright",
"homeTitle": "Simple key-value storage with support for multiple backends"
"homeTitle": "Simple key-value storage with support for multiple backends",
"name": "Keyv"
}
125 changes: 125 additions & 0 deletions packages/website/site/_includes/assets/css/styles/algolia.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
#hits {
height: calc(100vh - 72px);
position: fixed;
top: 72px;
overflow-y: auto;
background-color: var(--search-input-background);
width: 100%;
}

#hits > div {
padding: 0 24px;
}

.search-box {
display: flex;
width: 100%;
border-color: var(--search-input-background);
background-color: var(--search-input-background);
border: none;
border-bottom: 1px solid var(--border);
height: 72px;
}

.search-box input {
border-color: var(--search-input-background);
border: none !important;
border-bottom: 1px solid var(--border);
font-size: 18px;
height: 71px !important;
}

.ais-SearchBox {
position: relative;
flex: 0.8;
}

.close-modal--btn {
flex: 0.2;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
border-left: 1px solid var(--border);
margin: 10px 0;
cursor: pointer;
opacity: 0.6;
}

.ais-SearchBox-submit, .ais-SearchBox-reset {
position: absolute;
top: 24px;
cursor: pointer;
opacity: 0.6;
}

.ais-SearchBox-submit svg {
fill: currentColor;
width: 16px;
height: 16px;
}

.ais-SearchBox-reset svg {
fill: currentColor;
width: 10px;
height: 10px;
}

.ais-SearchBox-submit {
left: 16px
}

.ais-SearchBox-reset {
right: 16px;
}

.search-result {
padding: 0;
margin-top: 24px;
}

.search-result hr {
margin: 46px 0;
opacity: 0.3
}

@media screen and (min-width: 640px) {
.ais-SearchBox {
flex: 0.9;
}

.close-modal--btn {
flex: 0.1;
}
}

@media screen and (min-width: 992px) {
#hits {
height: calc(780px - 72px);
position: fixed;
}

#hits > div {
padding: 0 48px;
}

.search-container {
height: 780px;
}

.search-box {
justify-content: center;
}

.ais-SearchBox-submit, .ais-SearchBox-reset {
top: 16px;
}

.ais-SearchBox {
flex: 0.8;
}

.close-modal--btn {
justify-content: flex-end;
}
}
67 changes: 58 additions & 9 deletions packages/website/site/_includes/assets/css/styles/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,20 @@
}

.home-hero {
padding: 56px 0;
padding: 56px 0 72px;
background-color: var(--home-background)
}

.home-container {
margin-left: 32px;
margin-right: 32px;
margin: 32px 32px 48px;
color: var(--color-text);
}

.home-container h1 {
font-weight: 500;
font-size: 28px;
}

.home-title {
text-align: center;
margin-bottom: 32px;
Expand All @@ -29,14 +33,21 @@
color: transparent;
}

.home-docs-button {
padding: 12px 24px;
border: 2px solid var(--color-secondary-dark);
border-radius: 8px;
color: var(--color-secondary-dark);
font-weight: 600;
}

.home-hero {
text-align: center;
}

.home-hero img {
width: 100%;
max-width: 120px;
margin-bottom: 36px;
}

.content-container {
Expand Down Expand Up @@ -116,7 +127,10 @@
padding: 12px;
border-radius: 8px;
border: 2px solid var(--color-secondary);
color: var(--color-text);
color: var(--color-secondary);
width: fit-content;
margin-top: 32px;
display: block;
}

.release-btn span {
Expand All @@ -138,7 +152,7 @@
}

.release-body h1 {
font-size: 22px;
font-size: 22px;
margin-bottom: 16px;
}

Expand All @@ -160,9 +174,22 @@
text-decoration: underline;
}

footer {
height: 64px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid var(--border);
}

footer img {
margin-left: 8px;
margin-top: 4px;
}

@media screen and (min-width: 640px) {
.home-hero {
padding: 64px 0;
padding: 64px 0 72px;
}

.home-container {
Expand Down Expand Up @@ -197,13 +224,22 @@
margin-bottom: 64px;
}
}


@media screen and (min-width: 992px) {
.home-container {
margin-left: auto;
margin-right: auto;
margin: 72px auto 56px;
max-width: 70%;
}

.home-container h1 {
font-size: 32px;
}

.home-docs-button {
font-size: 24px;
}

.home-hero {
padding: 120px 0;
}
Expand All @@ -230,6 +266,19 @@
.content-container {
margin: 120px 0;
}

.release-btn {
margin-top: 0;
}

footer {
height: 76px;
}

footer img {
height: 40px;
width: auto;
}
}

@media screen and (min-width: 1200px) {
Expand Down
61 changes: 0 additions & 61 deletions packages/website/site/_includes/assets/css/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,62 +581,6 @@ details > summary {
word-break: break-word;
}

.pagefind-ui__search-input {
border-radius: 0 !important;
border-bottom: 1px solid var(--border);
}

.pagefind-ui__result, .pagefind-ui__message {
padding-left: 16px !important;
padding-right: 16px !important;
}

.pagefind-ui__results-area {
overflow-y: auto !important;
margin-top: 0 !important;
height: calc(100vh - 72px) !important;
}

.pagefind-ui__result-link {
color: var(--color-primary) !important;
}

.pagefind-ui__result-link:hover {
color: var(--color-secondary) !important;
}

.pagefind-ui__button {
margin-top: 0 !important;
border-top: none !important;
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border: 1px solid var(--border) !important;
}

.pagefind-ui__button {
background-color: var(--search-input-background) !important;
}

.pagefind-ui__result-excerpt {
line-height: 1.5 !important;
}

.pagefind-ui__result-excerpt > mark {
background-color: var(--background-search-highlight) !important;
color: var(--color-search-highlight) !important;
}

.pagefind-ui__form::before {
top: 28px !important;
}

.pagefind-ui__drawer {
background-color: var(--search-input-background) !important;
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}


@media screen and (min-width: 576px) {
.date {
display: flex;
Expand Down Expand Up @@ -777,7 +721,6 @@ details > summary {
border-right: 1px solid var(--border);
}


.sidebar-logo svg {
width: 32px;
height: 32px;
Expand Down Expand Up @@ -853,10 +796,6 @@ details > summary {
.sidebar-footer {
position: sticky;
}

.pagefind-ui__results-area {
max-height: 504px !important;
}
}

@media screen and (min-width: 1200px) {
Expand Down
Loading