Adaptivity + more assets

.idea/workspace.xml

@@ -1,21 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="TON Web page">
-      <change afterPath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/ton_right.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/ton_right.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/tondns.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/tondns.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/tonweb.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/tonweb.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/tonweb_duck.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/WhiteLayout.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets">
+      <change afterPath="$PROJECT_DIR$/src/assets/images/anton_ton.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/my_name_is.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/personal_page.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/send_by_name.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/tg_nft.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/tondns_nft.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/getting_ton_domain.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/i-know.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/i-know.svg" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/ton_bottom.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_bottom.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/ton_right.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/ton_right.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_right.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/ton_top.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_top.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/tondns.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/tonweb.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/tonweb_duck.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/images/tonweb_duck.png" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/WhiteLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/WhiteLayout.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Landing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Landing.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -41,17 +50,24 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "/home/ennucore/dev/agorata/frontend",
-    "nodejs_package_manager_path": "npm",
-    "ts.external.directory.path": "/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/home/ennucore/dev/agorata/frontend&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/assets/headers" />
+      <recent name="$PROJECT_DIR$/src/assets/images" />
+      <recent name="$PROJECT_DIR$/src/assets/icons" />
+    </key>
+  </component>
   <component name="RunManager">
     <configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
@@ -72,7 +88,10 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1670839492682</updated>
-      <workItem from="1670839496719" duration="9645000" />
+      <workItem from="1670839496719" duration="10862000" />
+      <workItem from="1670927344373" duration="29000" />
+      <workItem from="1670927391338" duration="2277000" />
+      <workItem from="1671024025708" duration="1539000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -108,6 +127,7 @@
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Wrote the landing" />
     <MESSAGE value="TON Web page" />
-    <option name="LAST_COMMIT_MESSAGE" value="TON Web page" />
+    <MESSAGE value="Adaptivity + more assets" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adaptivity + more assets" />
   </component>
 </project>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "agorata",
       "version": "0.0.0",
       "dependencies": {
+        "bulma": "^0.9.4",
         "sass": "^1.56.2",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
@@ -850,6 +851,11 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "dev": true,
@@ -3181,6 +3187,11 @@
       "optional": true,
       "peer": true
     },
+    "bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "call-bind": {
       "version": "1.0.2",
       "dev": true,

package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "bulma": "^0.9.4",
     "sass": "^1.56.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

src/assets/main.css

@@ -1,4 +1,7 @@
 @import './base.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 #app {
     margin: 0 auto;
@@ -30,16 +33,22 @@ a,
 .b {
     border: 2px solid transparent;
     border-radius: 5px;
-    padding: 16px 32px;
+    padding: 16px 26px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    font-size: 1.6rem;
+    font-size: 1.55rem;
     margin: 4px 2px;
     cursor: pointer;
     font-weight: bold;
 }
 
+@media (max-width: 800px) {
+    .b {
+        font-size: 1.4rem;
+    }
+}
+
 .b.white {
     background-color: white;
     color: #282e46;
@@ -86,6 +95,13 @@ a,
     margin: 0.5rem 3rem;
 }
 
+/* small margin on mobile */
+@media (max-width: 800px) {
+    .rbox {
+        margin: 0.5rem 0.5rem;
+    }
+}
+
 .rbox > p:not(:first-child) {
     margin-top: 1rem;
 }

src/components/WhiteLayout.vue

@@ -5,17 +5,17 @@
       <slot name="header"></slot>
     </div>
     <div>
-      <div class="rbox" style="width: 90%; min-height: 50vh">
+      <div class="rbox" style="min-height: 50vh">
         <slot name="content"></slot>
       </div>
     </div>
-    <div class="buttons">
+    <div class="buttons columns is-center is-centered">
       <slot name="buttons">
         <router-link :to="next">
-          <!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right -->
+          <!-- "Next" button of class "bblue wide" with @/assets/icons/ton_right.svg icon on the right -->
           <button class="b blue wide">
             <span>{{nexttext}}</span>
-            <img src="@/assets/ton_right.svg" alt="Next"/>
+            <img src="@/assets/icons/ton_right.svg" alt="Next"/>
           </button>
         </router-link>
       </slot>
@@ -51,8 +51,19 @@ export default {
 }
 
 .buttons {
-  display: flex;
   justify-content: center;
   margin: 1rem 0;
+  width: 100%;
+  display: flex;
+  /* Center the buttons */
+  align-items: center;
+  place-items: center;
+  /* Center the buttons */
+
+}
+
+.rbox {
+  min-width: 90%;
+  margin: auto 3%;
 }
 </style>

src/views/IKnow.vue

@@ -1,7 +1,7 @@
 <template>
   <WhiteLayout next="">
     <template v-slot:header>
-      <img src="@/assets/i-know.svg" style="height: 100%" alt="TON DNS"/>
+      <img src="@/assets/headers/i-know.svg" style="max-height: 100%; max-width: 90%" alt="TON DNS"/>
     </template>
     <template v-slot:content>
       <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
@@ -15,13 +15,13 @@
     <template v-slot:buttons>
       <router-link to="tondns">
         <button class="b blue wide">
-          <img src="@/assets/ton_top.svg" alt="Next"/>
+          <img src="@/assets/icons/ton_top.svg" alt="Next"/>
           <span>Yes</span>
         </button>
       </router-link>
       <router-link to="tondns">
         <button class="b blue wide">
-          <img src="@/assets/ton_bottom.svg" alt="Next"/>
+          <img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
           <span>No</span>
         </button>
       </router-link>
@@ -39,5 +39,11 @@ export default {
 </script>
 
 <style scoped>
-
+/* narrow buttons on mobile */
+@media only screen and (max-width: 800px) {
+  .b.blue.wide {
+    max-width: 35vw;
+    min-width: revert;
+  }
+}
 </style>

src/views/Landing.vue

@@ -5,7 +5,7 @@
   <main>
     <!-- @/assets/logo_single.png centered horizontally and slightly above center vertically -->
     <img class="logo" src="@/assets/logo_landing.png" alt="Agorata" />
-    <p style="font-size: 1.8rem">Helping you <b style="font-weight: bold">be</b> the new internet</p>
+    <p style="font-size: 1.8rem; padding: 2rem;">Helping you <b style="font-weight: bold">be</b> the new internet</p>
 
     <div id="do-you-know">
       <p>Do you know what TON Web is?</p><br/>
@@ -33,13 +33,14 @@ main {
   color: white;
   font-family: 'Raleway',serif;
   font-size: 1.5rem;
+  text-align: center;
 }
 
 .logo {
   display: block;
   margin: 0 auto 2rem;
-  max-width: 25%;
-  max-height: 25%;
+  width: 25%;
+  min-width: 13rem;
 }
 
 #do-you-know {
@@ -49,6 +50,7 @@ main {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 2rem;
 }
 
 </style>

src/views/TonDns.vue

@@ -18,7 +18,7 @@
       <router-link to="/get_tondon">
         <button class="b blue wide">
           <span>Omg, can I get one?</span>
-          <img src="@/assets/ton_right.svg" alt="Next"/>
+          <img src="@/assets/icons/ton_right.svg" alt="Next"/>
         </button>
       </router-link>
     </template>

src/views/TonWeb.vue

@@ -4,15 +4,15 @@
       <img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/>
     </template>
     <template v-slot:content>
-      <div class="columns-2" style="display: flex; columns: 2">
+      <div class="columns-2">
         <div>
-            <img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
+          <img src="@/assets/images/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
         </div>
         <div>
           <p>TON Sites are just websites hosted on the TON Network.<br/>
             After some configuration, you can visit a website like foundation.ton.</p>
           <p>They have a lot of advantages:</p>
-            <ul style="text-align: left; padding: 0 5rem; font-size: 1.4rem">
+          <ul class="wbox_ul">
             <li> The DApps are truly D: they cannot be banned or pressured, the servers cannot be traced, the apps
               don't get the user's IP
             </li>
@@ -38,5 +38,19 @@ export default {
 </script>
 
 <style scoped>
+.wbox_ul {
+  text-align: left;
+  padding: 0 5rem;
+  font-size: 1.4rem;
+}
+/* less padding on mobile */
+@media (max-width: 800px) {
+  .wbox_ul {
+    padding: 0 1rem;
+  }
+}
 
+img {
+  max-width: 80vw;
+}
 </style>