*/
4 | // color: black;
5 | // }
6 |
7 | // // child selector
8 | // div > p {
9 | // /* Вибере всі
елементи, які є безпосередніми дітьми
*/
10 | // color: black;
11 | // }
12 |
13 | // // adjacent sibling selector
14 | // h2 + p {
15 | // /* Вибере елемент
, який є наступним сусідом
*/
16 | // color: black;
17 | // }
18 |
19 | // // general sibling selector
20 | // h2 ~ p {
21 | // /* Вибере всі
елементи, які є наступними сусідами
*/
22 | // color: black;
23 | // }
24 |
25 | /**
26 | |============================
27 | | Using combinators in SASS
28 | |============================
29 | */
30 | ul > {
31 | li {
32 | list-style: none;
33 | }
34 | }
35 |
36 | h2 {
37 | + p {
38 | border-top: 1px solid gray;
39 | }
40 | }
41 |
42 | p {
43 | ~ {
44 | span {
45 | opacity: 0.8;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/scss/base/_base.scss:
--------------------------------------------------------------------------------
1 | @use "../utilities/mixins";
2 |
3 | html {
4 | font-size: 8px;
5 | @include mixins.viewport-md {
6 | font-size: 10px;
7 | }
8 | }
9 | body {
10 | font-family: "Montserrat";
11 | background: var(--main-color);
12 | color: var(--main-text-color);
13 | font-size: 2.4rem;
14 | transition: background 0.2s ease, color 0.2s ease;
15 | }
16 |
17 | .wrapper {
18 | min-height: 100vh;
19 | text-align: center;
20 | display: flex;
21 | flex-flow: column;
22 | }
23 |
24 | .container {
25 | max-width: 1180px;
26 | margin: 0 auto;
27 | padding: 0 2rem;
28 | }
29 |
30 | .dark {
31 | color-scheme: dark;
32 | }
33 |
34 | .title {
35 | font-size: 4rem;
36 |
37 | span {
38 | font-size: 5rem;
39 | text-transform: uppercase;
40 | font-weight: 700;
41 | @include mixins.text-gradient;
42 | }
43 | }
44 |
45 | .footer {
46 | padding: 3rem 0;
47 | font-size: 1.6rem;
48 |
49 | a {
50 | text-decoration: none;
51 | color: var(--brand-color);
52 | transition: 0.2s ease;
53 | &:hover {
54 | color: var(--brand-light-color);
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 GoIT
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/scss/--examples--/lesson-11/_if.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 |
3 | // @if statement
4 | @mixin avatar($size, $circle: false) {
5 | width: $size;
6 | height: $size;
7 |
8 | @if $circle {
9 | border-radius: 50%;
10 | }
11 | }
12 |
13 | .square-avatar {
14 | @include avatar(100px);
15 | }
16 | .circle-avatar {
17 | @include avatar(100px, $circle: true);
18 | }
19 |
20 | // Conditional statements
21 | @mixin fonts($fs, $fw: null, $lh: null, $ls: null, $align: null) {
22 | font-size: $fs;
23 |
24 | @if $fw {
25 | font-weight: $fw;
26 | }
27 |
28 | @if $lh {
29 | @if $lh == normal {
30 | line-height: normal;
31 | } @else if math.unit($lh) == "px" {
32 | line-height: calc($lh / $fs);
33 | } @else {
34 | @error "$lh value #{$lh} is incorrect";
35 | }
36 | }
37 |
38 | @if $ls {
39 | @if $ls == normal {
40 | letter-spacing: normal;
41 | } @else {
42 | letter-spacing: #{calc($ls/$fs)}em;
43 | }
44 | }
45 |
46 | @if $align {
47 | text-align: $align;
48 | }
49 | }
50 |
51 | .title {
52 | // With keyword args
53 | @include fonts(20px, $fw: 600, $lh: 28px, $ls: 0.5px, $align: center);
54 | }
55 |
--------------------------------------------------------------------------------
/src/img/icons/gem.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/scss/main.scss:
--------------------------------------------------------------------------------
1 | // @use "utilities";
2 | // @use "base";
3 | // @use "layout";
4 | // @use "components";
5 |
6 | // Examples lesson 06
7 | // @use "--examples--/lesson-06/nesting";
8 | // @use "--examples--/lesson-06/combinators";
9 | // @use "--examples--/lesson-06/ampersand";
10 |
11 | // Examples lesson 07
12 | // @use "--examples--/lesson-07/math";
13 | // @use "--examples--/lesson-07/task-badge";
14 | // @use "base/fonts";
15 | // @use "components/task";
16 |
17 | // Examples lesson 09
18 | // @use "base/fonts";
19 | // @use "components/alert";
20 | // @use "--examples--/lesson-09/extend";
21 |
22 | // Examples lesson 10
23 | // @use "base/fonts";
24 | // @use "components/button";
25 | // @use "--examples--/lesson-10/mixins";
26 |
27 | // Examples lesson 11
28 | // @use "base/fonts";
29 | // @use "components/button";
30 | // @use "--examples--/lesson-11/if";
31 | // @use "--examples--/lesson-11/each";
32 | // @use "--examples--/lesson-11/for";
33 |
34 | // Examples lesson 12
35 | // @use "--examples--/lesson-12/examples";
36 | // @use "--examples--/lesson-12/functions";
37 |
38 | // Examples lesson 13
39 | // @use "--examples--/lesson-13/list";
40 |
41 | // Examples lesson 14
42 | @use "--examples--/lesson-14/map";
43 | @use "--examples--/lesson-14/alerts";
44 |
--------------------------------------------------------------------------------
/src/scss/--examples--/lesson-07/_task.scss:
--------------------------------------------------------------------------------
1 | body {
2 | min-height: 100vh;
3 |
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | flex-direction: column;
8 | gap: 30px;
9 |
10 | background-color: #292932;
11 | }
12 |
13 | .task {
14 | display: flex;
15 | justify-content: space-between;
16 |
17 | width: 589px;
18 | padding: 24px;
19 |
20 | background-color: #1c1c24;
21 | border-radius: 12px;
22 | }
23 | .task-caption {
24 | margin-bottom: 8px;
25 |
26 | font-size: 16px;
27 | font-weight: 500;
28 | line-height: 24px;
29 | letter-spacing: 0.5px;
30 | color: #fafafb;
31 | }
32 | .task-deadline {
33 | margin-bottom: 18px;
34 |
35 | color: #fafafb;
36 | font-size: 14px;
37 | line-height: 20px; /* 142.857% */
38 | letter-spacing: 0.5px;
39 | }
40 | .task-deadline-date {
41 | color: #b5b5be;
42 | }
43 |
44 | .performer {
45 | display: flex;
46 | align-items: center;
47 | gap: 8px;
48 | }
49 | .performer-avatar {
50 | display: block;
51 | max-width: 100%;
52 | height: auto;
53 | }
54 | .performer-bio {
55 | color: #b5b5be;
56 | font-size: 14px;
57 | line-height: 20px;
58 | letter-spacing: 0.5px;
59 | }
60 |
61 | .task-badges {
62 | display: flex;
63 | flex-direction: column;
64 | justify-content: space-between;
65 | }
66 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import imagemin from "imagemin";
2 | import imageminWebp from "imagemin-webp";
3 | import path from "path";
4 | import { defineConfig } from "vite";
5 | import glob from "fast-glob";
6 | import { fileURLToPath } from "url";
7 | import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
8 |
9 | export default defineConfig({
10 | plugins: [
11 | ViteImageOptimizer({
12 | png: {
13 | quality: 86,
14 | },
15 | jpeg: {
16 | quality: 86,
17 | },
18 | jpg: {
19 | quality: 86,
20 | },
21 | }),
22 | {
23 | ...imagemin(["./src/img/**/*.{jpg,png,jpeg}"], {
24 | destination: "./src/img/webp/",
25 | plugins: [imageminWebp({ quality: 86 })],
26 | }),
27 | apply: "serve",
28 | },
29 | ],
30 | build: {
31 | minify: false, // disable minification
32 | rollupOptions: {
33 | input: Object.fromEntries(
34 | glob
35 | .sync(["./*.html", "./pages/**/*.html"])
36 | .map((file) => [
37 | path.relative(__dirname, file.slice(0, file.length - path.extname(file).length)),
38 | fileURLToPath(new URL(file, import.meta.url)),
39 | ])
40 | ),
41 | // output unminified CSS file
42 | output: {
43 | assetFileNames: "assets/[name].[ext]",
44 | },
45 | },
46 | },
47 | });
48 |
--------------------------------------------------------------------------------
/src/scss/layout/_main.scss:
--------------------------------------------------------------------------------
1 | @use "../utilities/mixins";
2 |
3 | .main {
4 | flex: 1;
5 | &-header {
6 | padding: 2.5rem 2rem;
7 | }
8 |
9 | &-logo {
10 | width: 300px;
11 | height: 300px;
12 | display: inline-block;
13 | position: relative;
14 | margin-bottom: 3rem;
15 |
16 | @include mixins.viewport-md {
17 | width: 360px;
18 | height: 360px;
19 | }
20 |
21 | &::before {
22 | content: "";
23 | position: absolute;
24 | z-index: -1;
25 | top: 50%;
26 | left: 50%;
27 | width: 70%;
28 | height: 70%;
29 | transform: translate(-50%, -50%);
30 | border-radius: 50%;
31 | background: var(--hero-name-background);
32 | filter: blur(72px);
33 | }
34 | }
35 |
36 | &-logo-img {
37 | width: 100%;
38 | height: 100%;
39 | }
40 |
41 | &-title {
42 | &-link {
43 | position: relative;
44 | transition: 200ms ease;
45 |
46 | &::before {
47 | content: "";
48 | position: absolute;
49 | bottom: 5px;
50 | left: 50%;
51 | transform: translateX(-50%) skewX(-10deg);
52 | z-index: -1;
53 |
54 | width: 105%;
55 | height: 20%;
56 | background-color: var(--brand-light-color);
57 |
58 | transition: 200ms ease;
59 | }
60 |
61 | &:hover,
62 | &:focus {
63 | color: var(--brand-light-color);
64 |
65 | &::before {
66 | background-color: var(--main-text-color);
67 | }
68 | }
69 | }
70 | }
71 |
72 | &-badges {
73 | margin: 3rem 0 5rem;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/scss/--examples--/lesson-12/_decimal.scss:
--------------------------------------------------------------------------------
1 | // _decimal.scss | MIT License | gist.github.com/terkel/4373420
2 |
3 | // Round a number to specified digits.
4 | //
5 | // @param {Number} $number A number to round
6 | // @param {Number} [$digits:0] Digits to output
7 | // @param {String} [$mode:round] (round|ceil|floor) How to round a number
8 | // @return {Number} A rounded number
9 | // @example
10 | // decimal-round(0.333) => 0
11 | // decimal-round(0.333, 1) => 0.3
12 | // decimal-round(0.333, 2) => 0.33
13 | // decimal-round(0.666) => 1
14 | // decimal-round(0.666, 1) => 0.7
15 | // decimal-round(0.666, 2) => 0.67
16 | //
17 | @use "sass:math";
18 |
19 | @function decimal-round($number, $digits: 0, $mode: round) {
20 | $n: 1;
21 | // $number must be a number
22 | @if type-of($number) != number {
23 | @warn '#{ $number } is not a number.';
24 | @return $number;
25 | }
26 | // $digits must be a unitless number
27 | @if type-of($digits) != number {
28 | @warn '#{ $digits } is not a number.';
29 | @return $number;
30 | } @else if not unitless($digits) {
31 | @warn '#{ $digits } has a unit.';
32 | @return $number;
33 | }
34 | @if $digits > 0 {
35 | @for $i from 1 through $digits {
36 | $n: $n * 10;
37 | }
38 | }
39 | @if $mode == round {
40 | @return math.div(math.round($number * $n), $n);
41 | } @else if $mode == ceil {
42 | @return math.div(math.ceil($number * $n), $n);
43 | } @else if $mode == floor {
44 | @return math.div(math.floor($number * $n), $n);
45 | } @else {
46 | @warn '#{ $mode } is undefined keyword.';
47 | @return $number;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/img/icons/info.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/img/icons/close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/demo/project-structure.md:
--------------------------------------------------------------------------------
1 | ```scss
2 | sass/
3 | |
4 | ├── base/
5 | | ├── _base.scss // # Набір базових стилей
6 | | ├── _reset.scss // # Скидання стилей браузера
7 | | ├── _typography.scss // # Текстові стилі
8 | | ├── _animations.scss // # Анімації (додані через @keyframes)
9 | | … // # і таке інше
10 | |
11 | ├── components/
12 | | ├── _buttons.scss // # Кнопки
13 | | ├── _carousel.scss // # Слайдер
14 | | ├── _cover.scss // # Обкладинка
15 | | ├── _dropdown.scss // # Випадаюче меню
16 | | … // # і таке інше
17 | |
18 | ├── layout/
19 | | ├── _navigation.scss // # Навігація
20 | | ├── _grid.scss // # Сітка
21 | | ├── _header.scss // # Хедер
22 | | ├── _footer.scss // # Футер
23 | | ├── _sidebar.scss // # Сайдбар
24 | | ├── _forms.scss // # Форми
25 | | … // # і таке інше
26 | |
27 | ├── pages/
28 | | ├── _home.scss // # Специфічні стилі сторінки Home
29 | | ├── _contact.scss // # Специфічні стилі сторінки Contact
30 | | … // # і таке інше
31 | |
32 | ├── themes/
33 | | ├── _theme.scss // # Тема за змовчуванням
34 | | ├── _admin.scss // # Тема для адміністратора сайту
35 | | ├── _manager.scss // # Тема для менеджера сайту
36 | | … // # і таке інше
37 | |
38 | ├── vendors/
39 | | ├── _bootstrap.scss // # Bootstrap бібліотека
40 | | ├── _modern-normalize.scss // # Нормалізація стилей
41 | | … // # і таке інше
42 | |
43 | ├── utils/
44 | | ├── _variables.scss // # Sass змінні
45 | | ├── _functions.scss // # Sass функції
46 | | ├── _mixins.scss // # Sass міксини
47 | | ├── _placeholders.scss // # Sass плейсхолдери
48 | |
49 | └── main.scss // # Головний Sass файл
50 | ```
51 |
--------------------------------------------------------------------------------
/src/img/icons/check.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/scss/--examples--/lesson-09/_extend.scss:
--------------------------------------------------------------------------------
1 | // $primary: #f07f2e;
2 | // $success: #82c43c;
3 | // $primary: #4e75ff;
4 |
5 | // Approach 1
6 | // .notification {
7 | // display: flex;
8 | // align-items: center;
9 | // gap: 20px;
10 |
11 | // width: 480px;
12 | // padding: 20px;
13 |
14 | // font-family: Montserrat;
15 | // color: #fafafb;
16 | // font-size: 16px;
17 | // line-height: 20px; /* 125% */
18 | // letter-spacing: 0.5px;
19 |
20 | // background-color: #92929d;
21 | // border-radius: 6px;
22 | // }
23 | // .notification-primary {
24 | // background-color: #f07f2e;
25 | // }
26 |
27 | // .notification-success {
28 | // background-color: #82c43c;
29 | // }
30 |
31 | // .notification-info {
32 | // background-color: #4e75ff;
33 | // }
34 |
35 | // Approach 2
36 | // .notification {
37 | // display: flex;
38 | // align-items: center;
39 | // gap: 20px;
40 |
41 | // width: 480px;
42 | // padding: 20px;
43 |
44 | // font-family: Montserrat;
45 | // color: #fafafb;
46 | // font-size: 16px;
47 | // line-height: 20px; /* 125% */
48 | // letter-spacing: 0.5px;
49 |
50 | // background-color: #92929d;
51 | // border-radius: 6px;
52 | // }
53 |
54 | // .notification-primary {
55 | // @extend .notification;
56 |
57 | // background-color: #f07f2e;
58 | // }
59 |
60 | // .notification-success {
61 | // @extend .notification;
62 |
63 | // background-color: #82c43c;
64 | // }
65 |
66 | // .notification-info {
67 | // @extend .notification;
68 |
69 | // background-color: #4e75ff;
70 | // }
71 |
72 | // Approach 3
73 | %notification {
74 | display: flex;
75 | align-items: center;
76 | gap: 20px;
77 |
78 | width: 480px;
79 | padding: 20px;
80 |
81 | font-family: Montserrat;
82 | color: #fafafb;
83 | font-size: 16px;
84 | line-height: 20px; /* 125% */
85 | letter-spacing: 0.5px;
86 |
87 | background-color: #92929d;
88 | border-radius: 6px;
89 | }
90 |
91 | .notification-primary {
92 | @extend %notification;
93 |
94 | background-color: #f07f2e;
95 | }
96 |
97 | .notification-success {
98 | @extend %notification;
99 |
100 | background-color: #82c43c;
101 | }
102 |
103 | .notification-info {
104 | @extend %notification;
105 |
106 | background-color: #4e75ff;
107 | }
108 |
--------------------------------------------------------------------------------
/src/img/icons/warning.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/img/icons/danger.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/scss/base/_reset.scss:
--------------------------------------------------------------------------------
1 | /***
2 | The new CSS reset - version 1.11 (last updated 20.9.2023)
3 | GitHub page: https://github.com/elad2412/the-new-css-reset
4 | ***/
5 |
6 | /*
7 | Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
8 | - The "symbol *" part is to solve Firefox SVG sprite bug
9 | - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
10 | */
11 | *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
12 | all: unset;
13 | display: revert;
14 | }
15 |
16 | /* Preferred box-sizing value */
17 | *,
18 | *::before,
19 | *::after {
20 | box-sizing: border-box;
21 | }
22 |
23 | /* Fix mobile Safari increase font-size on landscape mode */
24 | html {
25 | -moz-text-size-adjust: none;
26 | -webkit-text-size-adjust: none;
27 | text-size-adjust: none;
28 | }
29 |
30 | /* Reapply the pointer cursor for anchor tags */
31 | a,
32 | button {
33 | cursor: revert;
34 | }
35 |
36 | /* Remove list styles (bullets/numbers) */
37 | ol,
38 | ul,
39 | menu {
40 | list-style: none;
41 | }
42 |
43 | /* For images to not be able to exceed their container */
44 | img {
45 | max-inline-size: 100%;
46 | max-block-size: 100%;
47 | }
48 |
49 | /* removes spacing between cells in tables */
50 | table {
51 | border-collapse: collapse;
52 | }
53 |
54 | /* Safari - solving issue when using user-select:none on the text input doesn't working */
55 | input,
56 | textarea {
57 | -webkit-user-select: auto;
58 | }
59 |
60 | /* revert the 'white-space' property for textarea elements on Safari */
61 | textarea {
62 | white-space: revert;
63 | }
64 |
65 | /* minimum style to allow to style meter element */
66 | meter {
67 | -webkit-appearance: revert;
68 | appearance: revert;
69 | }
70 |
71 | /* preformatted text - use only for this feature */
72 | :where(pre) {
73 | all: revert;
74 | box-sizing: border-box;
75 | }
76 |
77 | /* reset default text opacity of input placeholder */
78 | ::placeholder {
79 | color: unset;
80 | }
81 |
82 | /* remove default dot (•) sign */
83 | ::marker {
84 | content: initial;
85 | }
86 |
87 | /* fix the feature of 'hidden' attribute.
88 | display:revert; revert to element instead of attribute */
89 | :where([hidden]) {
90 | display: none;
91 | }
92 |
93 | /* revert for bug in Chromium browsers
94 | - fix for the content editable attribute will work properly.
95 | - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
96 | :where([contenteditable]:not([contenteditable="false"])) {
97 | -moz-user-modify: read-write;
98 | -webkit-user-modify: read-write;
99 | overflow-wrap: break-word;
100 | -webkit-line-break: after-white-space;
101 | -webkit-user-select: auto;
102 | }
103 |
104 | /* apply back the draggable feature - exist only in Chromium and Safari */
105 | :where([draggable="true"]) {
106 | -webkit-user-drag: element;
107 | }
108 |
109 | /* Revert Modal native behavior */
110 | :where(dialog:modal) {
111 | all: revert;
112 | box-sizing: border-box;
113 | }
114 |
--------------------------------------------------------------------------------
/src/scss/--examples--/lesson-10/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin frame-size($width, $height: $width) {
2 | width: $width;
3 | height: $height;
4 | }
5 |
6 | %size {
7 | width: 150px;
8 | height: 150px;
9 | }
10 |
11 | .avatar {
12 | @include frame-size(150px);
13 | @extend %size;
14 |
15 | border-radius: 50%;
16 | }
17 |
18 | .icon {
19 | @include frame-size(50px);
20 | @extend %size;
21 |
22 | border: 2px solid lightblue;
23 | }
24 |
25 | // Arguments
26 | @mixin position-center {
27 | position: absolute;
28 | top: 50%;
29 | left: 50%;
30 | transform: translate(-50%, -50%);
31 | }
32 |
33 | .decoration {
34 | @include position-center;
35 | }
36 |
37 | @mixin position($position-type, $position-x, $position-y, $offset-x, $offset-y) {
38 | position: $position-type;
39 | top: $position-y;
40 | left: $position-x;
41 | transform: translate($offset-x, $offset-y);
42 | }
43 |
44 | .decoration {
45 | @include position(absolute, 50%, 50%, -50%, -50%);
46 | }
47 |
48 | @mixin position(
49 | $layer-index,
50 | $display,
51 | // обовʼязковий параметр
52 | $position-type: absolute,
53 | $position-x: 50%,
54 | $position-y: $position-x,
55 | $offset-x: $position-x,
56 | $offset-y: $position-x
57 | ) {
58 | position: $position-type;
59 | top: $position-y;
60 | left: $position-x;
61 | transform: translate(($offset-x * -1), ($offset-y * -1));
62 | z-index: $layer-index;
63 | display: $display;
64 | }
65 |
66 | .decoration {
67 | @include position($offset-y: 70%, $layer-index: 100, $display: block);
68 | }
69 |
70 | %btn {
71 | font-family: Montserrat;
72 | font-size: 14px;
73 | font-weight: 500;
74 | line-height: 20px; /* 142.857% */
75 | letter-spacing: 0.5px;
76 | color: #fafafb;
77 |
78 | background-color: #f07f2e;
79 | border: none;
80 | cursor: pointer;
81 | transition: 300ms;
82 |
83 | &:hover,
84 | &:focus {
85 | background-color: #f15c27;
86 | box-shadow: 0px 4px 10px 0px rgba(240, 127, 46, 0.25);
87 | }
88 | }
89 |
90 | @mixin btn-size($args...) {
91 | @for $i from 1 through length($args) {
92 | #{nth($args, $i)} {
93 | $factor: ($i * 4 - 4);
94 |
95 | @extend %btn;
96 |
97 | padding: (4px + $factor) (8px + $factor);
98 | border-radius: (8px + $factor);
99 | }
100 | }
101 | }
102 |
103 | @include btn-size(".btn-sm", ".btn-md", ".btn-lg", ".btn-xl");
104 |
105 | @use "sass:meta";
106 |
107 | @mixin btn-type($types...) {
108 | // $types: (
109 | // $success: lightgreen,
110 | // $error: tomato,
111 | // $info: lightblue,
112 | // );
113 |
114 | @each $name, $color in meta.keywords($types) {
115 | .btn-#{$name} {
116 | border: 2px solid $color;
117 | color: $color;
118 | }
119 | }
120 | }
121 |
122 | @include btn-type($success: lightgreen, $error: tomato, $info: lightblue);
123 |
124 | @mixin hover($state) {
125 | &:not([#{$state}]):hover {
126 | @content;
127 | }
128 | }
129 |
130 | .button {
131 | background-color: white;
132 | border: 1px solid darkblue;
133 |
134 | @include hover($state: disabled) {
135 | color: white;
136 | background-color: darkblue;
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/src/img/icons.svg:
--------------------------------------------------------------------------------
1 |
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple starter template for Sass
2 |
3 | 
4 |
5 | ## Vanilla App Template
6 |
7 | Цей проект було створено за допомогою Vite. Для знайомства та налаштування
8 | додаткових можливостей [звернись до документації](https://vitejs.dev/).
9 |
10 | Ключові особливості цього шаблону:
11 |
12 | **Build Tools:** Vite.js
13 | **Plugins:** Autoprefixer, PostCSS Sort Media Queries
14 | **Styles:** SCSS
15 | **Reset:** \_reset.scss (Based on The New Reset CSS)
16 |
17 | ## Створення репозиторію за шаблоном
18 |
19 | Використовуй цей репозиторій організації GoIT як шаблон для створення
20 | репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і
21 | обери опцію `«Create a new repository»`, як показано на зображенні.
22 |
23 | 
24 |
25 | На наступному етапі відкриється сторінка створення нового репозиторію. Заповни
26 | поле його імені, переконайся, що репозиторій публічний, після чого натисни
27 | кнопку `«Create repository from template»`.
28 |
29 | 
30 |
31 | Після того, як репозиторій буде створено, необхідно перейти в налаштування
32 | створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано
33 | на зображенні.
34 |
35 | 
36 |
37 | Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери
38 | опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно
39 | для автоматизації процесу деплою проекту.
40 |
41 | 
42 |
43 | Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок
44 | репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим
45 | репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй
46 | їх на GitHub!
47 |
48 | ## Підготовка до роботи
49 |
50 | 1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js.
51 | [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно.
52 | 2. Встанови базові залежності проекту в терміналі командою `npm install`.
53 | 3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`.
54 | 4. Перейдіть у браузері за адресою
55 | [http://localhost:5173](http://localhost:5173). Ця сторінка буде автоматично
56 | перезавантажуватись після збереження змін у файли проекту.
57 | 5. Для перегляду результуючого СSS файлу виконай команду
58 | `npx vite build --watch` та перейди в папку `dist/assets`
59 |
60 | ## Структура проекту. Файли і папки
61 |
62 | This is the structure of the project:
63 |
64 | ```plaintext
65 | /
66 | ├── demo # Папка для файлів цієї інструкції
67 | ├── dist # Результуючий код
68 | ├── node_modules # Node.js залежності для проекту
69 | ├── public # Файли для публічного доступу та використання
70 | ├── src # Вихідний код
71 | │ ├── fonts # Папка для ваших шрифтів
72 | │ ├── img # Папка для ваших зображень
73 | │ ├── js # Файли Javascript вашого проекту
74 | │ ├── scss # Стилі SCSS для вашого проекту
75 | ├── .gitignore # Перелік файлів та папок, які ігнорує Git
76 | ├── index.html # Файл HTML для вашого проекту
77 | ├── LICENSE # Файл ліцензії для вашого проекту
78 | ├── package-lock.json # Файл з поточними версіями залежностей для вашого проекту
79 | ├── package.json # Визначає метадані вашого проекту і його залежності
80 | ├── postcss.config.cjs # Конфігурація для PostCSS
81 | ├── README.md # Цей файл 😎
82 | ├── vite.config.js # Конфігурація бандлера Vite
83 | ```
84 |
85 | ## Подальші кроки
86 |
87 | Після клонування шаблону обов’язково очистіть і оновіть наступні файли/папки:
88 |
89 | 1. Очистіть файл README.md.
90 | 2. Адаптуйте файл LICENSE до свого проекту.
91 | 3. Очистіть `public/sass.svg`, папки `demo/`, `src/img/**/*`, `src/fonts/**/*`, а також `src/scss/**.*`, окрім файлів `style.scss` та `_reset.scss`.
92 | 4. Видаліть вміст із файлу `src/scss/style.scss`, окрім `@use "reset.scss";`.
93 | 5. У файлі `src/js/main.js`, залиште лише цей рядок з імпортом: `import '../scss/style.scss';`.
94 |
95 | ## Деплой
96 |
97 | Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub
98 | Pages, у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад,
99 | після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі
100 | `package.json` змінити значення прапора `--base=//`, для команди `build`,
101 | замінивши `` на назву свого репозиторію, та відправити зміни на GitHub.
102 |
103 | ```json
104 | "build": "vite build --base=//",
105 | ```
106 |
107 | Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та
108 | виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо
109 | це не було зроблено автоматично.
110 |
111 | 
112 |
113 | ## License
114 |
115 | Цей шаблон створено під [MIT License](LICENSE).
116 |
117 | **Thank you and happy coding!** 💻
118 |
--------------------------------------------------------------------------------
/public/sass.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------