Converted to new Tachyons based layout and style

7 years ago · bfcdb4b702
parent a371f47bf2
commit bfcdb4b702
12 changed files with 161 additions and 79 deletions
--- a/services/cms/blog/templates/blog/blog_index_page.html
+++ b/services/cms/blog/templates/blog/blog_index_page.html
@ -6,6 +6,8 @@

 {% block content %}

+  {% include 'header.html' %}
+
  <section class="mw7 center bg-white-10">
    <h1 class="ph3 ph0-l">{{ page.title }}</h1>

@ -33,5 +35,6 @@

  </section>

+  {% include 'footer.html' %}

 {% endblock %}
--- a/services/cms/blog/templates/blog/blog_page.html
+++ b/services/cms/blog/templates/blog/blog_page.html
@ -5,10 +5,18 @@
 {% block body_class %}helvetica{% endblock %}

 {% block content %}
+  {% include 'header.html' %}
+  <article class="ph3 ph3-ns center mw8">
  <h1>{{ page.title }}</h1>
  <p class="meta">{{ page.date }}</p>
+    {% if page.tags.all.count %}
+      <div class="dib">
+        {% for tag in page.tags.all %}
+        <a href="{% slugurl 'tags' %}?tag={{ tag }}" class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black">{{ tag }}</a>
+      {% endfor %}
+      </div>
+    {% endif %}

-  <div class="intro">{{ page.intro }}</div>
  {{ page.body|richtext }}

  {% for item in page.gallery_images.all %}
@ -18,17 +26,5 @@
    </div>
  {% endfor %}

-  {% if page.tags.all.count %}
-    <div class="tags">
-      <h3>Tags</h3>
-      {% for tag in page.tags.all %}
-        <a href="{% slugurl 'tags' %}?tag={{ tag }}">
-          <button type="button">{{ tag }}</button>
-        </a>
-      {% endfor %}
-    </div>
-
-  {% endif %}
-
-  <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
+  </article>
 {% endblock %}
--- a/services/cms/blog/templates/blog/blog_tag_index_page.html
+++ b/services/cms/blog/templates/blog/blog_tag_index_page.html
@ -4,7 +4,7 @@
 {% block body_class %}helvetica{% endblock %}

 {% block content %}
-
+{% include 'header.html' %}
  <section class="mw7 center">
    {% if request.GET.tag|length %}
      <h1 class="ph3 ph0-l">Showing pages tagged "{{ request.GET.tag }}"</h1>
--- a/services/cms/cms/static/css/cms.css
+++ b/services/cms/cms/static/css/cms.css
@ -0,0 +1,9 @@
+.bg-grad-blue {
+  background-image: linear-gradient(-208deg, #86C3D0 0%, #4E90A3 66%); }
+
+.bg-grad-green {
+  background-image: linear-gradient(to top right, #41b782, #86D169); }
+
+.hover-bg-orange:hover {
+  background-color: #FF6300;
+  transition: all .3s ease; }
--- a/services/cms/cms/static/icon/basic_book_pen.svg
+++ b/services/cms/cms/static/icon/basic_book_pen.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<rect x="1" y="1" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="46" height="62"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="9" y1="63" x2="9" y2="2"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="14" y1="15" x2="42" y2="15"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="14" y1="21" x2="42" y2="21"/>
+<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="63,3 63,53 59,61 55,53 55,3 "/>
+<polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="55,7 51,7 51,17 "/>
+</svg>
--- a/services/cms/cms/static/icon/basic_settings.svg
+++ b/services/cms/cms/static/icon/basic_settings.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="36" y1="34" x2="41" y2="39"/>
+<rect x="46.257" y="35.065" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 120.5036 47.0858)" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="8.485" height="26.87"/>
+<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="12,16 18,10 8,4 6,6 "/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="28" y1="26" x2="15" y2="13"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M58,12.5l-8,3.75l-4-4.125l3.5-8.062l0,0
+	C39.5,4.062,37,9,37,14v4L3.5,52l-1.75,6l2.125,2l6.062-1.5L44,25h4C53,25,58,22.5,58,12.5L58,12.5z"/>
+</svg>
--- a/services/cms/cms/static/icon/basic_webpage_txt.svg
+++ b/services/cms/cms/static/icon/basic_webpage_txt.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="6" y1="25" x2="58" y2="25"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="6" y1="33" x2="58" y2="33"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="6" y1="41" x2="58" y2="41"/>
+<rect x="1" y="7" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="62" height="50"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="1" y1="15" x2="63" y2="15"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="10" y1="11" x2="6" y2="11"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="18" y1="11" x2="14" y2="11"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="26" y1="11" x2="22" y2="11"/>
+</svg>
--- a/services/cms/cms/static/scss/cms.scss
+++ b/services/cms/cms/static/scss/cms.scss
@ -0,0 +1,12 @@
+.bg-grad-blue {
+    background-image: linear-gradient(-208deg, #86C3D0 0%, #4E90A3 66%);
+}
+
+.bg-grad-green {
+  background-image: linear-gradient(to top right, #41b782, #86D169);
+}
+
+.hover-bg-orange:hover {
+  background-color: #FF6300;
+  transition: all .3s ease;
+}
--- a/services/cms/cms/templates/base.html
+++ b/services/cms/cms/templates/base.html
@ -29,8 +29,6 @@
 <body class="{% block body_class %}{% endblock %}">
 {% wagtailuserbar %}

-{% include "header.html" %}
-

 {% block content %}{% endblock %}

--- a/services/cms/cms/templates/footer.html
+++ b/services/cms/cms/templates/footer.html
@ -0,0 +1,10 @@
+{% load wagtailcore_tags %}
+
+  <footer class="pv5 pv6-ns ph3 ph5-m ph6-l white-70 bg-black-50">
+    <small class="f6 db tc">© 2018 <span class="ttu f5 fw3">Andrew Bednar</span>, All Rights Reserved</small>
+    <div class="tc mt3">
+      <a href="/terms/"    title="Terms" class="f5 dib ph2 link white-70 dim mb2">Terms of Use</a>
+      <a href="/privacy/"  title="Privacy" class="f5 dib ph2 link white-70 dim mb2">Privacy</a>
+      <a href="http://linea.io/"  title="Privacy" class="f5 dib ph2 link white-70 dim mb2">Icons by Dario Ferrando</a>
+    </div>
+  </footer>
--- a/services/cms/cms/templates/header.html
+++ b/services/cms/cms/templates/header.html
@ -1,17 +1,20 @@
 {% load wagtailcore_tags %}

-<nav class="dt w-100 center bg-dark-green">
-  <div class="dtc w2 v-mid pa3">
-    <a href="{% slugurl 'home' %}" class="dib w2 h2 pa1 br1 ba b--white-90 grow-large border-box">
+  <header class="dt w-100 bg-grad-blue ph2 ph3-ns ph3-m">
+    <div id="logo" class="dtc v-mid">
+      <a href="{% slugurl 'home' %}" class="f2-ns f3 fw6 link dim white mr3">Datasketch.io</a>
+    </div>
+    <nav class="dtc tr fw6 f6 pv3 pv4-ns pv4-m pv4-l ttu tracked">
+      <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Blog</a>
+      <a href="{% slugurl 'home' %}#services" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Services</a>
+      <!-- <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Portfolio</a> -->
+      <a href="{% slugurl 'home' %}#connect" class="hover-bg-orange no-underline white mr2 mr3-ns ba pv2 ph3 br1 dn dib-l dib-m">Connect</a>
+      <a href="{% slugurl 'home' %}" class="dib dn-ns w2 h2 pa1 br1 ba b--white-90 grow-large border-box">
        <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>
          skull icon</title>
          <path
              d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path>
        </svg>
      </a>
-  </div>
-  <div class="dtc v-mid tr pa3">
-    <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="{% slugurl 'blog' %}">Blog</a>
-    <a class="f6 fw4 hover-white no-underline white-70 br1 dib ml2 pv2 ph3 ba grow" href="#">Connect</a>
-  </div>
    </nav>
+  </header>
--- a/services/cms/home/templates/home/home_page.html
+++ b/services/cms/home/templates/home/home_page.html
@ -7,26 +7,24 @@
 {% block body_class %}helvetica bg-black-10{% endblock %}

 {% block content %}
-  <header class="sans-serif">
-    <div class="cover bg-left bg-center-l" style="background-image: url({% static "img/programming_background.jpg" %})">
+  <div class="cover bg-left bg-center-l" style="background-image: url({% static 'img/programming_background.jpg' %})">
    <div class="bg-black-80 pb5 pb6-m pb7-l">
-        <div class="tc-l pt4 pt5-m pt6-l pb3">
-          <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">Datasketch</h1>
-          <h2 class="fw1 f3 white-80 mt3 mb4">A full stack shop for web design, application development, and
-            training</h2>
-          <a class="f6 no-underline grow dib v-mid bg-blue white br1 ba b--blue ph3 pv2 mb3"
-             href="{% slugurl 'blog' %}">Read the blog</a>
+      {% include "header.html" %}
+        <div id="hero-text" class="tc-l mt4 mt5-m mt6-l ph3">
+          <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">Hire Datasketch</h1>
+          <h2 class="fw1 f3 white-80 mt3 mb4">A full stack shop for web design, application development, and training</h2>
+          <a href="#connect" class="f6 no-underline grow dib v-mid bg-orange white ba bn ph3 pv2 mb3 br1 tracked">Connect</a>
          <span class="dib v-mid ph3 white-70 mb3">or</span>
-          <a class="f6 no-underline grow dib v-mid white ba b--white br1 ph3 pv2 mb3" href="">Connect with us</a>
+          <a class="f6 no-underline grow dib v-mid white ba b--white ph3 pv2 mb3 br1" href="{% slugurl 'blog' %}" ">Read our blog</a>
        </div>
    </div>
  </div>
-  </header>
-  <main class="pv4 ph2 tc">
-    <h1>Just a man trying to make a buck</h1>
-    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
+  <main id="services" class="pv4 ph2 tc">
+    <h1 class="f2 fw6">Just a man trying to make a buck</h1>
+    <div class="flex-ns justify-center-ns">
+      <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
        <div class="tc">
-        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
+          <img src="{% static 'icon/basic_book_pen.svg' %}" class="h3 w3 dib" title="Photo of a kitty staring at you">
          <h1 class="f4">Training</h1>
          <hr class="mw3 bb bw1 b--black-10">
        </div>
@ -35,19 +33,19 @@
          along thier learning journey.
        </p>
      </article>
-    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
+      <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
        <div class="tc">
-        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
+          <img src="{% static 'icon/basic_webpage_txt.svg' %}" class="h3 w3 dib" title="web-icon">
          <h1 class="f4">Websites</h1>
          <hr class="mw3 bb bw1 b--black-10">
        </div>
-      <p class="lh-copy measure center f6 black-70">
+        <p class="h3 lh-copy measure center f6 black-70">
          Design & Development, eCommerce, Responsive Design. I can deliver you a stunning website.
        </p>
      </article>
-    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
+      <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
        <div class="tc">
-        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
+          <img src="{% static 'icon/basic_settings.svg' %}" class="h3 w3 dib" title="App development icon">
          <h1 class="f4">App Development</h1>
          <hr class="mw3 bb bw1 b--black-10">
        </div>
@ -57,5 +55,20 @@
          roll around on the floor waiting for you give her more of them.
        </p>
      </article>
+    </div>
  </main>
+  <div id="connect" class="bg-grad-blue tc pv5 pv6-ns ph2">
+    <div class="mw6 center">
+      <h1 class="white f2 fw5 mb5">Together we can make great things.</h1>
+      <form class=""  action="">
+        <input class="input-reset w-100 w-45-ns mb3 pv2 ba br1 b--black-10" type="text" name="fullname"  placeholder="Full Name">
+        <input class="input-reset w-100 mb3 pv2 ba br1 b--black-10 mail-icon" type="email" name="email" placeholder="Email">
+        <br>
+        <textarea class="input-reset w-100 h4 mb3 pv2 ba br1 b--black-10" name="comments" placeholder="Comments"></textarea>
+        <br>
+        <button class="f5 dim fw5 dib v-mid bg-orange white ba bn ph3 pv2 mb3 br1 tracked">Talk to the developer!</button>
+      </form>
+    </div>
+  </div>
+  {% include "footer.html" %}
 {% endblock %}