Compare commits
10 commits
6a63117bd1
...
582e4491c0
Author | SHA1 | Date | |
---|---|---|---|
582e4491c0 | |||
|
1c59bd66ea | ||
|
ddf74d23c3 | ||
|
8852c27641 | ||
|
d6ccb97e0b | ||
|
56a8114f28 | ||
|
e8a5863ff4 | ||
|
435c4e7b83 | ||
|
9c9483c821 | ||
|
6d8fe12427 |
92 changed files with 2333 additions and 381 deletions
0
.eslintrc
Normal file → Executable file
0
.eslintrc
Normal file → Executable file
0
.github/CONTRIBUTING.md
vendored
Normal file → Executable file
0
.github/CONTRIBUTING.md
vendored
Normal file → Executable file
0
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file → Executable file
0
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file → Executable file
23
.github/workflows/lint-css.yml
vendored
Executable file
23
.github/workflows/lint-css.yml
vendored
Executable file
|
@ -0,0 +1,23 @@
|
||||||
|
name: CSS Code Linting
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
lint-css:
|
||||||
|
name: Lint CSS
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout the git repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v1
|
||||||
|
- name: npm install
|
||||||
|
run: npm install
|
||||||
|
- name: Lint CSS
|
||||||
|
run: npm run lint:scss
|
23
.github/workflows/lint-js.yml
vendored
Executable file
23
.github/workflows/lint-js.yml
vendored
Executable file
|
@ -0,0 +1,23 @@
|
||||||
|
name: JS Code Linting
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
lint-js:
|
||||||
|
name: Lint JS
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout the git repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v1
|
||||||
|
- name: npm install
|
||||||
|
run: npm install
|
||||||
|
- name: Lint JS
|
||||||
|
run: npm run lint:js
|
42
.github/workflows/lint-php.yml
vendored
Executable file
42
.github/workflows/lint-php.yml
vendored
Executable file
|
@ -0,0 +1,42 @@
|
||||||
|
name: PHP Code Linting
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
lint-php:
|
||||||
|
name: Parallel lint
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout the git repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
- name: PHP setup
|
||||||
|
uses: shivammathur/setup-php@v2
|
||||||
|
with:
|
||||||
|
php-version: 7.4
|
||||||
|
- name: Install composer packages
|
||||||
|
run: composer install --no-progress
|
||||||
|
- name: Check for PHP errors
|
||||||
|
run: composer lint:php
|
||||||
|
|
||||||
|
phpcs_check:
|
||||||
|
name: PHPCS check
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout the git repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
- name: PHP setup
|
||||||
|
uses: shivammathur/setup-php@v2
|
||||||
|
with:
|
||||||
|
php-version: 7.4
|
||||||
|
- name: Install composer packages
|
||||||
|
run: composer install --no-progress
|
||||||
|
- name: Check coding standards using PHPCS
|
||||||
|
run: composer lint:wpcs
|
0
.gitignore
vendored
Normal file → Executable file
0
.gitignore
vendored
Normal file → Executable file
5
.stylelintrc.json
Normal file → Executable file
5
.stylelintrc.json
Normal file → Executable file
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": [
|
"extends": [
|
||||||
"stylelint-config-wordpress/scss"
|
"@wordpress/stylelint-config/scss"
|
||||||
],
|
],
|
||||||
"ignoreFiles": [
|
"ignoreFiles": [
|
||||||
"sass/_normalize.scss"
|
"sass/_normalize.scss"
|
||||||
|
@ -10,6 +10,7 @@
|
||||||
"no-descending-specificity": null,
|
"no-descending-specificity": null,
|
||||||
"block-no-empty": null,
|
"block-no-empty": null,
|
||||||
"no-duplicate-selectors": null,
|
"no-duplicate-selectors": null,
|
||||||
"font-family-no-duplicate-names": null
|
"font-family-no-duplicate-names": null,
|
||||||
|
"selector-class-pattern": null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
71
.travis.yml
71
.travis.yml
|
@ -1,71 +0,0 @@
|
||||||
# Travis CI (MIT License) configuration file for the Underscores WordPress theme.
|
|
||||||
# @link https://travis-ci.org/
|
|
||||||
|
|
||||||
# For use with the Underscores WordPress theme.
|
|
||||||
# @link https://github.com/Automattic/_s
|
|
||||||
|
|
||||||
# Tell Travis CI which OS and which distro to use.
|
|
||||||
os: linux
|
|
||||||
dist: xenial
|
|
||||||
|
|
||||||
# Cache directories between builds.
|
|
||||||
# @link https://docs.travis-ci.com/user/caching/#arbitrary-directories
|
|
||||||
cache:
|
|
||||||
directories:
|
|
||||||
# Cache directory for npm.
|
|
||||||
- $HOME/.npm
|
|
||||||
# Cache directory for older Composer versions.
|
|
||||||
- $HOME/.composer/cache/files
|
|
||||||
# Cache directory for more recent Composer versions.
|
|
||||||
- $HOME/.cache/composer/files
|
|
||||||
|
|
||||||
# Declare project language.
|
|
||||||
# @link https://docs.travis-ci.com/user/languages/php/
|
|
||||||
language:
|
|
||||||
- php
|
|
||||||
|
|
||||||
php:
|
|
||||||
- 5.6
|
|
||||||
- 7.0
|
|
||||||
- 7.1
|
|
||||||
- 7.2
|
|
||||||
- 7.3
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
fast_finish: true
|
|
||||||
include:
|
|
||||||
- php: 7.4
|
|
||||||
env: SNIFF=1
|
|
||||||
|
|
||||||
before_install:
|
|
||||||
# Speed up build time by disabling Xdebug.
|
|
||||||
- phpenv config-rm xdebug.ini || echo 'No xdebug config.'
|
|
||||||
# Download and install the latest long-term support release of node.
|
|
||||||
- if [[ "$SNIFF" == 1 ]]; then nvm install --lts; fi
|
|
||||||
# Install Composer dependencies.
|
|
||||||
- composer install
|
|
||||||
# Install NPM dependencies.
|
|
||||||
- if [[ "$SNIFF" == 1 ]]; then npm install; fi
|
|
||||||
|
|
||||||
script:
|
|
||||||
# Validate the composer.json file.
|
|
||||||
# @link https://getcomposer.org/doc/03-cli.md#validate
|
|
||||||
- composer validate --no-check-all --strict
|
|
||||||
|
|
||||||
# Search for PHP syntax errors using PHP Parallel Lint.
|
|
||||||
# @link https://github.com/php-parallel-lint/PHP-Parallel-Lint
|
|
||||||
- composer lint:php
|
|
||||||
|
|
||||||
# Check the PHP files with the coding standards documented in the phpcs.xml.dist file.
|
|
||||||
- if [[ "$SNIFF" == 1 ]]; then composer lint:wpcs; fi
|
|
||||||
|
|
||||||
# Check the JS files with the lint-js script defined in the @wordpress/scripts package.
|
|
||||||
- if [[ "$SNIFF" == 1 ]]; then npm run lint:js; fi
|
|
||||||
|
|
||||||
# Check the SCSS files with the lint-style script defined in the @wordpress/scripts package.
|
|
||||||
- if [[ "$SNIFF" == 1 ]]; then npm run lint:scss; fi
|
|
||||||
|
|
||||||
# Receive notifications for build results.
|
|
||||||
# @link https://docs.travis-ci.com/user/notifications/#configuring-email-notifications
|
|
||||||
notifications:
|
|
||||||
email: false
|
|
0
404.php
Normal file → Executable file
0
404.php
Normal file → Executable file
0
LICENSE
Normal file → Executable file
0
LICENSE
Normal file → Executable file
255
README.md
Normal file → Executable file
255
README.md
Normal file → Executable file
|
@ -1,70 +1,229 @@
|
||||||
[](https://travis-ci.org/Automattic/_s)
|
# Achille Press - PaperMod Inspired WordPress Theme
|
||||||
|
|
||||||
_s
|
A fast, clean, and responsive WordPress theme inspired by the Hugo PaperMod theme. Built on the Underscores (_s) foundation with modern design principles and enhanced user experience.
|
||||||
===
|
|
||||||
|
|
||||||
Hi. I'm a starter theme called `_s`, or `underscores`, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
|
## ✨ Features
|
||||||
|
|
||||||
My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you're designing your awesome theme. Here are some of the other more interesting things you'll find here:
|
### Design & Layout
|
||||||
|
- **Clean, minimal design** inspired by PaperMod
|
||||||
|
- **Responsive layout** that works on all devices
|
||||||
|
- **Light/Dark theme toggle** for improved accessibility
|
||||||
|
- **Typography-focused** with excellent readability
|
||||||
|
- **Card-based post layouts** with hover effects
|
||||||
|
- **Breadcrumb navigation** for better UX
|
||||||
|
- **Archive pages** with elegant post listings
|
||||||
|
|
||||||
* A modern workflow with a pre-made command-line interface to turn your project into a more pleasant experience.
|
### Navigation & Menus
|
||||||
* A just right amount of lean, well-commented, modern, HTML5 templates.
|
- **Clean header** with site title and navigation
|
||||||
* A custom header implementation in `inc/custom-header.php`. Just add the code snippet found in the comments of `inc/custom-header.php` to your `header.php` template.
|
- **Mobile-responsive menu** with hamburger toggle
|
||||||
* Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
|
- **Search functionality** (if search plugins are available)
|
||||||
* Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
|
- **Social media icons** in header/footer
|
||||||
* A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
|
- **Menu location indicators** for active pages
|
||||||
* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
|
|
||||||
Note: `.no-sidebar` styles are automatically loaded.
|
|
||||||
* Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
|
|
||||||
* Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
|
|
||||||
* Licensed under GPLv2 or later. :) Use it to make something cool.
|
|
||||||
|
|
||||||
Installation
|
### Content Features
|
||||||
---------------
|
- **Post meta information** (date, author, categories, tags)
|
||||||
|
- **Reading time estimation** for posts
|
||||||
|
- **Share buttons** for social media
|
||||||
|
- **Related posts** suggestions
|
||||||
|
- **Table of contents** generation for long posts
|
||||||
|
- **Featured images** with responsive support
|
||||||
|
- **Code syntax highlighting** support
|
||||||
|
|
||||||
|
### Performance & SEO
|
||||||
|
- **Optimized CSS** with minimal load times
|
||||||
|
- **SEO-friendly** markup and structure
|
||||||
|
- **Schema markup** for better search results
|
||||||
|
- **Fast loading** with optimized assets
|
||||||
|
|
||||||
|
## 🎯 Changes from Original Underscores Theme
|
||||||
|
|
||||||
|
### Theme Information Updates
|
||||||
|
1. **Theme name**: Changed from "_s" to "Achille Press"
|
||||||
|
2. **Theme description**: Updated to reflect PaperMod inspiration
|
||||||
|
3. **Author information**: Updated theme metadata
|
||||||
|
|
||||||
|
### Color Scheme & Typography
|
||||||
|
4. **Color palette**: Implemented PaperMod-inspired color scheme
|
||||||
|
- Light theme: Clean whites and grays
|
||||||
|
- Dark theme: Dark backgrounds with light text
|
||||||
|
- Accent colors: Subtle blues and greens
|
||||||
|
5. **Typography**: Enhanced font stack with better readability
|
||||||
|
- Primary font: System fonts for performance
|
||||||
|
- Monospace: Improved code font stack
|
||||||
|
- Font sizes: Optimized hierarchy
|
||||||
|
6. **CSS Variables**: Added for theme switching and consistency
|
||||||
|
|
||||||
|
### Layout & Structure
|
||||||
|
7. **Header redesign**:
|
||||||
|
- Cleaner, more minimal header
|
||||||
|
- Better navigation placement
|
||||||
|
- Added theme toggle button
|
||||||
|
8. **Footer redesign**:
|
||||||
|
- Simplified footer with social links
|
||||||
|
- Copyright and theme attribution
|
||||||
|
9. **Content layout**:
|
||||||
|
- Wider content area
|
||||||
|
- Better spacing and margins
|
||||||
|
- Card-based post listings
|
||||||
|
10. **Sidebar handling**: Improved responsive sidebar
|
||||||
|
|
||||||
|
### Navigation Enhancements
|
||||||
|
11. **Menu styling**: PaperMod-inspired navigation
|
||||||
|
12. **Mobile menu**: Enhanced mobile navigation
|
||||||
|
13. **Breadcrumbs**: Added breadcrumb navigation
|
||||||
|
14. **Search integration**: Improved search functionality
|
||||||
|
|
||||||
|
### Post & Page Templates
|
||||||
|
15. **Post meta**: Enhanced post metadata display
|
||||||
|
16. **Reading time**: Added reading time estimation
|
||||||
|
17. **Share buttons**: Social media sharing options
|
||||||
|
18. **Related posts**: Post suggestions at end of articles
|
||||||
|
19. **Archive pages**: Improved archive and category pages
|
||||||
|
20. **Featured images**: Better featured image handling
|
||||||
|
|
||||||
|
### Components & Widgets
|
||||||
|
21. **Button styles**: PaperMod-inspired buttons
|
||||||
|
22. **Form elements**: Styled form inputs and fields
|
||||||
|
23. **Code blocks**: Enhanced code syntax styling
|
||||||
|
24. **Quote blocks**: Improved blockquote styling
|
||||||
|
25. **Widget areas**: Updated widget styling
|
||||||
|
|
||||||
|
### JavaScript Features
|
||||||
|
26. **Theme toggle**: Light/dark mode switching
|
||||||
|
27. **Smooth scrolling**: Enhanced page navigation
|
||||||
|
28. **Mobile menu**: Improved mobile interactions
|
||||||
|
29. **Search enhancement**: Better search UX
|
||||||
|
|
||||||
|
### Performance Optimizations
|
||||||
|
30. **CSS optimization**: Minimized and organized styles
|
||||||
|
31. **Font loading**: Optimized web font loading
|
||||||
|
32. **Image handling**: Responsive image improvements
|
||||||
|
33. **JavaScript**: Minimized JS footprint
|
||||||
|
|
||||||
|
### Accessibility Improvements
|
||||||
|
34. **ARIA labels**: Enhanced accessibility markup
|
||||||
|
35. **Keyboard navigation**: Improved keyboard support
|
||||||
|
36. **Screen reader**: Better screen reader support
|
||||||
|
37. **Color contrast**: Improved contrast ratios
|
||||||
|
|
||||||
|
### WooCommerce Integration
|
||||||
|
38. **Product styling**: PaperMod-inspired product layouts
|
||||||
|
39. **Cart/Checkout**: Enhanced e-commerce pages
|
||||||
|
40. **Shop styling**: Improved shop page design
|
||||||
|
|
||||||
|
### Additional Features
|
||||||
|
41. **Social icons**: Added social media icon support
|
||||||
|
42. **Schema markup**: Enhanced SEO markup
|
||||||
|
43. **Custom post types**: Better CPT support
|
||||||
|
44. **Language support**: RTL and multilingual improvements
|
||||||
|
|
||||||
|
## 🛠️ Installation
|
||||||
|
|
||||||
### Requirements
|
### Requirements
|
||||||
|
|
||||||
`_s` requires the following dependencies:
|
Achille Press requires the following dependencies:
|
||||||
|
|
||||||
- [Node.js](https://nodejs.org/)
|
- [Node.js](https://nodejs.org/) (for SASS compilation)
|
||||||
- [Composer](https://getcomposer.org/)
|
- [Composer](https://getcomposer.org/) (for PHP dependencies)
|
||||||
|
- WordPress 5.6 or higher
|
||||||
|
- PHP 7.4 or higher
|
||||||
|
|
||||||
### Quick Start
|
### Quick Start
|
||||||
|
|
||||||
Clone or download this repository, change its name to something else (like, say, `megatherium-is-awesome`), and then you'll need to do a six-step find and replace on the name in all the templates.
|
1. Download or clone this repository to your WordPress themes directory
|
||||||
|
2. Install dependencies:
|
||||||
1. Search for `'_s'` (inside single quotations) to capture the text domain and replace with: `'megatherium-is-awesome'`.
|
|
||||||
2. Search for `_s_` to capture all the functions names and replace with: `megatherium_is_awesome_`.
|
|
||||||
3. Search for `Text Domain: _s` in `style.css` and replace with: `Text Domain: megatherium-is-awesome`.
|
|
||||||
4. Search for <code> _s</code> (with a space before it) to capture DocBlocks and replace with: <code> Megatherium_is_Awesome</code>.
|
|
||||||
5. Search for `_s-` to capture prefixed handles and replace with: `megatherium-is-awesome-`.
|
|
||||||
6. Search for `_S_` (in uppercase) to capture constants and replace with: `MEGATHERIUM_IS_AWESOME_`.
|
|
||||||
|
|
||||||
Then, update the stylesheet header in `style.css`, the links in `footer.php` with your own information and rename `_s.pot` from `languages` folder to use the theme's slug. Next, update or delete this readme.
|
|
||||||
|
|
||||||
### Setup
|
|
||||||
|
|
||||||
To start using all the tools that come with `_s` you need to install the necessary Node.js and Composer dependencies :
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ composer install
|
$ composer install
|
||||||
$ npm install
|
$ npm install
|
||||||
```
|
```
|
||||||
|
3. Compile the styles:
|
||||||
|
```sh
|
||||||
|
$ npm run compile:css
|
||||||
|
```
|
||||||
|
4. Activate the theme in WordPress admin
|
||||||
|
|
||||||
|
### Development Setup
|
||||||
|
|
||||||
|
To start developing with all the available tools:
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
|
||||||
### Available CLI commands
|
### Available CLI commands
|
||||||
|
|
||||||
`_s` comes packed with CLI commands tailored for WordPress theme development :
|
Achille Press comes with CLI commands for development:
|
||||||
|
|
||||||
- `composer lint:wpcs` : checks all PHP files against [PHP Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/).
|
- `composer lint:wpcs` : checks PHP files against WordPress Coding Standards
|
||||||
- `composer lint:php` : checks all PHP files for syntax errors.
|
- `composer lint:php` : checks PHP files for syntax errors
|
||||||
- `composer make-pot` : generates a .pot file in the `languages/` directory.
|
- `composer make-pot` : generates translation files
|
||||||
- `npm run compile:css` : compiles SASS files to css.
|
- `npm run compile:css` : compiles SASS files to CSS
|
||||||
- `npm run compile:rtl` : generates an RTL stylesheet.
|
- `npm run compile:rtl` : generates RTL stylesheet
|
||||||
- `npm run watch` : watches all SASS files and recompiles them to css when they change.
|
- `npm run watch` : watches SASS files and recompiles on changes
|
||||||
- `npm run lint:scss` : checks all SASS files against [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/).
|
- `npm run lint:scss` : checks SASS files against CSS standards
|
||||||
- `npm run lint:js` : checks all JavaScript files against [JavaScript Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/).
|
- `npm run lint:js` : checks JavaScript files against standards
|
||||||
- `npm run bundle` : generates a .zip archive for distribution, excluding development and system files.
|
- `npm run bundle` : creates distribution archive
|
||||||
|
|
||||||
Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
|
## 🎨 Customization
|
||||||
|
|
||||||
Good luck!
|
### Theme Options
|
||||||
|
The theme includes several customization options accessible through the WordPress Customizer:
|
||||||
|
|
||||||
|
- **Colors**: Light/Dark theme colors
|
||||||
|
- **Typography**: Font selections and sizes
|
||||||
|
- **Layout**: Sidebar options and content width
|
||||||
|
- **Header**: Logo, navigation, and search options
|
||||||
|
- **Footer**: Social links and copyright text
|
||||||
|
|
||||||
|
### Custom CSS
|
||||||
|
Additional CSS can be added through:
|
||||||
|
- WordPress Customizer → Additional CSS
|
||||||
|
- Child theme stylesheet
|
||||||
|
- Custom CSS plugin
|
||||||
|
|
||||||
|
### Social Media Icons
|
||||||
|
Configure social media links in the Customizer. Supported platforms include:
|
||||||
|
- Twitter/X
|
||||||
|
- Facebook
|
||||||
|
- LinkedIn
|
||||||
|
- GitHub
|
||||||
|
- Instagram
|
||||||
|
- YouTube
|
||||||
|
- And many more...
|
||||||
|
|
||||||
|
## 🌐 Browser Support
|
||||||
|
|
||||||
|
- Chrome (latest)
|
||||||
|
- Firefox (latest)
|
||||||
|
- Safari (latest)
|
||||||
|
- Edge (latest)
|
||||||
|
- Internet Explorer 11+ (limited support)
|
||||||
|
|
||||||
|
## 📱 Mobile Responsive
|
||||||
|
|
||||||
|
Achille Press is fully responsive and optimized for:
|
||||||
|
- Desktop computers
|
||||||
|
- Tablets (portrait and landscape)
|
||||||
|
- Mobile phones (all sizes)
|
||||||
|
- High-resolution displays
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
This theme is licensed under the GNU General Public License v2 or later.
|
||||||
|
Use it to create something amazing!
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||||
|
|
||||||
|
## 🐛 Bug Reports
|
||||||
|
|
||||||
|
If you find any issues, please report them on the GitHub repository.
|
||||||
|
|
||||||
|
## 🙏 Credits
|
||||||
|
|
||||||
|
- Based on [Underscores](https://underscores.me/) by Automattic
|
||||||
|
- Inspired by [Hugo PaperMod](https://github.com/adityatelange/hugo-PaperMod) theme
|
||||||
|
- Icons by [Feather Icons](https://feathericons.com/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Ready to create something awesome? Let's build a beautiful WordPress site together! 🚀**
|
||||||
|
|
0
archive.php
Normal file → Executable file
0
archive.php
Normal file → Executable file
0
comments.php
Normal file → Executable file
0
comments.php
Normal file → Executable file
4
composer.json
Normal file → Executable file
4
composer.json
Normal file → Executable file
|
@ -18,10 +18,10 @@
|
||||||
"php": ">=5.6"
|
"php": ">=5.6"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"dealerdirect/phpcodesniffer-composer-installer": "^0.6.2",
|
"dealerdirect/phpcodesniffer-composer-installer": "^0.7.0",
|
||||||
"wptrt/wpthemereview": "^0.2.1",
|
"wptrt/wpthemereview": "^0.2.1",
|
||||||
"php-parallel-lint/php-parallel-lint": "^1.2.0",
|
"php-parallel-lint/php-parallel-lint": "^1.2.0",
|
||||||
"wp-cli/i18n-command": "^2.2"
|
"wp-cli/i18n-command": "^2.2.5"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint:wpcs": "@php ./vendor/squizlabs/php_codesniffer/bin/phpcs",
|
"lint:wpcs": "@php ./vendor/squizlabs/php_codesniffer/bin/phpcs",
|
||||||
|
|
48
footer.php
Normal file → Executable file
48
footer.php
Normal file → Executable file
|
@ -6,25 +6,55 @@
|
||||||
*
|
*
|
||||||
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
||||||
*
|
*
|
||||||
* @package _s
|
* @package Achille_Press
|
||||||
*/
|
*/
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<footer id="colophon" class="site-footer">
|
<footer id="colophon" class="site-footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) ) : ?>
|
||||||
|
<div class="footer-widgets">
|
||||||
|
<div class="footer-widget-area">
|
||||||
|
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
|
||||||
|
<div class="footer-widget">
|
||||||
|
<?php dynamic_sidebar( 'footer-1' ); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="footer-widget-area">
|
||||||
|
<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
|
||||||
|
<div class="footer-widget">
|
||||||
|
<?php dynamic_sidebar( 'footer-2' ); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="footer-widget-area">
|
||||||
|
<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
|
||||||
|
<div class="footer-widget">
|
||||||
|
<?php dynamic_sidebar( 'footer-3' ); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="site-info">
|
<div class="site-info">
|
||||||
<a href="<?php echo esc_url( __( 'https://wordpress.org/', '_s' ) ); ?>">
|
<div class="copyright">
|
||||||
<?php
|
© <?php echo date( 'Y' ); ?>
|
||||||
/* translators: %s: CMS name, i.e. WordPress. */
|
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
|
||||||
printf( esc_html__( 'Proudly powered by %s', '_s' ), 'WordPress' );
|
</div>
|
||||||
?>
|
<div class="theme-credit">
|
||||||
</a>
|
|
||||||
<span class="sep"> | </span>
|
|
||||||
<?php
|
<?php
|
||||||
/* translators: 1: Theme name, 2: Theme author. */
|
/* translators: 1: Theme name, 2: Theme author. */
|
||||||
printf( esc_html__( 'Theme: %1$s by %2$s.', '_s' ), '_s', '<a href="https://automattic.com/">Automattic</a>' );
|
printf( esc_html__( 'Powered by %1$s & %2$s', 'achille-press' ),
|
||||||
|
'<a href="https://wordpress.org/">WordPress</a>',
|
||||||
|
'<a href="https://github.com/your-username/achille-press">Achille Press</a>'
|
||||||
|
);
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
</div><!-- .site-info -->
|
</div><!-- .site-info -->
|
||||||
|
</div><!-- .footer-container -->
|
||||||
</footer><!-- #colophon -->
|
</footer><!-- #colophon -->
|
||||||
</div><!-- #page -->
|
</div><!-- #page -->
|
||||||
|
|
||||||
|
|
157
functions.php
Normal file → Executable file
157
functions.php
Normal file → Executable file
|
@ -1,18 +1,17 @@
|
||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* _s functions and definitions
|
* Achille Press functions and definitions
|
||||||
*
|
*
|
||||||
* @link https://developer.wordpress.org/themes/basics/theme-functions/
|
* @link https://developer.wordpress.org/themes/basics/theme-functions/
|
||||||
*
|
*
|
||||||
* @package _s
|
* @package Achille_Press
|
||||||
*/
|
*/
|
||||||
|
|
||||||
if ( ! defined( '_S_VERSION' ) ) {
|
if ( ! defined( 'ACHILLE_PRESS_VERSION' ) ) {
|
||||||
// Replace the version number of the theme on each release.
|
// Replace the version number of the theme on each release.
|
||||||
define( '_S_VERSION', '1.0.0' );
|
define( 'ACHILLE_PRESS_VERSION', '1.0.0' );
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( ! function_exists( '_s_setup' ) ) :
|
|
||||||
/**
|
/**
|
||||||
* Sets up theme defaults and registers support for various WordPress features.
|
* Sets up theme defaults and registers support for various WordPress features.
|
||||||
*
|
*
|
||||||
|
@ -20,14 +19,12 @@ if ( ! function_exists( '_s_setup' ) ) :
|
||||||
* runs before the init hook. The init hook is too late for some features, such
|
* runs before the init hook. The init hook is too late for some features, such
|
||||||
* as indicating support for post thumbnails.
|
* as indicating support for post thumbnails.
|
||||||
*/
|
*/
|
||||||
function _s_setup() {
|
function achille_press_setup() {
|
||||||
/*
|
/*
|
||||||
* Make theme available for translation.
|
* Make theme available for translation.
|
||||||
* Translations can be filed in the /languages/ directory.
|
* Translations can be filed in the /languages/ directory.
|
||||||
* If you're building a theme based on _s, use a find and replace
|
|
||||||
* to change '_s' to the name of your theme in all the template files.
|
|
||||||
*/
|
*/
|
||||||
load_theme_textdomain( '_s', get_template_directory() . '/languages' );
|
load_theme_textdomain( 'achille-press', get_template_directory() . '/languages' );
|
||||||
|
|
||||||
// Add default posts and comments RSS feed links to head.
|
// Add default posts and comments RSS feed links to head.
|
||||||
add_theme_support( 'automatic-feed-links' );
|
add_theme_support( 'automatic-feed-links' );
|
||||||
|
@ -47,10 +44,20 @@ if ( ! function_exists( '_s_setup' ) ) :
|
||||||
*/
|
*/
|
||||||
add_theme_support( 'post-thumbnails' );
|
add_theme_support( 'post-thumbnails' );
|
||||||
|
|
||||||
// This theme uses wp_nav_menu() in one location.
|
// Add support for responsive embedded content
|
||||||
|
add_theme_support( 'responsive-embeds' );
|
||||||
|
|
||||||
|
// Add support for editor styles
|
||||||
|
add_theme_support( 'editor-styles' );
|
||||||
|
|
||||||
|
// Add support for full and wide align images
|
||||||
|
add_theme_support( 'align-wide' );
|
||||||
|
|
||||||
|
// This theme uses wp_nav_menu() in multiple locations.
|
||||||
register_nav_menus(
|
register_nav_menus(
|
||||||
array(
|
array(
|
||||||
'menu-1' => esc_html__( 'Primary', '_s' ),
|
'menu-1' => esc_html__( 'Primary Menu', 'achille-press' ),
|
||||||
|
'social' => esc_html__( 'Social Links', 'achille-press' ),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -75,7 +82,7 @@ if ( ! function_exists( '_s_setup' ) ) :
|
||||||
add_theme_support(
|
add_theme_support(
|
||||||
'custom-background',
|
'custom-background',
|
||||||
apply_filters(
|
apply_filters(
|
||||||
'_s_custom_background_args',
|
'achille_press_custom_background_args',
|
||||||
array(
|
array(
|
||||||
'default-color' => 'ffffff',
|
'default-color' => 'ffffff',
|
||||||
'default-image' => '',
|
'default-image' => '',
|
||||||
|
@ -101,8 +108,7 @@ if ( ! function_exists( '_s_setup' ) ) :
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
endif;
|
add_action( 'after_setup_theme', 'achille_press_setup' );
|
||||||
add_action( 'after_setup_theme', '_s_setup' );
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the content width in pixels, based on the theme's design and stylesheet.
|
* Set the content width in pixels, based on the theme's design and stylesheet.
|
||||||
|
@ -111,48 +117,139 @@ add_action( 'after_setup_theme', '_s_setup' );
|
||||||
*
|
*
|
||||||
* @global int $content_width
|
* @global int $content_width
|
||||||
*/
|
*/
|
||||||
function _s_content_width() {
|
function achille_press_content_width() {
|
||||||
// This variable is intended to be overruled from themes.
|
$GLOBALS['content_width'] = apply_filters( 'achille_press_content_width', 800 );
|
||||||
// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
|
|
||||||
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
|
|
||||||
$GLOBALS['content_width'] = apply_filters( '_s_content_width', 640 );
|
|
||||||
}
|
}
|
||||||
add_action( 'after_setup_theme', '_s_content_width', 0 );
|
add_action( 'after_setup_theme', 'achille_press_content_width', 0 );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Register widget area.
|
* Register widget areas.
|
||||||
*
|
*
|
||||||
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
|
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
|
||||||
*/
|
*/
|
||||||
function _s_widgets_init() {
|
function achille_press_widgets_init() {
|
||||||
register_sidebar(
|
register_sidebar(
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Sidebar', '_s' ),
|
'name' => esc_html__( 'Sidebar', 'achille-press' ),
|
||||||
'id' => 'sidebar-1',
|
'id' => 'sidebar-1',
|
||||||
'description' => esc_html__( 'Add widgets here.', '_s' ),
|
'description' => esc_html__( 'Add widgets here.', 'achille-press' ),
|
||||||
'before_widget' => '<section id="%1$s" class="widget %2$s">',
|
'before_widget' => '<section id="%1$s" class="widget %2$s">',
|
||||||
'after_widget' => '</section>',
|
'after_widget' => '</section>',
|
||||||
'before_title' => '<h2 class="widget-title">',
|
'before_title' => '<h2 class="widget-title">',
|
||||||
'after_title' => '</h2>',
|
'after_title' => '</h2>',
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Footer widget areas
|
||||||
|
for ( $i = 1; $i <= 3; $i++ ) {
|
||||||
|
register_sidebar(
|
||||||
|
array(
|
||||||
|
'name' => sprintf( esc_html__( 'Footer %d', 'achille-press' ), $i ),
|
||||||
|
'id' => 'footer-' . $i,
|
||||||
|
'description' => sprintf( esc_html__( 'Add widgets here to appear in footer column %d.', 'achille-press' ), $i ),
|
||||||
|
'before_widget' => '<section id="%1$s" class="widget %2$s">',
|
||||||
|
'after_widget' => '</section>',
|
||||||
|
'before_title' => '<h3 class="widget-title">',
|
||||||
|
'after_title' => '</h3>',
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
add_action( 'widgets_init', '_s_widgets_init' );
|
}
|
||||||
|
add_action( 'widgets_init', 'achille_press_widgets_init' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue scripts and styles.
|
* Enqueue scripts and styles.
|
||||||
*/
|
*/
|
||||||
function _s_scripts() {
|
function achille_press_scripts() {
|
||||||
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), _S_VERSION );
|
wp_enqueue_style( 'achille-press-style', get_stylesheet_uri(), array(), ACHILLE_PRESS_VERSION );
|
||||||
wp_style_add_data( '_s-style', 'rtl', 'replace' );
|
wp_style_add_data( 'achille-press-style', 'rtl', 'replace' );
|
||||||
|
|
||||||
wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
|
wp_enqueue_script( 'achille-press-navigation', get_template_directory_uri() . '/js/navigation.js', array(), ACHILLE_PRESS_VERSION, true );
|
||||||
|
wp_enqueue_script( 'achille-press-theme-toggle', get_template_directory_uri() . '/js/theme-toggle.js', array(), ACHILLE_PRESS_VERSION, true );
|
||||||
|
|
||||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||||
wp_enqueue_script( 'comment-reply' );
|
wp_enqueue_script( 'comment-reply' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
add_action( 'wp_enqueue_scripts', '_s_scripts' );
|
add_action( 'wp_enqueue_scripts', 'achille_press_scripts' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate reading time for a post
|
||||||
|
*
|
||||||
|
* @param int $post_id Post ID.
|
||||||
|
* @return int Reading time in minutes.
|
||||||
|
*/
|
||||||
|
function achille_press_reading_time( $post_id = null ) {
|
||||||
|
if ( ! $post_id ) {
|
||||||
|
$post_id = get_the_ID();
|
||||||
|
}
|
||||||
|
|
||||||
|
$content = get_post_field( 'post_content', $post_id );
|
||||||
|
$word_count = str_word_count( strip_tags( $content ) );
|
||||||
|
$reading_time = ceil( $word_count / 200 ); // Average reading speed of 200 words per minute
|
||||||
|
|
||||||
|
return max( $reading_time, 1 ); // Minimum 1 minute
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display reading time
|
||||||
|
*
|
||||||
|
* @param int $post_id Post ID.
|
||||||
|
*/
|
||||||
|
function achille_press_display_reading_time( $post_id = null ) {
|
||||||
|
$reading_time = achille_press_reading_time( $post_id );
|
||||||
|
|
||||||
|
printf(
|
||||||
|
'<span class="reading-time">%s</span>',
|
||||||
|
sprintf(
|
||||||
|
/* translators: %d: Reading time in minutes */
|
||||||
|
_n( '%d min read', '%d min read', $reading_time, 'achille-press' ),
|
||||||
|
$reading_time
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add theme support for page excerpts
|
||||||
|
*/
|
||||||
|
function achille_press_add_page_excerpts() {
|
||||||
|
add_post_type_support( 'page', 'excerpt' );
|
||||||
|
}
|
||||||
|
add_action( 'init', 'achille_press_add_page_excerpts' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Customize excerpt length
|
||||||
|
*/
|
||||||
|
function achille_press_excerpt_length( $length ) {
|
||||||
|
return 30;
|
||||||
|
}
|
||||||
|
add_filter( 'excerpt_length', 'achille_press_excerpt_length', 999 );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Customize excerpt more text
|
||||||
|
*/
|
||||||
|
function achille_press_excerpt_more( $more ) {
|
||||||
|
return '…';
|
||||||
|
}
|
||||||
|
add_filter( 'excerpt_more', 'achille_press_excerpt_more' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add body classes for theme variations
|
||||||
|
*/
|
||||||
|
function achille_press_body_classes( $classes ) {
|
||||||
|
// Add class for theme toggle
|
||||||
|
$classes[] = 'theme-toggle-enabled';
|
||||||
|
|
||||||
|
// Add class for post layout
|
||||||
|
if ( is_singular() ) {
|
||||||
|
$classes[] = 'single-post-layout';
|
||||||
|
} elseif ( is_home() || is_archive() ) {
|
||||||
|
$classes[] = 'card-layout';
|
||||||
|
}
|
||||||
|
|
||||||
|
return $classes;
|
||||||
|
}
|
||||||
|
add_filter( 'body_class', 'achille_press_body_classes' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Implement the Custom Header feature.
|
* Implement the Custom Header feature.
|
||||||
|
|
39
header.php
Normal file → Executable file
39
header.php
Normal file → Executable file
|
@ -23,9 +23,10 @@
|
||||||
<body <?php body_class(); ?>>
|
<body <?php body_class(); ?>>
|
||||||
<?php wp_body_open(); ?>
|
<?php wp_body_open(); ?>
|
||||||
<div id="page" class="site">
|
<div id="page" class="site">
|
||||||
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
|
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'achille-press' ); ?></a>
|
||||||
|
|
||||||
<header id="masthead" class="site-header">
|
<header id="masthead" class="site-header">
|
||||||
|
<div class="header-container">
|
||||||
<div class="site-branding">
|
<div class="site-branding">
|
||||||
<?php
|
<?php
|
||||||
the_custom_logo();
|
the_custom_logo();
|
||||||
|
@ -38,22 +39,50 @@
|
||||||
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
|
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
|
||||||
<?php
|
<?php
|
||||||
endif;
|
endif;
|
||||||
$_s_description = get_bloginfo( 'description', 'display' );
|
$achille_press_description = get_bloginfo( 'description', 'display' );
|
||||||
if ( $_s_description || is_customize_preview() ) :
|
if ( $achille_press_description || is_customize_preview() ) :
|
||||||
?>
|
?>
|
||||||
<p class="site-description"><?php echo $_s_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
|
<p class="site-description"><?php echo $achille_press_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div><!-- .site-branding -->
|
</div><!-- .site-branding -->
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
<nav id="site-navigation" class="main-navigation">
|
<nav id="site-navigation" class="main-navigation">
|
||||||
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
|
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
|
||||||
|
<span class="hamburger-icon">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'achille-press' ); ?></span>
|
||||||
|
</button>
|
||||||
<?php
|
<?php
|
||||||
wp_nav_menu(
|
wp_nav_menu(
|
||||||
array(
|
array(
|
||||||
'theme_location' => 'menu-1',
|
'theme_location' => 'menu-1',
|
||||||
'menu_id' => 'primary-menu',
|
'menu_id' => 'primary-menu',
|
||||||
|
'menu_class' => 'primary-menu',
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
</nav><!-- #site-navigation -->
|
</nav><!-- #site-navigation -->
|
||||||
|
|
||||||
|
<button class="theme-toggle" aria-label="Toggle dark mode" type="button">
|
||||||
|
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||||
|
</svg>
|
||||||
|
<svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div><!-- .header-actions -->
|
||||||
|
</div><!-- .header-container -->
|
||||||
</header><!-- #masthead -->
|
</header><!-- #masthead -->
|
||||||
|
|
0
inc/custom-header.php
Normal file → Executable file
0
inc/custom-header.php
Normal file → Executable file
2
inc/customizer.php
Normal file → Executable file
2
inc/customizer.php
Normal file → Executable file
|
@ -56,6 +56,6 @@ function _s_customize_partial_blogdescription() {
|
||||||
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
|
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
|
||||||
*/
|
*/
|
||||||
function _s_customize_preview_js() {
|
function _s_customize_preview_js() {
|
||||||
wp_enqueue_script( '_s-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
|
wp_enqueue_script( '_s-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), _S_VERSION, true );
|
||||||
}
|
}
|
||||||
add_action( 'customize_preview_init', '_s_customize_preview_js' );
|
add_action( 'customize_preview_init', '_s_customize_preview_js' );
|
||||||
|
|
2
inc/jetpack.php
Normal file → Executable file
2
inc/jetpack.php
Normal file → Executable file
|
@ -50,6 +50,7 @@ function _s_jetpack_setup() {
|
||||||
}
|
}
|
||||||
add_action( 'after_setup_theme', '_s_jetpack_setup' );
|
add_action( 'after_setup_theme', '_s_jetpack_setup' );
|
||||||
|
|
||||||
|
if ( ! function_exists( '_s_infinite_scroll_render' ) ) :
|
||||||
/**
|
/**
|
||||||
* Custom render function for Infinite Scroll.
|
* Custom render function for Infinite Scroll.
|
||||||
*/
|
*/
|
||||||
|
@ -63,3 +64,4 @@ function _s_infinite_scroll_render() {
|
||||||
endif;
|
endif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
endif;
|
||||||
|
|
0
inc/template-functions.php
Normal file → Executable file
0
inc/template-functions.php
Normal file → Executable file
0
inc/template-tags.php
Normal file → Executable file
0
inc/template-tags.php
Normal file → Executable file
0
inc/woocommerce.php
Normal file → Executable file
0
inc/woocommerce.php
Normal file → Executable file
0
inc/wpcom.php
Normal file → Executable file
0
inc/wpcom.php
Normal file → Executable file
0
index.php
Normal file → Executable file
0
index.php
Normal file → Executable file
0
js/customizer.js
Normal file → Executable file
0
js/customizer.js
Normal file → Executable file
13
js/navigation.js
Normal file → Executable file
13
js/navigation.js
Normal file → Executable file
|
@ -7,14 +7,14 @@
|
||||||
( function() {
|
( function() {
|
||||||
const siteNavigation = document.getElementById( 'site-navigation' );
|
const siteNavigation = document.getElementById( 'site-navigation' );
|
||||||
|
|
||||||
// Return early if the navigation don't exist.
|
// Return early if the navigation doesn't exist.
|
||||||
if ( ! siteNavigation ) {
|
if ( ! siteNavigation ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
|
const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
|
||||||
|
|
||||||
// Return early if the button don't exist.
|
// Return early if the button doesn't exist.
|
||||||
if ( 'undefined' === typeof button ) {
|
if ( 'undefined' === typeof button ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -27,13 +27,14 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( ! menu.classList.contains( 'nav-menu' ) ) {
|
// Add primary-menu class if it doesn't exist
|
||||||
menu.classList.add( 'nav-menu' );
|
if ( ! menu.classList.contains( 'primary-menu' ) ) {
|
||||||
|
menu.classList.add( 'primary-menu' );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
|
// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
|
||||||
button.addEventListener( 'click', function() {
|
button.addEventListener( 'click', function() {
|
||||||
siteNavigation.classList.toggle( 'toggled' );
|
menu.classList.toggle( 'toggled' );
|
||||||
|
|
||||||
if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
|
if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
|
||||||
button.setAttribute( 'aria-expanded', 'false' );
|
button.setAttribute( 'aria-expanded', 'false' );
|
||||||
|
@ -47,7 +48,7 @@
|
||||||
const isClickInside = siteNavigation.contains( event.target );
|
const isClickInside = siteNavigation.contains( event.target );
|
||||||
|
|
||||||
if ( ! isClickInside ) {
|
if ( ! isClickInside ) {
|
||||||
siteNavigation.classList.remove( 'toggled' );
|
menu.classList.remove( 'toggled' );
|
||||||
button.setAttribute( 'aria-expanded', 'false' );
|
button.setAttribute( 'aria-expanded', 'false' );
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
92
js/theme-toggle.js
Normal file
92
js/theme-toggle.js
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
/**
|
||||||
|
* Theme toggle functionality
|
||||||
|
* Handles light/dark mode switching
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Get theme preference from localStorage or system preference
|
||||||
|
function getThemePreference() {
|
||||||
|
const stored = localStorage.getItem('achille-press-theme');
|
||||||
|
if (stored) {
|
||||||
|
return stored;
|
||||||
|
}
|
||||||
|
|
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set theme
|
||||||
|
function setTheme(theme) {
|
||||||
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
|
localStorage.setItem('achille-press-theme', theme);
|
||||||
|
|
||||||
|
// Update meta theme-color for mobile browsers
|
||||||
|
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
|
||||||
|
if (metaThemeColor) {
|
||||||
|
metaThemeColor.setAttribute('content', theme === 'dark' ? '#1a1a1a' : '#ffffff');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle theme
|
||||||
|
function toggleTheme() {
|
||||||
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||||||
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
|
setTheme(newTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize theme on page load
|
||||||
|
function initTheme() {
|
||||||
|
const theme = getThemePreference();
|
||||||
|
setTheme(theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setup theme toggle button
|
||||||
|
function setupThemeToggle() {
|
||||||
|
const themeToggle = document.querySelector('.theme-toggle');
|
||||||
|
if (themeToggle) {
|
||||||
|
themeToggle.addEventListener('click', toggleTheme);
|
||||||
|
|
||||||
|
// Add keyboard support
|
||||||
|
themeToggle.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
toggleTheme();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for system theme changes
|
||||||
|
function setupSystemThemeListener() {
|
||||||
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
mediaQuery.addListener(function(e) {
|
||||||
|
// Only update if user hasn't manually set a preference
|
||||||
|
if (!localStorage.getItem('achille-press-theme')) {
|
||||||
|
setTheme(e.matches ? 'dark' : 'light');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize everything when DOM is ready
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initTheme();
|
||||||
|
setupThemeToggle();
|
||||||
|
setupSystemThemeListener();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
initTheme();
|
||||||
|
setupThemeToggle();
|
||||||
|
setupSystemThemeListener();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add meta theme-color if it doesn't exist
|
||||||
|
if (!document.querySelector('meta[name="theme-color"]')) {
|
||||||
|
const meta = document.createElement('meta');
|
||||||
|
meta.name = 'theme-color';
|
||||||
|
meta.content = '#ffffff';
|
||||||
|
document.head.appendChild(meta);
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
0
languages/_s.pot
Normal file → Executable file
0
languages/_s.pot
Normal file → Executable file
0
languages/readme.txt
Normal file → Executable file
0
languages/readme.txt
Normal file → Executable file
14
package.json
Normal file → Executable file
14
package.json
Normal file → Executable file
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"name": "underscores",
|
"name": "achille-press",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.",
|
"description": "Mon thème perso basé sur underscores.",
|
||||||
"author": "Automattic Theme Team",
|
"author": "Achille Toupin",
|
||||||
"license": "GPL-2.0-or-later",
|
"license": "GPL-2.0-or-later",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"WordPress",
|
"WordPress",
|
||||||
|
@ -17,10 +17,10 @@
|
||||||
"url": "https://github.com/Automattic/_s/issues"
|
"url": "https://github.com/Automattic/_s/issues"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@wordpress/scripts": "^9.0.0",
|
"@wordpress/scripts": "^19.2.2",
|
||||||
"dir-archiver": "^1.1.1",
|
"dir-archiver": "^1.1.1",
|
||||||
"node-sass": "^4.14.0",
|
"node-sass": "^7.0.1",
|
||||||
"rtlcss": "^2.5.0"
|
"rtlcss": "^3.5.0"
|
||||||
},
|
},
|
||||||
"rtlcssConfig": {
|
"rtlcssConfig": {
|
||||||
"options": {
|
"options": {
|
||||||
|
@ -41,6 +41,6 @@
|
||||||
"compile:rtl": "rtlcss style.css style-rtl.css",
|
"compile:rtl": "rtlcss style.css style-rtl.css",
|
||||||
"lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
|
"lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
|
||||||
"lint:js": "wp-scripts lint-js 'js/*.js'",
|
"lint:js": "wp-scripts lint-js 'js/*.js'",
|
||||||
"bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map"
|
"bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map yarn.lock"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
7
page.php
Normal file → Executable file
7
page.php
Normal file → Executable file
|
@ -9,12 +9,13 @@
|
||||||
*
|
*
|
||||||
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
|
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
|
||||||
*
|
*
|
||||||
* @package _s
|
* @package Achille_Press
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
get_header();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
<div class="content-wrapper">
|
||||||
<main id="primary" class="site-main">
|
<main id="primary" class="site-main">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
@ -33,6 +34,8 @@ get_header();
|
||||||
|
|
||||||
</main><!-- #main -->
|
</main><!-- #main -->
|
||||||
|
|
||||||
|
<?php get_sidebar(); ?>
|
||||||
|
</div><!-- .content-wrapper -->
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
get_sidebar();
|
|
||||||
get_footer();
|
get_footer();
|
||||||
|
|
4
phpcs.xml.dist
Normal file → Executable file
4
phpcs.xml.dist
Normal file → Executable file
|
@ -25,10 +25,10 @@
|
||||||
<!-- Strip the filepaths down to the relevant bit. -->
|
<!-- Strip the filepaths down to the relevant bit. -->
|
||||||
<arg name="basepath" value="./"/>
|
<arg name="basepath" value="./"/>
|
||||||
|
|
||||||
<!-- Check up to 8 files simultanously. -->
|
<!-- Check up to 8 files simultaneously. -->
|
||||||
<arg name="parallel" value="8"/>
|
<arg name="parallel" value="8"/>
|
||||||
|
|
||||||
<!-- Only check the PHP files. JS, and CSS files are checked separately with @wordpress/scripts package. -->
|
<!-- Check PHP files only. JavaScript and CSS files are checked separately using the @wordpress/scripts package. -->
|
||||||
<arg name="extensions" value="php"/>
|
<arg name="extensions" value="php"/>
|
||||||
|
|
||||||
<!-- Check all files in this directory and the directories below it. -->
|
<!-- Check all files in this directory and the directories below it. -->
|
||||||
|
|
0
readme.txt
Normal file → Executable file
0
readme.txt
Normal file → Executable file
1
sass/abstracts/_abstracts.scss
Normal file → Executable file
1
sass/abstracts/_abstracts.scss
Normal file → Executable file
|
@ -2,4 +2,5 @@
|
||||||
@import "variables/typography";
|
@import "variables/typography";
|
||||||
@import "variables/structure";
|
@import "variables/structure";
|
||||||
@import "variables/columns";
|
@import "variables/columns";
|
||||||
|
@import "variables/custom-properties";
|
||||||
@import "mixins/mixins";
|
@import "mixins/mixins";
|
||||||
|
|
0
sass/abstracts/mixins/_mixins.scss
Normal file → Executable file
0
sass/abstracts/mixins/_mixins.scss
Normal file → Executable file
74
sass/abstracts/variables/_colors.scss
Normal file → Executable file
74
sass/abstracts/variables/_colors.scss
Normal file → Executable file
|
@ -1,20 +1,58 @@
|
||||||
$color__background-body: #fff;
|
// PaperMod inspired color palette
|
||||||
$color__background-screen: #f1f1f1;
|
// Light theme colors
|
||||||
$color__background-hr: #ccc;
|
$color__background-body: #ffffff;
|
||||||
$color__background-button: #e6e6e6;
|
$color__background-screen: #f8f9fa;
|
||||||
$color__background-pre: #eee;
|
$color__background-hr: #e9ecef;
|
||||||
$color__background-ins: #fff9c0;
|
$color__background-button: #6c757d;
|
||||||
|
$color__background-pre: #f8f9fa;
|
||||||
|
$color__background-ins: #fff3cd;
|
||||||
|
$color__background-card: #ffffff;
|
||||||
|
$color__background-header: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
$color__text-screen: #21759b;
|
// Dark theme colors (CSS custom properties will be used for theme switching)
|
||||||
$color__text-input: #666;
|
$color__dark-background-body: #1a1a1a;
|
||||||
$color__text-input-focus: #111;
|
$color__dark-background-screen: #2d2d2d;
|
||||||
$color__link: #4169e1; //royalblue
|
$color__dark-background-card: #212529;
|
||||||
$color__link-visited: #800080; //purple
|
$color__dark-background-header: rgba(26, 26, 26, 0.95);
|
||||||
$color__link-hover: #191970; //midnightblue
|
|
||||||
$color__text-main: #404040;
|
|
||||||
|
|
||||||
$color__border-button: #ccc #ccc #bbb;
|
// Text colors
|
||||||
$color__border-button-hover: #ccc #bbb #aaa;
|
$color__text-screen: #495057;
|
||||||
$color__border-button-focus: #aaa #bbb #bbb;
|
$color__text-input: #495057;
|
||||||
$color__border-input: #ccc;
|
$color__text-input-focus: #212529;
|
||||||
$color__border-abbr: #666;
|
$color__text-main: #212529;
|
||||||
|
$color__text-muted: #6c757d;
|
||||||
|
$color__text-light: #868e96;
|
||||||
|
|
||||||
|
// Dark theme text
|
||||||
|
$color__dark-text-main: #f8f9fa;
|
||||||
|
$color__dark-text-muted: #adb5bd;
|
||||||
|
$color__dark-text-light: #6c757d;
|
||||||
|
|
||||||
|
// Link colors
|
||||||
|
$color__link: #0d6efd;
|
||||||
|
$color__link-visited: #6f42c1;
|
||||||
|
$color__link-hover: #0a58ca;
|
||||||
|
|
||||||
|
// Dark theme links
|
||||||
|
$color__dark-link: #6ea8fe;
|
||||||
|
$color__dark-link-visited: #a370f7;
|
||||||
|
$color__dark-link-hover: #9ec5fe;
|
||||||
|
|
||||||
|
// Border colors
|
||||||
|
$color__border-button: #6c757d;
|
||||||
|
$color__border-button-hover: #5c636a;
|
||||||
|
$color__border-button-focus: #565e64;
|
||||||
|
$color__border-input: #ced4da;
|
||||||
|
$color__border-abbr: #495057;
|
||||||
|
$color__border-main: #dee2e6;
|
||||||
|
|
||||||
|
// Dark theme borders
|
||||||
|
$color__dark-border-main: #495057;
|
||||||
|
$color__dark-border-input: #495057;
|
||||||
|
|
||||||
|
// Accent colors
|
||||||
|
$color__accent-primary: #0d6efd;
|
||||||
|
$color__accent-success: #198754;
|
||||||
|
$color__accent-warning: #ffc107;
|
||||||
|
$color__accent-danger: #dc3545;
|
||||||
|
$color__accent-info: #0dcaf0;
|
||||||
|
|
0
sass/abstracts/variables/_columns.scss
Normal file → Executable file
0
sass/abstracts/variables/_columns.scss
Normal file → Executable file
74
sass/abstracts/variables/_custom-properties.scss
Normal file
74
sass/abstracts/variables/_custom-properties.scss
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
// CSS Custom Properties for theme switching
|
||||||
|
// This allows dynamic switching between light and dark themes
|
||||||
|
|
||||||
|
:root {
|
||||||
|
// Light theme (default)
|
||||||
|
--color-bg-primary: #{$color__background-body};
|
||||||
|
--color-bg-secondary: #{$color__background-screen};
|
||||||
|
--color-bg-card: #{$color__background-card};
|
||||||
|
--color-bg-header: #{$color__background-header};
|
||||||
|
|
||||||
|
--color-text-primary: #{$color__text-main};
|
||||||
|
--color-text-secondary: #{$color__text-muted};
|
||||||
|
--color-text-tertiary: #{$color__text-light};
|
||||||
|
|
||||||
|
--color-link: #{$color__link};
|
||||||
|
--color-link-visited: #{$color__link-visited};
|
||||||
|
--color-link-hover: #{$color__link-hover};
|
||||||
|
|
||||||
|
--color-border-primary: #{$color__border-main};
|
||||||
|
--color-border-secondary: #{$color__border-input};
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||||
|
|
||||||
|
// Transitions
|
||||||
|
--transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
--transition-fast: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dark theme
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--color-bg-primary: #{$color__dark-background-body};
|
||||||
|
--color-bg-secondary: #{$color__dark-background-screen};
|
||||||
|
--color-bg-card: #{$color__dark-background-card};
|
||||||
|
--color-bg-header: #{$color__dark-background-header};
|
||||||
|
|
||||||
|
--color-text-primary: #{$color__dark-text-main};
|
||||||
|
--color-text-secondary: #{$color__dark-text-muted};
|
||||||
|
--color-text-tertiary: #{$color__dark-text-light};
|
||||||
|
|
||||||
|
--color-link: #{$color__dark-link};
|
||||||
|
--color-link-visited: #{$color__dark-link-visited};
|
||||||
|
--color-link-hover: #{$color__dark-link-hover};
|
||||||
|
|
||||||
|
--color-border-primary: #{$color__dark-border-main};
|
||||||
|
--color-border-secondary: #{$color__dark-border-input};
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prefers dark color scheme
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
--color-bg-primary: #{$color__dark-background-body};
|
||||||
|
--color-bg-secondary: #{$color__dark-background-screen};
|
||||||
|
--color-bg-card: #{$color__dark-background-card};
|
||||||
|
--color-bg-header: #{$color__dark-background-header};
|
||||||
|
|
||||||
|
--color-text-primary: #{$color__dark-text-main};
|
||||||
|
--color-text-secondary: #{$color__dark-text-muted};
|
||||||
|
--color-text-tertiary: #{$color__dark-text-light};
|
||||||
|
|
||||||
|
--color-link: #{$color__dark-link};
|
||||||
|
--color-link-visited: #{$color__dark-link-visited};
|
||||||
|
--color-link-hover: #{$color__dark-link-hover};
|
||||||
|
|
||||||
|
--color-border-primary: #{$color__dark-border-main};
|
||||||
|
--color-border-secondary: #{$color__dark-border-input};
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
0
sass/abstracts/variables/_structure.scss
Normal file → Executable file
0
sass/abstracts/variables/_structure.scss
Normal file → Executable file
33
sass/abstracts/variables/_typography.scss
Normal file → Executable file
33
sass/abstracts/variables/_typography.scss
Normal file → Executable file
|
@ -1,7 +1,30 @@
|
||||||
|
// PaperMod inspired typography
|
||||||
// stylelint-disable value-keyword-case
|
// stylelint-disable value-keyword-case
|
||||||
$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||||
|
$font__code: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
|
||||||
|
$font__pre: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
|
||||||
// stylelint-enable value-keyword-case
|
// stylelint-enable value-keyword-case
|
||||||
$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
|
||||||
$font__pre: "Courier 10 Pitch", courier, monospace;
|
// Font sizes
|
||||||
$font__line-height-body: 1.5;
|
$font__size-base: 16px;
|
||||||
$font__line-height-pre: 1.6;
|
$font__size-small: 14px;
|
||||||
|
$font__size-large: 18px;
|
||||||
|
$font__size-h1: 2.5rem;
|
||||||
|
$font__size-h2: 2rem;
|
||||||
|
$font__size-h3: 1.75rem;
|
||||||
|
$font__size-h4: 1.5rem;
|
||||||
|
$font__size-h5: 1.25rem;
|
||||||
|
$font__size-h6: 1rem;
|
||||||
|
|
||||||
|
// Line heights
|
||||||
|
$font__line-height-body: 1.6;
|
||||||
|
$font__line-height-heading: 1.3;
|
||||||
|
$font__line-height-pre: 1.4;
|
||||||
|
|
||||||
|
// Font weights
|
||||||
|
$font__weight-light: 300;
|
||||||
|
$font__weight-normal: 400;
|
||||||
|
$font__weight-medium: 500;
|
||||||
|
$font__weight-semibold: 600;
|
||||||
|
$font__weight-bold: 700;
|
||||||
|
|
0
sass/base/_base.scss
Normal file → Executable file
0
sass/base/_base.scss
Normal file → Executable file
10
sass/base/elements/_body.scss
Normal file → Executable file
10
sass/base/elements/_body.scss
Normal file → Executable file
|
@ -1,3 +1,11 @@
|
||||||
body {
|
body {
|
||||||
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
background: var(--color-bg-primary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-family: $font__main;
|
||||||
|
font-size: $font__size-base;
|
||||||
|
line-height: $font__line-height-body;
|
||||||
|
font-weight: $font__weight-normal;
|
||||||
|
transition: var(--transition-default);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
0
sass/base/elements/_buttons.scss
Normal file → Executable file
0
sass/base/elements/_buttons.scss
Normal file → Executable file
0
sass/base/elements/_fields.scss
Normal file → Executable file
0
sass/base/elements/_fields.scss
Normal file → Executable file
0
sass/base/elements/_hr.scss
Normal file → Executable file
0
sass/base/elements/_hr.scss
Normal file → Executable file
24
sass/base/elements/_links.scss
Normal file → Executable file
24
sass/base/elements/_links.scss
Normal file → Executable file
|
@ -1,22 +1,38 @@
|
||||||
a {
|
a {
|
||||||
color: $color__link;
|
color: var(--color-link);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $color__link-visited;
|
color: var(--color-link-visited);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: $color__link-hover;
|
color: var(--color-link-hover);
|
||||||
|
border-bottom-color: var(--color-link-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: thin dotted;
|
outline: 2px solid var(--color-link);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove underline for navigation links
|
||||||
|
.main-navigation &,
|
||||||
|
.site-branding & {
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
0
sass/base/elements/_lists.scss
Normal file → Executable file
0
sass/base/elements/_lists.scss
Normal file → Executable file
0
sass/base/elements/_media.scss
Normal file → Executable file
0
sass/base/elements/_media.scss
Normal file → Executable file
0
sass/base/elements/_tables.scss
Normal file → Executable file
0
sass/base/elements/_tables.scss
Normal file → Executable file
0
sass/base/typography/_copy.scss
Normal file → Executable file
0
sass/base/typography/_copy.scss
Normal file → Executable file
36
sass/base/typography/_headings.scss
Normal file → Executable file
36
sass/base/typography/_headings.scss
Normal file → Executable file
|
@ -5,4 +5,40 @@ h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
font-family: $font__heading;
|
||||||
|
font-weight: $font__weight-semibold;
|
||||||
|
line-height: $font__line-height-heading;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: $font__size-h1;
|
||||||
|
font-weight: $font__weight-bold;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: $font__size-h2;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: $font__size-h3;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: $font__size-h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: $font__size-h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: $font__size-h6;
|
||||||
|
font-weight: $font__weight-medium;
|
||||||
}
|
}
|
||||||
|
|
0
sass/base/typography/_typography.scss
Normal file → Executable file
0
sass/base/typography/_typography.scss
Normal file → Executable file
0
sass/components/_components.scss
Normal file → Executable file
0
sass/components/_components.scss
Normal file → Executable file
0
sass/components/comments/_comments.scss
Normal file → Executable file
0
sass/components/comments/_comments.scss
Normal file → Executable file
293
sass/components/content/_posts-and-pages.scss
Normal file → Executable file
293
sass/components/content/_posts-and-pages.scss
Normal file → Executable file
|
@ -1,23 +1,298 @@
|
||||||
|
// PaperMod inspired post and page styles
|
||||||
.sticky {
|
.sticky {
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '📌';
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post,
|
.post,
|
||||||
.page {
|
.page {
|
||||||
margin: 0 0 1.5em;
|
margin: 0 0 2rem;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: var(--transition-default);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Archive/blog page card layout
|
||||||
|
.home &,
|
||||||
|
.archive &,
|
||||||
|
.search-results & {
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
|
||||||
|
.entry-header {
|
||||||
|
padding: 1.5rem 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content,
|
||||||
|
.entry-summary {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-footer {
|
||||||
|
padding: 0 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Single post/page layout
|
||||||
|
.single &,
|
||||||
|
.page & {
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
.entry-title {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
line-height: $font__line-height-heading;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Different sizes for different contexts
|
||||||
|
.home &,
|
||||||
|
.archive &,
|
||||||
|
.search-results & {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single &,
|
||||||
|
.page & {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
.posted-on,
|
||||||
|
.byline,
|
||||||
|
.cat-links,
|
||||||
|
.tags-links,
|
||||||
|
.comments-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icons before meta items (using pseudo-elements)
|
||||||
|
.posted-on::before {
|
||||||
|
content: '📅';
|
||||||
|
}
|
||||||
|
|
||||||
|
.byline::before {
|
||||||
|
content: '👤';
|
||||||
|
}
|
||||||
|
|
||||||
|
.cat-links::before {
|
||||||
|
content: '📁';
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-links::before {
|
||||||
|
content: '🏷️';
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-link::before {
|
||||||
|
content: '💬';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content,
|
||||||
|
.entry-summary {
|
||||||
|
margin: 1rem 0;
|
||||||
|
line-height: $font__line-height-body;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Better spacing for content elements
|
||||||
|
> * {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Improved blockquote styling
|
||||||
|
blockquote {
|
||||||
|
margin: 2rem 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-left: 4px solid var(--color-link);
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cite {
|
||||||
|
display: block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '— ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code styling
|
||||||
|
code {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: $font__code;
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow-x: auto;
|
||||||
|
line-height: $font__line-height-pre;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-footer {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
|
||||||
|
.cat-links,
|
||||||
|
.tags-links {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-link);
|
||||||
|
color: var(--color-bg-primary);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
margin: 1.5rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-links {
|
||||||
|
clear: both;
|
||||||
|
margin: 2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-link);
|
||||||
|
color: var(--color-bg-primary);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
background: var(--color-link);
|
||||||
|
color: var(--color-bg-primary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.updated:not(.published) {
|
.updated:not(.published) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content,
|
// Reading time indicator
|
||||||
.entry-content,
|
.reading-time {
|
||||||
.entry-summary {
|
font-size: 0.875rem;
|
||||||
margin: 1.5em 0 0;
|
color: var(--color-text-secondary);
|
||||||
}
|
|
||||||
|
|
||||||
.page-links {
|
&::before {
|
||||||
clear: both;
|
content: '⏱️ ';
|
||||||
margin: 0 0 1.5em;
|
}
|
||||||
}
|
}
|
||||||
|
|
0
sass/components/media/_captions.scss
Normal file → Executable file
0
sass/components/media/_captions.scss
Normal file → Executable file
0
sass/components/media/_galleries.scss
Normal file → Executable file
0
sass/components/media/_galleries.scss
Normal file → Executable file
0
sass/components/media/_media.scss
Normal file → Executable file
0
sass/components/media/_media.scss
Normal file → Executable file
102
sass/components/navigation/_footer.scss
Normal file
102
sass/components/navigation/_footer.scss
Normal file
|
@ -0,0 +1,102 @@
|
||||||
|
// PaperMod inspired footer styles
|
||||||
|
.site-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem 1rem;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 1.5rem 1rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-widgets {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-widget {
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: $font__weight-semibold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-credit {
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
307
sass/components/navigation/_header.scss
Normal file
307
sass/components/navigation/_header.scss
Normal file
|
@ -0,0 +1,307 @@
|
||||||
|
// PaperMod inspired header styles
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: var(--color-bg-header);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
|
transition: var(--transition-default);
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-branding {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: $font__weight-bold;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-description {
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-logo {
|
||||||
|
display: block;
|
||||||
|
max-height: 50px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation styles
|
||||||
|
.main-navigation {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-text-primary);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle[aria-expanded="true"] & {
|
||||||
|
span:nth-child(1) {
|
||||||
|
transform: rotate(45deg) translate(5px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(3) {
|
||||||
|
transform: rotate(-45deg) translate(7px, -6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
min-width: 200px;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
&.toggled {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-weight: $font__weight-medium;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current_page_item > a,
|
||||||
|
&.current-menu-item > a {
|
||||||
|
color: var(--color-link);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-link);
|
||||||
|
border-radius: 1px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdown menus
|
||||||
|
.sub-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
min-width: 200px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
position: static;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover .sub-menu {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme toggle button
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 2px solid var(--color-link);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.moon-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
[data-theme="dark"] & {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sun-icon {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
[data-theme="dark"] & {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skip link
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
top: 1rem;
|
||||||
|
z-index: 999999;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: var(--color-text-primary);
|
||||||
|
color: var(--color-bg-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
10
sass/components/navigation/_navigation.scss
Normal file → Executable file
10
sass/components/navigation/_navigation.scss
Normal file → Executable file
|
@ -1,6 +1,9 @@
|
||||||
.main-navigation {
|
// Import modern navigation styles
|
||||||
display: block;
|
@import "header";
|
||||||
width: 100%;
|
@import "footer";
|
||||||
|
|
||||||
|
// Legacy navigation styles (can be removed after testing)
|
||||||
|
/*
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -107,3 +110,4 @@
|
||||||
flex: 1 0 50%;
|
flex: 1 0 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
0
sass/components/widgets/_widgets.scss
Normal file → Executable file
0
sass/components/widgets/_widgets.scss
Normal file → Executable file
0
sass/generic/_box-sizing.scss
Normal file → Executable file
0
sass/generic/_box-sizing.scss
Normal file → Executable file
0
sass/generic/_normalize.scss
Normal file → Executable file
0
sass/generic/_normalize.scss
Normal file → Executable file
104
sass/layouts/_content-layout.scss
Normal file
104
sass/layouts/_content-layout.scss
Normal file
|
@ -0,0 +1,104 @@
|
||||||
|
// PaperMod inspired layout styles
|
||||||
|
.content-wrapper {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 300px;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-main {
|
||||||
|
min-width: 0; // Prevent grid blowout
|
||||||
|
|
||||||
|
// Full width on pages without sidebar
|
||||||
|
.no-sidebar & {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Single posts and pages
|
||||||
|
.single &,
|
||||||
|
.page & {
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
.no-sidebar & {
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Archive and blog layouts
|
||||||
|
.home,
|
||||||
|
.archive,
|
||||||
|
.search-results {
|
||||||
|
.content-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-main {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
// Card grid for archive pages
|
||||||
|
&.card-grid {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Site container
|
||||||
|
#page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--color-bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skip to content
|
||||||
|
.skip-link {
|
||||||
|
&.screen-reader-text {
|
||||||
|
position: absolute !important;
|
||||||
|
clip-path: inset(50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: var(--color-text-primary);
|
||||||
|
color: var(--color-bg-primary);
|
||||||
|
clip-path: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: $font__weight-bold;
|
||||||
|
height: auto;
|
||||||
|
left: 1rem;
|
||||||
|
line-height: normal;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
top: 1rem;
|
||||||
|
width: auto;
|
||||||
|
z-index: 100000;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
0
sass/layouts/_content-sidebar.scss
Normal file → Executable file
0
sass/layouts/_content-sidebar.scss
Normal file → Executable file
0
sass/layouts/_no-sidebar.scss
Normal file → Executable file
0
sass/layouts/_no-sidebar.scss
Normal file → Executable file
0
sass/layouts/_sidebar-content.scss
Normal file → Executable file
0
sass/layouts/_sidebar-content.scss
Normal file → Executable file
0
sass/plugins/jetpack/_infinite-scroll.scss
Normal file → Executable file
0
sass/plugins/jetpack/_infinite-scroll.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_checkout.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_checkout.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_components.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_components.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_products.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_products.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_single-product.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_single-product.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_tables.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_tables.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_widgets.scss
Normal file → Executable file
0
sass/plugins/woocommerce/_widgets.scss
Normal file → Executable file
26
sass/style.scss
Normal file → Executable file
26
sass/style.scss
Normal file → Executable file
|
@ -1,21 +1,21 @@
|
||||||
/*!
|
/*!
|
||||||
Theme Name: _s
|
Theme Name: Achille Press
|
||||||
Theme URI: https://underscores.me/
|
Theme URI: https://github.com/your-username/achille-press
|
||||||
Author: Automattic
|
Author: Your Name
|
||||||
Author URI: https://automattic.com/
|
Author URI: https://yourwebsite.com/
|
||||||
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
|
Description: A fast, clean, and responsive WordPress theme inspired by the Hugo PaperMod theme. Features a minimal design with excellent typography, light/dark mode toggle, and optimized performance for modern websites.
|
||||||
Version: 1.0.0
|
Version: 1.0.0
|
||||||
Tested up to: 5.4
|
Tested up to: 6.4
|
||||||
Requires PHP: 5.6
|
Requires PHP: 7.4
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: LICENSE
|
License URI: LICENSE
|
||||||
Text Domain: _s
|
Text Domain: achille-press
|
||||||
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
|
Tags: blog, clean, minimal, responsive, dark-mode, light-mode, accessibility-ready, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns
|
||||||
|
|
||||||
This theme, like WordPress, is licensed under the GPL.
|
This theme is inspired by Hugo PaperMod and built on Underscores foundation.
|
||||||
Use it to make something cool, have fun, and share what you've learned.
|
Licensed under the GPL v2 or later.
|
||||||
|
|
||||||
_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
|
Achille Press is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
|
||||||
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
||||||
|
|
||||||
Normalizing styles have been helped along thanks to the fine work of
|
Normalizing styles have been helped along thanks to the fine work of
|
||||||
|
@ -73,6 +73,8 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Layouts
|
# Layouts
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
@import "layouts/content-layout";
|
||||||
|
@import "layouts/no-sidebar";
|
||||||
// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
|
// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
|
||||||
// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
|
// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
|
||||||
|
|
||||||
|
|
0
sass/utilities/_accessibility.scss
Normal file → Executable file
0
sass/utilities/_accessibility.scss
Normal file → Executable file
0
sass/utilities/_alignments.scss
Normal file → Executable file
0
sass/utilities/_alignments.scss
Normal file → Executable file
0
sass/woocommerce.scss
Normal file → Executable file
0
sass/woocommerce.scss
Normal file → Executable file
0
screenshot.png
Normal file → Executable file
0
screenshot.png
Normal file → Executable file
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
0
search.php
Normal file → Executable file
0
search.php
Normal file → Executable file
0
sidebar.php
Normal file → Executable file
0
sidebar.php
Normal file → Executable file
0
single.php
Normal file → Executable file
0
single.php
Normal file → Executable file
0
style-rtl.css
Normal file → Executable file
0
style-rtl.css
Normal file → Executable file
555
style.css
Normal file → Executable file
555
style.css
Normal file → Executable file
|
@ -1,21 +1,21 @@
|
||||||
/*!
|
/*!
|
||||||
Theme Name: _s
|
Theme Name: Achille Press
|
||||||
Theme URI: https://underscores.me/
|
Theme URI: https://github.com/your-username/achille-press
|
||||||
Author: Automattic
|
Author: Your Name
|
||||||
Author URI: https://automattic.com/
|
Author URI: https://yourwebsite.com/
|
||||||
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
|
Description: A fast, clean, and responsive WordPress theme inspired by the Hugo PaperMod theme. Features a minimal design with excellent typography, light/dark mode toggle, and optimized performance for modern websites.
|
||||||
Version: 1.0.0
|
Version: 1.0.0
|
||||||
Tested up to: 5.4
|
Tested up to: 6.4
|
||||||
Requires PHP: 5.6
|
Requires PHP: 7.4
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: LICENSE
|
License URI: LICENSE
|
||||||
Text Domain: _s
|
Text Domain: achille-press
|
||||||
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
|
Tags: blog, clean, minimal, responsive, dark-mode, light-mode, accessibility-ready, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns
|
||||||
|
|
||||||
This theme, like WordPress, is licensed under the GPL.
|
This theme is inspired by Hugo PaperMod and built on Underscores foundation.
|
||||||
Use it to make something cool, have fun, and share what you've learned.
|
Licensed under the GPL v2 or later.
|
||||||
|
|
||||||
_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
|
Achille Press is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
|
||||||
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
||||||
|
|
||||||
Normalizing styles have been helped along thanks to the fine work of
|
Normalizing styles have been helped along thanks to the fine work of
|
||||||
|
@ -967,3 +967,534 @@ textarea {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# PaperMod Inspired Enhancements
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* CSS Custom Properties for Theme Switching */
|
||||||
|
:root {
|
||||||
|
--color-bg-primary: #ffffff;
|
||||||
|
--color-bg-secondary: #f8f9fa;
|
||||||
|
--color-bg-card: #ffffff;
|
||||||
|
--color-bg-header: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--color-text-primary: #212529;
|
||||||
|
--color-text-secondary: #6c757d;
|
||||||
|
--color-text-tertiary: #868e96;
|
||||||
|
|
||||||
|
--color-link: #0d6efd;
|
||||||
|
--color-link-visited: #6f42c1;
|
||||||
|
--color-link-hover: #0a58ca;
|
||||||
|
|
||||||
|
--color-border-primary: #dee2e6;
|
||||||
|
--color-border-secondary: #ced4da;
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||||
|
|
||||||
|
--transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
--transition-fast: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--color-bg-primary: #1a1a1a;
|
||||||
|
--color-bg-secondary: #2d2d2d;
|
||||||
|
--color-bg-card: #212529;
|
||||||
|
--color-bg-header: rgba(26, 26, 26, 0.95);
|
||||||
|
|
||||||
|
--color-text-primary: #f8f9fa;
|
||||||
|
--color-text-secondary: #adb5bd;
|
||||||
|
--color-text-tertiary: #6c757d;
|
||||||
|
|
||||||
|
--color-link: #6ea8fe;
|
||||||
|
--color-link-visited: #a370f7;
|
||||||
|
--color-link-hover: #9ec5fe;
|
||||||
|
|
||||||
|
--color-border-primary: #495057;
|
||||||
|
--color-border-secondary: #495057;
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
--color-bg-primary: #1a1a1a;
|
||||||
|
--color-bg-secondary: #2d2d2d;
|
||||||
|
--color-bg-card: #212529;
|
||||||
|
--color-bg-header: rgba(26, 26, 26, 0.95);
|
||||||
|
|
||||||
|
--color-text-primary: #f8f9fa;
|
||||||
|
--color-text-secondary: #adb5bd;
|
||||||
|
--color-text-tertiary: #6c757d;
|
||||||
|
|
||||||
|
--color-link: #6ea8fe;
|
||||||
|
--color-link-visited: #a370f7;
|
||||||
|
--color-link-hover: #9ec5fe;
|
||||||
|
|
||||||
|
--color-border-primary: #495057;
|
||||||
|
--color-border-secondary: #495057;
|
||||||
|
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Body Styles */
|
||||||
|
body {
|
||||||
|
background: var(--color-bg-primary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-weight: 400;
|
||||||
|
transition: var(--transition-default);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Link Styles */
|
||||||
|
a {
|
||||||
|
color: var(--color-link);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--color-link-visited);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus,
|
||||||
|
a:active {
|
||||||
|
color: var(--color-link-hover);
|
||||||
|
border-bottom-color: var(--color-link-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: 2px solid var(--color-link);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove underline for navigation links */
|
||||||
|
.main-navigation a,
|
||||||
|
.site-branding a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-navigation a:hover,
|
||||||
|
.site-branding a:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Header Styles */
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: var(--color-bg-header);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
|
transition: var(--transition-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.header-container {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-branding {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title a {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title a:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-description {
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.site-description {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Toggle Button */
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:focus {
|
||||||
|
outline: 2px solid var(--color-link);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle svg {
|
||||||
|
display: block;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle .moon-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .theme-toggle .moon-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle .sun-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .theme-toggle .sun-icon {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Navigation */
|
||||||
|
.main-navigation {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.menu-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon span {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-text-primary);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.primary-menu {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
min-width: 200px;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu.toggled {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu li a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.primary-menu li a {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu li a:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.primary-menu li a:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Post Styles */
|
||||||
|
.post,
|
||||||
|
.page {
|
||||||
|
margin: 0 0 2rem;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: var(--transition-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home .post,
|
||||||
|
.archive .post,
|
||||||
|
.search-results .post {
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home .post:hover,
|
||||||
|
.archive .post:hover,
|
||||||
|
.search-results .post:hover {
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home .entry-header,
|
||||||
|
.archive .entry-header,
|
||||||
|
.search-results .entry-header {
|
||||||
|
padding: 1.5rem 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-title {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-title a {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-title a:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home .entry-title,
|
||||||
|
.archive .entry-title,
|
||||||
|
.search-results .entry-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single .entry-title,
|
||||||
|
.page .entry-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-meta a {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-meta a:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content,
|
||||||
|
.entry-summary {
|
||||||
|
margin: 1rem 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home .entry-content,
|
||||||
|
.home .entry-summary,
|
||||||
|
.archive .entry-content,
|
||||||
|
.archive .entry-summary,
|
||||||
|
.search-results .entry-content,
|
||||||
|
.search-results .entry-summary {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Footer Styles */
|
||||||
|
.site-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-container {
|
||||||
|
padding: 1.5rem 1rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.site-info {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-info a {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-info a:hover {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout Styles */
|
||||||
|
.content-wrapper {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 300px;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.content-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-main {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-sidebar .site-main {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single .site-main,
|
||||||
|
.page .site-main {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-sidebar.single .site-main,
|
||||||
|
.no-sidebar.page .site-main {
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Container */
|
||||||
|
#page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--color-bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reading Time */
|
||||||
|
.reading-time {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-time::before {
|
||||||
|
content: '⏱️ ';
|
||||||
|
}
|
||||||
|
|
0
template-parts/content-none.php
Normal file → Executable file
0
template-parts/content-none.php
Normal file → Executable file
0
template-parts/content-page.php
Normal file → Executable file
0
template-parts/content-page.php
Normal file → Executable file
0
template-parts/content-search.php
Normal file → Executable file
0
template-parts/content-search.php
Normal file → Executable file
0
template-parts/content.php
Normal file → Executable file
0
template-parts/content.php
Normal file → Executable file
0
woocommerce.css
Normal file → Executable file
0
woocommerce.css
Normal file → Executable file
Loading…
Add table
Add a link
Reference in a new issue