diff --git a/README.md b/README.md index dfc6e89..c1ab96f 100644 --- a/README.md +++ b/README.md @@ -1,111 +1,39 @@ -[![Greenkeeper badge](https://badges.greenkeeper.io/marianzburlea/pug-starter.svg)](https://greenkeeper.io/) - -# Pug starter +# Anyska Beauty Diary ## Table of contents -- [YouTube video tutorials](#youtube-video-tutorials) -- [Live projects built with pug-starter](#live-projects-built-with-pug-starter) +- [Purpose](#purpose) +- [Structure](#structure) + - [Mobile approach](#mobile-approach) + - [Desktop approach](#desktop-approach) - [Prerequisites](#prerequisites) - [Installation](#installation) - [Usage](#usage) -- [Style](#style) - -## **baseUrl** - -Note: `inline` attribute has been updated to `embed` - -Old way: -``` -if config.entry.css.embed - link(rel="stylesheet" href=`${embedPath}` inline) -``` - -New way: -``` -if config.entry.css.embed - link(rel="stylesheet" href=`${embedPath}` embed) -``` - -add **_modularCss_** support. When enabled in the config of `package.json` it will convert all SCSS/SASS files to its correspondent CSS path. - -add **_baseurl_** support which can be configured for GitHub.io and custom domain. Check _package.json_ config section for - -- _deployToGithubIo_ - (true|false) by default it is set to _true_ and will affect the value of _baseUrl_ when you want to deploy to GitHub.io; You want to set it to _false_ if you want to use _customUrl_ as the value of _baseUrl_ -- _customUrl_ - if you want baseUrl to have a value like http://my-project.codetap.io or any other one; -- _githubUrl_ - if you want baseUrl to have a value like http://github.com/marianzburlea/pug-starter.git or any other one; - -In the end you can use _baseUrl_ to prefix your paths like: - -``` -link(rel="stylesheet", href=`${baseUrl}/style.css`) -``` - -or - -``` -a( - title="Is it possible?" - target="_blank" - href=`${baseUrl}/article/nice-weather` -) -``` - -or - -``` -img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`) -``` - -## YouTube video tutorials - -I want to change those tutorials to new ones using the new techniques. - -To help you out even more I've put together some YouTube tutorials: - -- Install nodejs, git and github - -[![Install nodejs, git and github](http://img.youtube.com/vi/A-iTEtt6SN8/0.jpg)](http://www.youtube.com/watch?v=A-iTEtt6SN8) -- How to make a website for free in 3 easy steps 2017 +## Purpose +This website's story is quite short and concise. It is intented to come as a tool for bloggers with low financial resources that cannot afford to hire someone to develop their website. It needs just a json file to be changed in order to be personalized for each of their needs. -[![How to make a website for free in 3 easy steps 2017 - CodeTap](http://img.youtube.com/vi/YBK5ZyXHumE/0.jpg)](http://www.youtube.com/watch?v=YBK5ZyXHumE) +In terms of design, altough the website will be a very simple one it will be a good touch and it will look similar to [Anyska's beauty diary](https://anyskabeautydiary.wordpress.com/). -- The nightmare is finally over! HTML5 tutorial on how to build a webpage layout 2017 +## Structure +The website structure will be simple as mentioned above and it will include a mobile version and a desktop version. The reason why the website will be structured on a mobile first approach is that nowadays most people spend more time on their mobile devices as it is much easier and quicker than a computer. -[![The nightmare is finally over! HTML5 tutorial on how to build a webpage layout 2017 - CodeTap](http://img.youtube.com/vi/DdYC36N9z0E/0.jpg)](http://www.youtube.com/watch?v=DdYC36N9z0E) +### Mobile approach +Regarding the mobile version of the website, it presents a direct visualization of the latest articles posted on the blog, from the newest ones to the oldest one. +Apart from the topics, the website includes at the top a burger menu and the text `SHOW` where the viewers can click to see the blogger's avatar followed by some social icons like Facebook, Instagram, Twitter and LinkedIn. The social icons are clickable and they will guide the viewer to the blogger's specific social media account selected. +Another section from the `SHOW` option is the implicit menu containing `Home`, `About me` and `Contact me`, all three options redirecting the viewer to the selected subsection. +The third section of the `SHOW` option is a search bar where the viewer can browse on the website through a specific word and will get as result a specific topic/article from the blog where that word is present. -- Build HTML5 website pain free tutorial for beginners 2017 +### Desktop approach +The desktop version is pretty similar to the mobile one but here the viewers have everything just in from of their eyes. The content from the burger menu (described above as the view got when `SHOW` is clicked) is present in the left side of the website and the topics/articles of the blog are now in the right side. -[![Build HTML5 website pain free tutorial for beginners 2017](http://img.youtube.com/vi/qCyokdeZ6jI/0.jpg)](http://www.youtube.com/watch?v=qCyokdeZ6jI) - -Starter package for pug (former jade) template based projects. - -**_Note_**: an boolean option **config.render.sourceFileChange** has been added to the _package.json_. The behaviour differs based on the value: - -1. **true** - it renders if the source file (pug file) has been changed; This has a much much greater speed when rendering compared to the other option however it's only relevant if you make change to the current file watched by PUG. If you make a change to a file that's extended and resides in a path that contains "\_", like a layout one, the change won't be reflected. -2. **false** - it renders if any pug file has been changed and compares the output with the destination file (the HTML generated now with the previous generated HTML). This can be slower when the number of files increases. - -## Live projects built with **_pug-starter_** - -If you want your project to be listed here leave a message on [CodeTap on FaceBook](https://facebook.com/codetap). You're project needs to be at least version one final (no beta / alpha or work in progress) will be accepted. - -- Author: [Marian Zburlea](https://github.com/marianzburlea) - - [Eat the Veggie (live)](http://codetapio.github.io/eat-the-veggie) - [Eat the Veggie (source)](https://github.com/codetapio/eat-the-veggie) - - [W3schools Replica (live)](http://codetapio.github.io/w3schools-replica) - [W3schools Replica (source)](https://github.com/codetapio/w3schools-replica) - - [My Resume (live)](http://my-resume.bitbee.uk) - [My Resume (source)](https://github.com/marianzburlea/my-resume) - - [Quick Blog (live)](http://quick-blog.bitbee.uk) - [Quick Blog (source)](https://github.com/marianzburlea/quick-blog) - - [Tesla Saves Lives (live)](http://tesla.bitbee.uk) - [Tesla Saves Lives (source)](https://github.com/marianzburlea/tesla-saves-lives) -- Author: [Istvan Acs](https://github.com/St3ve89) - - [Acme mobile first (live)](http://St3ve89.github.io/Acme-mobile-first) - [Acme mobile first (source)](https://github.com/St3ve89/Acme-mobile-first) - - [Thumb Gallery (live)](http://St3ve89.github.io/thumbgallery) - [Thumb Gallery (source)](https://github.com/St3ve89/thumbgallery) ## Prerequisites - The project requires NodeJS v.4+ To install NodeJS visit [nodejs download page](https://nodejs.org/en/download/) download the appropiate package for your operatin system, click on the downloaded file, open it and follow the installation procees. If you don't know much about it, just click ALL the NEXT and or INSTALL buttons and choose "I agree" when prompted and you should be fine. + ## Installation **BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites) @@ -120,14 +48,6 @@ or $ npm install ``` -Note: if you run into an pngquant-bin error on Windows try running: - -``` -npm install imagemin-pngquant@5.0.1 -D -npm install pngquant-bin@3.1.1 -D -``` - -before you run `npm start` ## Usage @@ -142,35 +62,3 @@ or ```bash npm run dev ``` - -To build the project for production use: - -```bash -npm run prod -``` - -To automatically deploy your project to GitHub pages and make it available at https://[your-username].github.io/[your-project-name] use: - -```bash -npm run deploy -``` - -## Style - -The project supports both **_embed_** and **_external_** style sheets. You can have none, one or the other, or both of them. - -### Single page application style - -When you're building a single page app or website, there is no point in having the style sheets loaded from an external file and I'll explain why: the point of loading external style sheets is to allow the browser to cache those files and once you visit another web page of the same website, instead of making another request(s) for the style sheet file(s) to the server and having to download them, if there is no change, the browser will load them from the local drive. In a single page, there is no other page to go to therefore the external file technique doesn't apply. - -### Multi page application style - -In this scenario you can have either both **_embed_** and external or just external. The most common scenario is to have only one external style sheet file to be loaded and most of the time that's just fine. - -If you want to improve your SEO and user experience even further, I strongly recommend to use a combination of both **_embed_** and external. The **_embed_** style sheet should only contain the minimum amount of styles for the initial visible part of the page to render. The rest of the styles can be put in the external CSS file. - -## Auto reset git - -If you run `npm i`, the git history will get reset. - -To avoid resetting the git history run `npm i --ignore-scripts` diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 481036b..41e45ff 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1210,6 +1210,12 @@ "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", "dev": true }, + "@types/babel-types": { + "version": "7.0.9", + "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.9.tgz", + "integrity": "sha512-qZLoYeXSTgQuK1h7QQS16hqLGdmqtRmN8w/rl3Au/l5x/zkHx+a4VHrHyBsi1I1vtK2oBHxSzKIu0R5p6spdOA==", + "dev": true + }, "@types/babel__core": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz", @@ -1251,6 +1257,15 @@ "@babel/types": "^7.3.0" } }, + "@types/babylon": { + "version": "6.16.5", + "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.5.tgz", + "integrity": "sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==", + "dev": true, + "requires": { + "@types/babel-types": "*" + } + }, "@types/events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", @@ -1974,6 +1989,50 @@ "babel-plugin-jest-hoist": "^24.9.0" } }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "dev": true, + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "dev": true + } + } + }, + "babel-types": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", + "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", + "dev": true, + "requires": { + "babel-runtime": "^6.26.0", + "esutils": "^2.0.2", + "lodash": "^4.17.4", + "to-fast-properties": "^1.0.3" + }, + "dependencies": { + "to-fast-properties": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", + "dev": true + } + } + }, + "babylon": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", + "dev": true + }, "bach": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz", @@ -8376,53 +8435,6 @@ "is-gif": "^3.0.0" } }, - "imagemin-jpegoptim": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/imagemin-jpegoptim/-/imagemin-jpegoptim-6.0.0.tgz", - "integrity": "sha512-bXgGRX3f4FIfxMTB/fmivovK+3PTPwAwz6XNgj8zyISZ/mNlnFnS2aiSLsHd40S7FuaSgv9ONliIHAaHbk57mg==", - "dev": true, - "requires": { - "execa": "^1.0.0", - "is-jpg": "^2.0.0", - "jpegoptim-bin": "^5.0.0" - }, - "dependencies": { - "execa": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", - "dev": true, - "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^4.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - }, - "get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "dev": true, - "requires": { - "pump": "^3.0.0" - } - }, - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - } - } - }, "imagemin-jpegtran": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/imagemin-jpegtran/-/imagemin-jpegtran-6.0.0.tgz", @@ -10075,17 +10087,6 @@ } } }, - "jpegoptim-bin": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/jpegoptim-bin/-/jpegoptim-bin-5.1.0.tgz", - "integrity": "sha512-BdvkO6wPLLSid7M6t3HnXuYvfLOxbeatgePBi4c4ps3iwoJ2ReUtvXJvJtsDCeN5l3Cm2tHEUcU7V5+M30hUew==", - "dev": true, - "requires": { - "bin-build": "^3.0.0", - "bin-wrapper": "^4.0.0", - "logalot": "^2.0.0" - } - }, "jpegtran-bin": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/jpegtran-bin/-/jpegtran-bin-4.0.0.tgz", @@ -12215,13 +12216,15 @@ }, "dependencies": { "constantinople": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz", - "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", + "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==", "dev": true, "requires": { - "@babel/parser": "^7.6.0", - "@babel/types": "^7.6.1" + "@types/babel-types": "^7.0.0", + "@types/babylon": "^6.16.2", + "babel-types": "^6.26.0", + "babylon": "^6.18.0" } } } @@ -12243,13 +12246,15 @@ }, "dependencies": { "constantinople": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz", - "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", + "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==", "dev": true, "requires": { - "@babel/parser": "^7.6.0", - "@babel/types": "^7.6.1" + "@types/babel-types": "^7.0.0", + "@types/babylon": "^6.16.2", + "babel-types": "^6.26.0", + "babylon": "^6.18.0" } } } @@ -12276,13 +12281,15 @@ }, "dependencies": { "constantinople": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz", - "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", + "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==", "dev": true, "requires": { - "@babel/parser": "^7.6.0", - "@babel/types": "^7.6.1" + "@types/babel-types": "^7.0.0", + "@types/babylon": "^6.16.2", + "babel-types": "^6.26.0", + "babylon": "^6.18.0" } } } @@ -12551,6 +12558,12 @@ "regenerate": "^1.4.0" } }, + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true + }, "regenerator-transform": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.1.tgz", diff --git a/src/_asset/image/become-a-web-developer-today.jpg b/src/_asset/image/become-a-web-developer-today.jpg deleted file mode 100644 index 5bcde28..0000000 Binary files a/src/_asset/image/become-a-web-developer-today.jpg and /dev/null differ diff --git a/src/_asset/image/home-page.png b/src/_asset/image/home-page.png new file mode 100644 index 0000000..2e1cf65 Binary files /dev/null and b/src/_asset/image/home-page.png differ diff --git a/src/_component/config/font-family.scss b/src/_component/config/font-family.scss new file mode 100644 index 0000000..f477444 --- /dev/null +++ b/src/_component/config/font-family.scss @@ -0,0 +1,160 @@ +/* cyrillic-ext */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizYRExUiTo99u79D0e0ysmIEDQ.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizYRExUiTo99u79D0e0w8mIEDQ.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* latin-ext */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizYRExUiTo99u79D0e0ycmIEDQ.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizYRExUiTo99u79D0e0x8mI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizdRExUiTo99u79D0e8fOydIhUdwzM.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizdRExUiTo99u79D0e8fOydKxUdwzM.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* latin-ext */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizdRExUiTo99u79D0e8fOydIRUdwzM.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "PT Sans"; + font-style: italic; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizdRExUiTo99u79D0e8fOydLxUd.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0-ExdGM.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0aExdGM.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* latin-ext */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0yExdGM.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0KExQ.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizfRExUiTo99u79B_mh0OOtLQ0Z.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizfRExUiTo99u79B_mh0OqtLQ0Z.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* latin-ext */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizfRExUiTo99u79B_mh0OCtLQ0Z.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/ptsans/v12/jizfRExUiTo99u79B_mh0O6tLQ.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} diff --git a/src/_component/config/reusable.scss b/src/_component/config/reusable.scss new file mode 100644 index 0000000..d5ebfb4 --- /dev/null +++ b/src/_component/config/reusable.scss @@ -0,0 +1,15 @@ +%title { + text-decoration: none; + color: #444; + font-size: 3.052em; + line-height: 1.2; + font-weight: bold; + cursor: pointer; + word-wrap: break-word; + + &:hover, + &:focus, + &:active { + color: #88cc33; + } +} diff --git a/src/_component/home-page/home-page.pug b/src/_component/home-page/home-page.pug new file mode 100644 index 0000000..ce47ee2 --- /dev/null +++ b/src/_component/home-page/home-page.pug @@ -0,0 +1,5 @@ +.home__page + .home__page-header + a(href="/").home__page-title Anyska's beauty diary + h2.home__page-subtitle Grab a cup of tea and let's chat beauty, shall we? + img(src="asset/image/home-page.png", alt="").home__page-image diff --git a/src/_component/home-page/home-page.scss b/src/_component/home-page/home-page.scss new file mode 100644 index 0000000..ea95fe7 --- /dev/null +++ b/src/_component/home-page/home-page.scss @@ -0,0 +1,30 @@ +.home__page { + grid-column: 2/3; +} + +.home__page-header { + margin-top: 60px; +} + +.home__page-title { + @extend %title; + &:hover, + &:focus, + &:active { + color: #666; + } +} + +.home__page-subtitle { + color: #333; + font-size: 1.563em; + line-height: 1.2; + font-weight: normal; + margin-bottom: 20px; +} + +.home__page-image { + width: 100%; + height: auto; + margin-top: 80px; +} diff --git a/src/_component/intro/intro.pug b/src/_component/intro/intro.pug deleted file mode 100644 index 1157626..0000000 --- a/src/_component/intro/intro.pug +++ /dev/null @@ -1,7 +0,0 @@ -h1 Welcome future #[span.title__name--first #{data.user.name.first}] #[span.title__name--last #{data.user.name.last}]! -p This is a barebone setup.! -p=data.site.message -p At CodeTap we train people into coders and how to make a good living out of it. -p Check us out at #[a(href="https://info.codetap.academy" title="Become a Web Developer today") info.codetap.academy] -p nice -//- include asdas \ No newline at end of file diff --git a/src/_component/intro/intro.scss b/src/_component/intro/intro.scss deleted file mode 100644 index 54f16ab..0000000 --- a/src/_component/intro/intro.scss +++ /dev/null @@ -1,6 +0,0 @@ -.title__name--first { - color: green; -} -.title__name--last { - color: #ff9d1e; -} diff --git a/src/_component/layout/base.pug b/src/_component/layout/base.pug deleted file mode 100644 index a8760d5..0000000 --- a/src/_component/layout/base.pug +++ /dev/null @@ -1,16 +0,0 @@ -doctype html -html(lang="en") - head - title Welcome to Pug Starter - meta(content="Simple pug (jade) starter aimed to quickly deliver HTML & CSS projects" name="description") - //- this checks to see the the "embed" property is set to "true" - //- in the package.json file - if config.entry.css.embed - link(rel="stylesheet" href=`${embedPath}` embed) - body - .content - block awesome-content - //- The style.css is at the bottom so it doesn't - //- block the loading of assets - if config.entry.css.external - link(rel="stylesheet", href=`${baseUrl}style.css`) diff --git a/src/_component/layout/general.scss b/src/_component/layout/general.scss index 86e1b81..e6e2a0d 100644 --- a/src/_component/layout/general.scss +++ b/src/_component/layout/general.scss @@ -1,19 +1,29 @@ -html, -body { - height: 100%; - margin: 0; +* { padding: 0; + margin: 0; + box-sizing: border-box; } + body { - background-image: url(#{$baseUrl}asset/image/become-a-web-developer-today.jpg); - background-size: cover; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + font-family: "PT Sans", sans-serif; + background-color: #fdf9db; } + .content { - padding: 1rem; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 1rem; + max-width: 1100px; + height: 100%; + background-color: white; + margin: 40px auto; + padding: 40px 60px; +} + +a { + text-decoration: none; +} + +.grid { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 50px; + margin: 0 auto; } diff --git a/src/_component/menu/menu.pug b/src/_component/menu/menu.pug new file mode 100644 index 0000000..123354a --- /dev/null +++ b/src/_component/menu/menu.pug @@ -0,0 +1,2 @@ +.menu + h1 Menu here diff --git a/src/_component/menu/menu.scss b/src/_component/menu/menu.scss new file mode 100644 index 0000000..a68ee13 --- /dev/null +++ b/src/_component/menu/menu.scss @@ -0,0 +1,4 @@ +.menu { + grid-column: 1/2; + grid-row: 1/-1; +} diff --git a/src/_data/site.yml b/src/_data/site.yml deleted file mode 100644 index 68cda1f..0000000 --- a/src/_data/site.yml +++ /dev/null @@ -1 +0,0 @@ -message: "Today the weather is very nice." diff --git a/src/_data/user.json b/src/_data/user.json deleted file mode 100644 index cc58458..0000000 --- a/src/_data/user.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": { - "first": "Web", - "last": "Developer" - } -} diff --git a/src/embed.scss b/src/embed.scss deleted file mode 100644 index 370d383..0000000 --- a/src/embed.scss +++ /dev/null @@ -1,6 +0,0 @@ -// for this CSS file to work you want to open -// package.json file and switch the value of -// config.entry.css.embed to true -// and make sure that the head tag of your html has -// link(rel="stylesheet" href=`${embedPath}` inline) -@import 'style' \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico deleted file mode 100644 index 4482b78..0000000 Binary files a/src/favicon.ico and /dev/null differ diff --git a/src/index.pug b/src/index.pug index d26ebf9..f0082db 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,4 +1,15 @@ -extends _component/layout/base - -block awesome-content - include _component/intro/intro +doctype html +html(lang="en") + head + title Anyska's beauty diary - Grab a cup of tea and let's chat beauty, shall we? + meta(content="Anyska's Blog! – Anyska's Blog! – is super awesome" name="description") + meta( + name="viewport" + content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" + ) + link(rel="stylesheet", href="style.css") + body + .content + .grid + include _component/home-page/home-page.pug + include _component/menu/menu.pug diff --git a/src/style.scss b/src/style.scss index c7e4427..1b07a40 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,2 +1,5 @@ -@import '_component/layout/general'; -@import '_component/intro/intro'; +@import '_component/config/reusable.scss'; +@import "_component/config/font-family.scss"; +@import "_component/layout/general.scss"; +@import "_component/home-page/home-page.scss"; +@import "_component/menu/menu.scss"; diff --git a/src/test/index.pug b/src/test/index.pug deleted file mode 100644 index 1a99f48..0000000 --- a/src/test/index.pug +++ /dev/null @@ -1,5 +0,0 @@ -extends ../_component/layout/base - -block awesome-content - h1 this is awesome - p #{data.user.name.first}!! \ No newline at end of file