diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..711b836 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,49 @@ +name: CI + +on: + push: + branches: [ master, main ] + pull_request: + branches: [ master, main ] + +permissions: + contents: read + +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..9791a37 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,24 @@ # ========================= -# Cmder.net Home page +# Cmder.app Home page # ========================= # 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..ee66be7 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: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 new file mode 100644 index 0000000..ee66be7 --- /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: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/index.html b/index.html index e21c254..2c18742 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.
@@ -127,16 +126,16 @@

Keyboard shortcuts

Tab manipulation

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

Tab manipulation

Shell

@@ -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..c6aa9e5 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,457 @@ +/* ========================================================================== + _ + ___ _ __ ___ __| | ___ _ __ + / __| '_ ` _ \ / _` |/ _ \ '__| + | (__| | | | | | (_| | __/ | + \___|_| |_| |_|\__,_|\___|_| + ========================================================================== */ + +// ======================================== +// 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: 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; + --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: 0.0625em 0.0625em 0 rgb(0 0 0 / 80%); + --color-kbd-bg: #3a3a3a; + --color-kbd-border: #555; + } +} + +// ======================================== +// 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: 0.0625em; + background-color: var(--color-border); + content: ""; + transition: background-color var(--transition-normal) var(--transition-timing); + } +} + +h3 { + margin: 2.3em 0 0; + padding: 0.5em; + 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: 0.5em; + 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: 0.75em 0; + width: 100%; + border: 0.0625em 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(-0.125em); + box-shadow: 0 0.25em 0.5em 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: 0.0625em solid var(--color-border); + background-color: var(--color-bg-button-default); + color: var(--color-text); + + &:hover { + background-color: var(--color-bg-button-default-hover); + } + + &:active { + background-color: var(--color-bg-button-default-active); + } + } + + &.btn-primary { + border: 0.0625em solid var(--color-border); + background-color: var(--color-bg-button-primary); + color: #fff; + + &:hover { + background-color: var(--color-bg-button-primary-hover); + } + + &:active { + border: 0.0625em solid var(--color-border) !important; + background-color: var(--color-bg-button-primary-active) !important; + color: #fff !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(-0.25em); + box-shadow: 0 0.5em 1em 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; +} + +@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; + z-index: 1; + transition: opacity var(--transition-normal) var(--transition-timing); +} + +#pitch { + top: 6.25em; + color: var(--color-text-lighter); + text-shadow: var(--text-shadow-pitch); + font-style: italic; + font-size: 0.6em; +} + +#logo { + top: 3.125em; + + img { + height: 2.5em; + } +} + +// ======================================== +// 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 and Keyboard Keys +// ======================================== + +code { + padding: 0.0625em 0.1875em; + 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); +} + +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-inline-start: 0.5em; + list-style: none; + + ol { + margin: var(--spacing-xs) 0; + padding: 0 0 0 1.875em; + list-style: none; + } +}