commit 696b821a5fab62688f5f4b6ac62f7b05ebd71bbf Author: Aadil Ayub Date: Wed May 8 14:26:54 2024 +0500 import sample-wp-block-theme diff --git a/.wp-env.json b/.wp-env.json new file mode 100644 index 0000000..21cb4d0 --- /dev/null +++ b/.wp-env.json @@ -0,0 +1,4 @@ +{ + "core": null, + "themes": [ "." ] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..1ec7ced --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# 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. diff --git a/assets/fonts/inclusive-sans/inclusive-sans-italic.woff2 b/assets/fonts/inclusive-sans/inclusive-sans-italic.woff2 new file mode 100644 index 0000000..ce6c112 Binary files /dev/null and b/assets/fonts/inclusive-sans/inclusive-sans-italic.woff2 differ diff --git a/assets/fonts/inclusive-sans/inclusive-sans-regular.woff2 b/assets/fonts/inclusive-sans/inclusive-sans-regular.woff2 new file mode 100644 index 0000000..a473cf6 Binary files /dev/null and b/assets/fonts/inclusive-sans/inclusive-sans-regular.woff2 differ diff --git a/assets/fonts/inclusive-sans/inclusive-sans.css b/assets/fonts/inclusive-sans/inclusive-sans.css new file mode 100644 index 0000000..15ba70e --- /dev/null +++ b/assets/fonts/inclusive-sans/inclusive-sans.css @@ -0,0 +1,15 @@ +/* inclusive-sans-italic */ +@font-face { + font-family: Inclusive Sans; + font-style: italic; + font-weight: 400; + src: local("Inclusive Sans Italic"), local("InclusiveSans-Italic"), url(inclusive-sans-italic.woff2) format("woff2"); +} +/* inclusive-sans-regular */ +@font-face { + font-family: Inclusive Sans; + font-style: normal; + font-weight: 400; + src: local("Inclusive Sans Regular"), local("InclusiveSans-Regular"), url(inclusive-sans-regular.woff2) format("woff2"); +} + diff --git a/assets/fonts/overused-grotesk/overused-grotesk-black-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-black-italic.woff2 new file mode 100644 index 0000000..d478f7f Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-black-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-black.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-black.woff2 new file mode 100644 index 0000000..7ad7e60 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-black.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-bold-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-bold-italic.woff2 new file mode 100644 index 0000000..805eafa Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-bold-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-bold.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-bold.woff2 new file mode 100644 index 0000000..db8e692 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-bold.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-extrabold-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-extrabold-italic.woff2 new file mode 100644 index 0000000..a85bef4 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-extrabold-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-extrabold.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-extrabold.woff2 new file mode 100644 index 0000000..e494c70 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-extrabold.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-italic.woff2 new file mode 100644 index 0000000..9ecb185 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-light-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-light-italic.woff2 new file mode 100644 index 0000000..40edb27 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-light-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-light.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-light.woff2 new file mode 100644 index 0000000..59e5c2a Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-light.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-medium-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-medium-italic.woff2 new file mode 100644 index 0000000..cdd5205 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-medium-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-medium.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-medium.woff2 new file mode 100644 index 0000000..2d29a03 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-medium.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-regular.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-regular.woff2 new file mode 100644 index 0000000..5c30511 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-regular.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-semibold-italic.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-semibold-italic.woff2 new file mode 100644 index 0000000..c7d02cb Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-semibold-italic.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk-semibold.woff2 b/assets/fonts/overused-grotesk/overused-grotesk-semibold.woff2 new file mode 100644 index 0000000..cbfa299 Binary files /dev/null and b/assets/fonts/overused-grotesk/overused-grotesk-semibold.woff2 differ diff --git a/assets/fonts/overused-grotesk/overused-grotesk.css b/assets/fonts/overused-grotesk/overused-grotesk.css new file mode 100644 index 0000000..9acc424 --- /dev/null +++ b/assets/fonts/overused-grotesk/overused-grotesk.css @@ -0,0 +1,99 @@ +/* overused-grotesk-semibold-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 400; + src: local("Overused Grotesk SemiBold Italic"), local("OverusedGrotesk-SemiBoldItalic"), url(overused-grotesk-semibold-italic.woff2) format("woff2"); +} +/* overused-grotesk-semibold */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 400; + src: local("Overused Grotesk SemiBold"), local("OverusedGrotesk-SemiBold"), url(overused-grotesk-semibold.woff2) format("woff2"); +} +/* overused-grotesk-regular */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 400; + src: local("Overused Grotesk Regular"), local("OverusedGrotesk-Regular"), url(overused-grotesk-regular.woff2) format("woff2"); +} +/* overused-grotesk-medium-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 500; + src: local("Overused Grotesk Medium Italic"), local("OverusedGrotesk-MediumItalic"), url(overused-grotesk-medium-italic.woff2) format("woff2"); +} +/* overused-grotesk-medium */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 500; + src: local("Overused Grotesk Medium"), local("OverusedGrotesk-Medium"), url(overused-grotesk-medium.woff2) format("woff2"); +} +/* overused-grotesk-light-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 300; + src: local("Overused Grotesk Light Italic"), local("OverusedGrotesk-LightItalic"), url(overused-grotesk-light-italic.woff2) format("woff2"); +} +/* overused-grotesk-light */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 300; + src: local("Overused Grotesk Light"), local("OverusedGrotesk-Light"), url(overused-grotesk-light.woff2) format("woff2"); +} +/* overused-grotesk-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 400; + src: local("Overused Grotesk Italic"), local("OverusedGrotesk-Italic"), url(overused-grotesk-italic.woff2) format("woff2"); +} +/* overused-grotesk-extrabold-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 400; + src: local("Overused Grotesk ExtraBold Italic"), local("OverusedGrotesk-ExtraBoldItalic"), url(overused-grotesk-extrabold-italic.woff2) format("woff2"); +} +/* overused-grotesk-extrabold */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 400; + src: local("Overused Grotesk ExtraBold"), local("OverusedGrotesk-ExtraBold"), url(overused-grotesk-extrabold.woff2) format("woff2"); +} +/* overused-grotesk-bold-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 700; + src: local("Overused Grotesk Bold Italic"), local("OverusedGrotesk-BoldItalic"), url(overused-grotesk-bold-italic.woff2) format("woff2"); +} +/* overused-grotesk-bold */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 700; + src: local("Overused Grotesk Bold"), local("OverusedGrotesk-Bold"), url(overused-grotesk-bold.woff2) format("woff2"); +} +/* overused-grotesk-black-italic */ +@font-face { + font-family: Overused Grotesk; + font-style: italic; + font-weight: 900; + src: local("Overused Grotesk Black Italic"), local("OverusedGrotesk-BlackItalic"), url(overused-grotesk-black-italic.woff2) format("woff2"); +} +/* overused-grotesk-black */ +@font-face { + font-family: Overused Grotesk; + font-style: normal; + font-weight: 900; + src: local("Overused Grotesk Black"), local("OverusedGrotesk-Black"), url(overused-grotesk-black.woff2) format("woff2"); +} + diff --git a/functions.php b/functions.php new file mode 100644 index 0000000..5299df4 --- /dev/null +++ b/functions.php @@ -0,0 +1,10 @@ + +
+ +
+ + + + +
+ + + + +
+ \ No newline at end of file diff --git a/parts/header.html b/parts/header.html new file mode 100644 index 0000000..c7c923a --- /dev/null +++ b/parts/header.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..baee1a9 --- /dev/null +++ b/style.css @@ -0,0 +1,6 @@ +/* +Theme Name: Lex Scotland +Author: Autonomic Co-op +Description: Full-site-editing wordpress theme for lexscotland.org +Tags: full-site-editing, block-patterns +*/ diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..ea026fb --- /dev/null +++ b/templates/index.html @@ -0,0 +1,60 @@ + +
+ + + + + + +

+ Rutherford Craze is a type designer and developer interested in visual + systems, technology, and tools. +

+ + + +
+ + +

+ + + + + +

+ + +
+ + + + + + + +

Work

+ + + +
+
+ +
+
+ + + +
+
+ +
+
+ + + + + + +
+ \ No newline at end of file diff --git a/templates/single.html b/templates/single.html new file mode 100644 index 0000000..0fcf5bb --- /dev/null +++ b/templates/single.html @@ -0,0 +1,27 @@ + +
+ + + + + + + + + + + + +
+ + +
+ + + + + + + +
+ diff --git a/theme.json b/theme.json new file mode 100644 index 0000000..8daa517 --- /dev/null +++ b/theme.json @@ -0,0 +1,122 @@ +{ + "version": 2, + "$schema": "https://schemas.wp.org/trunk/theme.json", + "settings": { + "useRootPaddingAwareAlignments": true, + "appearanceTools": true, + "layout": { + "contentSize": "590px" + }, + "color": { + "palette": [ + { + "slug": "background", + "color": "#F3F7F6", + "name": "Background" + }, + { + "slug": "background-code", + "color": "#DEE1E0", + "name": "Background Code" + }, + { + "slug": "text", + "color": "#25211D", + "name": "Text" + }, + { + "slug": "secondary", + "color": "#999", + "name": "Secondary" + }, + { + "slug": "lines", + "color": "#bbb", + "name": "Lines" + } + ] + }, + "typography": { + "fontFamilies": [ + { + "fontFamily": "Inter, sans-serif", + "name": "Inter", + "slug": "inter", + "fontFace": [ + { + "fontFamily": "Inter", + "fontWeight": "400", + "fontStyle": "normal", + "fontStretch": "normal", + "src": ["file:./assets/fonts/inter_normal_400.ttf"] + }, + { + "fontFamily": "Inter", + "fontWeight": "700", + "fontStyle": "normal", + "fontStretch": "normal", + "src": ["file:./assets/fonts/inter_normal_700.ttf"] + } + + ] + } + ] + } + }, + "styles": { + "color": { + "background": "var(--wp--preset--color--background)" + }, + "typography": { + "fontFamily": "Inter" + }, + "blocks": { + "core/post-date": { + "color": { + "text": "var(--wp--preset--color--secondary)" + } + }, + "core/post-title": { + "typography": { + "fontSize": "30px", + "fontWeight": "700" + } + } + }, + "elements": { + "h1": { + "typography": { + "fontSize": "30px", + "fontWeight": "700" + } + }, + "h2": { + "typography": { + "fontSize": "22.5px", + "fontWeight": "400" + } + }, + "h3": { + "typography": { + "fontSize": "15px", + "fontWeight": "400" + } + }, + "link": { + "color": { + "text": "var(--wp--preset--color--text)" + }, + ":visited": { + "color": { + "text": "var(--wp--preset--color--text)" + } + }, + ":hover": { + "color": { + "text": "var(--wp--preset--color--secondary)" + } + } + } + } + } +}