add style

korolr · May 25, 2019 · 5fd9c94 · 5fd9c94
1 parent 8851854
commit 5fd9c94
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,16 @@
+# Deploy
+
+1.Clone this rep
+2.Change env to tou url
+3.buid
+
+```bash
+npm i
+npm run build
+```
+
+4.Send folder to server
+
 _Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_
 
 ---

diff --git a/public/global.css b/public/global.css
@@ -1,61 +1,54 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
+.row-cen {
+  flex-direction: column !important;
+  align-items: center;
 }
 
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+.rev {
+  display: flex;
+  flex-direction: row-reverse;
 }
 
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
+* {
+  margin: 0;
+  padding: 0;
 }
-
-a:hover {
-	text-decoration: underline;
+html,
+body {
+  height: 100%;
 }
-
-a:visited {
-	color: rgb(0,80,160);
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-
-label {
-	display: block;
+.content {
+  flex: 1 0 auto;
+}
+.footer {
+  flex: 0 0 auto;
 }
 
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
+.row-footer {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  width: 100%;
 }
 
-input:disabled {
-	color: #ccc;
+body {
+  background-color: #fdf6e3;
 }
 
-input[type="range"] {
-	height: 0;
+a {
+  color: #268bd2 !important;
 }
 
 button {
-	background-color: #f4f4f4;
-	outline: none;
+  background-color: #586e75 !important;
 }
 
-button:active {
-	background-color: #ddd;
+pre {
+  background: #f4f5f6;
+  border-left: 0.3rem solid #268bd2 !important;
+  overflow-y: hidden;
 }
-
-button:focus {
-	border-color: #666;
-}
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,13 @@
 	<link rel='icon' type='image/png' href='favicon.png'>
 	<link rel='stylesheet' href='global.css'>
 	<link rel='stylesheet' href='bundle.css'>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
+	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+
+
+	<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
+
+
+	<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
 </head>
 
 <body>

diff --git a/src/App.svelte b/src/App.svelte
@@ -12,14 +12,18 @@
   import { info } from "./stores/info/store";
 </script>
 
-<div class="center-xs">
-  <Header info={$info} />
-  <Router>
-    <Route path="*" component={Blog} />
-    <Route path="/:id" component={Page} />
-    <Route path="/category/:name" component={Category} />
-    <Route path="/author/:name" component={Author} />
-  </Router>
-</div>
+<div class="wrapper">
+  <div class="content">
+    <div class="container">
+      <Header info={$info} />
+      <Router>
+        <Route path="*" component={Blog} />
+        <Route path="/:id" component={Page} />
+        <Route path="/category/:name" component={Category} />
+        <Route path="/author/:name" component={Author} />
+      </Router>
+    </div>
+  </div>
 
-<Footer />
+  <Footer />
+</div>
diff --git a/src/components/Comments.svelte b/src/components/Comments.svelte
@@ -30,16 +30,28 @@
   }
 </script>
 
+<style>
+  .date {
+    margin-top: -30px;
+  }
+</style>
+
 {#if comments.length > 0}
   <h2>{comments.length} comments</h2>
 
   {#each comments as com}
-    <p>{com.author_name}</p>
-    <img src={com.author_avatar_urls[96]} alt="" />
-    <p>{new Date(com.date).toDateString()}</p>
-    <p>
-      {@html com.content.rendered}
-    </p>
+    <div class="row">
+      <div class="column">
+        <img src={com.author_avatar_urls[96]} alt="" />
+        <p>{com.author_name}</p>
+        <p class="date"> {new Date(com.date).toDateString()}</p>
+      </div>
+      <div class="column column-75 ">
+        <p>
+          {@html com.content.rendered}
+        </p>
+      </div>
+    </div>
   {/each}
 {:else}
   <h2>Нет коментариев</h2>
@@ -56,12 +68,16 @@
     bind:value={form.name}
     type="text"
     required
-    placeholder="enter your name" />
+    placeholder="Enter your name" />
   <input
     bind:value={form.email}
     type="email"
     required
-    placeholder="enter your email" />
-  <textarea bind:value={form.comment} type="text" required placeholder="Text" />
+    placeholder="Enter your email" />
+  <textarea
+    bind:value={form.comment}
+    type="text"
+    required
+    placeholder="You text" />
   <button type="submit">Post comment</button>
 </form>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -1,4 +1,4 @@
-<div class="center-xs">
+<div class=" row-footer row-cen footer">
   <p>
     Site by korolr.
     <a href="https://github.com/korolr/wordpress-svelte">Frontend this site</a>

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -4,10 +4,16 @@
   export let info = {};
 </script>
 
+<style>
+  h1 {
+    color: inherit;
+  }
+</style>
+
 {#if info.name !== undefined}
   <Link href="/">
-    <h1>{info.name}</h1>
+    <h1 class="nes-text is-success">{info.name}</h1>
   </Link>
 
-  <h1>{info.description}</h1>
+  <h1 class="nes-text">{info.description}</h1>
 {/if}
diff --git a/src/components/ListPost.svelte b/src/components/ListPost.svelte
@@ -6,41 +6,81 @@
   export let author;
 </script>
 
-{#each $category as cat}
-  <Link href="/category/{cat.name}">
-    <h2>{cat.name}</h2>
-  </Link>
-{:else}
-  <p>loading...</p>
-{/each}
+<style>
+  .row-cen {
+    flex-direction: column;
+    align-items: center;
+  }
+  .date {
+    margin-left: 10px;
+    margin-top: 12px;
+  }
+  .name {
+    font-size: 29px;
+  }
+  .cat {
+    font-size: 18px;
+    margin-left: 6px;
+  }
+  .post {
+    font-size: 26px;
+  }
+
+  .rev dt {
+    font-size: 18px;
+    margin-left: 6px;
+  }
+</style>
+
+<dl class="rev">
+  {#each $category as cat}
+    <dt>
+      <Link href="/category/{cat.name}"> {cat.name} </Link>
+    </dt>
+  {:else}
+    <p>loading...</p>
+  {/each}
+</dl>
 
 {#each posts as post}
-  <Link href="/{post.id}" className="btn">
+  <Link href="/{post.id}" className="btn row row-cen">
     <h1>{post.title.rendered}</h1>
   </Link>
+  <div class="row">
+    {#each $author as auth}
+      {#if post.author === auth.id}
+        <div class="column">
+          <div class="row">
+            <Link href="/author/{auth.name}">
+              <p class="name">{auth.name}</p>
+            </Link>
 
-  {#each $author as auth}
-    {#if post.author === auth.id}
-      <Link href="/author/{auth.name}">
-        <h3>{auth.name}</h3>
-      </Link>
-    {/if}
-  {/each}
-
-  {#each post.categories as id_cat}
-    {#each $category as cat}
-      {#if id_cat === cat.id}
-        <Link href="/category/{cat.name}">
-          <h2>{cat.name}</h2>
-        </Link>
+            <p class="date">{new Date(post.date).toDateString()}</p>
+          </div>
+        </div>
       {/if}
     {/each}
-  {/each}
-
-  <p>{new Date(post.date).toDateString()}</p>
-  <p>
-    {@html post.content.rendered}
-  </p>
+    <div class="column">
+      <div class="rev">
+        {#each post.categories as id_cat}
+          {#each $category as cat}
+            {#if id_cat === cat.id}
+              <Link href="/category/{cat.name}">
+                <p class="cat">{cat.name}</p>
+              </Link>
+            {/if}
+          {/each}
+        {/each}
+      </div>
+    </div>
+  </div>
+  <div class="row row-cen">
+    <p class="post">
+      {@html post.excerpt.rendered}
+    </p>
+  </div>
 {:else}
-  <p>loading...</p>
+  <div class="row row-cen">
+    <p>loading...</p>
+  </div>
 {/each}