From 774e8bb803eb0c34d8ba05463495019acb6ae35c Mon Sep 17 00:00:00 2001 From: Shazaib Nasrullah <> Date: Tue, 20 Jun 2023 16:38:15 -0400 Subject: [PATCH] docs: added logo + updated my docs w/ shortcodes --- .../getting-started/database-component.md | 44 +-- docs/content/getting-started/rest-api.md | 22 +- docs/hugo.toml | 1 + docs/layouts/partials/site-header.html | 9 + docs/resources/_gen/images/candle-icon.png | Bin 0 -> 5660 bytes docs/static/images/candle-icon.png | Bin 0 -> 5660 bytes .../assets/scss/_component.scss | 341 +++++++++++++++++ .../assets/scss/_project.scss | 227 +++++++++++ .../assets/scss/_structure.scss | 58 +++ .../assets/scss/_variable.scss | 46 +++ .../assets/scss/chroma.scss | 59 +++ .../assets/scss/foundation/_element.scss | 199 ++++++++++ .../assets/scss/foundation/_index.scss | 4 + .../assets/scss/foundation/_normalize.scss | 355 ++++++++++++++++++ .../assets/scss/foundation/_reset.scss | 72 ++++ .../assets/scss/foundation/_stack.scss | 66 ++++ .../assets/scss/function/_calc-font-size.scss | 52 +++ .../assets/scss/function/_calc-stack.scss | 40 ++ .../assets/scss/function/_contrast-color.scss | 26 ++ .../assets/scss/function/_strip-unit.scss | 17 + .../hugo-theme-techdoc/assets/scss/theme.scss | 4 + .../src/scss/_structure.scss | 1 + 22 files changed, 1610 insertions(+), 33 deletions(-) create mode 100644 docs/layouts/partials/site-header.html create mode 100644 docs/resources/_gen/images/candle-icon.png create mode 100644 docs/static/images/candle-icon.png create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/_component.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/_project.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/_structure.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/_variable.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/chroma.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/foundation/_element.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/foundation/_index.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/foundation/_normalize.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/foundation/_reset.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/foundation/_stack.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-font-size.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-stack.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/function/_contrast-color.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/function/_strip-unit.scss create mode 100644 docs/themes/hugo-theme-techdoc/assets/scss/theme.scss diff --git a/docs/content/getting-started/database-component.md b/docs/content/getting-started/database-component.md index 02a8942cb..49edbc023 100644 --- a/docs/content/getting-started/database-component.md +++ b/docs/content/getting-started/database-component.md @@ -2,21 +2,21 @@ title: Database --- -Connect and talk to a database +Connect and Talk to a Database === -Getting a database hooked up and making calls to the database is an extremely simple process in Wick. Let's go through it: +Getting a database connected and making calls to the database is an extremely simple process in Wick. Let's go through it: -In order to connect and talk to a database, we will be creating a Wick component. You can start with a new `.wick` file. Let's call our file `db.wick`. +To connect and talk to a database, we need to create a Wick component. Start with a new `.wick` file and name it `db.wick`. ```yaml name: demo_db kind: wick/component@v1 ``` -After naming and declaring the [`kind`]( {{< ref "configuration/reference/v1#componentconfiguration" >}}) of the component, we can get hooked up to our database (you will need your own database up and running). +After naming and declaring the {{}}kind{{}} of the component, we can establish a connection to our database (ensure that your own database is up and running). -We declare our database as a [`resource`]( {{< ref "configuration/reference/v1#componentconfiguration" >}}). Resources are what a component relies on to execute its operations. +We declare our database as a {{}}resource{{}}. Resources are what a component relies on to execute its operations. ```yaml resources: @@ -26,9 +26,9 @@ resources: url: postgres://$DB_USER:$DB_PASSWORD@$DB_HOST:$DB_PORT/$DB_NAME ``` -All we need to do is name [our resource]( {{< ref "configuration/reference/v1#resourcebinding" >}}) so we can reference it in other places in our app, declare its `kind`, and provide the database URL. +In this section, we bind {{}}our resource{{}}, declare its `kind`, and provide the database URL. -The last thing we need is to finish declaring our [sql component]( {{< ref "configuration/reference/v1#sqlcomponent" >}}) and assign to it the database resource. +The next step is to complete the declaration of our {{}}SQL component{{}} and assign the database resource to it. ```yaml component: @@ -37,13 +37,13 @@ component: tls: false ``` -And that's all you need to hook up to a database! +And that's all you need to do to connect to a database! -### Making database calls +### Making Database Calls -Now let's see how to make calls to the database. +Now, let's see how to make calls to the database. -We will be defining these queries in our [`operations`]( {{< ref "configuration/reference/v1#sqloperationdefinition" >}}) section of the YAML. +We define these queries in the {{}}operations{{}} section of the YAML. ```yaml component: @@ -64,29 +64,29 @@ component: SELECT * FROM users WHERE id = $1 ``` -After naming the operation, each one consists of four fields: inputs, outputs, arguments, and the query. +For each operation, we name it and provide details such as inputs, outputs, arguments, and the query. -***inputs + outputs:*** We named and declared the type of input and output. The `type: object` serves as our `any` type for our output. +***inputs + outputs:*** We name and declare the type of input and output. The `type: object` serves as the `any` type for the output. -***arguments:*** Sets up the sequence of your inputs. The order of the arguments here will be the order of the inputs in your query. +***arguments:*** Sets up the sequence of inputs. The order of the arguments here will match the order of the inputs in your query. -***query:*** Insert the database query here. (Note: You would replace the values with $1, $2, $3, etc. based on the order of your arguments.) +***query:*** Insert the database query here. (Note: Replace the values with $1, $2, $3, etc. based on the order of your arguments.) -Hooking up and setting up calls to a database is as simple as that in Wick! You can follow the same `operations` structure to add as many unique calls to the database as you'd like, each with their own inputs and outputs. +Connecting to a database and making calls to it is as simple as that in Wick! You can use the same `operations` structure to add as many unique calls to the database as you like, each with their own inputs and outputs. ### Invoking -Lastly, let's just go over how to run any of our operations we create. +Lastly, let's go over how to run any of the operations we created. -It would be a simple `invoke` call on the command line following this structure: +You can use the `invoke` command on the command line with the following structure: ``` wick invoke -- --args ``` -You can use `wick invoke --trace` instead for debugging purposes. +For debugging purposes, you can use `wick invoke --trace`. -Our command line prompt for the file we just made would be: +For the file we just created, the command line prompt would be: ``` wick invoke db.wick get_user -- --id=1 @@ -124,6 +124,6 @@ component: SELECT * FROM users WHERE id = $1 ``` -And just like that, we've got a database hooked up and are making calls to it. You can use this same structure to hook up to any database and make as many calls as you'd like. To see more database examples, check out our [examples repo](https://github.com/candlecorp/wick/tree/main/examples/db). +And just like that, we've connected to a database and are making calls to it. You can use this same structure to connect to any database and make as many calls as you need. For more database examples, check out our [examples repository](https://github.com/candlecorp/wick/tree/main/examples/db). -Note: Wick now also has the `wick new component sql` command that will help you get started with a database component. It will create a new `.wick` file with the database resource and a sample operation. +Note: Wick now also includes the `wick new component sql` command, which helps you get started with a database component. It creates a new .wick file with the database resource and a sample operation. \ No newline at end of file diff --git a/docs/content/getting-started/rest-api.md b/docs/content/getting-started/rest-api.md index 16e0caf2e..358e9dab8 100644 --- a/docs/content/getting-started/rest-api.md +++ b/docs/content/getting-started/rest-api.md @@ -1,9 +1,9 @@ --- -title: Rest APIs +title: RestAPI --- -Setup your own rest APIs +Set up your own RestAPI == -Wick provides an easy solution for Rest APIs as well. To set up a rest API, lets start with a `demo.wick` file. This is a standard [Wick application config]( {{< ref "configuration/reference/v1#appconfiguration" >}}) file. +Wick provides an easy solution for RestAPIs as well. To set one up, let's start with a `demo.wick` file. This is a standard {{}}Wick application config{{}} file. To start off, like all `.wick` files, we declare the name and kind of our app/component. ```yaml @@ -11,7 +11,7 @@ kind: wick/app@v1 name: rest_demo ``` -Wick sets up Rest APIs as http triggers. In order to use this we need to declare an http [`resource`]( {{< ref "configuration/reference/v1#resourcedefinition" >}}) for our app. We can set the port that will be exposed and the address. (0.0.0.0 binds to localhost) +Wick sets up Rest APIs as HTTP triggers. In order to use this, we need to declare an HTTP {{}}resource{{}} for our app. We can set the port that will be exposed and the address. (0.0.0.0 binds to localhost) ```yaml resources: @@ -21,7 +21,7 @@ resources: port: 8999 address: 0.0.0.0 ``` -Now that we have declared our applications needs, we can setup rest [`triggers`]( {{< ref "configuration/reference/v1#triggerdefinition" >}}). +Now that we have declared our application's needs, we can set up REST {{}}triggers{{}}. ```yaml @@ -34,19 +34,19 @@ triggers: routes: ``` -Our trigger is setup using the http resource we provided our app above. Under [`routers`]( {{< ref "configuration/reference/v1#httprouter" >}}), we have our rest router with the ability to set its path and routes. +Our trigger is set up using the HTTP resource we provided to our app above. Under {{}}routers{{}}, we have our REST router with the ability to set its path and routes. -[`Routes`]( {{< ref "configuration/reference/v1#route" >}}) is where we get to add and define our rest apis. Let's take a look at the structure of Wick rest routes. +{{}}Routes{{}} is where we get to add and define our REST APIs. Let's take a look at the structure of Wick REST routes. ```yaml routes: - - uri: "desired url endpoint" + - uri: "desired URL endpoint" operation: :: methods: - POST ``` -With those 3 fields, we have set a uri destination and assigned an operation to take place when we hit that uri. We can add as many routes as desired following this same structure. +With those three fields, we have set a URI destination and assigned an operation to take place when we hit that URI. We can add as many routes as desired following this same structure. ### Done! @@ -68,11 +68,11 @@ triggers: - kind: wick/router/rest@v1 path: /api/ routes: - - uri: "desired url endpoint" + - uri: "desired URL endpoint" operation: :: methods: - POST ``` -This is essentailly all you need to create rest API routes in Wick. To see how it all works, check out our http example applications [here](https://github.com/candlecorp/wick/tree/main/examples/http). +This is essentially all you need to create REST API routes in Wick. To see how it all works, check out our HTTP example applications [here](https://github.com/candlecorp/wick/tree/main/examples/http). \ No newline at end of file diff --git a/docs/hugo.toml b/docs/hugo.toml index 9f836afc7..9b185dec3 100644 --- a/docs/hugo.toml +++ b/docs/hugo.toml @@ -8,6 +8,7 @@ enableInlineShortcodes = true [params] menu_style = "open-menu" wick_repo = "https://github.com/candlecorp/wick" +logo = "/images/candle-icon.png" [markup] defaultMarkdownHandler = 'goldmark' diff --git a/docs/layouts/partials/site-header.html b/docs/layouts/partials/site-header.html new file mode 100644 index 000000000..a69e2dbf6 --- /dev/null +++ b/docs/layouts/partials/site-header.html @@ -0,0 +1,9 @@ +
+

{{ .Site.Title }}

+ {{- with .Site.Params.logo -}} + + {{- end -}} + {{ with .Site.Params.description }} +

{{ . }}

+ {{end}} +
\ No newline at end of file diff --git a/docs/resources/_gen/images/candle-icon.png b/docs/resources/_gen/images/candle-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a29cc1cad543c4888ecf5f917586e3f52ba35695 GIT binary patch literal 5660 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 ul, + li > ol { + @extend %unset-stack; + } +} + +figure > figcaption { + @extend %none-stack; +} + +.table_of_contents, +.edit-meta, +.edit-page, +.pagination, +.highlight, +.powered, +.panel, +.button, +.gist, +.twitter-tweet { + @extend %stack; +} + +.pagination { + @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between); + font-weight: bold; + > * { + @extend %none-stack; + } +} +.nav-prev {} +.nav-next { + margin-left: auto; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + .pagination { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); + } + .nav-next { + margin-left: 0; + } +} + +.panel { + --panel-font-color: #000; + --panel-background-color: unset; + --panel-border-color: transparent; + + padding: variable.$default-layout-padding; + color: var(--panel-font-color, #000); + background: var(--panel-background-color, unset); + border: 1px solid; + border-color: var(--panel-border-color, transparent); + + a { + text-decoration: underline; + font-weight: bold; + } +} + +.panel-primary { + --panel-border-color: #{variable.$default-border-color}; +} +.panel-notice { + --panel-font-color: #fff; + --panel-background-color: #4ba0e1; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; + +} +.panel-success { + --panel-font-color: #fff; + --panel-background-color: #609f43; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-caution { + --panel-font-color: #fff; + --panel-background-color: #de776d; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-warning { + --panel-font-color: #fff; + --panel-background-color: #e67e22; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-danger { + --panel-font-color: #fff; + --panel-background-color: #ce3426; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-header {} +.panel-body {} + +.button { + display: inline-block; + font-size: 120%; + padding: .5rem 1.2rem; + font-weight: bold; + text-decoration: none; + border-radius: .8rem; + + --button-font-color: #000; + --button-font-hover-color: #000; + --button-background-color: #{variable.$default-background-color}; + --button-background-hover-color: #f7f7f7; + --button-border-color: #{variable.$default-border-color}; + + color: var(--button-font-color, #000); + background: var(--button-background-color, unset); + border: 2px solid ; + border-color: var(--button-border-color, transparent); + + &:hover { + color: var(--button-font-hover-color, #000); + text-decoration: none; + background: var(--button-background-hover-color, unset); + } +} + +.button-notice { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #4ba0e1; + --button-background-hover-color: #3b89c5; + --button-border-color: transparent; +} +.button-success { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #369b08; + --button-background-hover-color: #256905; + --button-border-color: transparent; +} +.button-caution { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f56558; + --button-background-hover-color: #d45145; + --button-border-color: transparent; +} +.button-warning { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f5811b; + --button-background-hover-color: #db7012; + --button-border-color: transparent; +} +.button-danger { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #ce3426; + --button-background-hover-color: #a0281d; + --button-border-color: transparent; +} + +.notification { + padding: .2rem variable.$default-layout-padding; + text-align: center; + background: variable.$sidebar-active-color; +} + +.backtothetop { + display: none; + font-size: 200%; +} +.fa-layers .fa-circle { + color: #fff; +} + +figure > figcaption h4 { + font-size: 80%; + font-weight: normal; +} + +.table_of_contents { + font-size: 90%; + padding: variable.$default-layout-padding; + border: 4px solid variable.$default-border-color; + + ul { + list-style: none; + padding-left: 0; + } + li { + border-top: 1px solid variable.$default-border-color; + } + > nav > ul > li:first-child { + border-top: unset; + } + + ul > li li a { + margin-left: 2rem * 1; + } + ul ul > li li a { + margin-left: 2rem * 2; + } + ul ul ul > li li a { + margin-left: 2rem * 3; + } + ul ul ul ul > li li a { + margin-left: 2rem * 4; + } + ul ul ul ul ul > li li a { + margin-left: 2rem * 5; + } + +} + +.headerlink > .svg-inline--fa { + margin-left: .4rem; + width: .8rem; +} + +.ais-SearchBox { + .ais-SearchBox-input { + width: 70%; + } + button { + margin-left: .2rem; + padding: .4rem; + } +} +.ais-Stats { + font-size: 80%; + color: #70757a; +} +.ais-Hits-item { + @extend %stack; + + h3 { + font-size: 140%; + font-weight: normal; + } + p { + @extend %unset-stack; + color: #3C4043; + } + .lastmod { + font-size: 90%; + color: #70757a; + } +} + +.ais-Pagination { + margin-top: 1em; +} +.ais-Pagination-list { + list-style: none; + padding-left: 0; + @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center); +} +.ais-Pagination-item { + padding: .6rem; +} + +.code { + @include flexbox-grid-mixins.grid($flex-wrap: wrap); + @extend %stack; + + .filename { + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + font-size: 80%; + color: #666; + } + .copy-btn { + margin-left: auto; + + cursor: pointer; + position: relative; + + font-size: 80%; + border: solid 1px #ccc; + padding: .2rem .6rem; + border-radius: .3rem; + line-height: 1; + margin-bottom: .2rem; + outline: none; + } + .code-content { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + + .highlight { + @extend %none-stack; + } + } +} + +.tooltipped::after { + content: 'Copied!'; + background: #555; + display: inline-block; + color: #fff; + border-radius: .4rem; + position: absolute; + left: 50%; + top: -1.8rem; + transform: translate(-50%, 0); + font-size: .75rem; + padding: 4px 10px 6px 10px; + animation: fade-tooltip .5s 1s 1 forwards; +} + +@keyframes fade-tooltip { + to { opacity: 0; } +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/_project.scss b/docs/themes/hugo-theme-techdoc/assets/scss/_project.scss new file mode 100644 index 000000000..ac6b5eacb --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/_project.scss @@ -0,0 +1,227 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + +header { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .5rem variable.$default-layout-padding; + + h1 { + font-size: 140%; + display: inline-block; + } + + .version { + margin-left: .4rem; + font-size: 80%; + } + + .github { + color: currentColor; + margin-left: .4rem; + font-size: 180%; + } +} + +.description { +} + +.global-menu { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .2rem variable.$default-layout-padding; + + ul { + list-style: none; + padding: 0; + margin: 0; + } + li { + display: inline-block; + margin-right: 1.8rem; + position: relative; + } + + ul.sub-menu { + display: none; + margin: 0; + position: absolute; + top: 1.8rem; + left: 0; + z-index: 99999; + + li { + padding: .2rem variable.$default-layout-padding; + background: var(--custom-background-color, #000); + width: 140px; + font-size: 80%; + a { + color: var(--custom-font-color, #fff); + } + } + } + + .fa-angle-right { + margin-left: .4rem; + font-size: 80%; + } + li.parent:hover > ul.sub-menu { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } + + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + li { + display: block; + margin-right: 0; + border-bottom: 1px solid currentColor; + + &:last-child { + border-bottom: none; + } + } + + .fa-angle-right { + display: none; + } + + ul.sub-menu { + display: block; + position: static; + + li { + width: auto; + background: transparent; + padding: 0 .4rem; + + li { + padding-top: .2rem; + } + a { + color: currentColor; + } + } + } + } + + a { + display: block; + color: currentColor; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } +} + +main { + padding: 3rem; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + main { + padding: 1rem; + } +} + +.sidebar { + font-size: 90%; + line-height: 1.8; + background: variable.$sidebar-background-color; + border-right: 1px solid variable.$sidebar-active-color; + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + a { + position: relative; + display: block; + color: #404040; + text-decoration: none; + padding: .2rem 1rem; + border-left: solid 4px variable.$sidebar-background-color; + border-bottom: solid 1px variable.$sidebar-active-color; + + &:hover { + color: #404040; + background: variable.$sidebar-hover-color; + border-left: solid 4px #ccc; + } + } + + nav > ul > li li a { + padding-left: 1rem + 1rem * 1; + } + nav > ul ul > li li a { + padding-left: 1rem + 1rem * 2; + } + nav > ul ul ul > li li a { + padding-left: 1rem + 1rem * 3; + } + nav > ul ul ul ul > li li a { + padding-left: 1rem + 1rem * 4; + } + nav > ul ul ul ul ul > li li a { + padding-left: 1rem + 1rem * 5; + } + + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + nav > ul > li:first-child a { + border-top: solid 1px variable.$sidebar-active-color; + } + } + + .active > a { + background: variable.$sidebar-active-color; + border-left: solid 4px #ccc; + } + + .slide-menu { + .has-sub-menu:not(.parent) ul { + display: none; + } + + .has-sub-menu > a span.mark { + position: absolute; + top: 0; + right: 0; + display: inline-block; + height: 32px; + width: 32px; + line-height: 2; + text-align: center; + color: #979797; + background: #f2f2f2; + border-left: 1px solid #e7e7e7; + } + } +} + +.sidebar-footer { + padding: variable.$default-layout-padding; +} + +footer { +} + +.edit-meta { + font-size: 80%; + text-align: right; +} + +.edit-page { + font-weight: bold; +} + +.powered { + font-size: 80%; + text-align: right; + color: #999; +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/_structure.scss b/docs/themes/hugo-theme-techdoc/assets/scss/_structure.scss new file mode 100644 index 000000000..2bb652c08 --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/_structure.scss @@ -0,0 +1,58 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + +/*-----------------------* + Structure +*-----------------------*/ +html, +body { + height: 100%; + background-color: aqua; +} + +.container { + width: 100%; + height: 100%; + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + margin: auto; +} + +.content-container { + @include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); + @include flexbox-grid-mixins.grid($justify-content: center); +} + +main { + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + + &:only-child { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + } +} + +.sidebar { + @include flexbox-grid-mixins.grid-col($col: 3, $order: -1); + // position: fixed; + // overflow-x: hidden; + overflow-x: hidden; + overflow-y: scroll; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + .content-container { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } + + main { + @include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%); + } + .sidebar { + @include flexbox-grid-mixins.grid-col($col: none, $order: 1); + } +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/_variable.scss b/docs/themes/hugo-theme-techdoc/assets/scss/_variable.scss new file mode 100644 index 000000000..6a010ae8e --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/_variable.scss @@ -0,0 +1,46 @@ +@use 'function/calc-stack'; + +$default-layout-width: 1024px !default; + +$default-base-font-size: 18px !default; +$default-font-size: 18px !default; +$default-line-space: 6px !default; +$default-line-height: calc-stack.line-height($default-line-space, $default-font-size, $default-base-font-size) !default; +$default-stack: calc-stack.stack($default-line-height, $default-font-size, $default-base-font-size) !default; + +$default-layout-margin: 0 !default; +$default-layout-padding: $default-stack !default; + +$default-font-color: #000 !default; +$default-font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; + +// color +$default-background-color: #fafafa !default; +$default-border-color: #f0f0f0 !default; + +$default-link-text-color: #2e7eb3 !default; +$default-link-text-hover-color: #38a0e4 !default; + +$sidebar-background-color: #f9f9f9 !default; +$sidebar-hover-color: #eee !default; +$sidebar-active-color: #eee !default; + +// code +$code-font-size: .95rem !default; +$code-block-background-color: #f4f6f8 !default; +$code-border-color: #f0f0f0 !default; +$code-inline-background-color: #f0f0f0 !default; +$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace !default; + +// breakpoint +$default-breakpoints: ( + xl: 1280px, + lg: 1024px, + md: 896px, + sm: 768px, + xs: 480px +) !default; + +// grid +$flexbox-grid-mixins-box-sizing: null !default; +$flexbox-grid-mixins-stack: margin-top !default; diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/chroma.scss b/docs/themes/hugo-theme-techdoc/assets/scss/chroma.scss new file mode 100644 index 000000000..340149cfc --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/chroma.scss @@ -0,0 +1,59 @@ +/* Background */ .chroma { color: #f8f8f2; background-color: #272822 } +/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ .chroma .k { color: #66d9ef } +/* KeywordConstant */ .chroma .kc { color: #66d9ef } +/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #66d9ef } +/* KeywordReserved */ .chroma .kr { color: #66d9ef } +/* KeywordType */ .chroma .kt { color: #66d9ef } +/* NameAttribute */ .chroma .na { color: #a6e22e } +/* NameClass */ .chroma .nc { color: #a6e22e } +/* NameConstant */ .chroma .no { color: #66d9ef } +/* NameDecorator */ .chroma .nd { color: #a6e22e } +/* NameException */ .chroma .ne { color: #a6e22e } +/* NameFunction */ .chroma .nf { color: #a6e22e } +/* NameOther */ .chroma .nx { color: #a6e22e } +/* NameTag */ .chroma .nt { color: #f92672 } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #e6db74 } +/* LiteralString */ .chroma .s { color: #e6db74 } +/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } +/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } +/* LiteralStringChar */ .chroma .sc { color: #e6db74 } +/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } +/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } +/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } +/* LiteralStringEscape */ .chroma .se { color: #ae81ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } +/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } +/* LiteralStringOther */ .chroma .sx { color: #e6db74 } +/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } +/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } +/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } +/* LiteralNumber */ .chroma .m { color: #ae81ff } +/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } +/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } +/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } +/* Operator */ .chroma .o { color: #f92672 } +/* OperatorWord */ .chroma .ow { color: #f92672 } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* GenericDeleted */ .chroma .gd { color: #f92672 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericInserted */ .chroma .gi { color: #a6e22e } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #75715e } diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_element.scss b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_element.scss new file mode 100644 index 000000000..d5bc1ae5d --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_element.scss @@ -0,0 +1,199 @@ +@use '../variable'; +@use '../function/calc-stack'; + +/*-----------------------* + Element v1.0.0-custom +*-----------------------*/ +* { + box-sizing: border-box; +} + +:root { + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); + color: variable.$default-font-color; + font-family: var(--custom-font-family-base, variable.$default-font-family); + font-feature-settings : 'pwid'; +} + +body { + background-color: variable.$default-background-color; + margin: variable.$default-layout-margin; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--custom-font-family-headings, variable.$default-font-family); + font-weight: bold; + line-height: variable.$default-line-height; + + > small { + font-size: 75%; + font-weight: normal; + } +} + +h1 { + font-size: 240%; + line-height: calc-stack.line-height(variable.$default-line-space, 240%); +} +h2 { + font-size: 200%; + line-height: calc-stack.line-height(variable.$default-line-space, 200%); +} +h3 { + font-size: 160%; + line-height: calc-stack.line-height(variable.$default-line-space, 160%); +} +h4 { + font-size: 125%; + line-height: calc-stack.line-height(variable.$default-line-space, 125%); +} +h5 { + font-size: 100%; + line-height: calc-stack.line-height(variable.$default-line-space, 100%); +} +h6 { + font-size: 80%; + line-height: calc-stack.line-height(variable.$default-line-space, 80%); +} + +a { + color: var(--custom-link-text-color, variable.$default-link-text-color); + text-decoration: none; + + &:focus, + &:active, + &:hover { + color: var(--custom-link-text-hover-color, variable.$default-link-text-hover-color); + text-decoration: underline; + } +} + +hr { + background-color: #ccc; + height: 2px; + border: 0; +} + +p { + font-size: variable.$default-font-size; +} + +img { + display: inline-block; + line-height: 0; +} + +img, +video { + height: auto; + max-width: 100%; +} + +table { + border-collapse: collapse; + border: 1px solid variable.$default-border-color; + width: 100%; +} +th, +td { + border-top: 1px solid variable.$default-border-color; + border-right: 1px solid variable.$default-border-color; + tr:nth-child(even) & { + background: #f8f8f8; + } + padding: .6rem; +} +th { + background: #eee; + font-weight: bold; + text-align: left; +} + +ul { + list-style-type: disc; +} + +ul { + &.no-style { + list-style: none; + padding-left: 0; + } + &.inline { + list-style: none; + padding-left: 0; + li { + display: inline; + padding-right: 2rem; + } + } +} + +dt { + font-weight: bold; +} +dd { + margin-left: 2rem; +} + +blockquote { + color: #999; + padding: variable.$default-layout-padding; + background-color: #f4f4f4; + border-left: 4px solid variable.$default-border-color; + border-radius: .2rem; +} + +code, +pre, +kbd { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +code, +kbd { + padding: .2rem; + border-radius: .2rem; +} +code { + background-color: #f4f4f4; +} +kbd { + color: #fff; + background-color: #333; +} + +pre { + background-color: #f4f4f4; + padding: variable.$default-layout-padding; + overflow: auto; + white-space: pre-wrap; + border-radius: .2rem; + + code { + padding: 0; + background-color: unset; + } + + &.wrap { + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + } + &.scrollable { + max-height: 240px; + overflow-y: scroll; + } +} + +figcaption { + color: #333; + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_index.scss b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_index.scss new file mode 100644 index 000000000..edd558ae3 --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_index.scss @@ -0,0 +1,4 @@ +@use "normalize"; +@use "reset"; +@use "element"; +@use "stack"; diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_normalize.scss b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_normalize.scss new file mode 100644 index 000000000..0be9165dd --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_normalize.scss @@ -0,0 +1,355 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + /* stylelint-disable */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + /* stylelint-enable */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_reset.scss b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_reset.scss new file mode 100644 index 000000000..aa59002d3 --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_reset.scss @@ -0,0 +1,72 @@ +/*-----------------------* + Reset +*-----------------------*/ +* { + box-sizing: border-box; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + +input, +button, +textarea, +select { + font: inherit; +} + +button { + background-color: transparent; + color: inherit; + border-width: 0; + padding: 0; + cursor: pointer; +} + +input::-moz-focus-inner { + border: 0; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +cite { + font-style: normal; +} + +fieldset { + border-width: 0; + margin: 0; + padding: 0; +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_stack.scss b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_stack.scss new file mode 100644 index 000000000..d9feb149d --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/foundation/_stack.scss @@ -0,0 +1,66 @@ +@use '../variable'; + +/*-----------------------* + stack +*-----------------------*/ +:root { + --const-stack: #{variable.$default-stack}; + --stack-top: #{variable.$default-stack}; + --stack-bottom: 0; + --first-stack-top: 0; + --first-stack-bottom: 0; + --last-stack-top: 0; + --last-stack-bottom: 0; +} + +.first-stack, +%first-stack { + margin-top: var(--first-stack-top, unset); + margin-bottom: var(--first-stack-bottom, unset); +} + +.stack, +%stack { + margin-top: var(--stack-top, unset); + margin-bottom: var(--stack-bottom, unset); +} + +.last-stack, +%last-stack { + margin-top: var(--last-stack-top, unset); + margin-bottom: var(--last-stack-bottom, unset); +} + +.stack-multi--by2, +%stack-multi--by2 { + margin-top: calc(var(--first-stack-top, unset) * 2); + margin-bottom: calc(var(--first-stack-bottom, unset) * 2); +} + +.stack-multi--by4, +%stack-multi--by4 { + margin-top: calc(var(--first-stack-top, unset) * 4); + margin-bottom: calc(var(--first-stack-bottom, unset) * 4); +} + +.stack-divi--by2, +%stack-divi--by2 { + margin-top: calc(var(--first-stack-top, unset) / 2); + margin-bottom: calc(var(--first-stack-bottom, unset) / 2); +} + +.none-stack, +%none-stack { + margin-top: 0; +} + +.unset-stack, +%unset-stack { + margin-top: unset; +} + +.reverse-stack +%reverse-stack { + margin-top: var(--stack-bottom, unset); + margin-bottom: var(--stack-top, unset); +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-font-size.scss b/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-font-size.scss new file mode 100644 index 000000000..1e5e8560f --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-font-size.scss @@ -0,0 +1,52 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; + +// Included Modules +@use 'strip-unit'; + +// =================================================================== +// px to em +// =================================================================== + +@function px2em($px, $base: 16) { + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1em; +} + +@function px2rem($px, $base: 16) { + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1rem; +} +// =================================================================== +// percent to px +// ========================================================n=========== + +@function percent2px($percent, $base: 16) { + @return strip-unit.strip-unit($base) * math.div(strip-unit.strip-unit($percent), 100) * 1px; +} + +// =================================================================== +// percent to em +// =================================================================== + +@function percent2em($percent, $base: 16) { + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div(strip-unit.strip-unit($base) * $ratio, strip-unit.strip-unit($base)) * 1em; +} + +@function percent2rem($percent, $base: 16) { + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div((strip-unit.strip-unit($base) * $ratio), strip-unit.strip-unit($base)) * 1rem; +} + +// =================================================================== +// em to px +// =================================================================== + +@function em2px($em, $base: 16) { + @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px; +} + +@function rem2px($rem, $base: 16) { + @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px; +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-stack.scss b/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-stack.scss new file mode 100644 index 000000000..c9c7b05c8 --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/function/_calc-stack.scss @@ -0,0 +1,40 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; + +// Included Modules +@use 'calc-font-size'; +@use 'strip-unit'; + +@function stack($line-height: 1, $font-size: 16px, $base-size: 16px) { + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base-size); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); + } + + $line-height-px-unit: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($font-size); + + $stack: calc-font-size.px2rem($line-height-px-unit, $base-size); + + @return $stack; +} + +@function line-height($line-space: 4px, $font-size: 16px, $base-size: 16px) { + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base-size); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); + } + + $font-size: strip-unit.strip-unit($font-size); + $line-space: strip-unit.strip-unit($line-space); + $line-height: math.div(($line-space * 2) + $font-size, $font-size); + + @return $line-height; +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/function/_contrast-color.scss b/docs/themes/hugo-theme-techdoc/assets/scss/function/_contrast-color.scss new file mode 100644 index 000000000..685d0d52b --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/function/_contrast-color.scss @@ -0,0 +1,26 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; +@use 'sass:color'; + +// =================================================================== +// contrast color +// =================================================================== + +@function contrast-color($color: null, $dark: #000, $light: #fff) { + @if $color == null { + @return null; + } + @else { + $color-brightness: brightness($color); + $light-color-brightness: brightness($light); + $dark-color-brightness: brightness($dark); + + @return if(math.abs($color-brightness - $light-color-brightness) > math.abs($color-brightness - $dark-color-brightness), $light, $dark); + } +} + +@function brightness($color: null) { + @return math.div((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114), 1000); +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/function/_strip-unit.scss b/docs/themes/hugo-theme-techdoc/assets/scss/function/_strip-unit.scss new file mode 100644 index 000000000..dd931856e --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/function/_strip-unit.scss @@ -0,0 +1,17 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:meta'; +@use 'sass:math'; + +@function strip-unit($value) { + @if meta.type-of($value) == 'number' and math.is-unitless($value) == false { + @return math.div($value, $value * 0 + 1); + } @else if meta.type-of($value) == 'number' { + @return $value; + } @else { + @warn $value; + @warn meta.type-of($value); + @error "error strip unit" + } +} diff --git a/docs/themes/hugo-theme-techdoc/assets/scss/theme.scss b/docs/themes/hugo-theme-techdoc/assets/scss/theme.scss new file mode 100644 index 000000000..25e2e0408 --- /dev/null +++ b/docs/themes/hugo-theme-techdoc/assets/scss/theme.scss @@ -0,0 +1,4 @@ +@use "foundation"; +@use "structure"; +@use "component"; +@use "project"; diff --git a/docs/themes/hugo-theme-techdoc/src/scss/_structure.scss b/docs/themes/hugo-theme-techdoc/src/scss/_structure.scss index e6047ad9d..2bb652c08 100644 --- a/docs/themes/hugo-theme-techdoc/src/scss/_structure.scss +++ b/docs/themes/hugo-theme-techdoc/src/scss/_structure.scss @@ -13,6 +13,7 @@ html, body { height: 100%; + background-color: aqua; } .container {