diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..ea600ae Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..06b379c Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..61a448e Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d407d7e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,366 @@ +/* ------------------------------ */ +/* RESET AND BASE STYLES' TUNE UP */ +/* ------------------------------ */ + +@charset 'UTF-8'; +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); + +*, ::after, ::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* Simple colors */ + --color-white: #FFFFFF; + --color-black: #000000; + --color-milk: #F5F5F5; + --color-coal: #3C3C3C; + /* ---------------------- */ + /* Palette of five colors */ + --color-a: #E27396; + --color-b: #EA9AB2; + --color-c: #EFCFE3; + --color-d: #EAF2D7; + --color-e: #B3DEE2; +} + +@media (prefers-color-scheme: light) { + :root { + --color-background: var(--color-white); + --color-content-background: var(--color-milk); + --color-logo: var(--color-white); + --color-header: var(--color-coal); + --color-text: var(--color-coal); + --color-link: var(--color-b); + --color-link-hover: var(--color-a); + --color-border: var(--color-a); + --color-selection: var(--color-b); + --color-table-header-background: transparent; + --color-table-header-text: transparent; + --color-table-item: transparent; + --color-anotation: var(--color-coal); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--color-coal); + --color-content-background: var(--color-c); + --color-logo: var(--color-white); + --color-header: var(--color-coal); + --color-text: var(--color-coal); + --color-link: var(--color-b); + --color-link-hover: var(--color-a); + --color-border: var(--color-a); + --color-selection: var(--color-b); + --color-table-header-background: transparent; + --color-table-header-text: transparent; + --color-table-item: transparent; + --color-anotation: var(--color-milk); + } +} + +html { + font-family: 'Roboto', sans-serif; + direction: ltr; + font-size: 16px; + line-height: 1.382em; +} + +body { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; + background: var(--color-background); +} + +::selection { + background: var(--color-selection); +} + +:focus-visible { + outline: 2px solid var(--color-selection); +} + +h1, h2, h3, h4, h5, h6 { + color: var(--color-header); + font-weight: 500; + margin-block-start: 0.382em; + margin-block-end: 0.618em; + line-height: 1.382em; +} + +h1 { font-size: 2em; } +h2 { font-size: 1.5em; } +h3 { font-size: 1.17em; } +h4 { font-size: 1em; } +h5 { font-size: 0.83em; } +h6 { font-size: 0.67em; } +big { font-size: larger; } +small { font-size: smaller; } + +span, p, article, blockquote { + color: var(--color-text); + font-weight: 400; +} + +ul { + padding: 16px; + list-style-type: circle; +} + +a { + background-color: transparent; + border-bottom: 2px solid transparent; + font-weight: 500; + color: var(--color-link); + text-decoration: none; +} + + a:hover { + border-bottom: 2px solid var(--color-link-hover); + color: var(--color-link-hover); + transition: all 0.5s ease; + text-decoration: none; + } + +/* ------------- */ +/* SERVICE RULES */ +/* ------------- */ + +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +.container { + width: 100%; + max-width: 1080px; + margin: 0 auto; + padding-left: 16px; + padding-right: 16px; +} + +/* ------ */ +/* BANNER */ +/* ------ */ + +.banner-container { + min-height: 100vh; + display: flex; +} + +.banner { + margin: auto; + padding: 16px; +} + +/* ------------ */ +/* ITEMS STYLES */ +/* ------------ */ + +/* ------ */ +/* HEADER */ +/* ------ */ + +.header { + border-bottom: 32px solid var(--color-border); + background: var(--color-b); +} + +.header-wrapper { + padding-top: 64px; + padding-bottom: 16px; +} + +.logo-wrapper { + text-align: center; +} + +.logo-wrapper__logo { + font-size: 48px; + font-weight: 500; + color: var(--color-logo); +} + +@media only screen and (min-width: 540px) { + .logo-wrapper__logo { + font-size: 64px; + font-weight: 500; + color: var(--color-logo); + } +} + +.menu-wrapper { + margin-top: 32px; + align-self: center; +} + +.navigation { + padding: 0; + list-style-type: none; + display: flex; + justify-content: space-between; +} + +.navigation__item { + font-size: 16px; + text-transform: uppercase; +} + +@media only screen and (min-width: 720px) { + .header-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32px; + } + + .logo-wrapper { + grid-column: 1 / 2; + grid-row: 1 / 2; + text-align: left; + } + + .menu-wrapper { + margin-top: 0px; + grid-column: 2 / 3; + grid-row: 1 / 2; + } +} + +/* ----------------------------------- */ +/* MAIN, PAGE FLOW AND CONTENT SECTION */ +/* ----------------------------------- */ + +.page { + flex-grow: 1; + margin-top: 64px; + margin-bottom: 64px; +} + +.content { + margin-bottom: 16px; + padding: 32px; + border-radius: 8px; + background: var(--color-content-background); +} + +.content__header { + font-size: 1.8em; + margin-top: 0; + margin-bottom: 32px; + padding-left: 16px; + border: 4px solid var(--color-background); + outline: 2px solid var(--color-border); + border-radius: 4px; + color: var(--color-header); +} + +/* ------ */ +/* FOOTER */ +/* ------ */ + +.footer { + border-top: 4px solid var(--color-a); + background: var(--color-background); +} + +.footer-wrapper { + padding-top: 32px; + padding-bottom: 32px; +} + + .annotation__text { + color: var(--color-anotation); + } + +/* ----------- */ +/* WAVE MASTER */ +/* ----------- */ + +.wavelovers { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 16px; +} + +.message-box { + text-align: center; + font-size: 18px; +} + +.device-box { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; + text-align: center; +} + + .device-list { + display: flex; + flex-direction: row; + justify-content: space-around; + gap: 16px; + } + + .list-item { + max-width: 100%; + padding: 16px; + border: 4px solid var(--color-b); + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; + } + + @media only screen and (min-width: 540px) { + .list-item { + max-width: 50%; + } + } + + .list-item_selected { + outline: 2px solid var(--color-border); + } + + .list-item__info { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + } + + .list-item__info > div { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + +.controls-banner { + width: 100%; + text-align: center; +} + + .controls-banner__list { + display: flex; + flex-direction: column; + justify-content: space-between; + } + diff --git a/css/vibration-master.css b/css/vibration-master.css deleted file mode 100644 index fbd4a43..0000000 --- a/css/vibration-master.css +++ /dev/null @@ -1,77 +0,0 @@ -/* -------------- */ -/* GAMEPAD MASTER */ -/* -------------- */ - -@charset 'UTF-8'; - -.vibration-master { - display: flex; - flex-direction: column; - justify-content: flex-start; - gap: 16px; -} - -.message-box { - text-align: center; -} - -.device-box { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 16px; - text-align: center; -} - - .device-list { - display: flex; - flex-direction: row; - justify-content: space-around; - gap: 16px; - } - - .list-item { - max-width: 100%; - padding: 16px; - border: 4px solid var(--color-background); - outline: 2px solid var(--color-border-alpha); - border-radius: 4px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 16px; - } - - @media only screen and (min-width: 640px) { - .list-item { - max-width: 50%; - } - } - - .list-item_selected { - outline: 2px solid var(--color-border); - } - - .list-item__info { - padding: 16px; - display: flex; - flex-direction: column; - gap: 16px; - } - - .list-item__info > div { - display: grid; - grid-template-columns: repeat(3, 1fr); - } - -.controls-banner { - width: 100%; - text-align: center; -} - - .controls-banner__list { - display: flex; - flex-direction: column; - justify-content: space-between; - } - diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..b6409e0 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..d637a0d Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..7997bef Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index a46fe6a..ca2fa0e 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@
-