Compare commits

...

3 Commits

Author SHA1 Message Date
Aadil Ayub 542f7c582e update readme 2024-05-08 15:05:52 +05:00
Aadil Ayub efbecb70d0 remove unneeded styles 2024-05-08 14:41:22 +05:00
Aadil Ayub bfa1a051e3 add layout widths and color palette 2024-05-08 14:37:53 +05:00
2 changed files with 21 additions and 94 deletions

View File

@ -1,69 +1 @@
# sample-wp-block-theme
Repo for practice task for Autonomic front-end recruitment.
**Instructions:**
- Replicate [craze.co.uk](https://craze.co.uk) as a WordPress block theme.
- Notes:
- You can use the provided 'Inter' font in `/assets/fonts/` as the main sans-serif font in use on the site.
- Similarly, you can use any monospace font in place of the MD IO typeface the website is using for monospace text.
- The breadcrumb on top doesn't need to be functionaly. You can use static text.
- You don't need to copy all of the site's content. Feel free to use placeholder text.
- Majority of the site's styling should be implemented via `theme.json`.
- The theme should have at least two templates, an index or home template, and a single page/post template.
## Running the site locally
**Note** With all methods, you'll see a white screen when you visit the local
instance, because this theme is blank! You can check things are working by
visiting the local URL before the `theme activate` step, or just go straight to
the dashboard at `/wp-admin` and start hacking.
### `wp-env`
**Note** The latest `wp-env` requires "Docker Compose V2"; if `docker compose`
gives `'compose' is not a docker command.` then run `npm -g i
@wordpress/env@8.13.0` instead of the first command.
You can launch an instance of WordPress pre-installed with this theme using the `wp-env` tool.
```sh
$ npm -g i @wordpress/env
$ cd /path/to/theme/Repo
$ wp-env start
$ wp-env run cli wp theme activate sample-wp-block-theme
```
This will launch a WordPress local instance at http://localhost:8888. You can log into the dashboard at http://localhost:8888/wp-admin with `admin` as the username and `password` as the password.
**Note:** This method assumes you already have `docker` and `docker-compose` installed locally.
### Lando
Install Lando, then:
```sh
$ lando start
$ lando wp --path=/app/web/ core install \
--title="Dev Env" \
--admin_user=admin --admin_password=admin --admin_email=admin@example.com \
--skip-email --url=https://sample-block-theme.lndo.site/
$ lando wp --path=/app/web/ theme activate sample-wp-block-theme
```
### docker-compose
Install Docker-compose, then:
```sh
$ docker-compose up -d
# wait a few seconds, run `docker-compose logs` to check start-up
$ docker-compose exec --user=user wordpress wp core install \
--title="Dev Env" \
--admin_user=admin --admin_password=admin --admin_email=admin@example.com \
--skip-email --url=http://sample-block-theme.localhost:8080
$ docker-compose exec --user=user wordpress wp theme activate sample-wp-block-theme
```
This should also work with `docker compose` (i.e. newwer Docker / Compose 2);
just replace `docker-compose` with `docker compose` in the above.
# lex-scotland-theme

View File

@ -5,34 +5,40 @@
"useRootPaddingAwareAlignments": true,
"appearanceTools": true,
"layout": {
"contentSize": "590px"
"contentSize": "1198",
"wideSize": "1368"
},
"color": {
"palette": [
{
"slug": "background",
"color": "#F3F7F6",
"color": "#FFFAFA",
"name": "Background"
},
{
"slug": "background-code",
"color": "#DEE1E0",
"name": "Background Code"
"slug": "contrast",
"color": "#000000",
"name": "Contrast"
},
{
"slug": "text",
"color": "#25211D",
"name": "Text"
"slug": "main-purple",
"color": "#722668",
"name": "Main Purple"
},
{
"slug": "secondary",
"color": "#999",
"name": "Secondary"
"slug": "washed-purple",
"color": "#D0A7C0",
"name": "Washed Purple"
},
{
"slug": "lines",
"color": "#bbb",
"name": "Lines"
"slug": "main-green",
"color": "#008D62",
"name": "Main Green"
},
{
"slug": "washed-green",
"color": "#A1D7D2",
"name": "Washed Green"
}
]
},
@ -71,11 +77,6 @@
"fontFamily": "Inter"
},
"blocks": {
"core/post-date": {
"color": {
"text": "var(--wp--preset--color--secondary)"
}
},
"core/post-title": {
"typography": {
"fontSize": "30px",
@ -96,12 +97,6 @@
"fontWeight": "400"
}
},
"h3": {
"typography": {
"fontSize": "15px",
"fontWeight": "400"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--text)"