From ed2e98bf8040844efc478e8fb04a24fed3eaad99 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 21:36:51 +0000 Subject: [PATCH 1/5] Initial plan From 96bfea1e760f47948dbc4eb44331bdd277cc354e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 21:46:01 +0000 Subject: [PATCH 2/5] Add build infrastructure, GitHub Actions, migrate Bootstrap v5, convert CSS to SCSS Co-authored-by: DRSDavidSoft <4673812+DRSDavidSoft@users.noreply.github.com> --- .github/workflows/ci.yml | 46 +++++ .gitignore | 14 ++ .htmlhintrc | 12 ++ .stylelintrc.json | 8 + README.md | 192 ++++++++++++++++- css/main.css | 331 +----------------------------- css/main.min.css | 1 + index.html | 17 +- package.json | 41 ++++ postcss.config.js | 12 ++ scss/main.scss | 430 +++++++++++++++++++++++++++++++++++++++ 11 files changed, 762 insertions(+), 342 deletions(-) create mode 100644 .github/workflows/ci.yml create mode 100644 .htmlhintrc create mode 100644 .stylelintrc.json create mode 100644 css/main.min.css create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 scss/main.scss diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..4d2fa52 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,46 @@ +name: CI + +on: + push: + branches: [ master, main ] + pull_request: + branches: [ master, main ] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: '3.2' + bundler-cache: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Install Node dependencies + run: npm ci + + - name: Lint SCSS + run: npm run lint:scss + + - name: Lint HTML + run: npm run lint:html + + - name: Build CSS + run: npm run build + + - name: Build Jekyll site + run: bundle exec jekyll build + env: + NOKOGIRI_USE_SYSTEM_LIBRARIES: true + + - name: Test with html-proofer + run: bundle exec htmlproofer ./_site --disable-external diff --git a/.gitignore b/.gitignore index b6db751..d78f6ee 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,20 @@ # Reserved hidden directory .*_space +# ========================= +# Build and Dependencies +# ========================= + +# Node modules +node_modules/ +package-lock.json + +# Jekyll +_site/ +.sass-cache/ +.jekyll-cache/ +.jekyll-metadata + # ========================= # Operating System Files # ========================= diff --git a/.htmlhintrc b/.htmlhintrc new file mode 100644 index 0000000..0e4ded3 --- /dev/null +++ b/.htmlhintrc @@ -0,0 +1,12 @@ +{ + "tagname-lowercase": true, + "attr-lowercase": true, + "attr-value-double-quotes": true, + "doctype-first": true, + "tag-pair": true, + "spec-char-escape": true, + "id-unique": true, + "src-not-empty": true, + "attr-no-duplication": true, + "title-require": true +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..2bd92aa --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,8 @@ +{ + "extends": "stylelint-config-standard-scss", + "rules": { + "scss/at-rule-no-unknown": null, + "selector-class-pattern": null, + "custom-property-pattern": null + } +} diff --git a/README.md b/README.md index 02d6f3f..801bdb4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,190 @@ -# cmderdev.github.io -The cmder.net page. +# Cmder Website -[![Build Status](https://travis-ci.org/cmderdev/cmderdev.github.io.svg?branch=master)](https://travis-ci.org/cmderdev/cmderdev.github.io) +[![CI](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml/badge.svg)](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml) + +The official website for Cmder - a portable console emulator for Windows. + +Visit us at: **[https://cmder.app](https://cmder.app)** + +## About Cmder + +Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start. + +## About This Repository + +This repository contains the source code for the Cmder website, built as a static GitHub Pages site using: + +- **Bootstrap 5** - Modern responsive framework +- **SCSS** - Structured stylesheets with CSS variables +- **Jekyll** - Static site generation +- **GitHub Actions** - Automated CI/CD pipeline + +## Development Setup + +### Prerequisites + +- **Ruby** 3.x or higher (for Jekyll) +- **Node.js** 18.x or higher (for SCSS build tools) +- **Bundler** (Ruby gem manager) +- **npm** (Node package manager) + +### Installation + +1. **Clone the repository** + ```bash + git clone https://github.com/cmderdev/cmderdev.github.io.git + cd cmderdev.github.io + ``` + +2. **Install Ruby dependencies** + ```bash + bundle install + ``` + +3. **Install Node.js dependencies** + ```bash + npm install + ``` + +### Building the Site + +**Build CSS from SCSS:** +```bash +npm run build +``` + +This will: +1. Compile SCSS to CSS +2. Add vendor prefixes with Autoprefixer +3. Minify the CSS output + +**Build Jekyll site:** +```bash +bundle exec jekyll build +``` + +The site will be generated in the `_site` directory. + +**Serve locally for development:** +```bash +bundle exec jekyll serve +``` + +Visit `http://localhost:4000` to view the site. + +### Development Workflow + +**Watch SCSS files for changes:** +```bash +npm run watch +``` + +This will automatically rebuild CSS when SCSS files are modified. + +**Run linters:** +```bash +npm run lint:scss # Lint SCSS files +npm run lint:html # Lint HTML files +npm test # Run all linters and build CSS +``` + +## Project Structure + +``` +cmderdev.github.io/ +├── .github/ +│ └── workflows/ +│ └── ci.yml # GitHub Actions CI pipeline +├── css/ +│ ├── main.css # Compiled CSS (expanded) +│ └── main.min.css # Compiled CSS (minified) +├── scss/ +│ └── main.scss # Source SCSS with CSS variables +├── img/ # Images and assets +├── script/ +│ └── cibuild # CI build script +├── index.html # Main HTML page +├── package.json # Node.js dependencies +├── Gemfile # Ruby dependencies +└── README.md # This file +``` + +## CSS Architecture + +The site uses modern CSS practices: + +- **CSS Variables** - All colors, spacing, and typography use CSS variables for easy theming +- **No Vendor Prefixes** - Autoprefixer automatically adds them during build +- **Smooth Transitions** - Performant animations on hover and interactions +- **Dark Mode** - Automatic dark mode support via `prefers-color-scheme` +- **Mobile-First** - Responsive design for all screen sizes + +## Contributing + +Contributions are welcome! Here's how you can help: + +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Make your changes +4. Run tests (`npm test`) +5. Commit your changes (`git commit -m 'Add amazing feature'`) +6. Push to the branch (`git push origin feature/amazing-feature`) +7. Open a Pull Request + +### Contribution Guidelines + +- Follow the existing code style +- Test your changes locally before submitting +- Ensure all linters pass +- Update documentation if needed +- Keep commits focused and atomic + +## Testing + +The CI pipeline automatically runs: + +1. **SCSS Linting** - Validates SCSS syntax and style +2. **HTML Linting** - Validates HTML structure +3. **CSS Build** - Ensures CSS compiles without errors +4. **Jekyll Build** - Validates site generation +5. **Link Checking** - Verifies all links work (html-proofer) + +Run tests locally: +```bash +npm test # Run all linters +bundle exec jekyll build # Build site +bundle exec htmlproofer ./_site --disable-external # Check links +``` + +## Browser Support + +We target all modern browsers: + +- Chrome (last 2 versions) +- Firefox (last 2 versions) +- Safari (last 2 versions) +- Edge (last 2 versions) + +Legacy browser support (IE11 and below) is not provided. + +## License + +This website is part of the Cmder project. For information about Cmder itself, visit the [main repository](https://github.com/cmderdev/cmder). + +## Maintainers + +- [Samuel Vasko](https://github.com/samvasko) - Creator +- [Martin Kemp](https://github.com/MartiUK) - Maintainer +- [The cmderdev team](https://github.com/cmderdev) - Core team +- [All contributors](https://github.com/cmderdev/cmder/graphs/contributors) + +## Links + +- **Website**: [https://cmder.app](https://cmder.app) +- **Main Repository**: [https://github.com/cmderdev/cmder](https://github.com/cmderdev/cmder) +- **Issues**: [https://github.com/cmderdev/cmder/issues](https://github.com/cmderdev/cmder/issues) +- **Wiki**: [https://github.com/cmderdev/cmder/wiki](https://github.com/cmderdev/cmder/wiki) + +--- + +Made with ❤️ by the Cmder community diff --git a/css/main.css b/css/main.css index b35f684..815bb07 100644 --- a/css/main.css +++ b/css/main.css @@ -1,330 +1 @@ -/* ========================================================================== - _ - ___ _ __ ___ __| | ___ _ __ - / __| '_ ` _ \ / _` |/ _ \ '__| - | (__| | | | | | (_| | __/ | - \___|_| |_| |_|\__,_|\___|_| - ========================================================================== */ - -html, body, button, input, select, textarea { - color: #212529; -} -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} -img { - vertical-align: middle; -} - -/* -------------- General Styles -------------- */ - -body { - background-color: Whitesmoke; - font-size: 0.9em; - font-family: 'Lato', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; - line-height: 1.4; -} -body > div.container, body > div.container-fluid { - margin: 2em auto; - padding: 0 0 2em 0; - background-color: #fff; - -webkit-box-shadow: 0 0 8px 3px #eee; - -moz-box-shadow: 0 0 8px 3px #eee; - box-shadow: 0 0 8px 3px #eee; -} -main > section { - margin: 0 auto; - widows: 100%; -} - -@media (max-width: 768px) { - body > div.container, body > div.container-fluid { - margin-top: 0; - } -} - -/* -------------- Typography -------------- */ - -a { - color: #1E90FF; -} -h2 { - padding: .5em 1em; - color: #444; - text-align: center; - font-weight: 300; - font-style: italic; - font-size: 1.2em; -} -h2:before, h2:after { - display: block; - margin: 0.5em auto; - width: 50%; - height: 1px; - background-color: #eee; - content: ""; -} -h3 { - margin: 2.3em 0 0 0; - padding: 8px; - background-color: #eee; - color: #222; - text-indent: 0.2em; - letter-spacing: 0.2em; - font-weight: normal; - font-size: 1.3em; -} -h4 { - margin: 1em 0; - color: #444; - text-indent: 8px; - letter-spacing: 0.1em; - font-size: 1.1em; - font-weight: 700; - text-rendering: optimizeLegibility; -} -.btn { - display: block; - padding: 12px 0; - width: 100%; - border: 1px solid #eee; - border-radius: 4px; - background-color: #888; - box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.02) !important; - color: #fff; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); - font-size: 1.1em; - outline: none; - text-decoration: none; - -webkit-transition: background-color 0.3s; - -moz-transition: background-color 0.3s; - -ms-transition: background-color 0.3s; - -o-transition: background-color 0.3s; - transition: background-color 0.3s; -} -.btn:active:focus { - outline: none; - box-shadow: none; -} -.btn.btn-default { - border: 1px solid #eee; - background-color: #C4C4C4; - color: #eee; -} -.btn.btn-default:hover { - border: 1px solid #eee; - background-color: #ccc; - color: #eee; -} -.btn.btn-default:active { - border: 1px solid #eee; - background-color: #bbb; - color: #eee; -} -.btn.btn-primary { - border: 1px solid #eee; - background-color: #3498db; - color: #eee; -} -.btn.btn-primary:hover { - border: 1px solid #eee; - background-color: #5dade2; - color: #eee; -} -.btn.btn-primary:active { - /* the !important rule used to over-write bs's :disabled attr */ - border: 1px solid #eee !important; - background-color: #1E90FF !important; - color: #eee !important; -} - -/* -------------- Modules -------------- */ - -header { - position: relative; - overflow: hidden; - color: #fff; - letter-spacing: 0.1em; - font-weight: normal; - font-size: 1.6em; - font-family: 'Lato', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; -} -#title_image { - display: block; - margin: 0 auto; - width: 100%; - height: auto; -} -@media (max-width: 1000px) { - #title_image { - margin-left: -10%; - width: 120%; - } -} -main { - padding: 0em 6%; -} -#logo, #pitch { - position: absolute; - width: 100%; - text-align: center; -} -#pitch { - top: 100px; - color: #222; - text-shadow: 1px 1px 0 rgba(88, 88, 88, 0.5); - font-style: italic; - font-size: 0.6em; -} -#logo { - top: 50px; -} -#logo img { - height: 40px; -} -.information img { - width: 100%; -} -.information p { - margin: 0; - padding: 0 .5em; - padding-bottom: 3em; - line-height: 1.4em; -} -.download { - padding-top: 1.2em; - max-width: 35em; - text-align: center; -} -.download > .github { - margin-bottom: 1.5em; -} -#installation { - text-align: left; -} -.download small { - display: inline-block; - margin: 0.5em 0 0; -} -footer { - text-align: center; - font-size: small; - padding-bottom: 2em; -} -code { - padding: 1px 3px; - border-radius: 2px; - color: #222; - background-color: #eee; - font-size: 0.9em; - font-family: Consolas, monaco, monospace; -} - -/* -------------- Lists -------------- */ - -ul { - padding-left: 8px; - list-style: none; -} -ul ol { - margin: 0.5em 0; - padding: 0 0 0 30px; - list-style: none; -} - -/* -------------- Dark Mode -------------- */ - -@media (prefers-color-scheme: dark) { - html, body, button, input, select, textarea { - color: #e0e0e0; - } - - body { - background-color: #1a1a1a; - } - - body > div.container, body > div.container-fluid { - background-color: #2a2a2a; - -webkit-box-shadow: 0 0 8px 3px #000; - -moz-box-shadow: 0 0 8px 3px #000; - box-shadow: 0 0 8px 3px #000; - } - - a { - color: #5dade2; - } - - h2 { - color: #d0d0d0; - } - - h2:before, h2:after { - background-color: #444; - } - - h3 { - background-color: #333; - color: #e0e0e0; - } - - h4 { - color: #d0d0d0; - } - - #pitch { - color: #e0e0e0; - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); - } - - .btn { - border: 1px solid #444; - background-color: #555; - color: #e0e0e0; - } - - .btn.btn-default { - border: 1px solid #444; - background-color: #4a4a4a; - color: #e0e0e0; - } - - .btn.btn-default:hover { - border: 1px solid #555; - background-color: #555; - color: #e0e0e0; - } - - .btn.btn-default:active { - border: 1px solid #666; - background-color: #606060; - color: #e0e0e0; - } - - .btn.btn-primary { - border: 1px solid #2980b9; - background-color: #2980b9; - color: #e0e0e0; - } - - .btn.btn-primary:hover { - border: 1px solid #3498db; - background-color: #3498db; - color: #e0e0e0; - } - - .btn.btn-primary:active { - border: 1px solid #1E90FF !important; - background-color: #1E90FF !important; - color: #e0e0e0 !important; - } - - code { - color: #e0e0e0; - background-color: #3a3a3a; - } - - footer { - color: #b0b0b0; - } -} +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:2px;--border-radius-md:4px;--box-shadow-container:0 0 8px 3px var(--color-shadow);--box-shadow-button:inset 0 0 3px rgb(0 0 0/2%);--text-shadow-button:0 0 1px rgba(0,0,0,.2);--text-shadow-pitch:1px 1px 0 rgba(88,88,88,.5);--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:1px 1px 0 rgba(0,0,0,.8)}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:1px;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:8px;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:8px;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:12px 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 4px 8px rgba(0,0,0,.15)!important;transform:translateY(-2px)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:1px solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 8px 16px rgba(0,0,0,.1);transform:translateY(-4px)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:100px}#logo{top:50px}#logo img{height:40px;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-family:var(--font-family-mono);font-size:var(--font-size-code);padding:1px 3px;transition:background-color var(--transition-normal) var(--transition-timing)}ul{padding-left:8px}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 30px} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..815bb07 --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:2px;--border-radius-md:4px;--box-shadow-container:0 0 8px 3px var(--color-shadow);--box-shadow-button:inset 0 0 3px rgb(0 0 0/2%);--text-shadow-button:0 0 1px rgba(0,0,0,.2);--text-shadow-pitch:1px 1px 0 rgba(88,88,88,.5);--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:1px 1px 0 rgba(0,0,0,.8)}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:1px;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:8px;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:8px;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:12px 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 4px 8px rgba(0,0,0,.15)!important;transform:translateY(-2px)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:1px solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 8px 16px rgba(0,0,0,.1);transform:translateY(-4px)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:100px}#logo{top:50px}#logo img{height:40px;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-family:var(--font-family-mono);font-size:var(--font-size-code);padding:1px 3px;transition:background-color var(--transition-normal) var(--transition-timing)}ul{padding-left:8px}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 30px} \ No newline at end of file diff --git a/index.html b/index.html index e21c254..c9d1a74 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,12 @@ - - - - - - - + + + + + + @@ -25,7 +24,7 @@ Almost wish there was a number 3 near the lambda, don't you think?
Portable console emulator for Windows
- Mmmm Monokai. + Mmmm Monokai.
@@ -185,7 +184,7 @@

Updating + Building

There is not much going on here. But if you want to get most recent updates for Conemu just tick auto-updating in preferences. If you want to clone the repo and build it yourself, you will need - PowerShell >=3.0 and 7z. When you are set on that, just run + PowerShell >=3.0 and 7z. When you are set on that, just run scripts/build.ps1.

diff --git a/package.json b/package.json new file mode 100644 index 0000000..6237004 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "cmderdev.github.io", + "version": "2.0.0", + "description": "Cmder website - Portable console emulator for Windows", + "scripts": { + "build:scss": "sass scss/main.scss css/main.css --style=expanded --no-source-map", + "build:css": "npm run build:scss && postcss css/main.css -o css/main.css --no-map", + "build:min": "npm run build:css && postcss css/main.css -o css/main.min.css --no-map", + "build": "npm run build:min", + "watch": "sass scss/main.scss css/main.css --watch --style=expanded --no-source-map", + "lint:scss": "stylelint 'scss/**/*.scss'", + "lint:html": "htmlhint '*.html'", + "test": "npm run lint:scss && npm run lint:html && npm run build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/cmderdev/cmderdev.github.io.git" + }, + "keywords": [ + "cmder", + "console", + "terminal", + "windows" + ], + "author": "Samuel Vasko", + "license": "MIT", + "bugs": { + "url": "https://github.com/cmderdev/cmder/issues" + }, + "homepage": "https://cmder.app", + "devDependencies": { + "autoprefixer": "^10.4.16", + "cssnano": "^6.0.1", + "htmlhint": "^1.1.4", + "postcss": "^8.4.31", + "postcss-cli": "^11.0.0", + "sass": "^1.69.5", + "stylelint": "^16.0.2", + "stylelint-config-standard-scss": "^12.0.0" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..9042135 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,12 @@ +module.exports = { + plugins: [ + require('autoprefixer'), + require('cssnano')({ + preset: ['default', { + discardComments: { + removeAll: true + } + }] + }) + ] +} diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..98954e7 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,430 @@ +/* ========================================================================== + _ + ___ _ __ ___ __| | ___ _ __ + / __| '_ ` _ \ / _` |/ _ \ '__| + | (__| | | | | | (_| | __/ | + \___|_| |_| |_|\__,_|\___|_| + ========================================================================== */ + +// ======================================== +// CSS Variables (Custom Properties) +// ======================================== + +:root { + // Colors + --color-primary: #1e90ff; + --color-primary-hover: #5dade2; + --color-primary-active: #1e90ff; + --color-text: #212529; + --color-text-light: #444; + --color-text-lighter: #222; + --color-heading: #444; + --color-link: #1e90ff; + --color-bg-body: whitesmoke; + --color-bg-container: #fff; + --color-bg-button-default: #c4c4c4; + --color-bg-button-default-hover: #ccc; + --color-bg-button-default-active: #bbb; + --color-bg-button-primary: #3498db; + --color-bg-button-primary-hover: #5dade2; + --color-bg-button-primary-active: #1e90ff; + --color-bg-code: #eee; + --color-border: #eee; + --color-shadow: #eee; + + // Spacing + --spacing-xs: 0.5em; + --spacing-sm: 1em; + --spacing-md: 2em; + --spacing-lg: 3em; + --spacing-xl: 6%; + + // Typography + --font-family-base: 'Lato', candara, calibri, segoe, 'Segoe UI', optima, arial, sans-serif; + --font-family-mono: consolas, monaco, 'Courier New', monospace; + --font-size-base: 0.9em; + --font-size-h2: 1.2em; + --font-size-h3: 1.3em; + --font-size-h4: 1.1em; + --font-size-button: 1.1em; + --font-size-code: 0.9em; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-bold: 700; + --line-height-base: 1.4; + + // Effects + --border-radius-sm: 2px; + --border-radius-md: 4px; + --box-shadow-container: 0 0 8px 3px var(--color-shadow); + --box-shadow-button: inset 0 0 3px rgb(0 0 0 / 2%); + --text-shadow-button: 0 0 1px rgb(0 0 0 / 20%); + --text-shadow-pitch: 1px 1px 0 rgb(88 88 88 / 50%); + + // Transitions + --transition-fast: 150ms; + --transition-normal: 300ms; + --transition-slow: 500ms; + --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); +} + +// ======================================== +// Dark Mode Variables +// ======================================== + +@media (prefers-color-scheme: dark) { + :root { + --color-text: #e0e0e0; + --color-text-light: #d0d0d0; + --color-text-lighter: #e0e0e0; + --color-heading: #d0d0d0; + --color-link: #5dade2; + --color-bg-body: #1a1a1a; + --color-bg-container: #2a2a2a; + --color-bg-button-default: #4a4a4a; + --color-bg-button-default-hover: #555; + --color-bg-button-default-active: #606060; + --color-bg-button-primary: #2980b9; + --color-bg-button-primary-hover: #3498db; + --color-bg-button-primary-active: #1e90ff; + --color-bg-code: #3a3a3a; + --color-border: #444; + --color-shadow: #000; + --text-shadow-pitch: 1px 1px 0 rgb(0 0 0 / 80%); + } +} + +// ======================================== +// Base Styles +// ======================================== + +html, +body, +button, +input, +select, +textarea { + color: var(--color-text); +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +img { + vertical-align: middle; +} + +// ======================================== +// General Styles +// ======================================== + +body { + background-color: var(--color-bg-body); + font-size: var(--font-size-base); + font-family: var(--font-family-base); + line-height: var(--line-height-base); + transition: background-color var(--transition-normal) var(--transition-timing); + + > div.container, + > div.container-fluid { + margin: var(--spacing-md) auto; + padding: 0 0 var(--spacing-md) 0; + background-color: var(--color-bg-container); + box-shadow: var(--box-shadow-container); + transition: background-color var(--transition-normal) var(--transition-timing), + box-shadow var(--transition-normal) var(--transition-timing); + } +} + +main > section { + margin: 0 auto; + width: 100%; +} + +@media (width <= 768px) { + body > div.container, + body > div.container-fluid { + margin-top: 0; + } +} + +// ======================================== +// Typography +// ======================================== + +a { + color: var(--color-link); + text-decoration: none; + transition: color var(--transition-fast) var(--transition-timing), + opacity var(--transition-fast) var(--transition-timing); + + &:hover { + opacity: 0.8; + } +} + +h2 { + padding: var(--spacing-xs) var(--spacing-sm); + color: var(--color-text-light); + text-align: center; + font-weight: var(--font-weight-light); + font-style: italic; + font-size: var(--font-size-h2); + + &::before, + &::after { + display: block; + margin: var(--spacing-xs) auto; + width: 50%; + height: 1px; + background-color: var(--color-border); + content: ""; + transition: background-color var(--transition-normal) var(--transition-timing); + } +} + +h3 { + margin: 2.3em 0 0; + padding: 8px; + background-color: var(--color-bg-code); + color: var(--color-text-lighter); + text-indent: 0.2em; + letter-spacing: 0.2em; + font-weight: normal; + font-size: var(--font-size-h3); + transition: background-color var(--transition-normal) var(--transition-timing); +} + +h4 { + margin: var(--spacing-sm) 0; + color: var(--color-heading); + text-indent: 8px; + letter-spacing: 0.1em; + font-size: var(--font-size-h4); + font-weight: var(--font-weight-bold); + text-rendering: optimizelegibility; + transition: color var(--transition-normal) var(--transition-timing); +} + +// ======================================== +// Buttons +// ======================================== + +.btn { + display: block; + padding: 12px 0; + width: 100%; + border: 1px solid var(--color-border); + border-radius: var(--border-radius-md); + background-color: #888; + box-shadow: var(--box-shadow-button) !important; + color: #fff; + text-shadow: var(--text-shadow-button); + font-size: var(--font-size-button); + outline: none; + text-decoration: none; + transition: background-color var(--transition-normal) var(--transition-timing), + border-color var(--transition-normal) var(--transition-timing), + transform var(--transition-fast) var(--transition-timing), + box-shadow var(--transition-fast) var(--transition-timing); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgb(0 0 0 / 15%) !important; + } + + &:active { + transform: translateY(0); + box-shadow: var(--box-shadow-button) !important; + } + + &:active:focus { + outline: none; + box-shadow: none; + } + + &.btn-default { + border: 1px solid var(--color-border); + background-color: var(--color-bg-button-default); + color: var(--color-border); + + &:hover { + background-color: var(--color-bg-button-default-hover); + } + + &:active { + background-color: var(--color-bg-button-default-active); + } + } + + &.btn-primary { + border: 1px solid var(--color-border); + background-color: var(--color-bg-button-primary); + color: var(--color-border); + + &:hover { + background-color: var(--color-bg-button-primary-hover); + } + + &:active { + border: 1px solid var(--color-border) !important; + background-color: var(--color-bg-button-primary-active) !important; + color: var(--color-border) !important; + } + } +} + +// ======================================== +// Information Section +// ======================================== + +.information { + img { + width: 100%; + transition: transform var(--transition-normal) var(--transition-timing), + box-shadow var(--transition-normal) var(--transition-timing); + + &:hover { + transform: translateY(-4px); + box-shadow: 0 8px 16px rgb(0 0 0 / 10%); + } + } + + p { + margin: 0; + padding: 0 var(--spacing-xs); + padding-bottom: var(--spacing-lg); + line-height: 1.4em; + } +} + +// ======================================== +// Modules +// ======================================== + +header { + position: relative; + overflow: hidden; + color: #fff; + letter-spacing: 0.1em; + font-weight: normal; + font-size: 1.6em; + font-family: var(--font-family-base); +} + +#title-image { + display: block; + margin: 0 auto; + width: 100%; + height: auto; + transition: transform var(--transition-slow) var(--transition-timing); + + &:hover { + transform: scale(1.02); + } +} + +@media (width <= 1000px) { + #title-image { + margin-left: -10%; + width: 120%; + } +} + +main { + padding: 0 var(--spacing-xl); +} + +#logo, +#pitch { + position: absolute; + width: 100%; + text-align: center; + transition: opacity var(--transition-normal) var(--transition-timing); +} + +#pitch { + top: 100px; + color: var(--color-text-lighter); + text-shadow: var(--text-shadow-pitch); + font-style: italic; + font-size: 0.6em; +} + +#logo { + top: 50px; + + img { + height: 40px; + transition: transform var(--transition-normal) var(--transition-timing); + + &:hover { + transform: scale(1.1); + } + } +} + +// ======================================== +// Download Section +// ======================================== + +.download { + padding-top: 1.2em; + max-width: 35em; + text-align: center; + + > .github { + margin-bottom: 1.5em; + } + + small { + display: inline-block; + margin: var(--spacing-xs) 0 0; + } +} + +#installation { + text-align: left; +} + +// ======================================== +// Footer +// ======================================== + +footer { + text-align: center; + font-size: small; + padding-bottom: var(--spacing-md); + transition: color var(--transition-normal) var(--transition-timing); +} + +// ======================================== +// Code +// ======================================== + +code { + padding: 1px 3px; + border-radius: var(--border-radius-sm); + color: var(--color-text-lighter); + background-color: var(--color-bg-code); + font-size: var(--font-size-code); + font-family: var(--font-family-mono); + transition: background-color var(--transition-normal) var(--transition-timing); +} + +// ======================================== +// Lists +// ======================================== + +ul { + padding-left: 8px; + list-style: none; + + ol { + margin: var(--spacing-xs) 0; + padding: 0 0 0 30px; + list-style: none; + } +} From 1174034de8aa5830c8767cfdd3d86663cc431f66 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 21:51:45 +0000 Subject: [PATCH 3/5] Add security: SRI hashes for CDN resources and GitHub Actions permissions Co-authored-by: DRSDavidSoft <4673812+DRSDavidSoft@users.noreply.github.com> --- .github/workflows/ci.yml | 3 +++ .gitignore | 2 +- index.html | 8 ++++---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4d2fa52..711b836 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -6,6 +6,9 @@ on: pull_request: branches: [ master, main ] +permissions: + contents: read + jobs: build: runs-on: ubuntu-latest diff --git a/.gitignore b/.gitignore index d78f6ee..9791a37 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # ========================= -# Cmder.net Home page +# Cmder.app Home page # ========================= # Reserved hidden directory diff --git a/index.html b/index.html index c9d1a74..c4263a8 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,11 @@ - - + + - - + + From 83f7ca25d3848c5c604f13e5e007448c66fa3e9b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 22:07:45 +0000 Subject: [PATCH 4/5] Replace code tags with kbd for keyboard shortcuts, add kbd styling, convert px to em/rem units, use logical properties Co-authored-by: DRSDavidSoft <4673812+DRSDavidSoft@users.noreply.github.com> --- css/main.css | 2 +- css/main.min.css | 2 +- index.html | 22 ++++++------ scss/main.scss | 88 ++++++++++++++++++++++++++++++++++-------------- 4 files changed, 75 insertions(+), 39 deletions(-) diff --git a/css/main.css b/css/main.css index 815bb07..26678ce 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:2px;--border-radius-md:4px;--box-shadow-container:0 0 8px 3px var(--color-shadow);--box-shadow-button:inset 0 0 3px rgb(0 0 0/2%);--text-shadow-button:0 0 1px rgba(0,0,0,.2);--text-shadow-pitch:1px 1px 0 rgba(88,88,88,.5);--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:1px 1px 0 rgba(0,0,0,.8)}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:1px;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:8px;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:8px;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:12px 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 4px 8px rgba(0,0,0,.15)!important;transform:translateY(-2px)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:1px solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 8px 16px rgba(0,0,0,.1);transform:translateY(-4px)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:100px}#logo{top:50px}#logo img{height:40px;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-family:var(--font-family-mono);font-size:var(--font-size-code);padding:1px 3px;transition:background-color var(--transition-normal) var(--transition-timing)}ul{padding-left:8px}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 30px} \ No newline at end of file +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 815bb07..26678ce 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:2px;--border-radius-md:4px;--box-shadow-container:0 0 8px 3px var(--color-shadow);--box-shadow-button:inset 0 0 3px rgb(0 0 0/2%);--text-shadow-button:0 0 1px rgba(0,0,0,.2);--text-shadow-pitch:1px 1px 0 rgba(88,88,88,.5);--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:1px 1px 0 rgba(0,0,0,.8)}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:1px;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:8px;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:8px;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:12px 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 4px 8px rgba(0,0,0,.15)!important;transform:translateY(-2px)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:1px solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:1px solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 8px 16px rgba(0,0,0,.1);transform:translateY(-4px)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:100px}#logo{top:50px}#logo img{height:40px;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-family:var(--font-family-mono);font-size:var(--font-size-code);padding:1px 3px;transition:background-color var(--transition-normal) var(--transition-timing)}ul{padding-left:8px}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 30px} \ No newline at end of file +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file diff --git a/index.html b/index.html index c4263a8..2c18742 100644 --- a/index.html +++ b/index.html @@ -126,16 +126,16 @@

Keyboard shortcuts

Tab manipulation

@@ -152,15 +152,15 @@

Tab manipulation

Shell

diff --git a/scss/main.scss b/scss/main.scss index 98954e7..59df72a 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -54,12 +54,20 @@ --line-height-base: 1.4; // Effects - --border-radius-sm: 2px; - --border-radius-md: 4px; - --box-shadow-container: 0 0 8px 3px var(--color-shadow); - --box-shadow-button: inset 0 0 3px rgb(0 0 0 / 2%); - --text-shadow-button: 0 0 1px rgb(0 0 0 / 20%); - --text-shadow-pitch: 1px 1px 0 rgb(88 88 88 / 50%); + --border-radius-sm: 0.125rem; + --border-radius-md: 0.25rem; + --border-radius-lg: 0.375rem; + --box-shadow-container: 0 0 0.5em 0.1875em var(--color-shadow); + --box-shadow-button: inset 0 0 0.1875em rgb(0 0 0 / 2%); + --box-shadow-kbd: inset 0 -0.0625em 0 var(--color-border); + --text-shadow-button: 0 0 0.0625em rgb(0 0 0 / 20%); + --text-shadow-pitch: 0.0625em 0.0625em 0 rgb(88 88 88 / 50%); + + // Keyboard key styling + --color-kbd-text: var(--color-text); + --color-kbd-bg: var(--color-bg-code); + --color-kbd-border: var(--color-border); + --kbd-padding: 0.25em 0.5em; // Transitions --transition-fast: 150ms; @@ -90,7 +98,9 @@ --color-bg-code: #3a3a3a; --color-border: #444; --color-shadow: #000; - --text-shadow-pitch: 1px 1px 0 rgb(0 0 0 / 80%); + --text-shadow-pitch: 0.0625em 0.0625em 0 rgb(0 0 0 / 80%); + --color-kbd-bg: #3a3a3a; + --color-kbd-border: #555; } } @@ -178,7 +188,7 @@ h2 { display: block; margin: var(--spacing-xs) auto; width: 50%; - height: 1px; + height: 0.0625em; background-color: var(--color-border); content: ""; transition: background-color var(--transition-normal) var(--transition-timing); @@ -187,7 +197,7 @@ h2 { h3 { margin: 2.3em 0 0; - padding: 8px; + padding: 0.5em; background-color: var(--color-bg-code); color: var(--color-text-lighter); text-indent: 0.2em; @@ -200,7 +210,7 @@ h3 { h4 { margin: var(--spacing-sm) 0; color: var(--color-heading); - text-indent: 8px; + text-indent: 0.5em; letter-spacing: 0.1em; font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); @@ -214,9 +224,9 @@ h4 { .btn { display: block; - padding: 12px 0; + padding: 0.75em 0; width: 100%; - border: 1px solid var(--color-border); + border: 0.0625em solid var(--color-border); border-radius: var(--border-radius-md); background-color: #888; box-shadow: var(--box-shadow-button) !important; @@ -231,8 +241,8 @@ h4 { box-shadow var(--transition-fast) var(--transition-timing); &:hover { - transform: translateY(-2px); - box-shadow: 0 4px 8px rgb(0 0 0 / 15%) !important; + transform: translateY(-0.125em); + box-shadow: 0 0.25em 0.5em rgb(0 0 0 / 15%) !important; } &:active { @@ -246,7 +256,7 @@ h4 { } &.btn-default { - border: 1px solid var(--color-border); + border: 0.0625em solid var(--color-border); background-color: var(--color-bg-button-default); color: var(--color-border); @@ -260,7 +270,7 @@ h4 { } &.btn-primary { - border: 1px solid var(--color-border); + border: 0.0625em solid var(--color-border); background-color: var(--color-bg-button-primary); color: var(--color-border); @@ -269,7 +279,7 @@ h4 { } &:active { - border: 1px solid var(--color-border) !important; + border: 0.0625em solid var(--color-border) !important; background-color: var(--color-bg-button-primary-active) !important; color: var(--color-border) !important; } @@ -287,8 +297,8 @@ h4 { box-shadow var(--transition-normal) var(--transition-timing); &:hover { - transform: translateY(-4px); - box-shadow: 0 8px 16px rgb(0 0 0 / 10%); + transform: translateY(-0.25em); + box-shadow: 0 0.5em 1em rgb(0 0 0 / 10%); } } @@ -346,7 +356,7 @@ main { } #pitch { - top: 100px; + top: 6.25em; color: var(--color-text-lighter); text-shadow: var(--text-shadow-pitch); font-style: italic; @@ -354,10 +364,10 @@ main { } #logo { - top: 50px; + top: 3.125em; img { - height: 40px; + height: 2.5em; transition: transform var(--transition-normal) var(--transition-timing); &:hover { @@ -401,11 +411,11 @@ footer { } // ======================================== -// Code +// Code and Keyboard Keys // ======================================== code { - padding: 1px 3px; + padding: 0.0625em 0.1875em; border-radius: var(--border-radius-sm); color: var(--color-text-lighter); background-color: var(--color-bg-code); @@ -414,17 +424,43 @@ code { transition: background-color var(--transition-normal) var(--transition-timing); } +kbd { + display: inline-block; + padding: var(--kbd-padding); + font-family: var(--font-family-mono); + font-size: 0.875em; + color: var(--color-kbd-text); + vertical-align: middle; + background-color: var(--color-kbd-bg); + border: 0.0625em solid var(--color-kbd-border); + border-bottom-color: var(--color-kbd-border); + border-radius: var(--border-radius-lg); + box-shadow: var(--box-shadow-kbd); + transition: background-color var(--transition-normal) var(--transition-timing), + border-color var(--transition-normal) var(--transition-timing), + transform var(--transition-fast) var(--transition-timing); + + &:hover { + transform: translateY(-0.0625em); + } + + &:active { + transform: translateY(0.0625em); + box-shadow: none; + } +} + // ======================================== // Lists // ======================================== ul { - padding-left: 8px; + padding-inline-start: 0.5em; list-style: none; ol { margin: var(--spacing-xs) 0; - padding: 0 0 0 30px; + padding: 0 0 0 1.875em; list-style: none; } } From 58e15e2268adf0ef6385d494112249b10498fe42 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 22:26:15 +0000 Subject: [PATCH 5/5] Fix z-index for logo/pitch, improve button text readability, remove image hover effects Co-authored-by: DRSDavidSoft <4673812+DRSDavidSoft@users.noreply.github.com> --- css/main.css | 2 +- css/main.min.css | 2 +- scss/main.scss | 17 ++++------------- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/css/main.css b/css/main.css index 26678ce..ee66be7 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-text)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:#fff}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:#fff!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;width:100%}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%;z-index:1}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 26678ce..ee66be7 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:var(--color-border)}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:var(--color-border)!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;transition:transform var(--transition-slow) var(--transition-timing);width:100%}#title-image:hover{transform:scale(1.02)}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em;transition:transform var(--transition-normal) var(--transition-timing)}#logo img:hover{transform:scale(1.1)}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file +:root{--color-primary:#1e90ff;--color-primary-hover:#5dade2;--color-primary-active:#1e90ff;--color-text:#212529;--color-text-light:#444;--color-text-lighter:#222;--color-heading:#444;--color-link:#1e90ff;--color-bg-body:#f5f5f5;--color-bg-container:#fff;--color-bg-button-default:#c4c4c4;--color-bg-button-default-hover:#ccc;--color-bg-button-default-active:#bbb;--color-bg-button-primary:#3498db;--color-bg-button-primary-hover:#5dade2;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#eee;--color-border:#eee;--color-shadow:#eee;--spacing-xs:0.5em;--spacing-sm:1em;--spacing-md:2em;--spacing-lg:3em;--spacing-xl:6%;--font-family-base:"Lato",candara,calibri,segoe,"Segoe UI",optima,arial,sans-serif;--font-family-mono:consolas,monaco,"Courier New",monospace;--font-size-base:0.9em;--font-size-h2:1.2em;--font-size-h3:1.3em;--font-size-h4:1.1em;--font-size-button:1.1em;--font-size-code:0.9em;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:700;--line-height-base:1.4;--border-radius-sm:0.125rem;--border-radius-md:0.25rem;--border-radius-lg:0.375rem;--box-shadow-container:0 0 0.5em 0.1875em var(--color-shadow);--box-shadow-button:inset 0 0 0.1875em rgb(0 0 0/2%);--box-shadow-kbd:inset 0 -0.0625em 0 var(--color-border);--text-shadow-button:0 0 0.0625em rgba(0,0,0,.2);--text-shadow-pitch:0.0625em 0.0625em 0 rgba(88,88,88,.5);--color-kbd-text:var(--color-text);--color-kbd-bg:var(--color-bg-code);--color-kbd-border:var(--color-border);--kbd-padding:0.25em 0.5em;--transition-fast:150ms;--transition-normal:300ms;--transition-slow:500ms;--transition-timing:cubic-bezier(0.4,0,0.2,1)}@media (prefers-color-scheme:dark){:root{--color-text:#e0e0e0;--color-text-light:#d0d0d0;--color-text-lighter:#e0e0e0;--color-heading:#d0d0d0;--color-link:#5dade2;--color-bg-body:#1a1a1a;--color-bg-container:#2a2a2a;--color-bg-button-default:#4a4a4a;--color-bg-button-default-hover:#555;--color-bg-button-default-active:#606060;--color-bg-button-primary:#2980b9;--color-bg-button-primary-hover:#3498db;--color-bg-button-primary-active:#1e90ff;--color-bg-code:#3a3a3a;--color-border:#444;--color-shadow:#000;--text-shadow-pitch:0.0625em 0.0625em 0 rgba(0,0,0,.8);--color-kbd-bg:#3a3a3a;--color-kbd-border:#555}}body,button,html,input,select,textarea{color:var(--color-text)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}body{background-color:var(--color-bg-body);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);transition:background-color var(--transition-normal) var(--transition-timing)}body>div.container,body>div.container-fluid{background-color:var(--color-bg-container);box-shadow:var(--box-shadow-container);margin:var(--spacing-md) auto;padding:0 0 var(--spacing-md) 0;transition:background-color var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing)}main>section{margin:0 auto;width:100%}@media (width <= 768px){body>div.container,body>div.container-fluid{margin-top:0}}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast) var(--transition-timing),opacity var(--transition-fast) var(--transition-timing)}a:hover{opacity:.8}h2{color:var(--color-text-light);font-size:var(--font-size-h2);font-style:italic;font-weight:var(--font-weight-light);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}h2:after,h2:before{background-color:var(--color-border);content:"";display:block;height:.0625em;margin:var(--spacing-xs) auto;width:50%}h2:after,h2:before,h3{transition:background-color var(--transition-normal) var(--transition-timing)}h3{background-color:var(--color-bg-code);color:var(--color-text-lighter);font-size:var(--font-size-h3);font-weight:400;letter-spacing:.2em;margin:2.3em 0 0;padding:.5em;text-indent:.2em}h4{color:var(--color-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);letter-spacing:.1em;margin:var(--spacing-sm) 0;text-indent:.5em;text-rendering:optimizelegibility;transition:color var(--transition-normal) var(--transition-timing)}.btn{background-color:#888;border:.0625em solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-button)!important;color:#fff;display:block;font-size:var(--font-size-button);outline:none;padding:.75em 0;text-decoration:none;text-shadow:var(--text-shadow-button);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing),box-shadow var(--transition-fast) var(--transition-timing);width:100%}.btn:hover{box-shadow:0 .25em .5em rgba(0,0,0,.15)!important;transform:translateY(-.125em)}.btn:active{box-shadow:var(--box-shadow-button)!important;transform:translateY(0)}.btn:active:focus{box-shadow:none;outline:none}.btn.btn-default{background-color:var(--color-bg-button-default);border:.0625em solid var(--color-border);color:var(--color-text)}.btn.btn-default:hover{background-color:var(--color-bg-button-default-hover)}.btn.btn-default:active{background-color:var(--color-bg-button-default-active)}.btn.btn-primary{background-color:var(--color-bg-button-primary);border:.0625em solid var(--color-border);color:#fff}.btn.btn-primary:hover{background-color:var(--color-bg-button-primary-hover)}.btn.btn-primary:active{background-color:var(--color-bg-button-primary-active)!important;border:.0625em solid var(--color-border)!important;color:#fff!important}.information img{transition:transform var(--transition-normal) var(--transition-timing),box-shadow var(--transition-normal) var(--transition-timing);width:100%}.information img:hover{box-shadow:0 .5em 1em rgba(0,0,0,.1);transform:translateY(-.25em)}.information p{line-height:1.4em;margin:0;padding:0 var(--spacing-xs);padding-bottom:var(--spacing-lg)}header{color:#fff;font-family:var(--font-family-base);font-size:1.6em;font-weight:400;letter-spacing:.1em;overflow:hidden;position:relative}#title-image{display:block;height:auto;margin:0 auto;width:100%}@media (width <= 1000px){#title-image{margin-left:-10%;width:120%}}main{padding:0 var(--spacing-xl)}#logo,#pitch{position:absolute;text-align:center;transition:opacity var(--transition-normal) var(--transition-timing);width:100%;z-index:1}#pitch{color:var(--color-text-lighter);font-size:.6em;font-style:italic;text-shadow:var(--text-shadow-pitch);top:6.25em}#logo{top:3.125em}#logo img{height:2.5em}.download{max-width:35em;padding-top:1.2em;text-align:center}.download>.github{margin-bottom:1.5em}.download small{display:inline-block;margin:var(--spacing-xs) 0 0}#installation{text-align:left}footer{font-size:small;padding-bottom:var(--spacing-md);text-align:center;transition:color var(--transition-normal) var(--transition-timing)}code{background-color:var(--color-bg-code);border-radius:var(--border-radius-sm);color:var(--color-text-lighter);font-size:var(--font-size-code);padding:.0625em .1875em;transition:background-color var(--transition-normal) var(--transition-timing)}code,kbd{font-family:var(--font-family-mono)}kbd{background-color:var(--color-kbd-bg);border-bottom-color:var(--color-kbd-border);border:.0625em solid var(--color-kbd-border);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-kbd);color:var(--color-kbd-text);display:inline-block;font-size:.875em;padding:var(--kbd-padding);transition:background-color var(--transition-normal) var(--transition-timing),border-color var(--transition-normal) var(--transition-timing),transform var(--transition-fast) var(--transition-timing);vertical-align:middle}kbd:hover{transform:translateY(-.0625em)}kbd:active{box-shadow:none;transform:translateY(.0625em)}ul{padding-inline-start:.5em}ul,ul ol{list-style:none}ul ol{margin:var(--spacing-xs) 0;padding:0 0 0 1.875em} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 59df72a..c6aa9e5 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -258,7 +258,7 @@ h4 { &.btn-default { border: 0.0625em solid var(--color-border); background-color: var(--color-bg-button-default); - color: var(--color-border); + color: var(--color-text); &:hover { background-color: var(--color-bg-button-default-hover); @@ -272,7 +272,7 @@ h4 { &.btn-primary { border: 0.0625em solid var(--color-border); background-color: var(--color-bg-button-primary); - color: var(--color-border); + color: #fff; &:hover { background-color: var(--color-bg-button-primary-hover); @@ -281,7 +281,7 @@ h4 { &:active { border: 0.0625em solid var(--color-border) !important; background-color: var(--color-bg-button-primary-active) !important; - color: var(--color-border) !important; + color: #fff !important; } } } @@ -329,11 +329,6 @@ header { margin: 0 auto; width: 100%; height: auto; - transition: transform var(--transition-slow) var(--transition-timing); - - &:hover { - transform: scale(1.02); - } } @media (width <= 1000px) { @@ -352,6 +347,7 @@ main { position: absolute; width: 100%; text-align: center; + z-index: 1; transition: opacity var(--transition-normal) var(--transition-timing); } @@ -368,11 +364,6 @@ main { img { height: 2.5em; - transition: transform var(--transition-normal) var(--transition-timing); - - &:hover { - transform: scale(1.1); - } } }