diff --git a/build.sh b/build.sh new file mode 100755 index 0000000..8b00a2c --- /dev/null +++ b/build.sh @@ -0,0 +1,38 @@ +echo "Starting build..." + +# TODO: Check if current version is latest to avoid redundant installation + +# checks os and architecture for correct release +# https://stackoverflow.com/a/8597411 +echo "Installing & building tailwind..." +ASSET="tailwindcss" + +if [[ "$OSTYPE" == "linux-gnu"* ]]; then + ASSET="$ASSET-linux" +elif [[ "$OSTYPE" == "darwin"* ]]; then + ASSET="$ASSET-macos" +fi +if [[ "$(uname -m)" == "x86_64"* ]]; then + ASSET="$ASSET-x64" +elif [[ "$(uname -m)" == "arm64"* ]]; then + ASSET="$ASSET-arm64" +fi + +curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}" +chmod +x $ASSET +mv $ASSET tailwindcss + + +# initialized and configures tailwind if not configured +echo "Initializing tailwind..." +if [[ ! -f "tailwind.config.js" ]] +then + ./tailwindcss init + sed -i '' "s| content: \\[\\],| content: \\['./templates/**/*.html'\\],|g" tailwind.config.js +fi + +# compiles tailwind css for prod & builds project +echo "Compiling tailwindcss and building zola project..." +rm -rf public static/css +./tailwindcss -i css/index.css -o ./static/css/index.css --minify +zola build diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..7935df8 --- /dev/null +++ b/config.toml @@ -0,0 +1,131 @@ +# The URL the site will be built for +base_url = "http://localhost:8089/" +# Change this to your own URL! Please note this variable **must** be uncommented. + +title = "A Template Website" +description="Accessible and affordable for all" + +# When set to "true", a feed is automatically generated. +# generate_feed = true + +# The filename to use for the feed. Used as the template filename, too. +# Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed. +# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed. +# feed_filename = "index.xml" + +# The number of articles to include in the feed. All items are included if +# this limit is not set (the default). +# feed_limit = 10 + +# Whether to automatically compile all Sass files in the sass directory +compile_sass = false + +# When set to "true", the generated HTML files are minified. +# minify_html = true +# I'm keeping off for now -- buggy -- 2021-02-05 (@keats says it'll be fixed 0.14.0) + +# Whether to build a search index to be used later on by a JavaScript library +build_search_index = false + +[markdown] +# Whether to do syntax highlighting +# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola +highlight_code = true +highlight_theme = "visual-studio-dark" + +# When set to "true", emoji aliases translated to their corresponding +# Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄) +render_emoji = false + +[slugify] +paths = "on" + +# Whether external links are to be opened in a new tab +# If this is true, a `rel="noopener"` will always automatically be added for security reasons +external_links_target_blank = true + +# Whether to set rel="nofollow" for all external links +external_links_no_follow = true + +# Whether to set rel="noreferrer" for all external links +external_links_no_referrer = true + +# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form) +# For example, `...` into `…`, `"quote"` into `“curly”` etc +smart_punctuation = true + +[[taxonomies]] +name = "categories" +feed = true +paginate_by = 2 +paginate_path = "blog-posts" + +[[taxonomies]] +name = "items" +feed = true +paginate_by = 2 +paginate_path = "product-posts" + +[[taxonomies]] +name = "roles" +feed = true +paginate_by = 2 +paginate_path = "blog-posts" + +[[taxonomies]] +name = "tags" +feed = true +paginate_by = 2 +paginate_path = "blog-posts" + +[[taxonomies]] +name = "news-category" +feed = true +paginate_by = 6 +paginate_path = "news-card" + +[[taxonomies]] +name = "people" +feed = true +paginate_by = 9 +paginate_path = "people" + +[[taxonomies]] +name = "memberships" +feed = true +paginate_by = 8 +paginate_path = "people/memberships" + +[extra] +header_class = "customize" +footer_class = "customize" + +[extra.taxonomies."roles"] + [extra.taxonomies."roles".Create] + icon_path = "images/icons/paint-brush-art-svgrepo-com.svg" + banner_path = "images/marius-masalar-unsplash.jpg" + title = "Create OurWorld" + description = "Become a part of a team of creators looking to shape our digital world" + + [extra.taxonomies."roles".Develop] + icon_path = "images/icons/code-svgrepo-com.svg" + banner_path = "images/marius-masalar-unsplash.jpg" + title = "Develop OurWorld" + description = "Become a part of a team of developers building our digital world" + + [extra.taxonomies."roles".Inspire] + icon_path = "images/icons/bar-svgrepo-com.svg" + banner_path = "images/marius-masalar-unsplash.jpg" + title = "Share OurWorld" + description = "Create communities and involve people in ourworld" + + [extra.taxonomies."roles".Organize] + icon_path = "images/icons/form-svgrepo-com.svg" + banner_path = "images/marius-masalar-unsplash.jpg" + title = "Run OurWorld" + description = "Become a part of the organizational team at ourworld" + + + + + diff --git a/content/buildondunia/index.md b/content/buildondunia/index.md index 0da4042..221e9af 100644 --- a/content/buildondunia/index.md +++ b/content/buildondunia/index.md @@ -6,8 +6,6 @@ updated: 2021-02-20 draft: false sort_by: weight weight: 1 -extra: - logo_path: images/logo.svg --- {% row(style="center" padding="top"bgPath="img/build_background_2.png" bgStyle="short") %} diff --git a/content/css/admonition.css b/content/css/admonition.css new file mode 100644 index 0000000..de7d76e --- /dev/null +++ b/content/css/admonition.css @@ -0,0 +1,361 @@ +:root { + --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>"); + --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>"); + --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>"); + --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>"); + --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>"); + --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>"); + --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>"); + --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>"); + --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>"); + --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>"); + --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>"); + --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>"); + --md-details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E"); +} + +:is(.admonition) { + display: flow-root; + margin: 1.5625em 0; + padding: 0 1.2rem; + color: var(--fg); + page-break-inside: avoid; + background-color: var(--bg); + border: 0 solid black; + border-inline-start-width: 0.4rem; + border-radius: 0.2rem; + box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1); +} + +.admonition p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-size: 0.8rem; +} + +@media print { + :is(.admonition) { + box-shadow: none; + } +} +:is(.admonition) > * { + box-sizing: border-box; +} +:is(.admonition) :is(.admonition) { + margin-top: 1em; + margin-bottom: 1em; +} +:is(.admonition) > .tabbed-set:only-child { + margin-top: 0; +} +html :is(.admonition) > :last-child { + margin-bottom: 1.2rem; +} + +:is(.admonition-title, summary) { + position: relative; + margin-block: 0; + margin-inline: -1.6rem -1.2rem; + padding-block: 0.8rem; + padding-inline: 4rem 1.2rem; + font-weight: 700; + background-color: rgba(68, 138, 255, 0.1); + border: 0 solid #448aff; + border-inline-start-width: 0.4rem; + border-start-start-radius: 0.2rem; + display: flex; +} +:is(.admonition-title, summary) > p { + margin: 0; +} +html :is(.admonition-title, summary):last-child { + margin-bottom: 0; +} +:is(.admonition-title, summary)::before { + position: absolute; + top: 0.625em; + inset-inline-start: 1.2rem; + width: 1.4rem; + height: 1.4rem; + background-color: #448aff; + mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + content: ""; +} + +:is(.admonition):is(.note) { + border-color: #448aff; +} + +:is(.note) > :is(.admonition-title, summary) { + background-color: rgba(68, 138, 255, 0.1); + border-color: #448aff; +} +:is(.note) > :is(.admonition-title, summary)::before { + background-color: #448aff; + mask-image: var(--md-admonition-icon--note); + -webkit-mask-image: var(--md-admonition-icon--note); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.abstract, .summary, .tldr) { + border-color: #00b0ff; +} + +:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary) { + background-color: rgba(0, 176, 255, 0.1); + border-color: #00b0ff; +} +:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary)::before { + background-color: #00b0ff; + mask-image: var(--md-admonition-icon--abstract); + -webkit-mask-image: var(--md-admonition-icon--abstract); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.info, .todo) { + border-color: #00b8d4; +} + +:is(.info, .todo) > :is(.admonition-title, summary) { + background-color: rgba(0, 184, 212, 0.1); + border-color: #00b8d4; +} +:is(.info, .todo) > :is(.admonition-title, summary)::before { + background-color: #00b8d4; + mask-image: var(--md-admonition-icon--info); + -webkit-mask-image: var(--md-admonition-icon--info); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.tip, .hint, .important) { + border-color: #00bfa5; +} + +:is(.tip, .hint, .important) > :is(.admonition-title, summary) { + background-color: rgba(0, 191, 165, 0.1); + border-color: #00bfa5; +} +:is(.tip, .hint, .important) > :is(.admonition-title, summary)::before { + background-color: #00bfa5; + mask-image: var(--md-admonition-icon--tip); + -webkit-mask-image: var(--md-admonition-icon--tip); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.success, .check, .done) { + border-color: #00c853; +} + +:is(.success, .check, .done) > :is(.admonition-title, summary) { + background-color: rgba(0, 200, 83, 0.1); + border-color: #00c853; +} +:is(.success, .check, .done) > :is(.admonition-title, summary)::before { + background-color: #00c853; + mask-image: var(--md-admonition-icon--success); + -webkit-mask-image: var(--md-admonition-icon--success); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.question, .help, .faq) { + border-color: #64dd17; +} + +:is(.question, .help, .faq) > :is(.admonition-title, summary) { + background-color: rgba(100, 221, 23, 0.1); + border-color: #64dd17; +} +:is(.question, .help, .faq) > :is(.admonition-title, summary)::before { + background-color: #64dd17; + mask-image: var(--md-admonition-icon--question); + -webkit-mask-image: var(--md-admonition-icon--question); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.warning, .caution, .attention) { + border-color: #ff9100; +} + +:is(.warning, .caution, .attention) > :is(.admonition-title, summary) { + background-color: rgba(255, 145, 0, 0.1); + border-color: #ff9100; +} +:is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before { + background-color: #ff9100; + mask-image: var(--md-admonition-icon--warning); + -webkit-mask-image: var(--md-admonition-icon--warning); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.failure, .fail, .missing) { + border-color: #ff5252; +} + +:is(.failure, .fail, .missing) > :is(.admonition-title, summary) { + background-color: rgba(255, 82, 82, 0.1); + border-color: #ff5252; +} +:is(.failure, .fail, .missing) > :is(.admonition-title, summary)::before { + background-color: #ff5252; + mask-image: var(--md-admonition-icon--failure); + -webkit-mask-image: var(--md-admonition-icon--failure); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.danger, .error) { + border-color: #ff1744; +} + +:is(.danger, .error) > :is(.admonition-title, summary) { + background-color: rgba(255, 23, 68, 0.1); + border-color: #ff1744; +} +:is(.danger, .error) > :is(.admonition-title, summary)::before { + background-color: #ff1744; + mask-image: var(--md-admonition-icon--danger); + -webkit-mask-image: var(--md-admonition-icon--danger); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.bug) { + border-color: #f50057; +} + +:is(.bug) > :is(.admonition-title, summary) { + background-color: rgba(245, 0, 87, 0.1); + border-color: #f50057; +} +:is(.bug) > :is(.admonition-title, summary)::before { + background-color: #f50057; + mask-image: var(--md-admonition-icon--bug); + -webkit-mask-image: var(--md-admonition-icon--bug); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.example) { + border-color: #7c4dff; +} + +:is(.example) > :is(.admonition-title, summary) { + background-color: rgba(124, 77, 255, 0.1); + border-color: #7c4dff; +} +:is(.example) > :is(.admonition-title, summary)::before { + background-color: #7c4dff; + mask-image: var(--md-admonition-icon--example); + -webkit-mask-image: var(--md-admonition-icon--example); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.quote, .cite) { + border-color: #9e9e9e; +} + +:is(.quote, .cite) > :is(.admonition-title, summary) { + background-color: rgba(158, 158, 158, 0.1); + border-color: #9e9e9e; +} +:is(.quote, .cite) > :is(.admonition-title, summary)::before { + background-color: #9e9e9e; + mask-image: var(--md-admonition-icon--quote); + -webkit-mask-image: var(--md-admonition-icon--quote); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +.navy :is(.admonition) { + background-color: var(--sidebar-bg); +} + +.ayu :is(.admonition), +.coal :is(.admonition) { + background-color: var(--theme-hover); +} + +.rust :is(.admonition) { + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); +} + +:is(.admonition-title) { + font-feature-settings: "kern", "liga"; + font-weight: 600; + font-size: 0.84rem; + border: none; + padding: 10px 50px; +} + +:is(summary)::after { + position: absolute; + top: 0.625em; + width: 1.4rem; + height: 1.4rem; + mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + content: ""; +} + +:is(summary)::after { + background-color: black; + mask-image: var(--md-details-icon); + -webkit-mask-image: var(--md-details-icon); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + position: absolute; + transform: rotate(-90deg); + transition: transform 0.25s; + right: 0.4rem; +} + +details[open] > summary::after { + transform: rotate(0deg); +} diff --git a/content/css/code.css b/content/css/code.css new file mode 100644 index 0000000..7d95a8e --- /dev/null +++ b/content/css/code.css @@ -0,0 +1,90 @@ +code.language-html, +code.language-css, +code.language-md, +code.language-cmd, +code.language-bash, +code.language-text, +code.language-js, +span.o, +span.nx { + color: rgb(255, 255, 255); + line-height: 1.4; +} +span.c { + color: hsl(120, 100%, 20%); +} + +span.p, +span.s1, +span.s2, +span.nt { + color: hsl(40, 100%, 30%); +} + +span.gs, +span.gh, +span.ge { + color: hsl(208, 100%, 50%); +} + +span.gs { + font-weight: bold; +} + +span.ge { + font-style: italic; +} + +pre, +code { + @apply font-mono; +} + +code { + background-color: hsl(0, 0%, 98%); + border-radius: 3px; + color: hsl(120, 100%, 20%); + font-size: 85%; +} + +pre { + margin: 0; + margin: 0; + padding: 1rem; + overflow: scroll; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + background-color: transparent; + border-radius: 3px; + margin: 0 0 0.5rem; + padding: 0; + + & pre { + margin-bottom: 0; + overflow-x: auto; + } + + & .lineno { + color: hsla(0, 0%, 67%, 0.72); + display: inline-block; /* Ensures the null space also isn't selectable */ + padding: 0 0.75rem 0 0.25rem; + /* Make sure numbers aren't selectable */ + } +} + +/* TODO: dark theme for future +@media (prefers-color-scheme: dark) { + code { + color: #fff; + background: hsl(200, 63%, 15%); + } +} +*/ diff --git a/content/css/index.css b/content/css/index.css new file mode 100644 index 0000000..1819793 --- /dev/null +++ b/content/css/index.css @@ -0,0 +1,406 @@ +/*! purgecss start ignore */ +@import "code.css"; +/*! purgecss end ignore */ + +@import "tailwindcss/base"; +@import "layout.css"; +@import "tailwindcss/components"; +@import "admonition.css"; +@import "tailwindcss/utilities"; + +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap'); +/* Custom CSS for header partial */ +.backdrop-blur { + -webkit-backdrop-filter: blur(40px); +} + +* { + font-family: 'Lato', sans-serif; +} + +.bg-semi-white { + background-color: rgba(255, 255, 255, 0.75); +} + +/* Custom css allowing image styling in markdown */ + + +img[src*="#mx-auto"] { + margin: auto; +} + +img[src*="#small"] { + width: 68px; +} + +img[src*="#sm"] { + width: 200px; +} + +img[src*="#md"] { + width: 300px; +} + +img[src*="#medium"] { + width: 500px; +} + +img[src*="#logo"] { + max-width: min(250px, 100%); + margin: auto; +} + +img[src*="#large"] { + width: min(60vw, 100vh); + margin: auto; +} + +img[src*="#fill"] { + width: 100%; + height: 100%; +} + +img[src*="#tft_img"] { + width: 150px; + margin: 8px; +} + +img[src*="#icon"] { + width: 65px; + margin: 4px; +} + +img[src*="#fig"] { + width: 150px; +} + +.logo_size { + width: 200px; +} + +.advance{ + + font-family: "lato"; +} + +@layer components { + h1 { + @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-4 my-4; + font-family: "lato", sans-serif; + line-height: 0.9; + + } + h1 strong { + @apply font-medium; + } + h2 { + @apply text-3xl md:text-4xl lg:text-6xl font-bold leading-4 my-4; + font-family: "lato", sans-serif; + line-height: 0.9; + + + } + h2 strong { + @apply font-medium; + } + h3 { + @apply text-xl lg:text-3xl font-normal my-4; + color:#oab7a9; + } + h3 strong { + @apply font-medium; + } + h4 { + @apply text-xl lg:text-2xl font-normal my-4; + color:#oab7a9; + } + h5 { + @apply text-xl lg:text-xl font-normal; + } + h6 { + @apply text-lg not-italic font-normal my-1; + } + p { + @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; + font-family: "CercoDEMO", sans-serif; + } + blockquote { + @apply border-l-4 border-gray-400 mx-2 my-2 p-2; + } + li { + @apply text-lg lg:text-xl font-normal my-2; + } + li li { + @apply text-sm lg:text-sm font-light; + } + button { + @apply inline-block + text-base + lg:text-lg + px-8 + py-1 + my-4 + border-2 + shadow + } + + article h2{ + @apply text-xl lg:text-3xl font-medium + } + +article p ,li{ + @apply text-base lg:text-lg +} +} + +a:hover{ + color: #737373; +} + +button:hover { + color: #737373; +} + +button { +font-weight: 500; +} + +.experience-btn { + border: none; + margin: 0; + padding: 0; + color: black; + padding: 20px; + width: fit-content; +} + +.experience-btn p { + @apply text-lg; +} + +.experience-btn:hover { + background: white; +} + + +.experience-btn h4 { + white-space: normal; +} + +header .customize { + background-color: transparent; + position: absolute; +} + +footer .customize { + /* width: 100vw; */ + color: #fff; + background-color: #17b9c8; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 24px; + padding-bottom: 24px; +} + +footer .customize img { + width: 60px; +} + + +header .customize div { + box-shadow: none; + text-transform: uppercase; + font-weight: 700 !important; +} + +button { + background: transparent; + color: black; + border-radius: 4px; + border: 2px solid black; + box-shadow: none; + /* font-size: 18px; */ +} + +a { + border: none; +} + +header { + font-family: "Work Sans"; +} + +.nav_btn { + margin: 0 !important; + padding: 0 !important; + border: none !important; + box-shadow: none !important; +} + +.quicklinks { + box-sizing: border-box; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: auto; + display: inline-block; + margin: 0 auto; + border-radius: 10px; + margin-top: 30px; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 20px; +} +.quicklinks img { + height: auto; + max-width: 200px; + display: inline-block; + padding: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + position: relative; + margin-right: 30px; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + opacity: 0.5; +} + +.quicklinks img:hover { + opacity: 1; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.banner { + width: 100%; + margin: 0; + padding: 120px 0; + text-align: center; + position: relative; + display: block; + color: #fff !important; + letter-spacing: 0.5px; + overflow: hidden; + background: #00838d; + transition: 1.5s; +} + +.header { + height: auto; + background: none; + padding: 200px 0; +} + +.banner h2, +.header h1 { + margin: auto; + color: #fff; + position: relative; + transition: 0.3s; + z-index: 1; + white-space: nowrap; +} + +.header h1 { + color: #000; + transition: none; +} + +.banner h2 svg { + font-size: 40px; + margin-left: 15px; + position: absolute; + top: 55%; + transform: translateY(-50%) scale(0.5); + opacity: 0; + transition: 0.3s; +} + +.banner .back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-position: center; + background-size: cover; + filter: grayscale(1) contrast(1.4); + opacity: 0.25; + transition: 1.5s; +} + +.header .back { + filter: none; + opacity: 1; + background-position: center; + + background-size: cover; + background-repeat: no-repeat; +} + +.banner:hover { + background: #4b3a92; +} + +.header:hover { + background: none; +} + +.banner:hover h2 svg { + transform: translateY(-50%) scale(1); + opacity: 1; +} + +.banner:hover h2 { + padding-right: 40px; +} + +.header:hover h1 { + padding-right: 0; +} + +.banner:hover .back { + transform: scale(1.03); +} + +.header:hover .back { + transform: none; +} + +@media (max-width: 768px) { + /* h2 { + font-size: 4rem; + } */ +} +@media (max-width: 640px) { + .banner h2 { + font: 600 7vw/10vw; + } + + .header h1 { + font-size: 35px; + } + + .banner h2 svg { + font-size: 30px; + } +} + +@media (max-width: 480px) { + .banner, + .header { + padding: 80px 0; + } + + footer { + text-align: center; + } + /* h2 { + font-size: 3rem; + } */ +} diff --git a/content/css/layout.css b/content/css/layout.css new file mode 100644 index 0000000..e1ef0cb --- /dev/null +++ b/content/css/layout.css @@ -0,0 +1,472 @@ +main { + @apply pt-0; +} + +#text-1xl { @apply text-xl } +#text-2xl { @apply text-2xl } +#text-3xl { @apply text-3xl } +#text-4xl { @apply text-4xl } +#text-5xl { @apply text-5xl } +#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl} +#text-7xl { @apply text-7xl } +#text-8xl { @apply text-8xl } +#text-9xl { + font-size: 8rem; +} + +#xp-heading { @apply m-0 } +/* +html, body { + @apply dark:bg-black; + +body { + @apply font-serif dark:text-gray-200; +} +*/ + +p { + /* for handling Markdown-created <p> and <li> */ + @apply text-lg; +} + +pre, +code { + font-feature-settings: normal; +} + +.navWhite, +.navWhite:visited { + @apply text-white; +} + +.navWhite:focus, +.navWhite:active { + @apply text-gray-400; +} + +.text-blue-light { + @apply text-blue-500; +} + +.text-blue-dark { + /* for dark mode + @apply text-blue-200; + */ +} + +.text-shadow-titles { + text-shadow: 4px 4px 2px #000; +} + +.gradient-titles { + @apply bg-gradient-to-b from-blue-700 to-black; +} + +.ctr { + @apply text-center; +} + +.legal { + @apply text-xs; +} + +nav h4 a:hover { + @apply border-0 text-blue-300 font-light; +} +nav h4 a, +nav h4 a:focus, +nav h4 a:active { + @apply border-0 text-black font-light; +} + +a h2 { + @apply text-black; +} + +a:focus, +a:hover { + @apply border-none text-blue-300; +} +a:active { + @apply text-blue-800 border-blue-500; +} + +h5 a { + @apply text-gray-900 font-normal; +} + +/* +a:hover { + @apply dark:text-blue-300; +} +*/ + +sup a, +a.previous, +a.next, +.footnote-return { + @apply border-b-0; +} + +#nav-toggle:checked + #navMenu { + @apply block; +} + +a.navborderless { + @apply border-b-0; +} +/* +.dateInfo { + @apply text-gray-700 dark:text-gray-400; +} +*/ + +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { +} + +h1, +.h1 { + @apply text-4xl font-extrabold; +} + +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + @apply font-bold; +} + +h2, +.h2 { + @apply text-4xl; +} + +h4, +.h4 { + @apply text-2xl; +} + +h5 { + @apply not-italic; +} + +h5, +.h5, +h6, +.h6 { + @apply text-lg; +} + +.height-hero { + height: 45vh; + max-height: 45vh; + overflow: hidden; +} + +.height-post { + height: 35vh; + max-height: 35vh; +} + +.imgCover { + @apply object-cover object-center h-full w-full; +} + +.background-hero-image-div { + @apply relative overflow-hidden w-full bg-black; + /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */ + height: 80vh; + max-height: 80vh; +} + +.background-hero-title-block-fit { + @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black; +} + +.background-hero-title-text { + text-shadow: 4px 4px 2px #000; +} + +@media screen and (min-width: 768px) { + .background-hero-title-block-fit { + @apply px-12; + } + + .background-hero-image-div { + height: 85vh; + max-height: 85vh; + } +} + +@media screen and (min-width: 1024px) { + .background-hero-title-block-fit { + @apply px-16; + } + + .background-hero-image-div { + height: 95vh; + max-height: 95vh; + } +} + +.text-nowrap, +.text-nobrk { + @apply whitespace-nowrap; +} + +article h1, +article h2, +article h3, +article h4 { + @apply tracking-tight mt-8 mb-6; +} + +article p { + @apply text-lg leading-relaxed; +} + +article img.containedImage { + min-width: 100%; + max-width: 100%; + @apply w-full h-auto; +} + +@media screen and (min-width: 768px) { + .height-hero { + height: 70vh; + max-height: 70vh; + } + + .height-post { + height: 40vh; + max-height: 40vh; + } +} + +@media screen and (min-width: 768px) { + article p { + @apply text-xl leading-relaxed; + } +} + +@media screen and (min-width: 1920px) { + article p { + @apply text-2xl leading-relaxed; + } +} +/* +.yellowBox { + @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500; +} +*/ + +.yellowbox p { + @apply w-full p-2 m-0; +} + +ul, +ol { + @apply pl-8; +} + +ul { + @apply list-disc; +} + +ol { + @apply list-decimal; +} + +.twitter-tweet { + @apply mt-4 mx-auto mb-0; +} + +table.leagues { + @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse; +} + +table.leagues td.col { + @apply w-1/2; +} + +@media (min-width: 900px) { + table.leagues { + @apply w-3/5; + } + table.noborders { + @apply w-11/12; + } +} + +table.noborders { + @apply w-full border-0 border-collapse mt-6 mx-auto mb-4; +} + +table.noborders td { + @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2; + /* text-align: left !important; */ +} + +table.noborders td img { + @apply inline-block align-middle m-0; +} + +table.noborders tr { + @apply bg-blue-100; +} + +table.noborders tr:nth-child(even) { + @apply bg-gray-200; +} + +table.noborders thead tr { + @apply bg-blue-700; +} + +table.noborders thead td { + @apply text-white font-bold; +} + +table.noborders td.td70 { + width: 70%; +} +table.noborders td.td70 img { + @apply block w-1/2 h-auto; + max-width: 50%; +} + +table.noborders td.td30 { + width: 30%; +} +/* +blockquote { + @apply px-6 text-gray-700 dark:text-gray-400; +} +*/ + +/* start, footnotes */ + +.footnote-definition, +.footnote-reference { + @apply font-sans; +} + +.footnote-reference { + font-size: 0.65em; + top: -0.5em; +} + +.footnote-sim { + font-size: 0.65em; + color: #0000ff; + @media (prefers-color-scheme: dark) { + color: #00aaff; + } +} + +.footnotes { + & ol { + padding-inline-start: 1.5rem; + } + & ol li { + margin-bottom: 0.5rem; + font-size: $pokey; + } + & li p { + font-size: 100%; + line-height: 1.4; + } + & .footnote-backref { + font-size: 75%; + } +} + +a.footnote-return { + font-size: 50%; +} + +article > .footnote-definition { + border-top: 1px solid black; + padding-top: 1em; + margin-top: 1em; +} + +article > .footnote-definition ~ .footnote-definition { + border-top: 0; + padding-top: 0; + margin-top: 0; +} + +.footnote-definition-label { + top: -0.4em; + font-size: 0.65em; +} + +.footnote-definition-label + p { + font-size: 75%; + margin-top: -1.75em; + margin-left: 1em; + line-height: 1.35; +} + +.footnote-definition-label::after { + content: "."; +} + +/* == end, footnotes */ + +.aspect-16x9 { + padding-bottom: 56.25%; +} +/* +hr { + @apply border-solid border-gray-900 dark:border-gray-100; +} +*/ + +footer { + @apply font-sans; +} + +.lazypicturecaption { + @apply text-sm p-0 mt-2 leading-snug text-center; +} + +.home-colOne p { + @apply leading-8 mb-4; +} + +.home-colOne img { + @apply my-4; +} + +.container-comments { + margin: 0 auto; + font-size: 85%; + width: 85%; + max-width: 720px !important; + margin-bottom: 0; +} + +@media screen and (min-width: 900px) { + .container-comments { + width: 40%; + } +} diff --git a/content/footer/_index.md b/content/footer/_index.md index de2c25b..c23a500 100644 --- a/content/footer/_index.md +++ b/content/footer/_index.md @@ -4,7 +4,7 @@ description: "" insert_anchor_links: "left" template: "partials/footer.html" extra: - logoPath: "footer/img/logo_dunia_2.jpeg" + logoPath: "images/logo.jpeg" socialLinks: { Youtube: "https://www.youtube.com/channel/UC_iykLteqV-jwOBzueLtUwg", Twitter: "https://twitter.com/DenisMukwege", Facebook: "https://www.facebook.com/DrDenisMukwege" } --- diff --git a/content/header/_index.md b/content/header/_index.md index 256cd8a..4aa43dd 100644 --- a/content/header/_index.md +++ b/content/header/_index.md @@ -4,7 +4,7 @@ description: "this is a header." insert_anchor_links: "left" template: "partials/header.html" extra: - logoPath: "/header/img/logo_dunia.jpeg" + logoPath: "/images/logoheader.jpeg" imgPath: "" --- - [Home]("/home") diff --git a/content/nodehost/index.md b/content/nodehost/index.md index 0da6b90..4058fd5 100644 --- a/content/nodehost/index.md +++ b/content/nodehost/index.md @@ -7,7 +7,7 @@ draft: false sort_by: weight weight: 1 extra: - logo_path: images/logo.svg + logo_path: images/logo.jpeg --- {% row(style="center" padding="top") %} diff --git a/content/participate/index.md b/content/participate/index.md index 75007b0..7d33648 100644 --- a/content/participate/index.md +++ b/content/participate/index.md @@ -7,7 +7,7 @@ draft: false sort_by: weight weight: 1 extra: - logo_path: images/logo.svg + logo_path: images/logo.jpeg --- {% row(style="center" margin="through." bgPath="img/participate_2.png" bgStyle="full") %} diff --git a/css/admonition.css b/css/admonition.css new file mode 100644 index 0000000..de7d76e --- /dev/null +++ b/css/admonition.css @@ -0,0 +1,361 @@ +:root { + --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>"); + --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>"); + --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>"); + --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>"); + --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>"); + --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>"); + --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>"); + --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>"); + --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>"); + --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>"); + --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>"); + --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>"); + --md-details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E"); +} + +:is(.admonition) { + display: flow-root; + margin: 1.5625em 0; + padding: 0 1.2rem; + color: var(--fg); + page-break-inside: avoid; + background-color: var(--bg); + border: 0 solid black; + border-inline-start-width: 0.4rem; + border-radius: 0.2rem; + box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1); +} + +.admonition p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-size: 0.8rem; +} + +@media print { + :is(.admonition) { + box-shadow: none; + } +} +:is(.admonition) > * { + box-sizing: border-box; +} +:is(.admonition) :is(.admonition) { + margin-top: 1em; + margin-bottom: 1em; +} +:is(.admonition) > .tabbed-set:only-child { + margin-top: 0; +} +html :is(.admonition) > :last-child { + margin-bottom: 1.2rem; +} + +:is(.admonition-title, summary) { + position: relative; + margin-block: 0; + margin-inline: -1.6rem -1.2rem; + padding-block: 0.8rem; + padding-inline: 4rem 1.2rem; + font-weight: 700; + background-color: rgba(68, 138, 255, 0.1); + border: 0 solid #448aff; + border-inline-start-width: 0.4rem; + border-start-start-radius: 0.2rem; + display: flex; +} +:is(.admonition-title, summary) > p { + margin: 0; +} +html :is(.admonition-title, summary):last-child { + margin-bottom: 0; +} +:is(.admonition-title, summary)::before { + position: absolute; + top: 0.625em; + inset-inline-start: 1.2rem; + width: 1.4rem; + height: 1.4rem; + background-color: #448aff; + mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + content: ""; +} + +:is(.admonition):is(.note) { + border-color: #448aff; +} + +:is(.note) > :is(.admonition-title, summary) { + background-color: rgba(68, 138, 255, 0.1); + border-color: #448aff; +} +:is(.note) > :is(.admonition-title, summary)::before { + background-color: #448aff; + mask-image: var(--md-admonition-icon--note); + -webkit-mask-image: var(--md-admonition-icon--note); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.abstract, .summary, .tldr) { + border-color: #00b0ff; +} + +:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary) { + background-color: rgba(0, 176, 255, 0.1); + border-color: #00b0ff; +} +:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary)::before { + background-color: #00b0ff; + mask-image: var(--md-admonition-icon--abstract); + -webkit-mask-image: var(--md-admonition-icon--abstract); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.info, .todo) { + border-color: #00b8d4; +} + +:is(.info, .todo) > :is(.admonition-title, summary) { + background-color: rgba(0, 184, 212, 0.1); + border-color: #00b8d4; +} +:is(.info, .todo) > :is(.admonition-title, summary)::before { + background-color: #00b8d4; + mask-image: var(--md-admonition-icon--info); + -webkit-mask-image: var(--md-admonition-icon--info); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.tip, .hint, .important) { + border-color: #00bfa5; +} + +:is(.tip, .hint, .important) > :is(.admonition-title, summary) { + background-color: rgba(0, 191, 165, 0.1); + border-color: #00bfa5; +} +:is(.tip, .hint, .important) > :is(.admonition-title, summary)::before { + background-color: #00bfa5; + mask-image: var(--md-admonition-icon--tip); + -webkit-mask-image: var(--md-admonition-icon--tip); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.success, .check, .done) { + border-color: #00c853; +} + +:is(.success, .check, .done) > :is(.admonition-title, summary) { + background-color: rgba(0, 200, 83, 0.1); + border-color: #00c853; +} +:is(.success, .check, .done) > :is(.admonition-title, summary)::before { + background-color: #00c853; + mask-image: var(--md-admonition-icon--success); + -webkit-mask-image: var(--md-admonition-icon--success); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.question, .help, .faq) { + border-color: #64dd17; +} + +:is(.question, .help, .faq) > :is(.admonition-title, summary) { + background-color: rgba(100, 221, 23, 0.1); + border-color: #64dd17; +} +:is(.question, .help, .faq) > :is(.admonition-title, summary)::before { + background-color: #64dd17; + mask-image: var(--md-admonition-icon--question); + -webkit-mask-image: var(--md-admonition-icon--question); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.warning, .caution, .attention) { + border-color: #ff9100; +} + +:is(.warning, .caution, .attention) > :is(.admonition-title, summary) { + background-color: rgba(255, 145, 0, 0.1); + border-color: #ff9100; +} +:is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before { + background-color: #ff9100; + mask-image: var(--md-admonition-icon--warning); + -webkit-mask-image: var(--md-admonition-icon--warning); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.failure, .fail, .missing) { + border-color: #ff5252; +} + +:is(.failure, .fail, .missing) > :is(.admonition-title, summary) { + background-color: rgba(255, 82, 82, 0.1); + border-color: #ff5252; +} +:is(.failure, .fail, .missing) > :is(.admonition-title, summary)::before { + background-color: #ff5252; + mask-image: var(--md-admonition-icon--failure); + -webkit-mask-image: var(--md-admonition-icon--failure); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.danger, .error) { + border-color: #ff1744; +} + +:is(.danger, .error) > :is(.admonition-title, summary) { + background-color: rgba(255, 23, 68, 0.1); + border-color: #ff1744; +} +:is(.danger, .error) > :is(.admonition-title, summary)::before { + background-color: #ff1744; + mask-image: var(--md-admonition-icon--danger); + -webkit-mask-image: var(--md-admonition-icon--danger); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.bug) { + border-color: #f50057; +} + +:is(.bug) > :is(.admonition-title, summary) { + background-color: rgba(245, 0, 87, 0.1); + border-color: #f50057; +} +:is(.bug) > :is(.admonition-title, summary)::before { + background-color: #f50057; + mask-image: var(--md-admonition-icon--bug); + -webkit-mask-image: var(--md-admonition-icon--bug); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.example) { + border-color: #7c4dff; +} + +:is(.example) > :is(.admonition-title, summary) { + background-color: rgba(124, 77, 255, 0.1); + border-color: #7c4dff; +} +:is(.example) > :is(.admonition-title, summary)::before { + background-color: #7c4dff; + mask-image: var(--md-admonition-icon--example); + -webkit-mask-image: var(--md-admonition-icon--example); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +:is(.admonition):is(.quote, .cite) { + border-color: #9e9e9e; +} + +:is(.quote, .cite) > :is(.admonition-title, summary) { + background-color: rgba(158, 158, 158, 0.1); + border-color: #9e9e9e; +} +:is(.quote, .cite) > :is(.admonition-title, summary)::before { + background-color: #9e9e9e; + mask-image: var(--md-admonition-icon--quote); + -webkit-mask-image: var(--md-admonition-icon--quote); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +.navy :is(.admonition) { + background-color: var(--sidebar-bg); +} + +.ayu :is(.admonition), +.coal :is(.admonition) { + background-color: var(--theme-hover); +} + +.rust :is(.admonition) { + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); +} + +:is(.admonition-title) { + font-feature-settings: "kern", "liga"; + font-weight: 600; + font-size: 0.84rem; + border: none; + padding: 10px 50px; +} + +:is(summary)::after { + position: absolute; + top: 0.625em; + width: 1.4rem; + height: 1.4rem; + mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>'); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + content: ""; +} + +:is(summary)::after { + background-color: black; + mask-image: var(--md-details-icon); + -webkit-mask-image: var(--md-details-icon); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + position: absolute; + transform: rotate(-90deg); + transition: transform 0.25s; + right: 0.4rem; +} + +details[open] > summary::after { + transform: rotate(0deg); +} diff --git a/css/code.css b/css/code.css new file mode 100644 index 0000000..7d95a8e --- /dev/null +++ b/css/code.css @@ -0,0 +1,90 @@ +code.language-html, +code.language-css, +code.language-md, +code.language-cmd, +code.language-bash, +code.language-text, +code.language-js, +span.o, +span.nx { + color: rgb(255, 255, 255); + line-height: 1.4; +} +span.c { + color: hsl(120, 100%, 20%); +} + +span.p, +span.s1, +span.s2, +span.nt { + color: hsl(40, 100%, 30%); +} + +span.gs, +span.gh, +span.ge { + color: hsl(208, 100%, 50%); +} + +span.gs { + font-weight: bold; +} + +span.ge { + font-style: italic; +} + +pre, +code { + @apply font-mono; +} + +code { + background-color: hsl(0, 0%, 98%); + border-radius: 3px; + color: hsl(120, 100%, 20%); + font-size: 85%; +} + +pre { + margin: 0; + margin: 0; + padding: 1rem; + overflow: scroll; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + background-color: transparent; + border-radius: 3px; + margin: 0 0 0.5rem; + padding: 0; + + & pre { + margin-bottom: 0; + overflow-x: auto; + } + + & .lineno { + color: hsla(0, 0%, 67%, 0.72); + display: inline-block; /* Ensures the null space also isn't selectable */ + padding: 0 0.75rem 0 0.25rem; + /* Make sure numbers aren't selectable */ + } +} + +/* TODO: dark theme for future +@media (prefers-color-scheme: dark) { + code { + color: #fff; + background: hsl(200, 63%, 15%); + } +} +*/ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..1819793 --- /dev/null +++ b/css/index.css @@ -0,0 +1,406 @@ +/*! purgecss start ignore */ +@import "code.css"; +/*! purgecss end ignore */ + +@import "tailwindcss/base"; +@import "layout.css"; +@import "tailwindcss/components"; +@import "admonition.css"; +@import "tailwindcss/utilities"; + +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap'); +/* Custom CSS for header partial */ +.backdrop-blur { + -webkit-backdrop-filter: blur(40px); +} + +* { + font-family: 'Lato', sans-serif; +} + +.bg-semi-white { + background-color: rgba(255, 255, 255, 0.75); +} + +/* Custom css allowing image styling in markdown */ + + +img[src*="#mx-auto"] { + margin: auto; +} + +img[src*="#small"] { + width: 68px; +} + +img[src*="#sm"] { + width: 200px; +} + +img[src*="#md"] { + width: 300px; +} + +img[src*="#medium"] { + width: 500px; +} + +img[src*="#logo"] { + max-width: min(250px, 100%); + margin: auto; +} + +img[src*="#large"] { + width: min(60vw, 100vh); + margin: auto; +} + +img[src*="#fill"] { + width: 100%; + height: 100%; +} + +img[src*="#tft_img"] { + width: 150px; + margin: 8px; +} + +img[src*="#icon"] { + width: 65px; + margin: 4px; +} + +img[src*="#fig"] { + width: 150px; +} + +.logo_size { + width: 200px; +} + +.advance{ + + font-family: "lato"; +} + +@layer components { + h1 { + @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-4 my-4; + font-family: "lato", sans-serif; + line-height: 0.9; + + } + h1 strong { + @apply font-medium; + } + h2 { + @apply text-3xl md:text-4xl lg:text-6xl font-bold leading-4 my-4; + font-family: "lato", sans-serif; + line-height: 0.9; + + + } + h2 strong { + @apply font-medium; + } + h3 { + @apply text-xl lg:text-3xl font-normal my-4; + color:#oab7a9; + } + h3 strong { + @apply font-medium; + } + h4 { + @apply text-xl lg:text-2xl font-normal my-4; + color:#oab7a9; + } + h5 { + @apply text-xl lg:text-xl font-normal; + } + h6 { + @apply text-lg not-italic font-normal my-1; + } + p { + @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; + font-family: "CercoDEMO", sans-serif; + } + blockquote { + @apply border-l-4 border-gray-400 mx-2 my-2 p-2; + } + li { + @apply text-lg lg:text-xl font-normal my-2; + } + li li { + @apply text-sm lg:text-sm font-light; + } + button { + @apply inline-block + text-base + lg:text-lg + px-8 + py-1 + my-4 + border-2 + shadow + } + + article h2{ + @apply text-xl lg:text-3xl font-medium + } + +article p ,li{ + @apply text-base lg:text-lg +} +} + +a:hover{ + color: #737373; +} + +button:hover { + color: #737373; +} + +button { +font-weight: 500; +} + +.experience-btn { + border: none; + margin: 0; + padding: 0; + color: black; + padding: 20px; + width: fit-content; +} + +.experience-btn p { + @apply text-lg; +} + +.experience-btn:hover { + background: white; +} + + +.experience-btn h4 { + white-space: normal; +} + +header .customize { + background-color: transparent; + position: absolute; +} + +footer .customize { + /* width: 100vw; */ + color: #fff; + background-color: #17b9c8; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 24px; + padding-bottom: 24px; +} + +footer .customize img { + width: 60px; +} + + +header .customize div { + box-shadow: none; + text-transform: uppercase; + font-weight: 700 !important; +} + +button { + background: transparent; + color: black; + border-radius: 4px; + border: 2px solid black; + box-shadow: none; + /* font-size: 18px; */ +} + +a { + border: none; +} + +header { + font-family: "Work Sans"; +} + +.nav_btn { + margin: 0 !important; + padding: 0 !important; + border: none !important; + box-shadow: none !important; +} + +.quicklinks { + box-sizing: border-box; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: auto; + display: inline-block; + margin: 0 auto; + border-radius: 10px; + margin-top: 30px; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 20px; +} +.quicklinks img { + height: auto; + max-width: 200px; + display: inline-block; + padding: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + position: relative; + margin-right: 30px; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + opacity: 0.5; +} + +.quicklinks img:hover { + opacity: 1; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.banner { + width: 100%; + margin: 0; + padding: 120px 0; + text-align: center; + position: relative; + display: block; + color: #fff !important; + letter-spacing: 0.5px; + overflow: hidden; + background: #00838d; + transition: 1.5s; +} + +.header { + height: auto; + background: none; + padding: 200px 0; +} + +.banner h2, +.header h1 { + margin: auto; + color: #fff; + position: relative; + transition: 0.3s; + z-index: 1; + white-space: nowrap; +} + +.header h1 { + color: #000; + transition: none; +} + +.banner h2 svg { + font-size: 40px; + margin-left: 15px; + position: absolute; + top: 55%; + transform: translateY(-50%) scale(0.5); + opacity: 0; + transition: 0.3s; +} + +.banner .back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-position: center; + background-size: cover; + filter: grayscale(1) contrast(1.4); + opacity: 0.25; + transition: 1.5s; +} + +.header .back { + filter: none; + opacity: 1; + background-position: center; + + background-size: cover; + background-repeat: no-repeat; +} + +.banner:hover { + background: #4b3a92; +} + +.header:hover { + background: none; +} + +.banner:hover h2 svg { + transform: translateY(-50%) scale(1); + opacity: 1; +} + +.banner:hover h2 { + padding-right: 40px; +} + +.header:hover h1 { + padding-right: 0; +} + +.banner:hover .back { + transform: scale(1.03); +} + +.header:hover .back { + transform: none; +} + +@media (max-width: 768px) { + /* h2 { + font-size: 4rem; + } */ +} +@media (max-width: 640px) { + .banner h2 { + font: 600 7vw/10vw; + } + + .header h1 { + font-size: 35px; + } + + .banner h2 svg { + font-size: 30px; + } +} + +@media (max-width: 480px) { + .banner, + .header { + padding: 80px 0; + } + + footer { + text-align: center; + } + /* h2 { + font-size: 3rem; + } */ +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..e1ef0cb --- /dev/null +++ b/css/layout.css @@ -0,0 +1,472 @@ +main { + @apply pt-0; +} + +#text-1xl { @apply text-xl } +#text-2xl { @apply text-2xl } +#text-3xl { @apply text-3xl } +#text-4xl { @apply text-4xl } +#text-5xl { @apply text-5xl } +#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl} +#text-7xl { @apply text-7xl } +#text-8xl { @apply text-8xl } +#text-9xl { + font-size: 8rem; +} + +#xp-heading { @apply m-0 } +/* +html, body { + @apply dark:bg-black; + +body { + @apply font-serif dark:text-gray-200; +} +*/ + +p { + /* for handling Markdown-created <p> and <li> */ + @apply text-lg; +} + +pre, +code { + font-feature-settings: normal; +} + +.navWhite, +.navWhite:visited { + @apply text-white; +} + +.navWhite:focus, +.navWhite:active { + @apply text-gray-400; +} + +.text-blue-light { + @apply text-blue-500; +} + +.text-blue-dark { + /* for dark mode + @apply text-blue-200; + */ +} + +.text-shadow-titles { + text-shadow: 4px 4px 2px #000; +} + +.gradient-titles { + @apply bg-gradient-to-b from-blue-700 to-black; +} + +.ctr { + @apply text-center; +} + +.legal { + @apply text-xs; +} + +nav h4 a:hover { + @apply border-0 text-blue-300 font-light; +} +nav h4 a, +nav h4 a:focus, +nav h4 a:active { + @apply border-0 text-black font-light; +} + +a h2 { + @apply text-black; +} + +a:focus, +a:hover { + @apply border-none text-blue-300; +} +a:active { + @apply text-blue-800 border-blue-500; +} + +h5 a { + @apply text-gray-900 font-normal; +} + +/* +a:hover { + @apply dark:text-blue-300; +} +*/ + +sup a, +a.previous, +a.next, +.footnote-return { + @apply border-b-0; +} + +#nav-toggle:checked + #navMenu { + @apply block; +} + +a.navborderless { + @apply border-b-0; +} +/* +.dateInfo { + @apply text-gray-700 dark:text-gray-400; +} +*/ + +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { +} + +h1, +.h1 { + @apply text-4xl font-extrabold; +} + +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + @apply font-bold; +} + +h2, +.h2 { + @apply text-4xl; +} + +h4, +.h4 { + @apply text-2xl; +} + +h5 { + @apply not-italic; +} + +h5, +.h5, +h6, +.h6 { + @apply text-lg; +} + +.height-hero { + height: 45vh; + max-height: 45vh; + overflow: hidden; +} + +.height-post { + height: 35vh; + max-height: 35vh; +} + +.imgCover { + @apply object-cover object-center h-full w-full; +} + +.background-hero-image-div { + @apply relative overflow-hidden w-full bg-black; + /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */ + height: 80vh; + max-height: 80vh; +} + +.background-hero-title-block-fit { + @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black; +} + +.background-hero-title-text { + text-shadow: 4px 4px 2px #000; +} + +@media screen and (min-width: 768px) { + .background-hero-title-block-fit { + @apply px-12; + } + + .background-hero-image-div { + height: 85vh; + max-height: 85vh; + } +} + +@media screen and (min-width: 1024px) { + .background-hero-title-block-fit { + @apply px-16; + } + + .background-hero-image-div { + height: 95vh; + max-height: 95vh; + } +} + +.text-nowrap, +.text-nobrk { + @apply whitespace-nowrap; +} + +article h1, +article h2, +article h3, +article h4 { + @apply tracking-tight mt-8 mb-6; +} + +article p { + @apply text-lg leading-relaxed; +} + +article img.containedImage { + min-width: 100%; + max-width: 100%; + @apply w-full h-auto; +} + +@media screen and (min-width: 768px) { + .height-hero { + height: 70vh; + max-height: 70vh; + } + + .height-post { + height: 40vh; + max-height: 40vh; + } +} + +@media screen and (min-width: 768px) { + article p { + @apply text-xl leading-relaxed; + } +} + +@media screen and (min-width: 1920px) { + article p { + @apply text-2xl leading-relaxed; + } +} +/* +.yellowBox { + @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500; +} +*/ + +.yellowbox p { + @apply w-full p-2 m-0; +} + +ul, +ol { + @apply pl-8; +} + +ul { + @apply list-disc; +} + +ol { + @apply list-decimal; +} + +.twitter-tweet { + @apply mt-4 mx-auto mb-0; +} + +table.leagues { + @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse; +} + +table.leagues td.col { + @apply w-1/2; +} + +@media (min-width: 900px) { + table.leagues { + @apply w-3/5; + } + table.noborders { + @apply w-11/12; + } +} + +table.noborders { + @apply w-full border-0 border-collapse mt-6 mx-auto mb-4; +} + +table.noborders td { + @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2; + /* text-align: left !important; */ +} + +table.noborders td img { + @apply inline-block align-middle m-0; +} + +table.noborders tr { + @apply bg-blue-100; +} + +table.noborders tr:nth-child(even) { + @apply bg-gray-200; +} + +table.noborders thead tr { + @apply bg-blue-700; +} + +table.noborders thead td { + @apply text-white font-bold; +} + +table.noborders td.td70 { + width: 70%; +} +table.noborders td.td70 img { + @apply block w-1/2 h-auto; + max-width: 50%; +} + +table.noborders td.td30 { + width: 30%; +} +/* +blockquote { + @apply px-6 text-gray-700 dark:text-gray-400; +} +*/ + +/* start, footnotes */ + +.footnote-definition, +.footnote-reference { + @apply font-sans; +} + +.footnote-reference { + font-size: 0.65em; + top: -0.5em; +} + +.footnote-sim { + font-size: 0.65em; + color: #0000ff; + @media (prefers-color-scheme: dark) { + color: #00aaff; + } +} + +.footnotes { + & ol { + padding-inline-start: 1.5rem; + } + & ol li { + margin-bottom: 0.5rem; + font-size: $pokey; + } + & li p { + font-size: 100%; + line-height: 1.4; + } + & .footnote-backref { + font-size: 75%; + } +} + +a.footnote-return { + font-size: 50%; +} + +article > .footnote-definition { + border-top: 1px solid black; + padding-top: 1em; + margin-top: 1em; +} + +article > .footnote-definition ~ .footnote-definition { + border-top: 0; + padding-top: 0; + margin-top: 0; +} + +.footnote-definition-label { + top: -0.4em; + font-size: 0.65em; +} + +.footnote-definition-label + p { + font-size: 75%; + margin-top: -1.75em; + margin-left: 1em; + line-height: 1.35; +} + +.footnote-definition-label::after { + content: "."; +} + +/* == end, footnotes */ + +.aspect-16x9 { + padding-bottom: 56.25%; +} +/* +hr { + @apply border-solid border-gray-900 dark:border-gray-100; +} +*/ + +footer { + @apply font-sans; +} + +.lazypicturecaption { + @apply text-sm p-0 mt-2 leading-snug text-center; +} + +.home-colOne p { + @apply leading-8 mb-4; +} + +.home-colOne img { + @apply my-4; +} + +.container-comments { + margin: 0 auto; + font-size: 85%; + width: 85%; + max-width: 720px !important; + margin-bottom: 0; +} + +@media screen and (min-width: 900px) { + .container-comments { + width: 40%; + } +} diff --git a/run.vsh b/run.vsh old mode 100644 new mode 100755 diff --git a/start.sh b/start.sh new file mode 100755 index 0000000..ac927fd --- /dev/null +++ b/start.sh @@ -0,0 +1,25 @@ +# builds if executable isn't foound +if [[ ! -f "tailwindcss" ]] +then + sh build.sh +fi + +# initialized and configures tailwind if not configured +if [[ ! -f "tailwind.config.js" ]] +then + ./tailwindcss init + sed -i '' "s| content: \\[\\],| content: \\['./templates/**/*.html'\\],|g" tailwind.config.js +fi + +# compiles tailwind css & launches locally +rm -rf public static/css +./tailwindcss -i css/index.css -o ./static/css/index.css --watch & zola serve & + +# compiles tailwind css for prod & builds project +./tailwindcss -i css/index.css -o ./static/css/index.css --minify +zola build + +# kills zola and tw bg processes on interrupt +trap 'kill $(jobs -p); exit 1' INT +wait + diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..13275b9 --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap"); +/*! purgecss start ignore */code.language-bash,code.language-cmd,code.language-css,code.language-html,code.language-js,code.language-md,code.language-text,span.nx,span.o{color:#fff;line-height:1.4}span.c{color:#060}span.nt,span.p,span.s1,span.s2{color:#960}span.ge,span.gh,span.gs{color:#08f}span.gs{font-weight:700}span.ge{font-style:italic}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}code{background-color:#fafafa;border-radius:3px;color:#060;font-size:85%}pre{margin:0;overflow:scroll;padding:1rem}pre code{color:inherit;font-size:100%}.highlight,pre code{background-color:initial;padding:0}.highlight{border-radius:3px;margin:0 0 .5rem;& pre{margin-bottom:0;overflow-x:auto}& .lineno{color:#abababb8;display:inline-block;padding:0 .75rem 0 .25rem}} +/*! purgecss end ignore */ +/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }main{padding-top:0}#text-1xl{font-size:1.25rem;line-height:1.75rem}#text-2xl{font-size:1.5rem;line-height:2rem}#text-3xl{font-size:1.875rem;line-height:2.25rem}#text-4xl{font-size:2.25rem;line-height:2.5rem}#text-5xl{font-size:3rem;line-height:1}@media (min-width:640px){#text-6xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:768px){#text-6xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){#text-6xl{font-size:3rem;line-height:1}}@media (min-width:1280px){#text-6xl{font-size:3.75rem;line-height:1}}#text-7xl{font-size:4.5rem;line-height:1}#text-8xl{font-size:6rem;line-height:1}#text-9xl{font-size:8rem}#xp-heading{margin:0}p{font-size:1.125rem;line-height:1.75rem}code,pre{font-feature-settings:normal}.navWhite,.navWhite:visited{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.navWhite:active,.navWhite:focus{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-blue-light{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-shadow-titles{text-shadow:4px 4px 2px #000}.gradient-titles{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);--tw-gradient-to:#1d4ed800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#000 var(--tw-gradient-to-position);background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.ctr{text-align:center}.legal{font-size:.75rem;line-height:1rem}nav h4 a:hover{color:rgb(147 197 253/var(--tw-text-opacity))}nav h4 a,nav h4 a:active,nav h4 a:focus,nav h4 a:hover{--tw-text-opacity:1;border-width:0;font-weight:300}a h2,nav h4 a,nav h4 a:active,nav h4 a:focus{color:rgb(0 0 0/var(--tw-text-opacity))}a h2,a:focus,a:hover{--tw-text-opacity:1}a:focus,a:hover{border-style:none;color:rgb(147 197 253/var(--tw-text-opacity))}a:active{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity));color:rgb(30 64 175/var(--tw-text-opacity))}h5 a{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity));font-weight:400}.footnote-return,a.next,a.previous,sup a{border-bottom-width:0}#nav-toggle:checked+#navMenu{display:block}a.navborderless{border-bottom-width:0}.h1,h1{font-size:2.25rem;font-weight:800;line-height:2.5rem}.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6{font-weight:700}.h2,h2{font-size:2.25rem;line-height:2.5rem}.h4,h4{font-size:1.5rem;line-height:2rem}h5{font-style:normal}.h5,.h6,h5,h6{font-size:1.125rem;line-height:1.75rem}.height-hero{height:45vh;max-height:45vh;overflow:hidden}.height-post{height:35vh;max-height:35vh}.imgCover{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.background-hero-image-div{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));height:80vh;max-height:80vh;overflow:hidden;position:relative;width:100%}.background-hero-title-block-fit{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-image:linear-gradient(to top,var(--tw-gradient-stops));bottom:0;display:block;padding:.75rem 1rem 1.5rem;position:absolute;width:100%}.background-hero-title-text{text-shadow:4px 4px 2px #000}@media screen and (min-width:768px){.background-hero-title-block-fit{padding-left:3rem;padding-right:3rem}.background-hero-image-div{height:85vh;max-height:85vh}}@media screen and (min-width:1024px){.background-hero-title-block-fit{padding-left:4rem;padding-right:4rem}.background-hero-image-div{height:95vh;max-height:95vh}}.text-nobrk,.text-nowrap{white-space:nowrap}article h1,article h2,article h3,article h4{letter-spacing:-.025em;margin-bottom:1.5rem;margin-top:2rem}article p{font-size:1.125rem;line-height:1.75rem;line-height:1.625}article img.containedImage{height:auto;max-width:100%;min-width:100%;width:100%}@media screen and (min-width:768px){.height-hero{height:70vh;max-height:70vh}.height-post{height:40vh;max-height:40vh}article p{font-size:1.25rem;line-height:1.75rem;line-height:1.625}}@media screen and (min-width:1920px){article p{font-size:1.5rem;line-height:2rem;line-height:1.625}}.yellowbox p{margin:0;padding:.5rem;width:100%}ol,ul{padding-left:2rem}ul{list-style-type:disc}ol{list-style-type:decimal}.twitter-tweet,table.leagues{margin:1rem auto 0}table.leagues{border-collapse:collapse;border-width:0;width:91.666667%}table.leagues td.col{width:50%}@media (min-width:900px){table.leagues{width:60%}table.noborders{width:91.666667%}}table.noborders{border-collapse:collapse;border-width:0;margin:1.5rem auto 1rem;width:100%}table.noborders td{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity));padding:.25rem 0 .25rem .5rem;text-align:left;vertical-align:middle}table.noborders td img{display:inline-block;margin:0;vertical-align:middle}table.noborders tr{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}table.noborders tr:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}table.noborders thead tr{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}table.noborders thead td{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-weight:700}table.noborders td.td70{width:70%}table.noborders td.td70 img{display:block;height:auto;max-width:50%;width:50%}table.noborders td.td30{width:30%}.footnote-definition,.footnote-reference{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.footnote-reference{font-size:.65em;top:-.5em}.footnote-sim{color:#00f;font-size:.65em;@media (prefers-color-scheme:dark){color:#0af}}.footnotes{& ol{padding-inline-start:1.5rem}& ol li{font-size:$pokey;margin-bottom:.5rem}& li p{font-size:100%;line-height:1.4}& .footnote-backref{font-size:75%}}a.footnote-return{font-size:50%}article>.footnote-definition{border-top:1px solid #000;margin-top:1em;padding-top:1em}article>.footnote-definition~.footnote-definition{border-top:0;margin-top:0;padding-top:0}.footnote-definition-label{font-size:.65em;top:-.4em}.footnote-definition-label+p{font-size:75%;line-height:1.35;margin-left:1em;margin-top:-1.75em}.footnote-definition-label:after{content:"."}.aspect-16x9{padding-bottom:56.25%}footer{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.lazypicturecaption{font-size:.875rem;line-height:1.25rem;line-height:1.375;margin-top:.5rem;padding:0;text-align:center}.home-colOne p{line-height:2rem;margin-bottom:1rem}.home-colOne img{margin-bottom:1rem;margin-top:1rem}.container-comments{font-size:85%;margin:0 auto;max-width:720px!important;width:85%}@media screen and (min-width:900px){.container-comments{width:40%}}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}h1{font-size:1.875rem;font-weight:700;line-height:1rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h1{font-size:3rem;line-height:1}}@media (min-width:1280px){h1{font-size:4.5rem;line-height:1}}h1{font-family:lato,sans-serif;line-height:.9}h1 strong{font-weight:500}h2{font-size:1.875rem;font-weight:700;line-height:1rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:768px){h2{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){h2{font-size:3.75rem;line-height:1}}h2{font-family:lato,sans-serif;line-height:.9}h2 strong{font-weight:500}h3{font-size:1.25rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h3{font-size:1.875rem;line-height:2.25rem}}h3{color:#oab7a9}h3 strong{font-weight:500}h4{font-size:1.25rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h4{font-size:1.5rem;line-height:2rem}}h4{color:#oab7a9}h5{font-size:1.25rem;font-weight:400;line-height:1.75rem}@media (min-width:1024px){h5{font-size:1.25rem;line-height:1.75rem}}h6{font-size:1.125rem;font-style:normal;font-weight:400;line-height:1.75rem;margin-bottom:.25rem;margin-top:.25rem}p{font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.5rem;line-height:1.25;margin-bottom:0;margin-top:0}@media (min-width:1024px){p{font-size:1.125rem;line-height:1.75rem}}p{font-family:CercoDEMO,sans-serif}blockquote{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity));border-left-width:4px;margin:.5rem;padding:.5rem}li{font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:.5rem;margin-top:.5rem}@media (min-width:1024px){li{font-size:1.25rem;line-height:1.75rem}}li li{font-size:.875rem;font-weight:300;line-height:1.25rem}@media (min-width:1024px){li li{font-size:.875rem;line-height:1.25rem}}button{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);border-width:2px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:inline-block;font-size:1rem;line-height:1.5rem;margin-bottom:1rem;margin-top:1rem;padding:.25rem 2rem}@media (min-width:1024px){button{font-size:1.125rem;line-height:1.75rem}}article h2{font-size:1.25rem;font-weight:500;line-height:1.75rem}@media (min-width:1024px){article h2{font-size:1.875rem;line-height:2.25rem}}article p,li{font-size:1rem;line-height:1.5rem}@media (min-width:1024px){article p,li{font-size:1.125rem;line-height:1.75rem}}:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');--md-admonition-icon--abstract:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>');--md-admonition-icon--info:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z"/></svg>');--md-admonition-icon--tip:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z"/></svg>');--md-admonition-icon--success:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z"/></svg>');--md-admonition-icon--question:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z"/></svg>');--md-admonition-icon--warning:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');--md-admonition-icon--failure:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z"/></svg>');--md-admonition-icon--danger:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6l7-14v8h5l-7 14v-8z"/></svg>');--md-admonition-icon--bug:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');--md-admonition-icon--example:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');--md-admonition-icon--quote:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');--md-details-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E")}:is(.admonition){background-color:var(--bg);border:0 solid #000;border-inline-start-width:.4rem;border-radius:.2rem;box-shadow:0 .2rem 1rem #0000000d,0 0 .1rem #0000001a;color:var(--fg);display:flow-root;margin:1.5625em 0;padding:0 1.2rem;page-break-inside:avoid}.admonition p{display:block;font-size:.8rem;margin-block-end:1em;margin-block-start:1em;margin-inline-end:0;margin-inline-start:0}@media print{:is(.admonition){box-shadow:none}}:is(.admonition)>*{box-sizing:border-box}:is(.admonition) :is(.admonition){margin-bottom:1em;margin-top:1em}:is(.admonition)>.tabbed-set:only-child{margin-top:0}html :is(.admonition)>:last-child{margin-bottom:1.2rem}:is(.admonition-title,summary){background-color:#448aff1a;border:0 solid #448aff;border-inline-start-width:.4rem;border-start-start-radius:.2rem;display:flex;font-weight:700;margin-block:0;margin-inline:-1.6rem -1.2rem;padding-block:.8rem;padding-inline:4rem 1.2rem;position:relative}:is(.admonition-title,summary)>p{margin:0}html :is(.admonition-title,summary):last-child{margin-bottom:0}:is(.admonition-title,summary):before{background-color:#448aff;content:"";height:1.4rem;inset-inline-start:1.2rem;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;position:absolute;top:.625em;width:1.4rem}:is(.admonition):is(.note){border-color:#448aff}:is(.note)>:is(.admonition-title,summary){background-color:#448aff1a;border-color:#448aff}:is(.note)>:is(.admonition-title,summary):before{background-color:#448aff;mask-image:var(--md-admonition-icon--note);-webkit-mask-image:var(--md-admonition-icon--note);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.abstract,.summary,.tldr){border-color:#00b0ff}:is(.abstract,.summary,.tldr)>:is(.admonition-title,summary){background-color:#00b0ff1a;border-color:#00b0ff}:is(.abstract,.summary,.tldr)>:is(.admonition-title,summary):before{background-color:#00b0ff;mask-image:var(--md-admonition-icon--abstract);-webkit-mask-image:var(--md-admonition-icon--abstract);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.info,.todo){border-color:#00b8d4}:is(.info,.todo)>:is(.admonition-title,summary){background-color:#00b8d41a;border-color:#00b8d4}:is(.info,.todo)>:is(.admonition-title,summary):before{background-color:#00b8d4;mask-image:var(--md-admonition-icon--info);-webkit-mask-image:var(--md-admonition-icon--info);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.tip,.hint,.important){border-color:#00bfa5}:is(.tip,.hint,.important)>:is(.admonition-title,summary){background-color:#00bfa51a;border-color:#00bfa5}:is(.tip,.hint,.important)>:is(.admonition-title,summary):before{background-color:#00bfa5;mask-image:var(--md-admonition-icon--tip);-webkit-mask-image:var(--md-admonition-icon--tip);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.success,.check,.done){border-color:#00c853}:is(.success,.check,.done)>:is(.admonition-title,summary){background-color:#00c8531a;border-color:#00c853}:is(.success,.check,.done)>:is(.admonition-title,summary):before{background-color:#00c853;mask-image:var(--md-admonition-icon--success);-webkit-mask-image:var(--md-admonition-icon--success);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.question,.help,.faq){border-color:#64dd17}:is(.question,.help,.faq)>:is(.admonition-title,summary){background-color:#64dd171a;border-color:#64dd17}:is(.question,.help,.faq)>:is(.admonition-title,summary):before{background-color:#64dd17;mask-image:var(--md-admonition-icon--question);-webkit-mask-image:var(--md-admonition-icon--question);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.warning,.caution,.attention){border-color:#ff9100}:is(.warning,.caution,.attention)>:is(.admonition-title,summary){background-color:#ff91001a;border-color:#ff9100}:is(.warning,.caution,.attention)>:is(.admonition-title,summary):before{background-color:#ff9100;mask-image:var(--md-admonition-icon--warning);-webkit-mask-image:var(--md-admonition-icon--warning);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.failure,.fail,.missing){border-color:#ff5252}:is(.failure,.fail,.missing)>:is(.admonition-title,summary){background-color:#ff52521a;border-color:#ff5252}:is(.failure,.fail,.missing)>:is(.admonition-title,summary):before{background-color:#ff5252;mask-image:var(--md-admonition-icon--failure);-webkit-mask-image:var(--md-admonition-icon--failure);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.danger,.error){border-color:#ff1744}:is(.danger,.error)>:is(.admonition-title,summary){background-color:#ff17441a;border-color:#ff1744}:is(.danger,.error)>:is(.admonition-title,summary):before{background-color:#ff1744;mask-image:var(--md-admonition-icon--danger);-webkit-mask-image:var(--md-admonition-icon--danger);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.bug){border-color:#f50057}:is(.bug)>:is(.admonition-title,summary){background-color:#f500571a;border-color:#f50057}:is(.bug)>:is(.admonition-title,summary):before{background-color:#f50057;mask-image:var(--md-admonition-icon--bug);-webkit-mask-image:var(--md-admonition-icon--bug);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.example){border-color:#7c4dff}:is(.example)>:is(.admonition-title,summary){background-color:#7c4dff1a;border-color:#7c4dff}:is(.example)>:is(.admonition-title,summary):before{background-color:#7c4dff;mask-image:var(--md-admonition-icon--example);-webkit-mask-image:var(--md-admonition-icon--example);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.quote,.cite){border-color:#9e9e9e}:is(.quote,.cite)>:is(.admonition-title,summary){background-color:#9e9e9e1a;border-color:#9e9e9e}:is(.quote,.cite)>:is(.admonition-title,summary):before{background-color:#9e9e9e;mask-image:var(--md-admonition-icon--quote);-webkit-mask-image:var(--md-admonition-icon--quote);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.navy :is(.admonition){background-color:var(--sidebar-bg)}.ayu :is(.admonition),.coal :is(.admonition){background-color:var(--theme-hover)}.rust :is(.admonition){background-color:var(--sidebar-bg);color:var(--sidebar-fg)}:is(.admonition-title){font-feature-settings:"kern","liga";border:none;font-size:.84rem;font-weight:600;padding:10px 50px}:is(summary):after{background-color:#000;content:"";height:1.4rem;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');mask-image:var(--md-details-icon);-webkit-mask-image:var(--md-details-icon);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;position:absolute;right:.4rem;top:.625em;transform:rotate(-90deg);transition:transform .25s;width:1.4rem}details[open]>summary:after{transform:rotate(0deg)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.order-first{order:-9999}.order-last{order:9999}.col-span-3{grid-column:span 3/span 3}.m-0{margin:0}.m-2{margin:.5rem}.-mx-8{margin-left:-2rem;margin-right:-2rem}.-my-2{margin-bottom:-.5rem;margin-top:-.5rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-20{margin-left:5rem;margin-right:5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.my-8{margin-bottom:2rem;margin-top:2rem}.-ml-1{margin-left:-.25rem}.-mr-2{margin-right:-.5rem}.-mt-16{margin-top:-4rem}.-mt-24{margin-top:-6rem}.-mt-6{margin-top:-1.5rem}.mb-0{margin-bottom:0}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-10{margin-left:2.5rem}.ml-5{margin-left:1.25rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-5{margin-right:1.25rem}.mr-8{margin-right:2rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-3{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\/3{height:33.333333%}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-80{max-height:20rem}.max-h-screen{max-height:100vh}.min-h-screen{min-height:100vh}.w-0{width:0}.w-1\/12{width:8.333333%}.w-10{width:2.5rem}.w-11\/12{width:91.666667%}.w-12{width:3rem}.w-2\/6{width:33.333333%}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-4\/6{width:66.666667%}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-7xl{max-width:80rem}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-screen-2xl{max-width:1536px}.max-w-screen-md{max-width:768px}.max-w-screen-sm{max-width:640px}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.-translate-y-1{--tw-translate-y:-0.25rem}.-rotate-90,.-translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2.5rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-y-2>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(2px*var(--tw-divide-y-reverse));border-top-width:calc(2px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(249 250 251/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.\!bg-\[length\:0px_0px\]{background-size:0 0!important}.bg-contain{background-size:contain}.bg-center{background-position:50%}.\!bg-no-repeat{background-repeat:no-repeat!important}.bg-no-repeat{background-repeat:no-repeat}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-28{padding-bottom:7rem;padding-top:7rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-24{padding-bottom:6rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-12{padding-left:3rem}.pl-20{padding-left:5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pr-2{padding-right:.5rem}.pr-20{padding-right:5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.not-italic{font-style:normal}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-9{line-height:2.25rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.\!shadow-none{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid #0000;outline-offset:2px}.ring-indigo-300{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity))}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.backdrop-blur{-webkit-backdrop-filter:blur(40px)}*{font-family:Lato,sans-serif}.bg-semi-white{background-color:#ffffffbf}img[src*="#mx-auto"]{margin:auto}img[src*="#small"]{width:68px}img[src*="#sm"]{width:200px}img[src*="#md"]{width:300px}img[src*="#medium"]{width:500px}img[src*="#logo"]{margin:auto;max-width:min(250px,100%)}img[src*="#large"]{margin:auto;width:min(60vw,100vh)}img[src*="#fill"]{height:100%;width:100%}img[src*="#tft_img"]{margin:8px;width:150px}img[src*="#icon"]{margin:4px;width:65px}img[src*="#fig"]{width:150px}.logo_size{width:200px}.advance{font-family:lato}a:hover,button:hover{color:#737373}button{font-weight:500}.experience-btn{border:none;color:#000;margin:0;padding:20px;width:-moz-fit-content;width:fit-content}.experience-btn p{font-size:1.125rem;line-height:1.75rem}.experience-btn:hover{background:#fff}.experience-btn h4{white-space:normal}header .customize{background-color:initial;position:absolute}footer .customize{align-items:center;background-color:#17b9c8;color:#fff;display:flex;flex-direction:column;padding-bottom:24px;padding-top:24px}footer .customize img{width:60px}header .customize div{box-shadow:none;font-weight:700!important;text-transform:uppercase}button{background:#0000;border:2px solid #000;border-radius:4px;box-shadow:none;color:#000}a{border:none}header{font-family:Work Sans}.nav_btn{border:none!important;box-shadow:none!important;margin:0!important;padding:0!important}.quicklinks{align-items:center;border-radius:10px;box-sizing:border-box;display:inline-block;flex-wrap:wrap;margin:30px auto 20px;width:auto}.quicklinks img{display:inline-block;filter:grayscale(100%);height:auto;margin-right:30px;max-width:200px;opacity:.5;padding:10px;position:relative;transition:all .2s ease}.quicklinks img:hover{filter:grayscale(0);opacity:1;transition:all .2s ease}.banner{background:#00838d;color:#fff!important;display:block;letter-spacing:.5px;margin:0;overflow:hidden;padding:120px 0;position:relative;text-align:center;transition:1.5s;width:100%}.header{background:none;height:auto;padding:200px 0}.banner h2,.header h1{color:#fff;margin:auto;position:relative;transition:.3s;white-space:nowrap;z-index:1}.header h1{color:#000;transition:none}.banner h2 svg{font-size:40px;margin-left:15px;opacity:0;position:absolute;top:55%;transform:translateY(-50%) scale(.5);transition:.3s}.banner .back{filter:grayscale(1) contrast(1.4);height:100%;left:0;opacity:.25;position:absolute;top:0;transition:1.5s;width:100%}.banner .back,.header .back{background-position:50%;background-size:cover}.header .back{background-repeat:no-repeat;filter:none;opacity:1}.banner:hover{background:#4b3a92}.header:hover{background:none}.banner:hover h2 svg{opacity:1;transform:translateY(-50%) scale(1)}.banner:hover h2{padding-right:40px}.header:hover h1{padding-right:0}.banner:hover .back{transform:scale(1.03)}.header:hover .back{transform:none}@media (max-width:640px){.banner h2{font:600 7vw/10vw}.header h1{font-size:35px}.banner h2 svg{font-size:30px}}@media (max-width:480px){.banner,.header{padding:80px 0}footer{text-align:center}}.focus-within\:outline-none:focus-within{outline:2px solid #0000;outline-offset:2px}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-indigo-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-stone-200:hover{--tw-border-opacity:1;border-color:rgb(231 229 228/var(--tw-border-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.hover\:bg-stone-100:hover{--tw-bg-opacity:1;background-color:rgb(245 245 244/var(--tw-bg-opacity))}.hover\:\!text-gray-700:hover{--tw-text-opacity:1!important;color:rgb(55 65 81/var(--tw-text-opacity))!important}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-indigo-100:hover{--tw-text-opacity:1;color:rgb(224 231 255/var(--tw-text-opacity))}.hover\:text-indigo-500:hover{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.hover\:text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:first\:text-gray-500:first-child:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\:bg-gray-200:focus{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.focus\:text-gray-500:focus{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.focus\:text-gray-900:focus{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-gray-200:active{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.active\:bg-indigo-700:active{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.active\:bg-indigo-800:active{--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}.active\:text-gray-700:active{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.active\:text-indigo-200:active{--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}.active\:text-indigo-700:active{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark\:bg-transparent{background-color:initial}.dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.dark\:hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.dark\:focus\:text-white:focus,.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}@media (min-width:640px){.sm\:absolute{position:absolute}.sm\:right-0{right:0}.sm\:order-none{order:0}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:-mx-12{margin-left:-3rem;margin-right:-3rem}.sm\:-mx-4{margin-left:-1rem;margin-right:-1rem}.sm\:mx-0{margin-left:0;margin-right:0}.sm\:mx-16{margin-left:4rem;margin-right:4rem}.sm\:mx-20{margin-left:5rem;margin-right:5rem}.sm\:mx-32{margin-left:8rem;margin-right:8rem}.sm\:mx-8{margin-left:2rem;margin-right:2rem}.sm\:mb-0{margin-bottom:0}.sm\:mr-1{margin-right:.25rem}.sm\:mt-0{margin-top:0}.sm\:flex{display:flex}.sm\:h-10{height:2.5rem}.sm\:h-2\/3{height:66.666667%}.sm\:h-40{height:10rem}.sm\:h-auto{height:auto}.sm\:w-1\/2{width:50%}.sm\:w-10{width:2.5rem}.sm\:w-auto{width:auto}.sm\:flex-1{flex:1 1 0%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:content-evenly{align-content:space-evenly}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:gap-0{gap:0}.sm\:gap-10{gap:2.5rem}.sm\:gap-3{gap:.75rem}.sm\:space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.sm\:overflow-hidden{overflow:hidden}.sm\:rounded-md{border-radius:.375rem}.sm\:p-0{padding:0}.sm\:p-12{padding:3rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-12{padding-left:3rem;padding-right:3rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-8{padding-top:2rem}.sm\:pb-8,.sm\:py-8{padding-bottom:2rem}.sm\:pr-8{padding-right:2rem}.sm\:text-center{text-align:center}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:order-2{order:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:-mx-12{margin-left:-3rem;margin-right:-3rem}.md\:-mx-16{margin-left:-4rem;margin-right:-4rem}.md\:mx-0{margin-left:0;margin-right:0}.md\:mx-12{margin-left:3rem;margin-right:3rem}.md\:mx-16{margin-left:4rem;margin-right:4rem}.md\:mx-20{margin-left:5rem;margin-right:5rem}.md\:mx-28{margin-left:7rem;margin-right:7rem}.md\:mx-4{margin-left:1rem;margin-right:1rem}.md\:mx-40{margin-left:10rem;margin-right:10rem}.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:-mt-1{margin-top:-.25rem}.md\:mb-0{margin-bottom:0}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:grid{display:grid}.md\:h-14{height:3.5rem}.md\:h-24{height:6rem}.md\:h-6{height:1.5rem}.md\:h-80{height:20rem}.md\:w-1\/6{width:16.666667%}.md\:w-14{width:3.5rem}.md\:w-2\/3{width:66.666667%}.md\:w-2\/6{width:33.333333%}.md\:w-4\/6{width:66.666667%}.md\:w-48{width:12rem}.md\:w-5\/6{width:83.333333%}.md\:w-6{width:1.5rem}.md\:w-auto{width:auto}.md\:w-full{width:100%}.md\:max-w-full{max-width:100%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:gap-16{gap:4rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:rounded-xl{border-radius:.75rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-16{padding-left:4rem;padding-right:4rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-3{padding-bottom:.75rem;padding-top:.75rem}.md\:py-4{padding-bottom:1rem;padding-top:1rem}.md\:py-8{padding-bottom:2rem;padding-top:2rem}.md\:pl-0{padding-left:0}.md\:pl-2{padding-left:.5rem}.md\:pl-6{padding-left:1.5rem}.md\:pl-8{padding-left:2rem}.md\:pr-0{padding-right:0}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:first\:px-8:first-child,.md\:last\:px-8:last-child{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:m-4{margin:1rem}.lg\:-mx-12{margin-left:-3rem;margin-right:-3rem}.lg\:-mx-16{margin-left:-4rem;margin-right:-4rem}.lg\:-mx-20{margin-left:-5rem;margin-right:-5rem}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:mx-16{margin-left:4rem;margin-right:4rem}.lg\:mx-20{margin-left:5rem;margin-right:5rem}.lg\:mx-24{margin-left:6rem;margin-right:6rem}.lg\:mx-28{margin-left:7rem;margin-right:7rem}.lg\:mx-4{margin-left:1rem;margin-right:1rem}.lg\:mx-40{margin-left:10rem;margin-right:10rem}.lg\:mx-6{margin-left:1.5rem;margin-right:1.5rem}.lg\:mx-80{margin-left:20rem;margin-right:20rem}.lg\:my-32{margin-bottom:8rem;margin-top:8rem}.lg\:-mt-6{margin-top:-1.5rem}.lg\:mb-0{margin-bottom:0}.lg\:mb-8{margin-bottom:2rem}.lg\:ml-8{margin-left:2rem}.lg\:mr-24{margin-right:6rem}.lg\:mr-8{margin-right:2rem}.lg\:mt-0{margin-top:0}.lg\:mt-10{margin-top:2.5rem}.lg\:mt-12{margin-top:3rem}.lg\:mt-16{margin-top:4rem}.lg\:mt-20{margin-top:5rem}.lg\:mt-6{margin-top:1.5rem}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-auto{height:auto}.lg\:w-1\/2{width:50%}.lg\:w-2\/3{width:66.666667%}.lg\:w-2\/5{width:40%}.lg\:w-3\/5{width:60%}.lg\:w-4\/5{width:80%}.lg\:w-4\/6{width:66.666667%}.lg\:w-5\/6{width:83.333333%}.lg\:max-w-3xl{max-width:48rem}.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-6xl{max-width:72rem}.lg\:max-w-\[50\%\]{max-width:50%}.lg\:max-w-none{max-width:none}.lg\:max-w-sm{max-width:24rem}.lg\:flex-1{flex:1 1 0%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-start{justify-content:flex-start}.lg\:justify-end{justify-content:flex-end}.lg\:space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(3rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(3rem*var(--tw-space-x-reverse))}.lg\:space-x-20>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(5rem*var(--tw-space-x-reverse))}.lg\:\!bg-cover{background-size:cover!important}.lg\:p-12{padding:3rem}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:px-28{padding-left:7rem;padding-right:7rem}.lg\:px-40{padding-left:10rem;padding-right:10rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-1{padding-bottom:.25rem;padding-top:.25rem}.lg\:py-12{padding-bottom:3rem;padding-top:3rem}.lg\:py-16{padding-bottom:4rem;padding-top:4rem}.lg\:py-24{padding-bottom:6rem;padding-top:6rem}.lg\:py-5{padding-bottom:1.25rem;padding-top:1.25rem}.lg\:pb-12{padding-bottom:3rem}.lg\:pb-24{padding-bottom:6rem}.lg\:pb-28{padding-bottom:7rem}.lg\:pl-0{padding-left:0}.lg\:pt-16{padding-top:4rem}.lg\:pt-24{padding-top:6rem}.lg\:pt-6{padding-top:1.5rem}.lg\:pt-8{padding-top:2rem}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.lg\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.lg\:backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.lg\:first\:px-20:first-child,.lg\:last\:px-20:last-child{padding-left:5rem;padding-right:5rem}}@media (min-width:1280px){.xl\:col-span-1{grid-column:span 1/span 1}.xl\:-mx-20{margin-left:-5rem;margin-right:-5rem}.xl\:-mx-8{margin-left:-2rem;margin-right:-2rem}.xl\:mx-20{margin-left:5rem;margin-right:5rem}.xl\:mx-96{margin-left:24rem;margin-right:24rem}.xl\:mb-12{margin-bottom:3rem}.xl\:mr-3{margin-right:.75rem}.xl\:mt-0{margin-top:0}.xl\:flex{display:flex}.xl\:w-5\/12{width:41.666667%}.xl\:max-w-sm{max-width:24rem}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:gap-16{gap:4rem}.xl\:gap-4{gap:1rem}.xl\:p-12{padding:3rem}.xl\:py-24{padding-bottom:6rem;padding-top:6rem}.xl\:text-lg{font-size:1.125rem;line-height:1.75rem}.xl\:text-xl{font-size:1.25rem;line-height:1.75rem}.xl\:backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}}@media (min-width:1536px){.\32xl\:mt-0{margin-top:0}.\32xl\:pt-24{padding-top:6rem}} \ No newline at end of file diff --git a/static/fonts/BebasNeue-Bold.ttf b/static/fonts/BebasNeue-Bold.ttf new file mode 100644 index 0000000..6fff605 Binary files /dev/null and b/static/fonts/BebasNeue-Bold.ttf differ diff --git a/static/fonts/CercoDEMO-Bold.otf b/static/fonts/CercoDEMO-Bold.otf new file mode 100644 index 0000000..37f437d Binary files /dev/null and b/static/fonts/CercoDEMO-Bold.otf differ diff --git a/static/fonts/CercoDEMO-Light.otf b/static/fonts/CercoDEMO-Light.otf new file mode 100644 index 0000000..0e74f02 Binary files /dev/null and b/static/fonts/CercoDEMO-Light.otf differ diff --git a/static/fonts/CercoDEMO-Medium.otf b/static/fonts/CercoDEMO-Medium.otf new file mode 100644 index 0000000..801f6fa Binary files /dev/null and b/static/fonts/CercoDEMO-Medium.otf differ diff --git a/static/images/favicon.ico b/static/images/favicon.ico new file mode 100644 index 0000000..ff4a519 Binary files /dev/null and b/static/images/favicon.ico differ diff --git a/content/footer/img/logo_dunia_2.jpeg b/static/images/logo.jpeg similarity index 100% rename from content/footer/img/logo_dunia_2.jpeg rename to static/images/logo.jpeg diff --git a/content/header/img/logo_dunia.jpeg b/static/images/logoheader.jpeg similarity index 100% rename from content/header/img/logo_dunia.jpeg rename to static/images/logoheader.jpeg diff --git a/static/js/custom.js b/static/js/custom.js new file mode 100644 index 0000000..539be5b --- /dev/null +++ b/static/js/custom.js @@ -0,0 +1,110 @@ +var displayedMenu = ""; +var hamburgerShown = false; +let width = screen.width; +var isMobile = width < 1024; + +function toggleMenu(button) { + if (displayedMenu === button.id.split("-")[0]) { + button.className = button.className.replace( + " text-blue-500 bg-stone-200 sm:bg-transparent", + " text-gray-900" + ); + hideMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace( + "rotate-0", + "-rotate-90" + ); + displayedMenu = ""; + } else { + showMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace( + "-rotate-90", + "rotate-0" + ); + button.className = button.className.replace( + " text-gray-900", + " text-blue-500 bg-stone-200 sm:bg-transparent" + ); + displayedMenu = button.id.split("-")[0]; + } +} + +function handleClick(button) { + if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { + toggleHamburger(); + } + if (button.id.indexOf("menu") !== -1) { + toggleMenu(button); + } +} + +function toggleHamburger() { + if (hamburgerShown) { + hideHamburger(); + hamburgerShown = false; + } else { + showHamburger(); + hamburgerShown = true; + } +} + +function showMenu(menuName) { + var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuElement = document.getElementById(menuId); + menuElement.className = menuElement.className.replace(" hidden", ""); + setTimeout(function () { + menuElement.className = menuElement.className.replace( + "duration-200 ease-in opacity-0 -translate-y-1", + "duration-150 ease-out opacity-1 -translate-y-0" + ); + }, 10); +} + +function hideMenu(menuName) { + var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuElement = document.getElementById(menuId); + menuElement.className = menuElement.className.replace( + "duration-150 ease-out opacity-1 -translate-y-0", + "duration-200 ease-in opacity-0 -translate-y-1" + ); + setTimeout(function () { + menuElement.className = menuElement.className + " hidden"; + }, 300); +} + +function showHamburger() { + document.getElementById("header-container").className = "overflow-hidden"; + document.getElementById("hamburger").className = + "fixed mt-2 z-20 top-0 inset-x-0 transition transform origin-top-right"; + document.getElementById("hamburger-btn").className = + "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"; + document.getElementById("close-hamburger-btn").className = + "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"; +} + +function hideHamburger() { + document.getElementById("header-container").className = ""; + document.getElementById("hamburger").className = + "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden"; + document.getElementById("hamburger-btn").className = + "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"; + document.getElementById("close-hamburger-btn").className = + "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"; + if (displayedMenu !== "") { + hideMenu(displayedMenu); + } +} + +window.onload = function () { + let elements = document.getElementsByTagName("button"); + let buttons = [...elements]; + buttons.forEach((button) => { + button.addEventListener("click", function () { + handleClick(button); + }); + }); + document + .getElementById("mobile-learn-btn") + ?.addEventListener("click", toggleMenu); +}; diff --git a/tailwind.config copy.js b/tailwind.config copy.js new file mode 100644 index 0000000..a08b26c --- /dev/null +++ b/tailwind.config copy.js @@ -0,0 +1,20 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./templates/**/*.html', './content/**/*.md'], + safelist: [ + { + pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/, + variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'], + }, + { + pattern: /(pt|pb)-(0)/, + variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'], + } + ], + theme: { + extend: {}, + }, + plugins: [ + require('@tailwindcss/typography'), + ], +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..ba15afc --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./templates/**/*.html'], + theme: { + extend: {}, + }, + plugins: [], +} + diff --git a/tailwindcss b/tailwindcss new file mode 100755 index 0000000..d4d4092 Binary files /dev/null and b/tailwindcss differ diff --git a/templates/_default/base.html b/templates/_default/base.html new file mode 100644 index 0000000..4e391c4 --- /dev/null +++ b/templates/_default/base.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en" charset="utf-8"> + + {% include "partials/head.html" %} + + <body> + {% include "partials/header.html" %} + <div id="content" class="p-4 pt-24 sm:p-12 overflow-hidden"> + {% block content %}{% endblock %} + </div> + {% include "partials/footer.html" %} + <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script> + </body> +</html> \ No newline at end of file diff --git a/templates/blogPage.html b/templates/blogPage.html new file mode 100644 index 0000000..85f09a1 --- /dev/null +++ b/templates/blogPage.html @@ -0,0 +1,82 @@ +{% extends "_default/base.html" %} +{% block content %} + +{% if page.taxonomies.people %} +{% set people = get_section(path="people/_index.md") %} +{% set pages_str = people.pages | json_encode() | as_str %} +{% if pages_str is containing(page.taxonomies.people[0]) %} +{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %} +{% set author = get_page(path=author_path) %} +{% endif %} +{% endif %} + +<!-- Default page template for blog posts and basic informative markdown files --> + +{% set split = page.content | split(pat="threefold.io") %} +{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if + part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set + link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set + rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if + loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif + %} {% endfor %} {% endif %} <main> + + <div class="container mx-auto mt-2 lg:mt-20"> + + <div> + <article class="article lg:w-4/6 mx-auto"> + <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0 text-gray-700"> + {{ page.title }} + </h1> + + <h4 class="lg:text-xl text-base text-gray-600 leading-8"> + {{ page.description }} + </h4> + <section class="post-author-list mb-3 mx-0"> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list m-0"> + <li class="author-list-item"> + {% if author %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | + replace(from='index.md', to=author.extra.imgPath)) %} + <img src="{{author_img}}" alt="{{author.title}}" class=" + h-8 + w-8 + sm:h-10 + sm:w-10 + rounded-full + bg-gray-200 + border-2 border-white + " /> + </li> + {% endif %} + </ul> + </div> + + <div class="pl-3 flex flex-col text-xs leading-none uppercase"> + {% if author %} + <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a> + {% endif %} + <p class="text-gray-700 text-xs"> + <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") + }}</time><br /> + <span id="time" + class="time"></span> + </p> + </div> + + </div> + <div class="my-2 sharethis-inline-share-buttons"></div> + </section> + {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', + to=page.extra.imgPath)) %} + <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}"> + <div>{{ content | safe }}</div> + </article> + </div> + + + </div> + </main> + + {% endblock content %} \ No newline at end of file diff --git a/templates/categories/list.html b/templates/categories/list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/categories/list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/categories/single.html b/templates/categories/single.html new file mode 100644 index 0000000..48b5d0c --- /dev/null +++ b/templates/categories/single.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block content %} + +<main class="pt-16"> + + <div class="flex flex-col md:flex-row"> + {# {% include "partials/blogPosts.html" %} #} + {# {% include "partials/blogSidebar.html" %} #} + </div> + </main> + + {% endblock content %} + diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..48461be --- /dev/null +++ b/templates/index.html @@ -0,0 +1,9 @@ +{% extends "_default/base.html" %} +{% block content %} + +<!-- home page template, has a banner and rows of page summaries --> +<div class=""> + {% set page = get_page(path="home/index.md") %} + {{page.content | safe}} +</div> +{% endblock content %} \ No newline at end of file diff --git a/templates/items/list.html b/templates/items/list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/items/list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/items/single.html b/templates/items/single.html new file mode 100644 index 0000000..19f29a1 --- /dev/null +++ b/templates/items/single.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block content %} + +<main class="pt-16"> + + <div class="flex flex-col md:flex-row"> + {% include "partials/productPosts.html" %} + {% include "partials/productSidebar.html" %} + </div> + </main> + + {% endblock content %} + diff --git a/templates/layouts/blog.html b/templates/layouts/blog.html new file mode 100644 index 0000000..62c113a --- /dev/null +++ b/templates/layouts/blog.html @@ -0,0 +1,30 @@ +{% extends "_default/base.html" %} +<!-- blog template +the template for displaying the blog page. +consists of a featured blog row, +a paginated list of posts (sorted by date), +and a side nav for category and featured post navigation +--> + +{% block content %} + +<main> + + <!--sets global featured variable as the most recent post with the isFeatured tag--> + {%- set section = get_section(path="blog/_index.md") %} + {% for page in section.pages %} + {% if page.extra.isFeatured %} + {%- set_global featured = page %} + {% break %} + {% endif %} + {% endfor %} + + {% include "partials/featuredBlog.html" %} + + <div class="flex flex-col md:flex-row container mx-auto"> + {% include "partials/blogPosts.html" %} + {% include "partials/blogSidebar.html" %} + </div> + </main> + + {% endblock content %} diff --git a/templates/layouts/horizontal_section.html b/templates/layouts/horizontal_section.html new file mode 100644 index 0000000..ca84bf8 --- /dev/null +++ b/templates/layouts/horizontal_section.html @@ -0,0 +1,18 @@ +{% extends "_default/base.html" %} +{% import "macros.html" as macros %} + +{% block content %} + +<main class="lg:mt-6"> + <div class="flex"> + <div class="w-4/6 pr-20"> + {{ section.content | safe}} + </div> + <div class="w-2/6 pl-20"> + {{ macros::page_list(item_type="page-box", group=false) }} + </div> + </div> + <hr> +</main> + +{% endblock content %} diff --git a/templates/layouts/newsroom.html b/templates/layouts/newsroom.html new file mode 100644 index 0000000..b243a29 --- /dev/null +++ b/templates/layouts/newsroom.html @@ -0,0 +1,33 @@ +{% extends "_default/base.html" %} +<!-- News template +the template for displaying the news page. +consists of a featured news row, +a paginated list of posts (sorted by date), +and a side nav for category and featured post navigation +--> + +{% block content %} + +<main> + + <!--sets global featured variable as the most recent post with the isFeatured tag--> + {%- set section = get_section(path="newsroom/_index.md") %} + {% for page in section.pages %} + {% if page.extra.isFeatured %} + {%- set_global featured = page %} + {% break %} + {% endif %} + {% if not featured %} + {%- set_global featured = section.pages[0] %} + {% endif %} + {% endfor %} + + {% include "partials/featuredNews.html" %} + + <div class="flex flex-col md:flex-row container mx-auto"> + {% include "partials/newsPosts.html" %} + {% include "partials/newsSidebar.html" %} + </div> + </main> + + {% endblock content %} diff --git a/templates/layouts/people.html b/templates/layouts/people.html new file mode 100644 index 0000000..abd7d50 --- /dev/null +++ b/templates/layouts/people.html @@ -0,0 +1,83 @@ +{% extends "_default/base.html" %} +<!-- partners template +the template for displaying the partners page. +consists of a featured partners row, +a paginated list of posts (sorted by date), +and a side nav for category and featured post navigation +--> + +{% block content %} + +<main> + + <!--sets global featured variable as the most recent post with the isFeatured tag--> + {%- set section = get_section(path="people/_index.md") %} + <div class="container mx-auto"> + {% include "partials/filter_bar.html" %} + <div class="text-center main-title px-0 md:w-full"> + <h1 + class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10" + > + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set category = path_array[2] %} + {{category | replace(from='-', to=' ' ) | title}} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none"> + {%- for page in paginator.pages %} + {% if "Engineering" == "Engineering"%} + {% include "partials/personCard.html" %} + {%endif%} {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> + </div> + </div> + </main> + + {% endblock content %} \ No newline at end of file diff --git a/templates/layouts/products.html b/templates/layouts/products.html new file mode 100644 index 0000000..5d881c0 --- /dev/null +++ b/templates/layouts/products.html @@ -0,0 +1,30 @@ +{% extends "_default/base.html" %} +<!-- blog template +the template for displaying the blog page. +consists of a featured blog row, +a paginated list of posts (sorted by date), +and a side nav for category and featured post navigation +--> + +{% block content %} + +<main> + + <!--sets global featured variable as the most recent post with the isFeatured tag--> + {%- set section = get_section(path="products/_index.md") %} + {% for page in section.pages %} + {% if page.extra.isFeatured %} + {%- set_global featured = page %} + {% break %} + {% endif %} + {% endfor %} + + {% include "partials/featuredProduct.html" %} + + <div class="flex flex-col md:flex-row container mx-auto"> + {% include "partials/productPosts.html" %} + {% include "partials/productSidebar.html" %} + </div> + </main> + + {% endblock content %} diff --git a/templates/list.html b/templates/list.html new file mode 100644 index 0000000..56e8399 --- /dev/null +++ b/templates/list.html @@ -0,0 +1,14 @@ +{% extends "_default/base.html" %} +{% block content %} + +<!-- Page template for blog posts and basic informative markdown files --> +<h1 class="title"> + {{ section.title }} +</h1> +<ul> + {% for page in section.pages %} + <li>{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }} • <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li> + {% endfor %} +</ul> +<p>This comes from /templates/_default/list.html.</p> +{% endblock content %} \ No newline at end of file diff --git a/templates/macros.html b/templates/macros.html new file mode 100644 index 0000000..c349733 --- /dev/null +++ b/templates/macros.html @@ -0,0 +1,28 @@ +{% macro page_list(type="text") %} + <div id="list"></div> + {% if section.extra.group_pages_by %} + <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center"> + {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %} + {% set roles = taxonomy.items %} + {% for role in roles %} + <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72"> + {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %} + <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4"> + {% set path = role.name | slugify %} + {% set fullpath = "/roles/" ~ path %} + <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a> + {% for page in role.pages %} + {% include "partials/pageBox.html"%} + {% endfor %} + </div> + {% endfor %} + </div> + {% else %} + {% for page in section.pages %} + {{page}} + {% include "partials/pageBox.html"%} + {% endfor %} + {% endif %} +{% endmacro page_list %} + + diff --git a/templates/newsPage.html b/templates/newsPage.html new file mode 100644 index 0000000..50aab42 --- /dev/null +++ b/templates/newsPage.html @@ -0,0 +1,143 @@ +{% extends "_default/base.html" %} +{% block content %} + +{% set split = page.content | split(pat="threefold.io") %} +{% if split | length < 2 %} + {% set content = page.content %} +{% else %} + {% set content = "" %} + {% for part in split %} + {% if part is starting_with("/blog") %} + {% set split_part = part | split(pat='/">') %} + {% set link = split_part[0] %} + {% set link = link | replace(from="/blog/post", to="/blog") %} + {% set link = link | replace(from="_", to="-") %} + {% set rest_part = split_part | slice(start=1) | join(sep='/">') %} + {% set part = link ~ '/">' ~ rest_part %} + {% endif %} + {% if part is starting_with("/people") %} + {% set split_part = part | split(pat='/">') %} + {% set link = split_part[0] %} + {% set link = link | replace(from="_", to="-") %} + {% set rest_part = split_part | slice(start=1) | join(sep='/">') %} + {% set part = link ~ '/">' ~ rest_part %} + {% endif %} + {% if loop.first %} + {% set_global content = part %} + {% else %} + {% set_global content = content ~ "threefold.io" ~ part %} + {% endif %} + {% endfor %} +{% endif %} + + +<!-- Default page template for news posts and basic informative markdown files --> +<main> + + <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-2 lg:pt-16 lg:w-4/6"> + + <div class="pt-8"> + <section class="post-header container mx-auto px-0 mb-4 border-b"> + <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0"> + {{ page.title }} + </h1> + <div class="lg:text-xl text-base pt-4 pb-10 text-gray-700">{{ page.description }}</div> + </section> + <section class="post-author-list mb-10 mx-0"> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list my-10 mr-2 px-0"> + {% if page.taxonomies.people %} + {% for person in page.taxonomies.people %} + {% set author_path = 'people/' ~ person ~ '/index.md' %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(person) %} + {% set author = get_page(path=author_path) %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %} + <li class="author-list-item"> + <a href="{{author.permalink}}" tooltip="{{author.title}}"> + <img src="{{author_img}}" alt="{{ author.title }}" class=" + w-10 + h-10 + rounded-full + bg-gray-200 + border-2 border-white + " /> + </a> + </li> + {% endif %} + {% endfor %} + {% endif %} + </ul> + </div> + + <div class="pl-3 flex flex-col text-xs leading-none uppercase"> + <p> + {% if page.taxonomies.people %} + {% for person in page.taxonomies.people %} + {% set author_path = 'people/' ~ person ~ '/index.md' %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(person) %} + {% set author = get_page(path=author_path) %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %} + <span> + <a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-800">{{ author.title }}</a> + </span> + {% endif %} + {% endfor %} + {% endif %} + </p> + <p class="text-gray-700"> + <time datetime="{{page.date}}"> + {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }} + </time> + {# · {{ page.news.timeToRead }} min read #} + </p> + </div> + <div class="my-2 ml-auto sharethis-inline-share-buttons"></div> + </div> + </section> + </div> + <section class="post-image mx-auto w-full"> + {% if page.extra.imgPath %} + {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %} + <img src="{{img_url}}" /> + {%endif%} + </section> + + <div class="py-12"> + <section class=" + post-content + container + mx-auto + relative + font-serif + text-gray-700 + "> + <div class="post-content-text text-xl">{{ content | safe }}</div> + </section> + + <section class="post-tags container mx-auto relative py-10"> + {% for tag in page.taxonomies.tags %} + {% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %} + <a href="{{fullpath}}" class=" + text-xs + bg-transparent + hover:text-blue-700 + py-2 + px-4 + mr-2 + border + hover:border-blue-500 + border-gray-600 + text-gray-700 + rounded-full + ">{{ tag }}</a> + {% endfor %} + </section> + </div> + </div> +</main> +{% endblock content %} \ No newline at end of file diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..2ad741b --- /dev/null +++ b/templates/page.html @@ -0,0 +1,16 @@ +{% extends "_default/base.html" %} + +{% block content %} + +<main> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script>mermaid.initialize({startOnLoad:true});</script> + <div> + {% if page %} + {{page.content | safe}} + {% else %} + {{section.content | safe}} + {% endif %} + </div> + + </main> {% endblock content %} diff --git a/templates/partials/applicationForm.html b/templates/partials/applicationForm.html new file mode 100644 index 0000000..c2b84c9 --- /dev/null +++ b/templates/partials/applicationForm.html @@ -0,0 +1,60 @@ +<div class="mt-5 md:mt-0 md:col-span-2"> + <form action="#" method="POST"> + <div class="shadow sm:rounded-md sm:overflow-hidden"> + <div class="px-4 py-5 bg-white space-y-6 sm:p-6"> + <h3 class="text-black text-lg">Application</h3> + <div class="grid grid-cols-3 gap-6"> + <div class="col-span-3 sm:col-span-2"> + <label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label> + <div class="mt-1 flex rounded-md shadow-sm"> + <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span> + <input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com"> + </div> + </div> + </div> + + <div> + <label for="about" class="block text-sm font-medium text-gray-700"> About </label> + <div class="mt-1"> + <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea> + </div> + <p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p> + </div> + + <div> + <label class="block text-sm font-medium text-gray-700"> Photo </label> + <div class="mt-1 flex items-center"> + <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"> + <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24"> + <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /> + </svg> + </span> + <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> + </div> + </div> + + <div> + <label class="block text-sm font-medium text-gray-700"> Resume </label> + <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> + <div class="space-y-1 text-center"> + <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true"> + <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> + </svg> + <div class="flex text-sm text-gray-600"> + <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"> + <span>Upload a file</span> + <input id="file-upload" name="file-upload" type="file" class="sr-only"> + </label> + <p class="pl-1">or drag and drop</p> + </div> + <p class="text-xs text-gray-500">PDF up to 10MB</p> + </div> + </div> + </div> + </div> + <div class="px-4 py-3 bg-gray-50 text-right sm:px-6"> + <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button> + </div> + </div> + </form> + </div> \ No newline at end of file diff --git a/templates/partials/blogPosts.html b/templates/partials/blogPosts.html new file mode 100644 index 0000000..8e04924 --- /dev/null +++ b/templates/partials/blogPosts.html @@ -0,0 +1,70 @@ +{% block content %} + +<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12"> + <h1 + class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10" + > + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set category = path_array[2] %} + The Latest from Ourworld Free Zone + {% if taxonomy == "categories" %} - + {{category | replace(from='-', to=' ' ) | title}} + {% endif %} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none"> + {%- for post in paginator.pages %} + {% if not post.extra.hidden %} + {% include "partials/postCard.html" %} + {%endif%} {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> +</div> + +{% endblock content %} \ No newline at end of file diff --git a/templates/partials/blogSidebar.html b/templates/partials/blogSidebar.html new file mode 100644 index 0000000..7c910c7 --- /dev/null +++ b/templates/partials/blogSidebar.html @@ -0,0 +1,38 @@ + +<div class="mx-8 md:mx-4 flex flex-col"> + <div class="flex flex-col mb-12 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4> + <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a> + {% set taxonomy = get_taxonomy(kind="categories") %} + {% set categories = taxonomy.items %} + {% for category in categories %} + {% set path = category.name | slugify %} + {% set fullpath = "/categories/" ~ path %} + <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a> + {% endfor %} + </div> + +{% set section = get_section(path="blog/_index.md")%} + + <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED POSTS</h4> + + {% for page in section.pages %} + {% if page.extra.isFeatured %} + <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a> + {% endif %} + {% endfor %} + + </div> +</div> + +<script> + function setActiveCategory() { + let activeCategory = window.location.pathname.split("/")[2] + if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") } + else { activeLink = document.getElementById(activeCategory)} + activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold"); + } + + setActiveCategory() +</script> \ No newline at end of file diff --git a/templates/partials/featuredBlog.html b/templates/partials/featuredBlog.html new file mode 100644 index 0000000..b6edc7e --- /dev/null +++ b/templates/partials/featuredBlog.html @@ -0,0 +1,36 @@ +{% if featured.taxonomies.people %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(featured.taxonomies.people[0]) %} + {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %} + {% set author = get_page(path=author_path) %} + {% endif %} +{% endif %} + +<body> + + <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-4 lg:mt-16 items-center container mx-auto pt-0 lg:pt-16"> + <div class="relative lg:ml-8 my-8 w-full md:w-auto"> + <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3> + <a href={{featured.permalink}} class=""> + <h2 + class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 "> + {{ featured.title }} + </h2> + </a> + <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> + {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - + </h4> + + </div> + + <div class="mx-4 relative lg:mt-0 max-w-full"> + <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" /> + </div> + </div> + + <hr class="mt-6"> + + </div> + </div> +</body> \ No newline at end of file diff --git a/templates/partials/featuredNews.html b/templates/partials/featuredNews.html new file mode 100644 index 0000000..8c67ed4 --- /dev/null +++ b/templates/partials/featuredNews.html @@ -0,0 +1,28 @@ +<body> + + <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto"> + <div class="relative lg:ml-8 my-8 w-full md:w-auto"> + <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED NEWS</h3> + <a href={{featured.permalink}} class=""> + <h2 + class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 "> + {{ featured.title }} + </h2> + </a> + + <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> + {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - + </h4> + + </div> + + <div class="mx-4 relative lg:mt-0 max-w-full"> + {% if featured.extra.imgPath %} + <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" /> + {% endif %} + </div> + </div> + <hr class="mt-6"> + </div> + </div> +</body> \ No newline at end of file diff --git a/templates/partials/featuredProduct.html b/templates/partials/featuredProduct.html new file mode 100644 index 0000000..63b09ca --- /dev/null +++ b/templates/partials/featuredProduct.html @@ -0,0 +1,36 @@ +{% if featured.taxonomies.people %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(featured.taxonomies.people[0]) %} + {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %} + {% set author = get_page(path=author_path) %} + {% endif %} +{% endif %} + +<body> + + <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto"> + <div class="relative lg:ml-8 my-8 w-full md:w-auto"> + <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED PRODUCT</h3> + <a href={{featured.permalink}} class=""> + <h2 + class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 "> + {{ featured.title }} + </h2> + </a> + <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> + {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - + </h4> + + </div> + + <div class="mx-4 relative lg:mt-0 max-w-full"> + <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" /> + </div> + </div> + + <hr class="mt-6"> + + </div> + </div> +</body> \ No newline at end of file diff --git a/templates/partials/filter_bar.html b/templates/partials/filter_bar.html new file mode 100644 index 0000000..4770683 --- /dev/null +++ b/templates/partials/filter_bar.html @@ -0,0 +1,48 @@ +{% set path_array = current_path | split(pat="/") %} +{% set taxonomy = path_array[1] %} +{% set category = path_array[2] %} +{% if path_array | length < 4%} +{% set category = "All" %} +{% endif %} + + + +<div class="left-0 z-50 mb-5 h-16 bg-gray-200 mt-24 w-full rounded shadow"> + <header class="flex flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"> + <div class="flex justify-between px-4 sm:p-0"> + <div class="ml-8 inline-flex flex-shrink-0"> + <span class="flex text-xl p-3 capitalize tracking-tight"> + Filter: + </span> + </div> + </div> + <nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"> + <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 "> + <li class="flex items-center"> + <div class="relative"> + <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link bg-gray-300"> + <span class="capitalize">{{category | replace(from='-', to=' ' ) | title}}</span> + <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> + </button> + <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"> + <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"> + <a data-v-21fd5df0="" href="/people" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"> + All + </a> + {% set taxonomy = get_taxonomy(kind="memberships") %} + {% set categories = taxonomy.items %} + {% for category in categories %} + {% set path = category.name | slugify %} + {% set fullpath = "/memberships/" ~ path %} + <a href="{{fullpath}}" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"> + {{category.name}} + </a> + {% endfor %} + </div> + </div> + </div> + </li> + </ul> + </nav> + </header> +</div> \ No newline at end of file diff --git a/templates/partials/footer.html b/templates/partials/footer.html new file mode 100644 index 0000000..3003b63 --- /dev/null +++ b/templates/partials/footer.html @@ -0,0 +1,42 @@ +<!-- + Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin. + Read the documentation to get started: https://tailwindui.com/documentation +--> + +{%- set section = get_section(path="footer/_index.md") %} +{%- set logoPath = section.extra.logoPath %} + +<html> + <head /><body> + <div class="mt-6 border-t border-gray-200 pt-2"></div> + <footer class="bg-white"> + <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> + <div class="xl:flex xl:gap-4 items-center"> + <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1"> + <img class="w-40 h-auto sm:w-15 mx-auto" src="{{ get_url(path=logoPath)}}" alt="Ourworld Freezone Logo" /> + <p class="text-gray-500 text-base leading-6 "> + {{section.description}} + </p> + {% include "partials/socialLinks.html" %} + </div> + + <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust"> + {{ section.content | safe }} + </div> + + </div> + <div class="mt-12 mx-auto border-t border-gray-200 pt-8"> + <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center"> + © 2023 Flowers 4 Peace, All rights reserved. + </div> + + </div> + + </div> + + + + </footer> + </body> + </html> + \ No newline at end of file diff --git a/templates/partials/head.html b/templates/partials/head.html new file mode 100644 index 0000000..38ed853 --- /dev/null +++ b/templates/partials/head.html @@ -0,0 +1,53 @@ +{% set cloudiBase = 'https://res.cloudinary.com/brycewray-com/image/upload/' %} +{% set xFmPart1 = 'f_auto,q_auto:eco,w_' %} +{% set xFmPart2 = ',x_0,z_1/' %} +{% set fallbackImg = 'typewriter-monochrome_2242164_6260x4374.jpg' %} +{% set zolaVer = '0.13.0' %} + +<head> + <meta name="generator" content="Zola v.{{ zolaVer }} - getzola.org" /> + + {% block title %} + {% if current_path == '/' %} + <title>{{ config.title }}</title> + <meta property="og:title" content="{{ config.title }}" /> + {% else %} + <title>{% if section.title %}{{ section.title }} • {% endif %}{% if page.title %}{{ page.title }} • {% endif %}{{ config.title }}</title> + <meta property="og:title" content="{% if section.title %}{{ section.title }} • {% endif %}{% if page.title %}{{ page.title }} • {% endif %}{{ config.title }}" /> + {% endif %} + {% endblock title %} + + <!-- Required meta categories --> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- **** BEGINNING, favicons **** --> + + <!-- generics --> + + <!-- iOS --> + + <!-- Android --> + + <!-- Windows 8, IE 10 --> + + <!-- Windows 8.1 and up, IE 11 --> + + <!-- **** CONCLUSION, favicons **** --> + + <!-- CSS/SCSS --> + <link rel="stylesheet" href="{{ get_url(path="css/index.css", trailing_slash=false, cachebust=true) | safe }}" /> <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style> + + <!-- MailerLite Universal --> +<script> + (function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){ + var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);} + f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i); + var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000)); + _.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml'); + + var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load'); + </script> + <!-- End MailerLite Universal --> + +</head> diff --git a/templates/partials/header.html b/templates/partials/header.html new file mode 100644 index 0000000..b090022 --- /dev/null +++ b/templates/partials/header.html @@ -0,0 +1,134 @@ +<!-- + Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin. + Read the documentation to get started: https://tailwindui.com/documentation +--><!-- This example requires Tailwind CSS v1.4.0+ --> + + +<!-- set variables used for header template --> +{% set section = get_section(path="_index.md") %} +{% set subsections_str = section.subsections | join(sep=" ") %} +{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %} + +{% if "header/_index.md" in subsections_str %} + {% set section = get_section(path="header/_index.md") %} + {% set header_items = section.content | safe | split(pat="<li>") %} + {% include "partials/header_custom.html" %} +{% else %} + <header id="header-container"> + {% set header_class = config.extra.header_class | default(value='') %} + <div class="{{'z-10 bg-white fixed w-screen max-w-full ' ~ header_class}}"> + <div class="relative z-50 shadow"> + <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20"> + <div> + <a href="/" class="flex"> + <img class="h-auto sm:w-15" src="{{logo_path}}" alt="Logo" /> + </a> + </div> + <div class="-mr-2 -my-2 lg:hidden"> + <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"> + <!-- Heroicon name: menu --> + <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> + </svg> + </button> + <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"> + <!-- Heroicon name: x --> + <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> + </svg> + </button> + </div> + <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12"> + <nav class="flex space-x-10"> + {% for page in section.pages %} + {% if page.extra.menu %} {% continue %} {% endif %} + <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> + {{page.title}} + </a> + <div class="relative"> + </div> + {% endfor %} + {% for subsection in section.subsections %} + {% if subsection == "footer/_index.md" %} {% continue %} {% endif %} + {% set button_id = subsection ~ "-menu-btn" | slugify %} + <div class="relative"> + <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150"> + <span>{{ subsection }}</span> + <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> + </button> + </div> + {% endfor %} + </nav> + </div> + </div> + </div> + {% for subsection in section.subsections %} + {% if subsection == "footer/_index.md" %} {% continue %} {% endif %} + {% set submenu_id = subsection ~ "-menu" | slugify %} + <nav> + <div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden"> + <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white"> + <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12"> + {{subsection | safe }} + </div> + </div> + </div> + </nav> + + + {% endfor %} + + + <!-- + Mobile menu, show/hide based on mobile menu state. + + Entering: "duration-200 ease-out" + From: "opacity-0 scale-95" + To: "opacity-100 scale-100" + Leaving: "duration-100 ease-in" + From: "opacity-100 scale-100" + To: "opacity-0 scale-95" + --> + <div id="hamburger" class="hidden fixed mt-16 z-20 inset-x-0 transition transform origin-top-right lg:hidden"> + <div> + <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50"> + <div class="pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto"> + + <nav class="flex flex-col justify-around pb-12"> + {% for page in section.pages %} + {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %} + {% if page.extra.menu %} {% continue %} {% endif %} + <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> + {{page.title}} + </a> + <hr/> + {% endfor %} + {% for subsection in section.subsections %} + {% if subsection == "footer/_index.md" %} {% continue %} {% endif %} + {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %} + {% set menu_id = subsection ~ "-mobile-menu" | slugify %} + + <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> + <span>{{ subsection }}</span> + <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> + </button> + + <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden"> + {{ subsection | safe }} + </div> + + {% endfor %} + </nav> + </div> + + </div> + + </div> + </div> + + + </header> + +{% endif %} + + diff --git a/templates/partials/header_custom.html b/templates/partials/header_custom.html new file mode 100644 index 0000000..53f3bf4 --- /dev/null +++ b/templates/partials/header_custom.html @@ -0,0 +1,147 @@ +<!-- + Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin. + Read the documentation to get started: https://tailwindui.com/documentation +--><!-- This example requires Tailwind CSS v1.4.0+ --> + +{%- set section = get_section(path="header/_index.md") %} +{% set header_items = section.content | safe | split(pat="<li>") %} + +<header id="header-container"> + <div class="z-10 bg-white fixed w-screen"> + <div class="relative z-50 shadow"> + <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20"> + <div> + <a href="/" class="flex"> + <img class="w-40 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="Ourworld Logo" /> + </a> + </div> + <div class="mr-2 -my-2 lg:hidden"> + <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"> + <!-- Heroicon name: menu --> + <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> + </svg> + </button> + <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2"> + <!-- Heroicon name: x --> + <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> + </svg> + </button> + </div> + <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12"> + <nav class="flex space-x-10"> + +{% for header_item in header_items %} +{% if not loop.first %} + {% set header_arr = header_item | split(pat="</li>") %} + {% set header_label = header_arr[0] %} + {% if '<a' in header_label %} + {% set link_label = header_label | striptags %} + {% set link_path = header_label | split(pat="%22") | safe%} + {% if header_label is containing("http") %} + <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> + {{link_label}} + </a> + {% else %} + <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> + {{link_label}} + </a> + {% endif %} + {% else %} + <div class="relative"> + {% set button_id = header_label ~ "-menu-btn" | slugify %} + <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150"> + <span>{{ header_label }}</span> + <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> + </button> + </div> + + {% endif %} +{% endif %} +{% endfor %} +</nav> + + + </div> + </div> + </div> +{% for header_item in header_items %} +{% if not loop.first %} + {% set header_arr = header_item | split(pat="</li>") %} + {% set header_label = header_arr[0] %} + {% set header_menu = header_arr[1] %} + {% set menu_id = header_label ~ "-menu" | slugify %} + +<nav> + <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden"> + <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white"> + <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12"> + {{header_menu | safe }} + </div> + </div> + </div> + </nav> + + +{% endif %} +{% endfor %} + + + <!-- + Mobile menu, show/hide based on mobile menu state. + + Entering: "duration-200 ease-out" + From: "opacity-0 scale-95" + To: "opacity-100 scale-100" + Leaving: "duration-100 ease-in" + From: "opacity-100 scale-100" + To: "opacity-0 scale-95" + --> + <div id="hamburger" class="hidden fixed mt-16 z-20 inset-x-0 transition transform origin-top-right lg:hidden"> + <div> + <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50"> + <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto"> + + <nav class="flex flex-col justify-around pb-12"> + {% for header_item in header_items %} + + {% if not loop.first %} + {% set header_arr = header_item | split(pat="</li>") %} + {% set header_label = header_arr[0] %} + {% if '<a' in header_label %} + {% set link_label = header_label | striptags %} + {% set link_path = header_label | split(pat="%22") | safe%} + {% if header_label is containing("http") %} + <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> + {{link_label}} + </a> + {% else %} + <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> + {{link_label}} + </a> + {% endif %} + {% else %} + {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %} + <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> + <span>{{ header_label }}</span> + <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> + </button> + {% set menu_id = header_label ~ "-mobile-menu" | slugify %} + <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden"> + {{ header_arr[1] | safe }} + </div> + + {% endif %} + {% endif %} + {% endfor %} + </nav> + </div> + + </div> + + </div> + </div> + + +</header> diff --git a/templates/partials/icons/bar-svgrepo-com.svg b/templates/partials/icons/bar-svgrepo-com.svg new file mode 100644 index 0000000..07ac56d --- /dev/null +++ b/templates/partials/icons/bar-svgrepo-com.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> +<path style="fill:#A39B8D;" d="M406.261,155.826h-11.13V11.13h11.13V155.826z M261.565,11.13h-11.13v144.696h11.13V11.13z + M116.87,11.13h-11.13v144.696h11.13V11.13z"/> +<path style="fill:#F7F2CD;" d="M467.478,278.261H333.913l55.652-133.565h22.261L467.478,278.261z M267.13,144.696H244.87 + l-55.652,133.565h133.565L267.13,144.696z M122.435,144.696h-22.261L44.522,278.261h133.565L122.435,144.696z"/> +<path style="fill:#FFFCE3;" d="M446.609,278.261h-91.826l40.812-122.435h10.203L446.609,278.261z M261.101,155.826h-10.203 + l-40.811,122.435h91.826L261.101,155.826z M116.405,155.826h-10.203L65.391,278.261h91.826L116.405,155.826z"/> +<path style="fill:#F5D470;" d="M369.212,155.826c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391 + s33.391,14.949,33.391,33.391c0,3.903-0.677,7.648-1.908,11.13H369.212z M287.484,155.826c1.231-3.483,1.908-7.227,1.908-11.13 + c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13H287.484z M142.788,155.826 + c1.231-3.483,1.908-7.227,1.908-11.13c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391 + c0,3.903,0.677,7.648,1.908,11.13H142.788z"/> +<path style="fill:#D19B3F;" d="M434.087,144.696c0,3.903-0.677,7.648-1.908,11.13h-20.353v-11.13c0-6.147-4.983-11.13-11.13-11.13 + c-6.147,0-11.13,4.983-11.13,11.13v11.13h-20.353c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391 + S434.087,126.254,434.087,144.696z M256,111.304c-18.442,0-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13h20.353 + v-11.13c0-6.147,4.983-11.13,11.13-11.13s11.13,4.983,11.13,11.13v11.13h20.353c1.231-3.483,1.908-7.227,1.908-11.13 + C289.391,126.254,274.442,111.304,256,111.304z M111.304,111.304c-18.442,0-33.391,14.949-33.391,33.391 + c0,3.903,0.677,7.648,1.908,11.13h20.353v-11.13c0-6.147,4.983-11.13,11.13-11.13c6.147,0,11.13,4.983,11.13,11.13v11.13h20.353 + c1.231-3.483,1.908-7.227,1.908-11.13C144.696,126.254,129.746,111.304,111.304,111.304z"/> +<path style="fill:#57544C;" d="M500.87,22.261H11.13C4.983,22.261,0,17.278,0,11.13l0,0C0,4.983,4.983,0,11.13,0H500.87 + C507.017,0,512,4.983,512,11.13l0,0C512,17.278,507.017,22.261,500.87,22.261z"/> +<path style="fill:#D3C6A8;" d="M434.087,489.739L434.087,489.739c0,12.295-9.966,22.261-22.261,22.261H100.174 + c-12.295,0-22.261-9.966-22.261-22.261l0,0c0-12.295,9.966-22.261,22.261-22.261h311.652 + C424.121,467.478,434.087,477.444,434.087,489.739z"/> +<path style="fill:#6E5840;" d="M478.609,467.478H33.391V267.13h445.217V467.478z"/> +<path style="fill:#323030;" d="M500.87,478.609H11.13c-6.147,0-11.13-4.983-11.13-11.13l0,0c0-6.147,4.983-11.13,11.13-11.13H500.87 + c6.147,0,11.13,4.983,11.13,11.13l0,0C512,473.626,507.017,478.609,500.87,478.609z M512,267.13L512,267.13 + c0-6.147-4.983-11.13-11.13-11.13H11.13C4.983,256,0,260.983,0,267.13l0,0c0,6.147,4.983,11.13,11.13,11.13H500.87 + C507.017,278.261,512,273.278,512,267.13z"/> +<path style="fill:#C6984F;" d="M125.217,500.87h-22.261l38.957-166.957h22.261L125.217,500.87z M347.826,333.913h-22.261 + L286.609,500.87h22.261L347.826,333.913z"/> +<path style="fill:#AA8144;" d="M164.174,333.913h22.261l38.957,166.957H203.13L164.174,333.913z M386.783,500.87h22.261 + l-38.957-166.957h-22.261L386.783,500.87z"/> +<path style="fill:#ADA58C;" d="M208.696,356.174h-89.043c-6.147,0-11.13-4.983-11.13-11.13v-22.261c0-6.147,4.983-11.13,11.13-11.13 + h89.043c6.147,0,11.13,4.983,11.13,11.13v22.261C219.826,351.191,214.843,356.174,208.696,356.174z M403.478,345.043v-22.261 + c0-6.147-4.983-11.13-11.13-11.13h-89.043c-6.147,0-11.13,4.983-11.13,11.13v22.261c0,6.147,4.983,11.13,11.13,11.13h89.043 + C398.495,356.174,403.478,351.191,403.478,345.043z"/> +<path style="fill:#D3C6A8;" d="M108.522,322.783L108.522,322.783c0-6.147,4.983-11.13,11.13-11.13h89.043 + c6.147,0,11.13,4.983,11.13,11.13l0,0H108.522z M403.478,322.783L403.478,322.783c0-6.147-4.983-11.13-11.13-11.13h-89.043 + c-6.147,0-11.13,4.983-11.13,11.13l0,0H403.478z"/> +<path style="fill:#92393C;" d="M66.783,256c0,6.147-4.983,11.13-11.13,11.13h-11.13c-6.147,0-11.13-4.983-11.13-11.13v-33.391 + h33.391V256z"/> +<path style="fill:#DB6D53;" d="M50.087,256L50.087,256c-3.073,0-5.565-2.492-5.565-5.565v-27.826h11.13v27.826 + C55.652,253.508,53.16,256,50.087,256z"/> +<path style="fill:#C6984F;" d="M178.087,250.435v11.13c0,3.073-2.492,5.565-5.565,5.565h-66.783c-3.073,0-5.565-2.492-5.565-5.565 + v-11.13c0-3.073,2.492-5.565,5.565-5.565h66.783C175.595,244.87,178.087,247.362,178.087,250.435z"/> +<path style="fill:#AA8144;" d="M178.087,250.435V256h-77.913v-5.565c0-3.073,2.492-5.565,5.565-5.565h66.783 + C175.595,244.87,178.087,247.362,178.087,250.435z"/> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +</svg> diff --git a/templates/partials/icons/code-svgrepo-com.svg b/templates/partials/icons/code-svgrepo-com.svg new file mode 100644 index 0000000..6be0cd8 --- /dev/null +++ b/templates/partials/icons/code-svgrepo-com.svg @@ -0,0 +1,95 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> +<path style="fill:#E4EAF8;" d="M494.345,472.276H17.655C7.904,472.276,0,464.372,0,454.621V57.379 + c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655v397.241 + C512,464.372,504.096,472.276,494.345,472.276z"/> +<path style="fill:#5B5D6E;" d="M494.345,472.276H256V83.862h256v370.759C512,464.372,504.096,472.276,494.345,472.276z"/> +<path style="fill:#D5DCED;" d="M512,83.862H0V57.379c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655 + V83.862z"/> +<path style="fill:#E4EAF8;" d="M26.483,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828 + h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C35.31,71.082,31.358,75.034,26.483,75.034z"/> +<path style="fill:#FF5050;" d="M423.724,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828 + h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C432.552,71.082,428.599,75.034,423.724,75.034z"/> +<path style="fill:#FFF082;" d="M459.034,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828 + h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C467.862,71.082,463.91,75.034,459.034,75.034z"/> +<path style="fill:#A0FFB4;" d="M494.345,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828 + h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C503.172,71.082,499.22,75.034,494.345,75.034z"/> +<path style="fill:#00C3FF;" d="M144.898,150.826l-59.75,59.75c-3.229,3.229-3.463,8.386-0.54,11.893L256,428.138V145.655h-98.618 + C152.7,145.655,148.209,147.516,144.898,150.826z"/> +<polygon style="fill:#80E1FF;" points="256,145.655 176.552,216.276 256,216.276 "/> +<g> + <path style="fill:#00AAF0;" d="M176.552,216.276l-25.97-69.254c-2.103,0.878-4.039,2.159-5.681,3.801L85.15,210.575 + c-1.578,1.578-2.415,3.619-2.543,5.7L176.552,216.276L176.552,216.276z"/> + <polygon style="fill:#00AAF0;" points="176.552,216.276 256,428.138 256,216.276 "/> +</g> +<path style="fill:#AFB9D2;" d="M256,489.931c-4.879,0-8.828-3.953-8.828-8.828V30.897c0-4.875,3.948-8.828,8.828-8.828 + c4.879,0,8.828,3.953,8.828,8.828v450.207C264.828,485.978,260.879,489.931,256,489.931z"/> +<g> + <path style="fill:#FF5050;" d="M317.793,163.31h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S322.673,163.31,317.793,163.31z"/> + <path style="fill:#FF5050;" d="M317.793,233.931h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828C326.621,229.978,322.673,233.931,317.793,233.931z"/> +</g> +<path style="fill:#A0FFB4;" d="M344.276,198.621h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S349.155,198.621,344.276,198.621z"/> +<path style="fill:#FFFFFF;" d="M467.862,163.31H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759 + c4.879,0,8.828,3.953,8.828,8.828S472.742,163.31,467.862,163.31z"/> +<path style="fill:#FFF082;" d="M467.862,233.931H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759 + c4.879,0,8.828,3.953,8.828,8.828C476.69,229.978,472.742,233.931,467.862,233.931z"/> +<path style="fill:#D5DCED;" d="M467.862,198.621h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276 + c4.879,0,8.828,3.953,8.828,8.828S472.742,198.621,467.862,198.621z"/> +<path style="fill:#A0FFB4;" d="M344.276,269.241h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S349.155,269.241,344.276,269.241z"/> +<path style="fill:#D5DCED;" d="M467.862,269.241h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276 + c4.879,0,8.828,3.953,8.828,8.828S472.742,269.241,467.862,269.241z"/> +<g> + <path style="fill:#FF5050;" d="M317.793,304.552h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828C326.621,300.599,322.673,304.552,317.793,304.552z"/> + <path style="fill:#FF5050;" d="M317.793,375.172h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S322.673,375.172,317.793,375.172z"/> +</g> +<path style="fill:#A0FFB4;" d="M344.276,339.862h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S349.155,339.862,344.276,339.862z"/> +<path style="fill:#FFFFFF;" d="M467.862,304.552H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759 + c4.879,0,8.828,3.953,8.828,8.828C476.69,300.599,472.742,304.552,467.862,304.552z"/> +<path style="fill:#FFF082;" d="M467.862,375.172H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759 + c4.879,0,8.828,3.953,8.828,8.828S472.742,375.172,467.862,375.172z"/> +<path style="fill:#D5DCED;" d="M467.862,339.862h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276 + c4.879,0,8.828,3.953,8.828,8.828S472.742,339.862,467.862,339.862z"/> +<path style="fill:#A0FFB4;" d="M344.276,410.483h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655 + c4.879,0,8.828,3.953,8.828,8.828S349.155,410.483,344.276,410.483z"/> +<path style="fill:#D5DCED;" d="M467.862,410.483h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276 + c4.879,0,8.828,3.953,8.828,8.828S472.742,410.483,467.862,410.483z"/> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +</svg> diff --git a/templates/partials/icons/form-svgrepo-com.svg b/templates/partials/icons/form-svgrepo-com.svg new file mode 100644 index 0000000..1da4268 --- /dev/null +++ b/templates/partials/icons/form-svgrepo-com.svg @@ -0,0 +1,67 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> +<g> + <g> + <path style="fill:#9F6459;" d="M416,32H272c0,8.836-7.164,16-16,16s-16-7.164-16-16H96c-22.055,0-40,17.945-40,40v400 + c0,22.055,17.945,40,40,40h320c22.055,0,40-17.945,40-40V72C456,49.945,438.054,32,416,32z M416,464c0,4.418-3.582,8-8,8H104 + c-4.418,0-8-3.582-8-8V80c0-4.418,3.582-8,8-8h304c4.418,0,8,3.582,8,8V464z"/> + </g> + <g> + <g> + <path style="fill:#D8DCE1;" d="M152,368c-1.891,0-3.789-0.664-5.312-2.023c-3.305-2.93-3.602-7.992-0.664-11.289l64-72 + c2.328-2.625,6.094-3.422,9.289-1.969l80.445,36.57l52.844-128.336c1.688-4.078,6.359-6,10.445-4.352 + c4.086,1.68,6.031,6.359,4.352,10.445l-56,136c-0.828,2.008-2.438,3.594-4.453,4.391s-4.273,0.742-6.258-0.156l-82.625-37.555 + l-60.086,67.586C156.398,367.094,154.203,368,152,368z"/> + </g> + </g> + <g> + <circle style="fill:#FF4F19;" cx="152" cy="360" r="24"/> + </g> + <g> + <circle style="fill:#FF9600;" cx="216" cy="288" r="24"/> + </g> + <g> + <circle style="fill:#FFD200;" cx="304" cy="328" r="24"/> + </g> + <g> + <circle style="fill:#74D24F;" cx="360" cy="192" r="24"/> + </g> + <g> + <path style="fill:#B9BBC1;" d="M304,16h-20.391C277.969,6.242,267.484,0,256,0s-21.969,6.242-27.609,16H208 + c-22.055,0-40,17.945-40,40v32c0,4.418,3.578,8,8,8h160c4.422,0,8-3.582,8-8V56C344,33.945,326.055,16,304,16z M256,40 + c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8s8,3.582,8,8C264,36.418,260.418,40,256,40z"/> + </g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +</svg> diff --git a/templates/partials/icons/paint-brush-art-svgrepo-com.svg b/templates/partials/icons/paint-brush-art-svgrepo-com.svg new file mode 100644 index 0000000..f8ed55a --- /dev/null +++ b/templates/partials/icons/paint-brush-art-svgrepo-com.svg @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve"> +<path style="fill:#996632;" d="M264,465.6c-4,4-10.4,6.4-16,6.4c-0.8,0-1.6,0-2.4,0c-12-1.6-21.6-12.8-21.6-25.6v-84 + c0-32-26.4-58.4-58.4-58.4h-2.4c-14.4,0-26.4-12-26.4-26.4V256h224v21.6c0,14.4-12,26.4-26.4,26.4H332c-32,0-58.4,26.4-58.4,58.4 + V448C272,454.4,268.8,461.6,264,465.6z M264,448c0-8.8-7.2-16-16-16c-8.8,0-16,7.2-16,16s7.2,16,16,16C256.8,464,264,456.8,264,448z + "/> +<path style="fill:#D9CDC1;" d="M364,232c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12h20h4c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12 + h-12H364z"/> +<circle style="fill:#42210B;" cx="328" cy="208" r="16"/> +<path style="fill:#CC9966;" d="M296,80c0-8.8,7.2-16,16-16s16,7.2,16,16v40c0,17.6,14.4,32,32,32c5.6,0,11.2-1.6,16-4.8V168h-91.2 + c6.4-5.6,11.2-14.4,11.2-24V80z"/> +<g> + <circle style="fill:#42210B;" cx="248" cy="448" r="16"/> + <circle style="fill:#42210B;" cx="248" cy="208" r="16"/> +</g> +<path style="fill:#FFF8EF;" d="M248,192c-8.8,0-16,7.2-16,16s7.2,16,16,16c8.8,0,16-7.2,16-16S256.8,192,248,192z M364,184 + c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12H168c17.6,0,32-14.4,32-32v-16H364z M328,224c8.8,0,16-7.2,16-16s-7.2-16-16-16 + s-16,7.2-16,16S319.2,224,328,224z"/> +<path style="fill:#CC9966;" d="M200,80c0-8.8,7.2-16,16-16s16,7.2,16,16v64c0,9.6,4,18.4,11.2,24H200V80z"/> +<path style="fill:#FF6600;" d="M360,136c-8.8,0-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v64c0,8.8-7.2,16-16,16 + s-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v120c0,8.8-7.2,16-16,16s-16-7.2-16-16V96c0-19.2-13.6-35.2-32-39.2V56 + c0-22.4,17.6-40,40-40h176c22.4,0,40,17.6,40,40v64C376,128.8,368.8,136,360,136z"/> +<path style="fill:#FF7D00;" d="M168,208c-4.8,0-8-3.2-8-8V96c0-20-12.8-38.4-31.2-44.8C131.2,35.2,144,24,160,24h176 + c17.6,0,32,14.4,32,32v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80c0-22.4-17.6-40-40-40s-40,17.6-40,40v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80 + c0-22.4-17.6-40-40-40s-40,17.6-40,40v120C176,204.8,172.8,208,168,208z"/> +<path style="fill:#CC9966;" d="M136,96v72h-16V73.6C129.6,76.8,136,85.6,136,96z"/> +<path style="fill:#FFF8EF;" d="M136,200c0,17.6,13.6,32,31.2,32h-34.4c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h3.2V200z"/> +<path style="fill:#875426;" d="M165.6,304c32,0,58.4,26.4,58.4,58.4v84c0,12.8,9.6,24,21.6,25.6c0.8,0,1.6,0,2.4,0 + c6.4,0,12-2.4,16-6.4c4.8-4.8,8-11.2,8-17.6v-85.6c0-32,26.4-58.4,58.4-58.4h2.4c14.4,0,26.4-12,26.4-26.4V256H136v21.6 + c0,14.4,12,26.4,26.4,26.4H165.6z M244.8,480c-16-1.6-28.8-16-28.8-33.6v-84c0-28-22.4-50.4-50.4-50.4h-2.4 + c-19.2,0-34.4-15.2-34.4-34.4V248h240v29.6c0,19.2-15.2,34.4-34.4,34.4H332c-28,0-50.4,22.4-50.4,50.4V448c0,8.8-4,17.6-10.4,24 + C262.4,477.6,253.6,480.8,244.8,480z"/> +<path style="fill:#D9CDC1;" d="M120.8,220c0,6.4,5.6,12,12,12H120h-12c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h4h20.8 + c-6.4,0-12,5.6-12,12V220z"/> +<path style="fill:#42210B;" d="M136,96c0-10.4-6.4-19.2-16-22.4V168h16V96z M165.6,312c28,0,50.4,22.4,50.4,50.4v84 + c0,17.6,12.8,32,28.8,33.6c8.8,0.8,17.6-2.4,24.8-8c6.4-6.4,10.4-14.4,10.4-24v-85.6c0-28,22.4-50.4,50.4-50.4h2.4 + c19.2,0,34.4-15.2,34.4-34.4V248H128v29.6c0,19.2,15.2,34.4,34.4,34.4H165.6z M243.2,168c-6.4-5.6-11.2-14.4-11.2-24V80 + c0-8.8-7.2-16-16-16s-16,7.2-16,16v88H243.2z M200,200c0,17.6-14.4,32-32,32h196h12h12c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12 + h-4h-20H200V200z M330.4,328c-19.2,0-34.4,15.2-34.4,34.4V448c0,13.6-5.6,26.4-16,35.2c-8.8,8-20.8,12.8-32.8,12.8 + c-1.6,0-3.2,0-4.8,0c-24-2.4-43.2-24-43.2-49.6v-84c0-19.2-15.2-34.4-34.4-34.4h-2.4c-28,0-50.4-22.4-50.4-50.4V248h-4 + c-15.2,0-28-12.8-28-28v-24c0-14.4,10.4-25.6,24-27.2V56c0-31.2,24.8-56,56-56h176c31.2,0,56,24.8,56,56v112 + c13.6,1.6,24,13.6,24,27.2v24c0,15.2-12.8,28-28,28h-4v29.6c0,28-22.4,50.4-50.4,50.4h-3.2V328z M296,144c0,9.6-4,18.4-11.2,24H376 + v-20.8c-4.8,3.2-10.4,4.8-16,4.8c-17.6,0-32-14.4-32-32V80c0-8.8-7.2-16-16-16s-16,7.2-16,16V144z M120,232h12.8h34.4 + c-17.6,0-31.2-14.4-31.2-32v-16h-3.2H112h-4c-6.4,0-12,5.6-12,12v24c0,6.4,5.6,12,12,12H120z M280,80c0-17.6,14.4-32,32-32 + s32,14.4,32,32v40c0,8.8,7.2,16,16,16s16-7.2,16-16V56c0-22.4-17.6-40-40-40H160c-22.4,0-40,17.6-40,40v0.8c18.4,4,32,20,32,39.2 + v104c0,8.8,7.2,16,16,16s16-7.2,16-16V80c0-17.6,14.4-32,32-32s32,14.4,32,32v64c0,8.8,7.2,16,16,16s16-7.2,16-16V80z"/> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +</svg> diff --git a/templates/partials/icons/svgDribbbleIcon.html b/templates/partials/icons/svgDribbbleIcon.html new file mode 100644 index 0000000..2e94586 --- /dev/null +++ b/templates/partials/icons/svgDribbbleIcon.html @@ -0,0 +1,3 @@ +<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> + <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" /> + </svg> \ No newline at end of file diff --git a/templates/partials/icons/svgFacebookIcon.html b/templates/partials/icons/svgFacebookIcon.html new file mode 100644 index 0000000..81c97e7 --- /dev/null +++ b/templates/partials/icons/svgFacebookIcon.html @@ -0,0 +1,3 @@ +<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> + <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> +</svg> \ No newline at end of file diff --git a/templates/partials/icons/svgFirstPageIcon.html b/templates/partials/icons/svgFirstPageIcon.html new file mode 100644 index 0000000..00e6d61 --- /dev/null +++ b/templates/partials/icons/svgFirstPageIcon.html @@ -0,0 +1 @@ +<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg> \ No newline at end of file diff --git a/templates/partials/icons/svgGithubIcon.html b/templates/partials/icons/svgGithubIcon.html new file mode 100644 index 0000000..bedea77 --- /dev/null +++ b/templates/partials/icons/svgGithubIcon.html @@ -0,0 +1,3 @@ +<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> + <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /> +</svg> \ No newline at end of file diff --git a/templates/partials/icons/svgInstagramIcon.html b/templates/partials/icons/svgInstagramIcon.html new file mode 100644 index 0000000..913e2cb --- /dev/null +++ b/templates/partials/icons/svgInstagramIcon.html @@ -0,0 +1,3 @@ +<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> + <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> +</svg> \ No newline at end of file diff --git a/templates/partials/icons/svgLastPageIcon.html b/templates/partials/icons/svgLastPageIcon.html new file mode 100644 index 0000000..ca9be49 --- /dev/null +++ b/templates/partials/icons/svgLastPageIcon.html @@ -0,0 +1 @@ +<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg> \ No newline at end of file diff --git a/templates/partials/icons/svgNextPageIcon.html b/templates/partials/icons/svgNextPageIcon.html new file mode 100644 index 0000000..b4b67a5 --- /dev/null +++ b/templates/partials/icons/svgNextPageIcon.html @@ -0,0 +1 @@ +<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg> \ No newline at end of file diff --git a/templates/partials/icons/svgPrevPageIcon.html b/templates/partials/icons/svgPrevPageIcon.html new file mode 100644 index 0000000..e2ae89b --- /dev/null +++ b/templates/partials/icons/svgPrevPageIcon.html @@ -0,0 +1 @@ +<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg> \ No newline at end of file diff --git a/templates/partials/icons/svgTelegram.html b/templates/partials/icons/svgTelegram.html new file mode 100644 index 0000000..d53dd94 --- /dev/null +++ b/templates/partials/icons/svgTelegram.html @@ -0,0 +1 @@ +<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg> \ No newline at end of file diff --git a/templates/partials/icons/svgTwitterIcon.html b/templates/partials/icons/svgTwitterIcon.html new file mode 100644 index 0000000..63a0eb2 --- /dev/null +++ b/templates/partials/icons/svgTwitterIcon.html @@ -0,0 +1,3 @@ +<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> + <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /> + </svg> \ No newline at end of file diff --git a/templates/partials/memberships.html b/templates/partials/memberships.html new file mode 100644 index 0000000..9e9c074 --- /dev/null +++ b/templates/partials/memberships.html @@ -0,0 +1,85 @@ +{% block content %} + +{% if not paginator %} + {% set paginator = section %} +{% endif %} + +{% set path_array = current_path | split(pat="/") %} +{% set taxonomy = path_array[1] %} +{% set category = path_array[2] %} +{% if path_array | length < 3%} +{% set category = "All" %} +{% endif %} + +<div class="-mt-16"> + {% include "partials/filter_bar.html" %} + <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12"> + <div class="my-4 flex flex-col items-start"> + <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal"> + {{category | replace(from='-', to=' ' ) | title}} + </h1> + test + <div class="text-xl text-gray-800"> + {{ paginator.total_pages ~ " People"}} + </div> + </div> + + <hr/> + + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none"> + {%- for page in paginator.pages %} + {% include "partials/person_card.html" %} + {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> + </div> + +</div> + +{% endblock content %} diff --git a/templates/partials/newsCard.html b/templates/partials/newsCard.html new file mode 100644 index 0000000..a594f3f --- /dev/null +++ b/templates/partials/newsCard.html @@ -0,0 +1,59 @@ +<div class="flex flex-col rounded-lg shadow-lg overflow-hidden"> + <div class="flex-1"> + <a href={{ post.permalink }} class="block" style="pointer-events: none;"> + <div class="flex-shrink-0"> + {% if post.extra.imgPath %} + {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %} + <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" /> + {% endif %} + </div> + <div class="flex-1 bg-white p-4 flex flex-col justify-between"> + + <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic"> + {{ post.title }} + </h3> + {% if post.description %} + <p class="mt-3 text-sm font-normal leading-5 text-gray-500 text-left"> + {{ post.description }} + </p> + {% endif %} + </a> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list my-10 mr-2 px-0"> + {% if post.taxonomies.people %} + {% for author in post.taxonomies.people %} + {% set author_path = 'people/' ~ author ~ '/index.md' %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(author) %} + {% set author = get_page(path=author_path) %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %} + <li class="author-list-item"> + <a href="{{ author.permalink }}" tooltip="{{ author.title }}"> + <img src="{{ author_img }}" alt="{{ author.title }}" class=" + w-8 + h-8 + rounded-full + bg-gray-200 + border-2 border-white + " /> + </a> + </li> + {% endif %} + {% endfor %} + {% endif %} + </ul> + </div> + + <p class="text-gray-700 text-s"> + {% if post.extra.socialLinks.contact %} + <a href="{{ post.extra.socialLinks.contact }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" target="_blank"> + <u>Read More</u> + </a> + {% endif %} + </p> + </div> + </div> +</div> +</div> \ No newline at end of file diff --git a/templates/partials/newsPosts.html b/templates/partials/newsPosts.html new file mode 100644 index 0000000..75cda45 --- /dev/null +++ b/templates/partials/newsPosts.html @@ -0,0 +1,70 @@ +{% block content %} + +<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12"> + <h1 + class="tracking-tight text-left text-2xl lg:text-4xl fw-500 leading-snug font-normal mb-10" + > + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set category = path_array[2] %} + The Latest from OurWorld Free Zone + {% if taxonomy == "news-category" %} - + {{category | replace(from='-', to=' ' ) | title}} + {% endif %} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none"> + {%- for post in paginator.pages %} + {% if "Engineering" == "Engineering"%} + {% include "partials/newsCard.html" %} + {%endif%} {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> +</div> + +{% endblock content %} diff --git a/templates/partials/newsSidebar.html b/templates/partials/newsSidebar.html new file mode 100644 index 0000000..1d3f625 --- /dev/null +++ b/templates/partials/newsSidebar.html @@ -0,0 +1,38 @@ + +<div class="mx-8 md:mx-4 flex flex-col"> + <div class="flex flex-col mb-12 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER NEWS BY</h4> + <a id="all" class="mb-3 text-black font-normal" href="/newsroom">All</a> + {% set taxonomy = get_taxonomy(kind="news-category") %} + {% set categories = taxonomy.items %} + {% for category in categories %} + {% set path = category.name | slugify %} + {% set fullpath = "/news-category/" ~ path %} + <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a> + {% endfor %} + </div> + +{% set section = get_section(path="newsroom/_index.md")%} + + <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED NEWS</h4> + + {% for page in section.pages %} + {% if page.extra.isFeatured %} + <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a> + {% endif %} + {% endfor %} + + </div> +</div> + +<script> + function setActiveCategory() { + let activeCategory = window.location.pathname.split("/")[2] + if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") } + else { activeLink = document.getElementById(activeCategory)} + activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold"); + } + + setActiveCategory() +</script> \ No newline at end of file diff --git a/templates/partials/pageBox.html b/templates/partials/pageBox.html new file mode 100644 index 0000000..f44fee4 --- /dev/null +++ b/templates/partials/pageBox.html @@ -0,0 +1,9 @@ +<div class="mb-8 flex flex-col"> + <a href="{{page.permalink}}" class="text-lg font-medium cursor-pointer text-blue-400 py-4"> + {{page.title | safe}} + </a> + {% include "partials/categories.html" %} + <p> + {{page.description | safe}} + </p> +</div> \ No newline at end of file diff --git a/templates/partials/page_list.html b/templates/partials/page_list.html new file mode 100644 index 0000000..b773a04 --- /dev/null +++ b/templates/partials/page_list.html @@ -0,0 +1,19 @@ +<div id="list"></div> +{% if section.extra.group_pages_by %} + <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center"> + {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %} + {% set roles = taxonomy.items %} + {% for role in roles %} + <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72"> + {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %} + <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4"> + {% set path = role.name | slugify %} + {% set fullpath = "/roles/" ~ path %} + <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a> + {% for page in role.pages %} + {% include "partials/pageBox.html"%} + {% endfor %} + </div> + {% endfor %} + </div> +{% endif %} \ No newline at end of file diff --git a/templates/partials/personCard.html b/templates/partials/personCard.html new file mode 100644 index 0000000..2204df7 --- /dev/null +++ b/templates/partials/personCard.html @@ -0,0 +1,26 @@ +<div class="flex flex-col px-0 sm:px-4 pb-2"> + <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left"> + {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %} + <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" /> + <div> + <h2 class="text-2xl">{{page.title}}</h2> + <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis"> + {% if page.description %} + {{page.description}} + {% else %} + {{page.content | safe}} + {% endif %} + </div> + <div class="my-2 flex flex-row items-start flex-wrap"> + {% if page.taxonomies.memberships %} + {% for tag in page.taxonomies.memberships %} + <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full "> + {{tag}} + </a> + {% endfor %} + {% endif %} + </div> + </div> + </a> +</div> + diff --git a/templates/partials/person_card.html b/templates/partials/person_card.html new file mode 100644 index 0000000..27ac9f3 --- /dev/null +++ b/templates/partials/person_card.html @@ -0,0 +1,21 @@ +<div class="flex flex-col px-0 sm:px-4 pb-2"> + <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left "> + {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %} + <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" /> + <div> + <h2 class="text-2xl">{{page.title}}</h2> + <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis" style="pointer-events: none;"> + {% if page.description %} + {{page.description}} + {% else %} + {{page.content | safe}} + {% endif %} + </div> + <div class="my-2 flex flex-row items-start flex-wrap"> + <a href="{{ page.permalink }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" onclick="s"> + <u>More Info</u> + </a> + </div> + </div> + </a> +</div> \ No newline at end of file diff --git a/templates/partials/postCard.html b/templates/partials/postCard.html new file mode 100644 index 0000000..b70123c --- /dev/null +++ b/templates/partials/postCard.html @@ -0,0 +1,75 @@ +{% if post.date %} +{% if post.taxonomies.people %} +{% set people = get_section(path="people/_index.md") %} +{% set pages_str = people.pages | json_encode() | as_str %} +{% if pages_str is containing(post.taxonomies.people[0]) %} +{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %} +{% set author = get_page(path=author_path) %} +{% set content = get_page(path=author_path) %} +{% endif %} +{% endif %} + +<div class="flex flex-col rounded-lg shadow-lg overflow-hidden"> + <div class="flex-1 border-b"> + <a href="{{ post.permalink }}" class="block"> + {% if post.extra.imgPath %} + {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', + to=post.extra.imgPath)) %} + <div class="flex-shrink-0"> + <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" /> + </div> + {%endif%} + <div class="flex-1 bg-white p-6 flex flex-col justify-between"> + + <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic"> + {{ post.title }} + </h3> + {% if post.description %} + <p class="mt-3 text-sm font-normal text-gray-500 text-left"> + {{ post.description }} + </p> + {% endif %} + <div class="article hidden">{{ post.content | safe }}</div> + + <div class="w-full post-card-meta py-3"> + <div class="avatars"> + <div class="flex"> + <div class="flex"> + <ul class="list-none flex author-list mr-2 pl-0"> + {% if author %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | + replace(from='index.md', to=author.extra.imgPath)) %} + <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}" + class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li> + {% endif %} + </ul> + </div> + <div class="flex flex-col text-left leading-none uppercase"> + {% if author %} + <p class="text-gray-700 text-xs">{{ author.title }}</p> + {% endif %} + <p class="text-gray-700 text-xs"> + <time datetime="{{post.date}}"> + {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }} + </time> + </p> + <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time" + class="time"></span> + </p> + </div> + <br /> + </div> + </div> + </div> + </a> + </div> + +</div> +</div> + +<style> + .border-b { + border-bottom-width: 1px !important; + } +</style> +{% endif %} \ No newline at end of file diff --git a/templates/partials/productCard.html b/templates/partials/productCard.html new file mode 100644 index 0000000..b70123c --- /dev/null +++ b/templates/partials/productCard.html @@ -0,0 +1,75 @@ +{% if post.date %} +{% if post.taxonomies.people %} +{% set people = get_section(path="people/_index.md") %} +{% set pages_str = people.pages | json_encode() | as_str %} +{% if pages_str is containing(post.taxonomies.people[0]) %} +{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %} +{% set author = get_page(path=author_path) %} +{% set content = get_page(path=author_path) %} +{% endif %} +{% endif %} + +<div class="flex flex-col rounded-lg shadow-lg overflow-hidden"> + <div class="flex-1 border-b"> + <a href="{{ post.permalink }}" class="block"> + {% if post.extra.imgPath %} + {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', + to=post.extra.imgPath)) %} + <div class="flex-shrink-0"> + <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" /> + </div> + {%endif%} + <div class="flex-1 bg-white p-6 flex flex-col justify-between"> + + <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic"> + {{ post.title }} + </h3> + {% if post.description %} + <p class="mt-3 text-sm font-normal text-gray-500 text-left"> + {{ post.description }} + </p> + {% endif %} + <div class="article hidden">{{ post.content | safe }}</div> + + <div class="w-full post-card-meta py-3"> + <div class="avatars"> + <div class="flex"> + <div class="flex"> + <ul class="list-none flex author-list mr-2 pl-0"> + {% if author %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | + replace(from='index.md', to=author.extra.imgPath)) %} + <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}" + class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li> + {% endif %} + </ul> + </div> + <div class="flex flex-col text-left leading-none uppercase"> + {% if author %} + <p class="text-gray-700 text-xs">{{ author.title }}</p> + {% endif %} + <p class="text-gray-700 text-xs"> + <time datetime="{{post.date}}"> + {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }} + </time> + </p> + <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time" + class="time"></span> + </p> + </div> + <br /> + </div> + </div> + </div> + </a> + </div> + +</div> +</div> + +<style> + .border-b { + border-bottom-width: 1px !important; + } +</style> +{% endif %} \ No newline at end of file diff --git a/templates/partials/productPosts.html b/templates/partials/productPosts.html new file mode 100644 index 0000000..862f041 --- /dev/null +++ b/templates/partials/productPosts.html @@ -0,0 +1,70 @@ +{% block content %} + +<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12"> + <h1 + class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10" + > + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set item = path_array[2] %} + The Latest from OurPhone + {% if taxonomy == "items" %} - + {{item | replace(from='-', to=' ' ) | title}} + {% endif %} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none"> + {%- for post in paginator.pages %} + {% if not post.extra.hidden %} + {% include "partials/productCard.html" %} + {%endif%} {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> +</div> + +{% endblock content %} \ No newline at end of file diff --git a/templates/partials/productSidebar.html b/templates/partials/productSidebar.html new file mode 100644 index 0000000..e450ad7 --- /dev/null +++ b/templates/partials/productSidebar.html @@ -0,0 +1,38 @@ + +<div class="mx-8 md:mx-4 flex flex-col"> + <div class="flex flex-col mb-12 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER PRODUCTS BY</h4> + <a id="all" class="mb-3 text-black font-normal" href="/products">All</a> + {% set taxonomy = get_taxonomy(kind="items") %} + {% set items = taxonomy.items %} + {% for item in items %} + {% set path = item.name | slugify %} + {% set fullpath = "/items/" ~ path %} + <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{item.name}} </a> + {% endfor %} + </div> + +{% set section = get_section(path="products/_index.md")%} + + <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24"> + <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED POSTS</h4> + + {% for page in section.pages %} + {% if page.extra.isFeatured %} + <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a> + {% endif %} + {% endfor %} + + </div> +</div> + +<script> + function setActiveProduct() { + let activeProduct = window.location.pathname.split("/")[2] + if (typeof activeProduct === "undefined") { activeLink = document.getElementById("all") } + else { activeLink = document.getElementById(activeProduct)} + activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold"); + } + + setActiveProduct() +</script> \ No newline at end of file diff --git a/templates/partials/socialLinks.html b/templates/partials/socialLinks.html new file mode 100644 index 0000000..363222e --- /dev/null +++ b/templates/partials/socialLinks.html @@ -0,0 +1,23 @@ +<div class="flex space-x-6 items-center justify-center"> + {% for key, link in section.extra.socialLinks %} + + <a href="{{link}}" target="_blank" class="text-gray-400 hover:text-gray-500"> + <span class="sr-only">{{key}}</span> + {% if key == "Facebook" %} + {% include "partials/icons/svgFacebookIcon.html" %} + {% elif key == "Github" %} + {% include "partials/icons/svgGithubIcon.html" %} + {% elif key == "Instagram" %} + {% include "partials/icons/svgInstagramIcon.html" %} + {% elif key == "Twitter" %} + {% include "partials/icons/svgTwitterIcon.html" %} + {% elif key == "Dribbble" %} + {% include "partials/icons/svgDribbbleIcon.html" %} + {% elif key == "Telegram" %} + {% include "partials/icons/svgTelegram.html" %} + {% endif %} + </a> + + {% endfor %} + + </div> \ No newline at end of file diff --git a/templates/partials/tags.html b/templates/partials/tags.html new file mode 100644 index 0000000..5db604a --- /dev/null +++ b/templates/partials/tags.html @@ -0,0 +1,5 @@ +<div class="flex mb-4"> + {% for tag in page.taxonomies.categories %} + <div class="bg-gray-200 rounded font-semibold text-xs w-auto px-2 py-1 mr-2">{{tag}}</div> + {% endfor %} +</div> \ No newline at end of file diff --git a/templates/partnerPage.html b/templates/partnerPage.html new file mode 100644 index 0000000..705957a --- /dev/null +++ b/templates/partnerPage.html @@ -0,0 +1,57 @@ +{% extends "_default/base.html" %} +{% block content %} + +<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-16 lg:w-4/6"> + <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0"> + <div class="w-full md:w-1/6 mx-auto sm:mx-0"> + <img src="{{page.extra.partner_logo}}" class=" + rounded-full + bg-gray-200 + w-32 + h-32 + border-4 border-gray-400 + mx-auto + md:mx-0 + " /> + </div> + <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0"> + <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium"> + {{ page.title }} + </h1> + + <div class="avatars"> + <section class="container mx-auto py-2"> + <ul class="list-none flex author-list my-2 px-0"> + {% if page.extra.websites %} + <li class="mr-2"> + <a href="{{page.extra.websites}}" target="_blank" rel="noopener noreferrer" + class="text-gray-400 hover:text-black linkedin_size mx-1"> + <i class="fa-solid fa-globe fa-2x"></i> </a> + </li> + {% endif %} + {% if page.extra.linkedin %} + <li> + <a href="{{page.extra.linkedin}}" target="_blank" rel="noopener noreferrer" + class="text-gray-400 hover:text-black linkedin_size mx-1"> + <i class="fa-brands fa-linkedin fa-2x"></i> </a> + </li> + {% endif %} + </ul> + {% for tag in page.taxonomies.tags %} + <a href="{{'/tags/' ~ tag}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full "> + {{tag}} + </a> + {% endfor %} + </section> + </div> + </div> + </div> + + <div class="pt-8 border-b mx-4 sm:-mx-4"></div> + + <section class="post-content container mx-auto relative text-gray-700"> + <div class="post-content-text text-xl">{{ page.content | safe }}</div> + </section> +</div> + +{% endblock content %} \ No newline at end of file diff --git a/templates/people/list.html b/templates/people/list.html new file mode 100644 index 0000000..77eee45 --- /dev/null +++ b/templates/people/list.html @@ -0,0 +1,84 @@ +{% extends "_default/base.html" %} +{% block content %} + + +<div class="container mx-auto"> + {% include "partials/filter_bar.html" %} + + <div class="text-center main-title px-0 md:w-full"> + <h1 + class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10" + > + {%- set section = get_section(path="people/_index.md") %} + + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set category = path_array[2] %} + {{category | replace(from='-', to=' ' ) | title}} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none"> + {% for person in section.pages %} + {% set page_path = person.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %} + {% set people = get_section(path="people/_index.md") %} + {% set pages_str = people.pages | json_encode() | as_str %} + {% if pages_str is containing(person.title) %} + {% set page = get_page(path=page_path) %} + {% if page.extra.private >= 0 %} + {% if page.title != "ThreeFold_Community"%} + {% include "partials/person_card.html" %} + {% endif %} + {% endif %} + {% endif %} + {% endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> + </div> +</div> + +{% endblock content %} diff --git a/templates/people/memberships/list.html b/templates/people/memberships/list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/people/memberships/list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/people/memberships/single.html b/templates/people/memberships/single.html new file mode 100644 index 0000000..e357e75 --- /dev/null +++ b/templates/people/memberships/single.html @@ -0,0 +1,88 @@ +{% extends "index.html" %} + +{% block content %} + +{% if not paginator %} + {% set paginator = section %} +{% endif %} + +{% set path_array = current_path | split(pat="/") %} +{% set taxonomy = path_array[1] %} +{% set category = path_array[2] %} +{% if path_array | length < 3%} +{% set category = "All" %} +{% endif %} + +<div class="mt-16"> + {% include "partials/filter_bar.html" %} + <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12"> + <div class="my-4 flex flex-col items-start"> + <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal"> + {{category | replace(from='-', to=' ' ) | title}} + </h1> + <div class="text-xl text-gray-800"> + {{ paginator.total_pages ~ " People"}} + </div> + </div> + + <hr/> + + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none"> + {%- for page in paginator.pages %} + {% include "partials/person_card.html" %} + {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> + </div> + +</div> + +{% endblock content %} + + diff --git a/templates/people/news-category/list.html b/templates/people/news-category/list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/people/news-category/list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/people/news-category/single.html b/templates/people/news-category/single.html new file mode 100644 index 0000000..5db2970 --- /dev/null +++ b/templates/people/news-category/single.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block content %} + +<main class="pt-16"> + + <div class="flex flex-col md:flex-row"> + {% include "partials/newsPosts.html" %} + {% include "partials/newsSidebar.html" %} + </div> + </main> + + {% endblock content %} + diff --git a/templates/people/single.html b/templates/people/single.html new file mode 100644 index 0000000..e7cff97 --- /dev/null +++ b/templates/people/single.html @@ -0,0 +1,55 @@ +{% extends "_default/base.html" %} +{% block content %} + +{% set page_path = term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %} +{% set people = get_section(path="people/_index.md") %} +{% set pages_str = people.pages | json_encode() | as_str %} +{% if pages_str is containing(term.name) %} + {% set page = get_page(path=page_path) %} + + +<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24"> + <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0"> + <div class="w-full md:w-1/6 mx-auto sm:mx-0"> + <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4"> + </div> + <div class="w-full md:w-5/6 text-center md:text-left md:pl-8"> + <div class="flex flex-row items-center"> + <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1"> + {{page.title}} + </h1> + </div> + <div class="text-gray-700 my-4"> + {{page.content | safe }} + </div> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list m-0 py-2"> + {% for org in page.extra.organizations %} + <li> + <a href=""> + <img src="" alt=""> + </a> + </li> + {% endfor %} + </ul> + </div> + </div> + {% if page.taxonomies.memberships %} + {% for tag in page.taxonomies.memberships %} + <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full "> + {{tag}} + </a> + {% endfor %} + {% endif %} + </div> + </div> + <div class="my-8"> + <hr/> + <br/> + <hr/> + </div> +</div> +{% endif %} + +{% endblock content %} \ No newline at end of file diff --git a/templates/people/tags/list.html b/templates/people/tags/list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/people/tags/list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/people/tags/single.html b/templates/people/tags/single.html new file mode 100644 index 0000000..025e23e --- /dev/null +++ b/templates/people/tags/single.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block content %} + +<main class="pt-16"> + + <div class="flex flex-col md:flex-row"> + {% include "partials/tagsCards.html" %} + {% include "partials/tagsSidebar.html" %} + </div> + </main> + + {% endblock content %} + diff --git a/templates/people_page.html b/templates/people_page.html new file mode 100644 index 0000000..8e94af9 --- /dev/null +++ b/templates/people_page.html @@ -0,0 +1,73 @@ +{% extends "_default/base.html" %} +{% block content %} + + +<div class="container mx-auto"> + {% include "partials/filter_bar.html" %} + + <div class="text-center main-title px-0 md:w-full"> + <h1 + class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10" + > + {% set path_array = current_path | split(pat="/") %} + {% set taxonomy = path_array[1] %} + {% set category = path_array[2] %} + {{category | replace(from='-', to=' ' ) | title}} + </h1> + <div> + <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none"> + {%- for page in paginator.pages %} + {% if "Engineering" == "Engineering"%} + {% include "partials/person_card.html" %} + {%endif%} {%- endfor %} + </div> + <hr class="mt-6" /> + <p class="text-center text-sm mt-2 mb-16"> + {% if paginator.previous %} + <a + class="border-transparent" + aria-label="First page" + href="{{ paginator.first }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}{% include + "partials/icons/svgPrevPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Previous page" + href="{{ paginator.previous }}" + >{% include "partials/icons/svgPrevPageIcon.html" %}</a + > + + {% else %} {% + include "partials/icons/svgFirstPageIcon.html" %}{% include + "partials/icons/svgFirstPageIcon.html" %} + {% include + "partials/icons/svgFirstPageIcon.html" %} + + {% endif %} {% if + paginator.next %} + <a + class="border-transparent" + aria-label="Next page" + href="{{ paginator.next }}" + >{% include "partials/icons/svgNextPageIcon.html" %}</a + > + + <a + class="border-transparent" + aria-label="Last page" + href="{{ paginator.last }}" + >{% include "partials/icons/svgNextPageIcon.html" %}{% include + "partials/icons/svgNextPageIcon.html" %}</a + > + {% else %} {% include "partials/icons/svgLastPageIcon.html" %} + {% include + "partials/icons/svgLastPageIcon.html" %}{% include + "partials/icons/svgLastPageIcon.html" %} {% endif %} + </p> + </div> + </div> +</div> + +{% endblock content %} diff --git a/templates/person_page.html b/templates/person_page.html new file mode 100644 index 0000000..df358b1 --- /dev/null +++ b/templates/person_page.html @@ -0,0 +1,45 @@ +{% extends "_default/base.html" %} +{% block content %} + +<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24"> + <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0"> + <div class="w-full md:w-1/6 mx-auto sm:mx-0"> + <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4"> + </div> + <div class="w-full md:w-5/6 text-center md:text-left md:pl-8"> + <div class="flex flex-row items-center"> + <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1"> + {{page.title}} + </h1> + </div> + <div class="text-gray-700 my-4"> + {{page.content | safe }} + </div> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list m-0 py-2"> + {% for org in page.extra.organizations %} + <li> + <a href=""> + <img src="" alt=""> + </a> + </li> + {% endfor %} + </ul> + </div> + </div> + {% for tag in page.taxonomies.memberships %} + <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full "> + {{tag}} + </a> + {% endfor %} + </div> + </div> + <div class="my-8"> + <hr/> + <br/> + <hr/> + </div> +</div> + +{% endblock content %} \ No newline at end of file diff --git a/templates/positionPage.html b/templates/positionPage.html new file mode 100644 index 0000000..ee8059d --- /dev/null +++ b/templates/positionPage.html @@ -0,0 +1,31 @@ +{% extends "_default/base.html" %} +{% block content %} + +<!-- Default page template for blog posts and basic informative markdown files --> +<main> + +{% set banner_path = config.extra.taxonomies["roles"][page.taxonomies.roles[0]].banner_path | as_str %} +{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center" %} + +<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div> +<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6"> + <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10"> + <div class="pt-8 lg:pt-8 2xl:pt-24"> + <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3> + <h1 class="text-left text-5xl font-normal my-2 font-medium"> + {{ page.title }} + </h1> + <p class="my-4">{{page.description}}</p> + {% include "partials/categories.html" %} + </div> + {{ page.content | safe }} + </article> + <div class="mx-auto lg:mt-12"> + {% include "partials/applicationForm.html"%} + </div> +</div> + +</div> +</main> + +{% endblock content %} \ No newline at end of file diff --git a/templates/productPage.html b/templates/productPage.html new file mode 100644 index 0000000..e93e750 --- /dev/null +++ b/templates/productPage.html @@ -0,0 +1,82 @@ +{% extends "_default/base.html" %} +{% block content %} + +{% if page.taxonomies.people %} +{% set people = get_section(path="people/_index.md") %} +{% set pages_str = people.pages | json_encode() | as_str %} +{% if pages_str is containing(page.taxonomies.people[0]) %} +{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %} +{% set author = get_page(path=author_path) %} +{% endif %} +{% endif %} + +<!-- Default page template for blog posts and basic informative markdown files --> + +{% set split = page.content | split(pat="ourphone.tf") %} +{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if + part is starting_with("/product") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set + link=link | replace(from="/product/post" , to="/product" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set + rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if + loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "ourphone.tf" ~ part%} {% endif + %} {% endfor %} {% endif %} <main> + + <div class="container mx-auto mt-20"> + + <div> + <article class="article lg:w-4/6 mx-auto"> + <h1 class="lg:text-5xl text-2xl font-medium leading-none mt-0 text-gray-700"> + {{ page.title }} + </h1> + + <h4 class="lg:text-2xl text-base text-gray-600 leading-8"> + {{ page.description }} + </h4> + <section class="post-author-list mb-3 mx-0"> + <div class="flex items-center"> + <div class="flex justify-between items-center"> + <ul class="list-none flex author-list m-0"> + <li class="author-list-item"> + {% if author %} + {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | + replace(from='index.md', to=author.extra.imgPath)) %} + <img src="{{author_img}}" alt="{{author.title}}" class=" + h-8 + w-8 + sm:h-10 + sm:w-10 + rounded-full + bg-gray-200 + border-2 border-white + " /> + </li> + {% endif %} + </ul> + </div> + + <div class="pl-3 flex flex-col text-xs leading-none uppercase"> + {% if author %} + <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a> + {% endif %} + <p class="text-gray-700 text-xs"> + <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") + }}</time><br /> + <span id="time" + class="time"></span> + </p> + </div> + + </div> + <div class="my-2 sharethis-inline-share-buttons"></div> + </section> + {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', + to=page.extra.imgPath)) %} + <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}"> + <div>{{ content | safe }}</div> + </article> + </div> + + + </div> + </main> + + {% endblock content %} \ No newline at end of file diff --git a/templates/resourcesPage.html b/templates/resourcesPage.html new file mode 100644 index 0000000..cc7f0aa --- /dev/null +++ b/templates/resourcesPage.html @@ -0,0 +1,36 @@ +{% extends "_default/base.html" %} +{% block content %} + +<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-6 px-4 text-center"> + + <div class="py-12"> + <section class=" + post-content + container + mx-auto + relative + font-serif + text-gray-900 text-center + "> + <img class="mx-auto w-3/4" src={{page.extra.imgPath}} /> + <div class="post-content-text text-xl text-center mx-auto my-5">{{ page.content | safe }}</div> + </section> + + <button class=" + inline-block + bg-white + text-lg + learn-button + hover:bg-gray-400 + px-12 + py-1 + mr-5 + my-8 + border-2 + shadow + border-black + capitalize + "><a href="{{page.extra.link}}">{{ page.extra.button }}</a></button> + </div> +</div> +{% endblock content %} \ No newline at end of file diff --git a/templates/roles/list.html b/templates/roles/list.html new file mode 100644 index 0000000..7330b1f --- /dev/null +++ b/templates/roles/list.html @@ -0,0 +1,7 @@ +{% extends "index.html" %} + +{% block content %} + +{{ terms }} + +{% endblock content %} diff --git a/templates/roles/single.html b/templates/roles/single.html new file mode 100644 index 0000000..f089d8c --- /dev/null +++ b/templates/roles/single.html @@ -0,0 +1,35 @@ +{% extends "index.html" %} + +{% block content %} + +<!-- Default page template for blog posts and basic informative markdown files --> +<main> + +{% set banner_path = config.extra.taxonomies["roles"][term.name].banner_path | as_str %} +{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center" %} + +<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div> +<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6"> + <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10"> + <div class="pt-8 lg:pt-8 2xl:pt-24"> + <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3> + <h1 class="text-left font-normal my-2 font-medium"> + {{ config.extra.taxonomies["roles"][term.name].title }} + </h1> + <p class="my-4">{{config.extra.taxonomies["roles"][term.name].description}}</p> + </div> + <hr /> + <h3 class="text-black text-lg">{{term.name}} @ Ourworld</h3> + {% for page in term.pages %} + {% include "partials/pageBox.html"%} + {% endfor %} + </article> + <div class="mx-auto lg:mt-12"> + {% include "partials/applicationForm.html"%} + </div> +</div> + +</div> +</main> + +{% endblock content %} \ No newline at end of file diff --git a/templates/section.html b/templates/section.html new file mode 100644 index 0000000..e328616 --- /dev/null +++ b/templates/section.html @@ -0,0 +1,11 @@ +{% extends "_default/base.html" %} + +{% block content %} + +<main class="lg:-mt-6"> + {{ section.content | safe}} + <!-- <hr> --> + {% include "partials/page_list.html" %} + </main> + + {% endblock content %} diff --git a/templates/shortcodes/admonition.html b/templates/shortcodes/admonition.html new file mode 100644 index 0000000..0fff67e --- /dev/null +++ b/templates/shortcodes/admonition.html @@ -0,0 +1,65 @@ +<!-- admonition shortcode for adding admonition in md--> + +{% set classes = "" %} + +{% set first_line = body | split(pat="\n") | first %} +{% set parsed_first_line = first_line | split(pat=" ") %} +{% set admonition = parsed_first_line | first %} +{% set style = "" %} + +{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %} + +<!-- sets admonition type depending on qualifiers and modifiers + hides content if doesn't adhere to admonition formatting --> +{% if admonition == "!!!" %} + {% set classes = "admonition" %} +{% elif admonition == "???" %} + {% set style = "collapsible closed" %} + {% set classes = "admonition" %} +{% elif admonition == "???+" %} + {% set style = "collapsible open" %} + {% set classes = "admonition" %} +{% else %} + {% set classes = "hidden" %} +{% endif %} + +{% if "inline end" in first_line %} + {% set classes = classes ~ " inline end" %} + {% set parsed_first_line = parsed_first_line | slice(end=-2)%} +{% elif "inline" in first_line %} + {% set classes = classes ~ " inline" %} + {% set parsed_first_line = parsed_first_line | slice(end=-1)%} +{% endif %} + +{% if classes != "hidden"%} + {% if parsed_first_line[1] %} + {% set classes = classes ~ " " ~ parsed_first_line[1] %} + {% endif %} + {% if parsed_first_line[2] %} + {% if not parsed_first_line[2] == '""' %} + {% set title = parsed_first_line | slice(start=2) | join(sep=" ") %} + {% endif %} + {% else %} + {% if parsed_first_line[1] %} + {% set title = parsed_first_line[1] | title %} + {% endif %} + {% endif %} +{% endif %} + + +{% if "collapsible" in style %} + <details class="{{classes}}" + {% if "open" in style %} {{ "open='open'" }} {% endif %}> + {% if title %} + <summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary> + <p>{{ content }}</p> + {% endif %} + </details> +{% else %} + <div class="{{classes}}"> + {% if title %} + <div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div> + {% endif %} + <p>{{ content }}</p> + </div> +{% endif %} diff --git a/templates/shortcodes/banner.html b/templates/shortcodes/banner.html new file mode 100644 index 0000000..64e540a --- /dev/null +++ b/templates/shortcodes/banner.html @@ -0,0 +1,19 @@ +<div class="bg-white pb-6 sm:pb-8 lg:pb-12"> + <!-- banner - start --> + <div class="relative flex flex-wrap bg-indigo-500 px-4 py-3 sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:px-8"> + <div class="order-1 mb-2 inline-block w-11/12 max-w-screen-sm text-sm text-white sm:order-none sm:mb-0 sm:w-auto md:text-base">{{ banner_text }}</div> + + <a href="#" class="order-last inline-block w-full whitespace-nowrap rounded-lg bg-indigo-600 px-4 py-2 text-center text-xs font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-700 focus-visible:ring active:bg-indigo-800 sm:order-none sm:w-auto md:text-sm">{{ banner_button }}</a> + + <!-- close button - start --> + <div class="order-2 flex w-1/12 items-start justify-end sm:absolute sm:right-0 sm:order-none sm:mr-1 sm:w-auto xl:mr-3"> + <button type="button" class="text-black transition duration-100 hover:text-indigo-100 active:text-indigo-200"> + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> + </svg> + </button> + </div> + <!-- close button - end --> + </div> + <!-- banner - end --> + </div> \ No newline at end of file diff --git a/templates/shortcodes/button.html b/templates/shortcodes/button.html new file mode 100644 index 0000000..56519cd --- /dev/null +++ b/templates/shortcodes/button.html @@ -0,0 +1,5 @@ + +{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %} +<button onclick="window.location='{{path}}'" class="border-transparent flex flex-col border-2 w-full items-start rounded h-16 md:h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left"> + {{ body | trim_start_matches(pat="<p>") | safe}} +</button> \ No newline at end of file diff --git a/templates/shortcodes/content1.html b/templates/shortcodes/content1.html new file mode 100644 index 0000000..12e418b --- /dev/null +++ b/templates/shortcodes/content1.html @@ -0,0 +1,28 @@ +<div class="bg-white py-6 sm:py-8 lg:py-12"> + <div class="mx-auto max-w-screen-md px-4 md:px-8"> + <h1 class="mb-4 text-center text-2xl font-bold text-gray-800 sm:text-3xl md:mb-6">{{ content1_title }}</h1> + + <p class="mb-6 text-gray-500 sm:text-lg md:mb-8"> + {{ content1_text }} + </p> + + + <h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">{{ content1_subtitle }}</h2> + + <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">{{ content1_title2 }}</p> + + <ul class="mb-6 list-inside list-disc text-gray-500 sm:text-lg md:mb-8"> + <li>{{ content1_item1 }}</li> + <li>{{ content1_item2 }}</li> + <li>{{ content1_item3 }}</li> + </ul> + + <blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">{{ quate_title }}</blockquote> + + <div class="relative mb-6 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:mb-8"> + <img src="{{ content1_photo }}" loading="lazy" alt="Photo by Minh Pham" class="h-full w-full object-cover object-center" /> + </div> + + + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/cta.html b/templates/shortcodes/cta.html new file mode 100644 index 0000000..7473ab9 --- /dev/null +++ b/templates/shortcodes/cta.html @@ -0,0 +1,23 @@ +<div class="bg-white py-6 sm:py-8 lg:py-12"> + <div class="mx-auto max-w-screen-2xl px-4 md:px-8"> + <div class="flex flex-col overflow-hidden rounded-lg bg-gray-900 sm:flex-row md:h-80"> + <!-- content - start --> + <div class="flex w-full flex-col p-4 sm:w-1/2 sm:p-8 lg:w-2/5"> + <h2 class="mb-4 text-xl font-bold text-white md:text-2xl lg:text-4xl">{{ cta_title}}</h2> + + <p class="mb-8 max-w-md text-gray-400">{{ cta_text}}</p> + + <div class="mt-auto"> + <a href="{{ cta_link }}" class="inline-block rounded-lg bg-white px-8 py-3 text-center text-sm font-semibold text-gray-800 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-100 focus-visible:ring active:bg-gray-200 md:text-base">{{ cta_link_name }}</a> + </div> + </div> + <!-- content - end --> + + <!-- image - start --> + <div class="order-first h-48 w-full bg-gray-700 sm:order-none sm:h-auto sm:w-1/2 lg:w-3/5"> + <img src="{{ cta_img }}" loading="lazy" alt="Photo by Dom Hill" class="h-full w-full object-cover object-center" /> + </div> + <!-- image - end --> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/earn_sec.html b/templates/shortcodes/earn_sec.html new file mode 100644 index 0000000..cc85fae --- /dev/null +++ b/templates/shortcodes/earn_sec.html @@ -0,0 +1,56 @@ +<style> + .bg_earn { + background-color: #F2EDE8; + } + + .bg-boxs { + background-color: #f7f4f0; + } +</style> +<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn"> + <div class="relative max-w-7xl mx-auto"> + <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/1_plug_in.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All you need to get started is + electricity, a network connection, and a FreeFlow Node</div> + </div> + </div> + </div> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/2_offer_capacity.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Provide decentralized storage and + compute capacity to host your communities digital life while maintaining privacy.</div> + </div> + </div> + </div> + + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/3_earn.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Earn in the most valuable and + rapidly growing economy: the Internet and cloud</div> + </div> + </div> + </div> + </div> + <br> + <button class="flex mx-auto uppercase" + onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/farming/farming_reward.html', '_blank')">see + rewards</button> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/featured_stories.html b/templates/shortcodes/featured_stories.html new file mode 100644 index 0000000..7ec1e0f --- /dev/null +++ b/templates/shortcodes/featured_stories.html @@ -0,0 +1,73 @@ +<style> + .bg_earning { + background-color: #F2F2F2; + } + + .bg_fflow_twin { + background-color: #EAF3F7; + } + + .bg_CHi_green { + background-color: #EBFFED; + } +</style> + +<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg-white"> + <div class="absolute inset-0"> + <div class="bg-white h-1/3 sm:h-2/3"></div> + </div> + <div class="relative max-w-7xl mx-auto"> + <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> + + <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_earning"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/get_earn.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> + get a node and <br /><b class="font-bold">start earning</b> + </h3> + <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Get a FreeFlow Node and add capacity to + the FreeFlow Network.</div> + <button class="uppercase font-bold" onclick="window.location='/node'">know more</button> + </div> + </div> + </div> + + <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_fflow_twin"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/ff_twin.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> + GET THE <br /><b class="font-bold">FREEFLOW TWIN</b> + </h3> + <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Reserve your sovereign digital twin. <br>Take control over your digital life.</div> + <button class="uppercase font-bold" onclick="window.location='/twin'">know more</button> + </div> + </div> + </div> + + + <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_CHi_green"> + <div class="flex-shrink-0"> + <img class="h-full w-full object-cover" src="/images/chi.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> + ACQUIRE <br /><b class="font-bold">CHI</b> + </h3> + <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">The digital energy currency + of <br>the FreeFlow network `CHI token`</div> + <button class="uppercase font-bold" + onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/buy/buy_my_chi.html', '_blank')">know + more</button> + </div> + </div> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/features.html b/templates/shortcodes/features.html new file mode 100644 index 0000000..683eafd --- /dev/null +++ b/templates/shortcodes/features.html @@ -0,0 +1,30 @@ +<div class="bg-white py-6 sm:py-8 lg:py-12"> + <div class="mx-auto max-w-screen-2xl px-4 md:px-8"> + <!-- text - start --> + <div class="mb-10 md:mb-16"> + <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">Our competitive advantage</h2> + + <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated.</p> + </div> + <!-- text - end --> + {% for item in items %} + <div class="grid gap-8 sm:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-16"> + <!-- feature - start --> + <div class="flex gap-4 md:gap-6"> + <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl"> + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> + </svg> + </div> + + <div> + <h3 class="mb-2 text-lg font-semibold md:text-xl">{{ header}}</h3> + <p class="mb-2 text-gray-500">{{ text }}</p> + <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">{{ link }}</a> + </div> + </div> + <!-- feature - end --> + </div> + {% endfor %} + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/fflow_experiences.html b/templates/shortcodes/fflow_experiences.html new file mode 100644 index 0000000..57cda9d --- /dev/null +++ b/templates/shortcodes/fflow_experiences.html @@ -0,0 +1,53 @@ +<style> + .bg_earn3 { + background-color: #F9F8F6; + } + + .bg-boxs3 { + background-color: #EFEDEB; + } +</style> +<h1>{{ subject }}</h1> +<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn3"> + <div class="relative max-w-7xl mx-auto"> + <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs3"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/education.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">FREEFLOWING<br> EDUCATION</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now acquire information and learn skills.</div> + </div> + </div> + </div> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/empowerment.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">FREEFLOWING<br> EMPOWERMENT</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now attain the opportunity to participate in the digital economy.</div> + </div> + </div> + </div> + + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/collaboration.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">FREEFLOWING<br> COLLABORATION</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now work together to achieve goals and growth.</div> + </div> + </div> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/fflow_grid.html b/templates/shortcodes/fflow_grid.html new file mode 100644 index 0000000..40cada5 --- /dev/null +++ b/templates/shortcodes/fflow_grid.html @@ -0,0 +1,52 @@ +<style> + .bg_earn2 { + background-color: #f0ece8; + } + + .bg-boxs { + background-color: #F7F4F1; + } +</style> +<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn2"> + <div class="relative max-w-7xl mx-auto"> + <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/own_data.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">fully own<br> your data</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">The entirety of your data belogs to you instead of company or service-provider.</div> + </div> + </div> + </div> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/own_identy.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">unbeatable<br> privacy</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it. Forever.</div> + </div> + </div> + </div> + + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/endless.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">zero<br> manipulation</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Your data can never be used for financial or commercial gains by anyone.</div> + </div> + </div> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/fflow_skills.html b/templates/shortcodes/fflow_skills.html new file mode 100644 index 0000000..ea55337 --- /dev/null +++ b/templates/shortcodes/fflow_skills.html @@ -0,0 +1,95 @@ +<div class="container px-4 sm:px-6 lg:pb-28 lg:px-8 mx-auto"> + + <div class="grid gap-3 max-w-lg mx-auto lg:grid-cols-2 lg:max-w-none"> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/meet.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Meet & Communicate</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Chat with your friends, hold meetings and and have video conferencing.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/exchange.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Exchange & Store Money</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Transact or manage your assets using the wallet features available with the Twin.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/create.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Create</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Create videos, documents or anything else you require for your daily needs.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/organize.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Organize</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Archive and organize all your data in one place without worrying about security.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/share.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Share</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Send your data and files to anyone of your choice directly without central servers.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/publish.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Publish</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Build websites, librariies or whatever else you require with the FreeFlow Twin.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/discover.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Discover</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">FInd and browse any information without being tracked or logged.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/collaborate.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Collaborate</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Work with your friends, family or collegues or projects or tasks together.</p> + </div> + </div> + + <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2"> + <div class="w-full md:w-2/6 mx-auto sm:mx-0"> + <img class="mx-auto" src="/images/develop.png" alt="" /> + </div> + <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center"> + <h2 class="uppercase text-5xl">Develop & Expand</h2> + <p class="leading-6 text-gray-900 text-xl max-w-sm">Develop more tools or decentralized applications for the FreeFlow Grid.</p> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/fflow_twin.html b/templates/shortcodes/fflow_twin.html new file mode 100644 index 0000000..ceba0e7 --- /dev/null +++ b/templates/shortcodes/fflow_twin.html @@ -0,0 +1,53 @@ +<style> + .bg_earn { + background-color: #D9E7DF; + } + + .bg-boxs { + background-color: #F7F4F1; + } +</style> +<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn"> + <div class="relative max-w-7xl mx-auto"> + <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/key.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">EVERYONE<br> HAS ACCESS</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Every member of society has access and there are no barriers to entry,.</div> + </div> + </div> + </div> + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/partake.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">ANYONE<br> CAN PARTAKE</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it.</div> + </div> + </div> + </div> + + + <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs"> + <div class="flex-shrink-0"> + <img class="mx-auto object-cover" src="/images/succeed.png" alt="" /> + </div> + <div class="flex-1 p-6 flex flex-col justify-between text-center"> + <div class="flex-1"> + <h2 class="uppercase">ANYONE<br> CAN SUCCEED</h2> + <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Anyone can attain the opportunity to earn and to better their lives.</div> + </div> + </div> + </div> + </div> + + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html new file mode 100644 index 0000000..0ae595d --- /dev/null +++ b/templates/shortcodes/grid_stats.html @@ -0,0 +1,78 @@ +{% set styles = "background-image: url('/images/ston_bg.png');" %} +{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %} +{% if data %} +{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %} +{% set nodes = data.nodes %} +{% set countries = data.countries %} +{% endif %} +<style> + .bg-map { + background-color: #EAE8E3; + } +</style> +<div class="bg-map pb-24"> + <div class="relative max-w-7xl mx-auto"> + <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 "> + <div class=" overflow-hidden"> + <div class="px-2 py-16"> + <div class="flex items-start"> + <div class="flex-shrink-0"> + <img src="/images/node_icon.png" width="65" alt=""> + </div> + <div class="ml-5 w-0 flex-1 pt-3"> + <dl> + <dd class="flex items-baseline mb-5 "> + <div class="text-6xl advance leading-8 font-extrabold text-gray-900"> + {{ nodes }} + </div> + </dd> + <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate"> + freeflow nodes <br />deployed + </dt> + </dl> + </div> + </div> + </div> + </div> + <div class=" overflow-hidden bg-no-repeat bg-center bg-contain text-center" style="{{styles}}"> + <div class="px-2 py-16"> + <div class="flex items-start"> + <div class="ml-5 w-0 flex-1 pt-3"> + <dl> + <dd class="flex items-baseline mb-5 "> + <div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900"> + {{ countries }} + </div> + </dd> + <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate"> + countries <br />involved + </dt> + </dl> + </div> + </div> + </div> + </div> + <div class=" overflow-hidden"> + <div class="px-2 py-16"> + <div class="flex items-start"> + <div class="flex-shrink-0"> + <img src="/images/capacity_icon.png" width="65" alt=""> + </div> + <div class="ml-5 w-0 flex-1 pt-3"> + <dl> + <dd class="flex items-baseline mb-5 "> + <div class="text-6xl advance leading-8 font-extrabold text-gray-900"> + {{ capacity | round() }}TB + </div> + </dd> + <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate"> + capacity <br />generated + </dt> + </dl> + </div> + </div> + </div> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html new file mode 100644 index 0000000..2bc5ee0 --- /dev/null +++ b/templates/shortcodes/hero.html @@ -0,0 +1,23 @@ +<section class="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row"> + <!-- content - start --> + <div class="flex flex-col justify-center sm:text-center lg:py-12 lg:text-left xl:w-5/12 xl:py-24"> + <p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">{{ hero_subtitle }}</p> + + <h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">{{ hero_title }}</h1> + + <p class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg">{{ hero_text }}</p> + + <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center lg:justify-start"> + <a href="{{ hero_link1 }}" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">{{ hero_link1_name }}</a> + + <a href="{{ hero_link2 }}" class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base">{{ hero_link2_name }}</a> + </div> + </div> + <!-- content - end --> + + <!-- image - start --> + <div class="h-48 overflow-hidden rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12"> + <img src="{{ hero_img }}<" loading="lazy" alt="Photo by Fakurian Design" class="h-full w-full object-cover object-center" /> + </div> + <!-- image - end --> +</section> \ No newline at end of file diff --git a/templates/shortcodes/logo.html b/templates/shortcodes/logo.html new file mode 100644 index 0000000..6686321 --- /dev/null +++ b/templates/shortcodes/logo.html @@ -0,0 +1,16 @@ +<div class="bg-white py-6 sm:py-8 lg:py-12"> + <div class="mx-auto max-w-screen-2xl px-4 md:px-8"> + <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-8 lg:text-3xl">Trusted by the best</h2> + + <div class="grid grid-cols-2 gap-6 rounded-lg bg-indigo-100 p-6 sm:h-40 sm:content-evenly md:grid-cols-4"> + <!-- logo - start --> + {% for logo in logos %} + <div class="flex justify-center text-indigo-500"> + <img class="w-64" src="{{ logo }}" > + </div> + {% endfor %} + <!-- logo - end --> + + </div> + </div> + </div> \ No newline at end of file diff --git a/templates/shortcodes/menu.html b/templates/shortcodes/menu.html new file mode 100644 index 0000000..167be2b --- /dev/null +++ b/templates/shortcodes/menu.html @@ -0,0 +1,44 @@ +<!-- row shortcode +Shortcode used in markdown for the creation of mobile compatible vertical rows +Divides markdown into columns by splitting content using column identifier "|||" +Creates equal width blocks in a flex row. + +Parameters: +- style: + - lean: if style is lean, the row doesn't have outer margins +- bgPath: if bgPath is passed, the row has a full width background +--> + +{% set columns = body | safe | markdown | split(pat="|||") %} + +<!-- aligns columns depending on col number--> + +{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %} +{% set column_classes = "flex-1 m-2 lg:m-4" %} + +<!-- makes row full screen width and adds background img --> + +<div class="{{classes}}"> + {% for column in columns%} + <!-- Hides empty columns if displayed vertically in small screen --> + {% if column | as_str | length < 10 %} + <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1"> + {{column | split(pat="{% button() %}") | slice(end=1)}} + {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %} + {% set body = button %} + {% include "shortcodes/button.html" %} + {% endfor %} + </div> + {% else %} + <div class="{{column_classes}}"> + {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}} + <hr class="border-t-2 mt-2"> + <br/> + {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %} + {% set body = button %} + {% include "shortcodes/button.html" %} + {% endfor %} + </div> + {% endif %} + {% endfor %} +</div> \ No newline at end of file diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html new file mode 100644 index 0000000..7ddc2e9 --- /dev/null +++ b/templates/shortcodes/mermaid.html @@ -0,0 +1,3 @@ +<div class="mermaid"> + {{ body }} +</div> \ No newline at end of file diff --git a/templates/shortcodes/mycomponent.html b/templates/shortcodes/mycomponent.html new file mode 100644 index 0000000..ceafd2d --- /dev/null +++ b/templates/shortcodes/mycomponent.html @@ -0,0 +1,13 @@ + + + +<div {% if class %}class="{{class}}"{% endif %}> + <h2> {{subject}} </h1> + + {% for item in items %} + {{ item }} + {% endfor %} + + + +</div> \ No newline at end of file diff --git a/templates/shortcodes/myloop.html b/templates/shortcodes/myloop.html new file mode 100644 index 0000000..7ff139f --- /dev/null +++ b/templates/shortcodes/myloop.html @@ -0,0 +1,4 @@ + +{% for item in items %} + <p>{{ item }}</p> +{% endfor %} diff --git a/templates/shortcodes/reviews.html b/templates/shortcodes/reviews.html new file mode 100644 index 0000000..b74830c --- /dev/null +++ b/templates/shortcodes/reviews.html @@ -0,0 +1,91 @@ + + + +<div {% if class %}class="{{class}}"{% endif %}> + <div class="bg-white py-6 sm:py-8 lg:py-12"> + <div class="mx-auto px-4 md:px-8"> + <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-8 lg:text-3xl xl:mb-12">Customer Reviews</h2> + + <div class="mb-4 flex items-center justify-between border-t border-b py-4"> + <div class="flex flex-col gap-0.5"> + <span class="block font-bold">Total</span> + + <!-- stars - start --> + <div class="-ml-1 flex gap-0.5"> + + + + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + </div> + <!-- stars - end --> + + <span class="block text-sm text-gray-500">Bases on 27 reviews</span> + </div> + + <a href="#" class="inline-block rounded-lg border bg-white px-4 py-2 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-100 focus-visible:ring active:bg-gray-200 md:px-8 md:py-3 md:text-base">Write a review</a> + </div> + + <div class="divide-y"> + <!-- review - start --> + {# {% for item in items %} #} + <div class="flex flex-col gap-3 py-4 md:py-8"> + <div> + <span class="block text-sm font-bold">{{ reviews_name }}</span> + <span class="block text-sm text-gray-500">{{ reviews_date }}</span> + </div> + + <!-- stars - start --> + <div class="-ml-1 flex gap-0.5"> + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> + <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> + </svg> + </div> + <!-- stars - end --> + + <p class="text-gray-600">{{ reviews_description }}</p> + </div> + {# {% endfor %} #} + + <!-- review - end --> + + + <!-- review - end --> + </div> + </div> + </div> +</div> diff --git a/templates/shortcodes/row.html b/templates/shortcodes/row.html new file mode 100644 index 0000000..30a34ee --- /dev/null +++ b/templates/shortcodes/row.html @@ -0,0 +1,258 @@ +<!-- row shortcode +Shortcode used in markdown for the creation of mobile compatible vertical rows +Divides markdown into columns by splitting content using column identifier "|||" +Creates equal width blocks in a flex row. + +Parameters: +- style: + - lean: if style is lean, the row doesn't have outer margins +- bgPath: if bgPath is passed, the row has a full width background +--> + + +<!-- This fixes link & img paths in local, prod, and wth prefix --> +{% if page %} + {% if "](" in body %} + {% set body_arr = body | split(pat="](") %} + {% set body = body_arr[0] %} + {% for i in body_arr %} + {% set prev_index = loop.index0 - 1 %} + {% if not loop.first %} + {% if "![" in body_arr[prev_index] %} + {% set_global body = body ~ '](' ~ page.permalink ~ i %} + {% else %} + {% if i is not starting_with("http") %} + {% set base_url = get_url(path="") %} + {% set_global body = body ~ '](' ~ base_url ~ i %} + {% else %} + {% set_global body = body ~ '](' ~ i %} + {% endif %} + {% endif %} + {% endif %} + {% endfor %} + {% endif %} +{% endif %} + +{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %} + +{% set row_class = "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden"%} + +<!-- aligns columns depending on col number--> +{% if 2 < columns | length %} + {% set row_class = row_class ~ " lg:items-start" %} +{% else %} + {% set row_class = row_class ~ " items-center" %} +{% endif %} + +{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 mx-4" %} + + +{% set row_id = '' %} + +{% if id %} +{% set row_id = id %} + +{% endif %} + + <!-- reverse col at mobile --> + + + {% if reverse %} + {% if "rightreserve" in reverse %} + {% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %} + {% elif "leftreserve" in reverse %} + {% set row_class = "flex flex-col md:flex-row items-center mx-8" %} + + {% endif %} + {% endif %} + + +<!-- Padding --> + +{% set padding_class = " py-8 md:py-8 lg:py-24" %} + +{% if padding %} + {% if "none" in padding %} + {% set padding_class = " py-0" %} + {% elif "top" in padding %} + {% set padding_class = " py-0 lg:pt-24" %} + {% elif "bottom" in padding %} + {% set padding_class = " py-2 md:py-4 lg:pb-24" %} + {% elif "both" in padding %} + {% set padding_class = " py-8 md:py-4 lg:py-24" %} + {% endif %} +{% endif %} + +{% if css %} + {% set padding_class = padding_class ~ " " ~ css %} +{% endif %} + +{% set row_class = row_class ~ padding_class %} + + +<!-- Margins --> + +{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %} + +{% if margin %} + {% if "none" in margin %} + {% set margin_class = " mx-0" %} + {% elif "wide" in margin %} + {% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20 " %} + {% elif "moderate" in margin %} + {% set margin_class = " mx-4 sm:mx-16 md:mx-20 lg:mx-28" %} + {% elif "narrow" in margin %} + {% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40" %} + {% elif "tight" in margin %} + {% set margin_class = " mx-4 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %} + {% elif "header" in margin %} + {% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40 my-10" %} + {% elif "withContainer" in margin %} + {% set margin_class = " mx-4 " %} + {% endif %} + {% if "lean-left" in margin %} + {% set margin = margin_class | replace(from=" ", to=" first:")%} + {% set margin_left = margin | replace(from="mx", to="-ml") %} + {% set margin_right = margin | replace(from="mx", to="mr") %} + {% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %} + {% set row_class = row_class ~ " sm:gap-0 " %} + {% elif "lean-right" in margin %} + {% set margin = margin_class | replace(from=" ", to=" last:")%} + {% set margin_left = margin | replace(from="mx", to="ml") %} + {% set margin_right = margin | replace(from="mx", to="-mr") %} + {% set col_class = col_class ~ " md:first:px-8 lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %} + {% set row_class = row_class ~ " sm:gap-0 " %} + {% endif %} +{% endif %} + +{% if css %} + {% set margin_class = margin_class ~ " " ~ css %} +{% endif %} + +{% set row_class = row_class ~ margin_class %} + + + +{% if style %} + + {% if "center" in style %} + {% set row_class = row_class ~ " text-center items-center " %} + {% set col_class = col_class ~ " flex-1 " %} + {% endif %} + + {% if "right" in style %} + {% set row_class = row_class ~ " text-center lg:text-right md:text-right justify-center " %} + {% set col_class = col_class ~ " flex-1" %} + {% endif %} + + {% if "left" in style %} + {% set row_class = row_class ~ " text-center lg:text-left md:text-left justify-center " %} + {% set col_class = col_class ~ " flex-1" %} + {% endif %} + + + {% if "items-end" in style %} + {% set row_class = row_class ~ " lg:items-end" %} + {% set col_class = col_class ~ " flex-1 " %} + {% endif %} + + + + + <!-- makes row semi-full screen width, strips margins --> + {% if "between" in style %} + {% set row_class = row_class ~ " lg:max-w-6xl " %} + {% elif "moderate" in style %} + {% set row_class = row_class ~ " " %} + {% endif %} + + <!-- makes row full screen width, strips margins --> + {% if "narrow" in style %} + {% set row_class = row_class ~ " lg:max-w-3xl " %} + {% elif "tight" in style %} + {% set row_class = row_class ~ " lg:max-w-sm " %} + {% elif "moderate" in style %} + {% set row_class = row_class ~ " mx-20 " %} + {% endif %} + + {% if "invert-color" in style %} + + {% set row_class = row_class ~ " text-white lg:text-white " %} + + {% endif %} + {% else %} + {% set row_class = row_class ~ " " %} +{% endif %} + +{% set anchor_link = ""%} +{% if anchor %} + {% set anchor_link = anchor %} +{% endif %} + + +<!-- makes row full screen width and adds background img --> +{% set styles = "" %} +{% set div_class = " " %} +{% if bgPath %} + {% set background_url = page.permalink ~ bgPath %} + {% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: center;" %} + {% if "#desktop" in bgPath %} + {% set bgStyle = false %} + {% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %} + {% set row_class = row_class | replace(from='text-white', to='text-black') %} + {% if "invert-color" in style %} + {% if "#desktop" in bgPath %} + {% set row_class = row_class ~ " lg:text-white " %} + {% endif %} + {% endif %} + {% endif %} +{% endif %} +{% if bgStyle %} + {% if "full" in bgStyle %} + {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %} + {% elif "hero" in bgStyle %} + {% set div_class = div_class ~ " -mt-24 pt-12 " %} + {% endif %} +{% endif %} +{% if bgColor %} + {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %} + {% set row_class = row_class %} +{% endif %} + +{% if class %} + {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %} + {% set row_class = row_class %} +{% endif %} + +<!-- Cancels page margins so that rows can have separate margins --> +{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %} + + + <div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}"> + <div id="{{row_id}}" class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available"> + + {% for column in columns%} + + <!-- Hides empty columns if displayed vertically in small screen --> + {% if column | as_str | length < 10 %} + <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1 "> + {{ column | safe }} + </div> + {% else %} + <div class="{{col_class}}"> + <!-- handles mermaid markdown content display --> + + {% if "{% mermaid() %}" in column %} + {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %} + {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%} + <div class="mermaid"> + {{mermaid_content | safe }} + </div> + {% else %} + {{ column | safe }} + {% endif %} + </div> + {% endif %} + {% endfor %} + </div> +</div> \ No newline at end of file diff --git a/templates/shortcodes/space.html b/templates/shortcodes/space.html new file mode 100644 index 0000000..fca83cc --- /dev/null +++ b/templates/shortcodes/space.html @@ -0,0 +1,8 @@ + +{% set height = 52 %} +{% if size %} + {% if size == "small" %} + {% set height = 28 %} + {% endif %} +{% endif %} +<div class="h-20 lg:h-{{height}}"></div> \ No newline at end of file diff --git a/templates/shortcodes/team_sec.html b/templates/shortcodes/team_sec.html new file mode 100644 index 0000000..8254c21 --- /dev/null +++ b/templates/shortcodes/team_sec.html @@ -0,0 +1,79 @@ +<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40"> + <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl"> + THE TEAM + </h2> + <div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has + built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong + vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s + digital workloads via smart contract, removing all forms of centralization from global IT systems.</div> + <div class="flex overflow-x-scroll pb-10 scrollable"> + <div class="flex flex-nowrap ml-10 mt-10"> + <div class="inline-block px-3"> + <div class=" + box + max-w-xs + overflow-hidden + rounded-full + shadow-md + hover:shadow-xl + transition-shadow + duration-300 + ease-in-out + "> + <a href="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji"> + <img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg" + class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" /> + </a> + </div> + </div> + </div> + </div> +</div> + +<style> + .scrollable::-webkit-scrollbar { + width: 8px; + } + + .scrollable::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 20px; + } + + .scrollable::-webkit-scrollbar-thumb { + background: linear-gradient(45deg, #70dfc9, #ee7bf7); + border-radius: 20px; + } + + /* #70dfc9, #ee7bf7 */ + .box { + position: relative; + height: 150px; + width: 150px; + } + + .box::before { + content: ""; + position: absolute; + top: 5px; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + padding: 10px; + background: linear-gradient(45deg, #70dfc9, #ee7bf7); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: destination-out; + mask-composite: exclude; + } + + .box img { + filter: grayscale(100%); + height: 130px; + width: 130px; + } + + .box img:hover { + filter: grayscale(0); + } +</style> \ No newline at end of file diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html new file mode 100644 index 0000000..e85468e --- /dev/null +++ b/templates/shortcodes/youtube.html @@ -0,0 +1,8 @@ +<div {% if class %}class="{{class}}"{% endif %}> + <iframe + src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" + webkitallowfullscreen + mozallowfullscreen + allowfullscreen> + </iframe> +</div> \ No newline at end of file diff --git a/templates/tags/list.html b/templates/tags/list.html new file mode 100644 index 0000000..7330b1f --- /dev/null +++ b/templates/tags/list.html @@ -0,0 +1,7 @@ +{% extends "index.html" %} + +{% block content %} + +{{ terms }} + +{% endblock content %} diff --git a/templates/tags/single.html b/templates/tags/single.html new file mode 100644 index 0000000..cb08e72 --- /dev/null +++ b/templates/tags/single.html @@ -0,0 +1,12 @@ +{% extends "index.html" %} + +{% block content %} + +{# {% set section = get_section(path="blog/_index.md")%} +<main class="pt-16"> + {{ section.content | safe}} + <hr> + {% include "partials/page_list.html" %} + </main> #} + + {% endblock content %} diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html new file mode 100644 index 0000000..f628a84 --- /dev/null +++ b/templates/taxonomy_list.html @@ -0,0 +1,4 @@ +{% extends "index.html" %} + +{% block content %} +{% endblock content %} \ No newline at end of file diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html new file mode 100644 index 0000000..7b9e37c --- /dev/null +++ b/templates/taxonomy_single.html @@ -0,0 +1,22 @@ +{% extends "index.html" %} + +{% block content %} + +<main class="pt-16"> + + <div class="flex flex-col md:flex-row"> + {% if current_path is containing("tags") %} + {% include "partials/tagsCards.html" %} + {% include "partials/tagsSidebar.html" %} + {% elif current_path is containing("memberships") %} + {% include "partials/memberships.html" %} + {% elif current_path is containing("people") %} + {% else %} + {% include "partials/newsPosts.html" %} + {% include "partials/newsSidebar.html" %} + {% endif %} + </div> + </main> + + {% endblock content %} + diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..1b88a9a --- /dev/null +++ b/vercel.json @@ -0,0 +1,48 @@ +{ + "build": { + "env": { + "ZOLA_VERSION": "0.14.0" + } + }, + "github": { + "silent": true + }, + "headers": [ + { + "source": "/css/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=2678400" + } + ] + }, + { + "source": "/images/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=2678400" + } + ] + }, + { + "source": "/images/icons/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=2678400" + } + ] + }, + { + "source": "/fonts/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=2678400" + } + ] + } + ] +} \ No newline at end of file