diff --git a/css/base.css b/css/base.css
index aaa540a..1931c44 100644
--- a/css/base.css
+++ b/css/base.css
@@ -21,6 +21,7 @@
--corner-radius: 8px;
--corner-radius-half: 4px;
+ --corner-radius-surface: 12px;
--icon-line-thickness: 2px;
--icon-line-length: 60%;
@@ -37,7 +38,7 @@ h2 { font-size: var(--font-h2-size); }
body {
font-family: Inter, sans-serif;
- background: white;
+ background: var(--ui-gray-m1-color);
padding: 0;
margin: 0;
}
@@ -114,3 +115,70 @@ a { color: var(--ui-accent-color); }
color: var(--ui-gray-3-color);
margin: 8px 0;
}
+
+.surface {
+ background-color: white;
+ padding: 12px;
+ border-radius: var(--corner-radius-surface);
+ box-sizing: border-box;
+}
+
+.surface.top-tight {
+ border-radius: 0 0 var(--corner-radius-surface) var(--corner-radius-surface);
+}
+
+.surface.full-width { width: 100%; }
+
+.page-content {
+ margin: 12px;
+}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+/* Header home button */
+
+.home-button {
+ text-decoration: none;
+}
+
+.proportio-logo {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.logo-img {
+ height: 52px;
+ width: 52px;
+}
+
+.logo-text {
+ font-family: "Montserrat Alternates", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+
+ color: var(--text-body-color);
+ font-size: 32px;
+}
+
+/* Nav */
+
+.nav {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.nav-item {
+ padding: 2px 0;
+ text-decoration: none;
+ color: var(--text-accent-color);
+ font-size: 16px;
+}
+
+.nav-item:hover { color: var(--ui-accent-color); }
diff --git a/css/index.css b/css/index.css
index 875ae0a..d8fbef9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,5 @@
+body { background-color: white; }
+
#app {
max-width: 600px;
margin: 16px auto;
diff --git a/css/promo.css b/css/promo.css
index 7bed018..9f5a5d6 100644
--- a/css/promo.css
+++ b/css/promo.css
@@ -1,17 +1,24 @@
-#shell
-{
- padding: 0 16px 16px 16px;
+.page {
+ max-width: 600px;
+ margin: 0 auto;
+}
+.page-content {
display: flex;
flex-direction: column;
align-items: center;
+}
+/* Здесь всего один блок. */
+.content-block {
max-width: 400px;
- margin: 0 auto;
}
-#promo
-{
- border-radius: 0 0 16px 16px;
- width: 100%;
+.content-block p {
+ margin-bottom: 0;
+}
+
+.promo-img {
+ border-radius: 16px;
+ max-width: 100%;
}
\ No newline at end of file
diff --git a/examples.html b/examples.html
index fe5ed50..db72740 100644
--- a/examples.html
+++ b/examples.html
@@ -40,8 +40,10 @@
Примеры рецептов — Пропорцио
-
-
+
diff --git a/index.html b/index.html
index 7039266..d70a53a 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,10 @@
Пересчитать рецепт — Пропорцио
-
-
+
@@ -148,7 +150,7 @@
+ Пропорцио
+
+
+