Converted to new Tachyons based layout and style

master
androiddrew 6 years ago
parent a371f47bf2
commit bfcdb4b702

@ -6,6 +6,8 @@
{% block content %} {% block content %}
{% include 'header.html' %}
<section class="mw7 center bg-white-10"> <section class="mw7 center bg-white-10">
<h1 class="ph3 ph0-l">{{ page.title }}</h1> <h1 class="ph3 ph0-l">{{ page.title }}</h1>
@ -33,5 +35,6 @@
</section> </section>
{% include 'footer.html' %}
{% endblock %} {% endblock %}

@ -5,10 +5,18 @@
{% block body_class %}helvetica{% endblock %} {% block body_class %}helvetica{% endblock %}
{% block content %} {% block content %}
{% include 'header.html' %}
<article class="ph3 ph3-ns center mw8">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p> <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 }} {{ page.body|richtext }}
{% for item in page.gallery_images.all %} {% for item in page.gallery_images.all %}
@ -18,17 +26,5 @@
</div> </div>
{% endfor %} {% endfor %}
{% if page.tags.all.count %} </article>
<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>
{% endblock %} {% endblock %}

@ -4,7 +4,7 @@
{% block body_class %}helvetica{% endblock %} {% block body_class %}helvetica{% endblock %}
{% block content %} {% block content %}
{% include 'header.html' %}
<section class="mw7 center"> <section class="mw7 center">
{% if request.GET.tag|length %} {% if request.GET.tag|length %}
<h1 class="ph3 ph0-l">Showing pages tagged "{{ request.GET.tag }}"</h1> <h1 class="ph3 ph0-l">Showing pages tagged "{{ request.GET.tag }}"</h1>

@ -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; }

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -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;
}

@ -29,8 +29,6 @@
<body class="{% block body_class %}{% endblock %}"> <body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %} {% wagtailuserbar %}
{% include "header.html" %}
{% block content %}{% endblock %} {% block content %}{% endblock %}

@ -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>

@ -1,17 +1,20 @@
{% load wagtailcore_tags %} {% load wagtailcore_tags %}
<nav class="dt w-100 center bg-dark-green"> <header class="dt w-100 bg-grad-blue ph2 ph3-ns ph3-m">
<div class="dtc w2 v-mid pa3"> <div id="logo" class="dtc v-mid">
<a href="{% slugurl 'home' %}" class="dib w2 h2 pa1 br1 ba b--white-90 grow-large border-box"> <a href="{% slugurl 'home' %}" class="f2-ns f3 fw6 link dim white mr3">Datasketch.io</a>
<svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title> </div>
skull icon</title> <nav class="dtc tr fw6 f6 pv3 pv4-ns pv4-m pv4-l ttu tracked">
<path <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Blog</a>
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> <a href="{% slugurl 'home' %}#services" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Services</a>
</svg> <!-- <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Portfolio</a> -->
</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>
</div> <a href="{% slugurl 'home' %}" class="dib dn-ns w2 h2 pa1 br1 ba b--white-90 grow-large border-box">
<div class="dtc v-mid tr pa3"> <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>
<a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="{% slugurl 'blog' %}">Blog</a> skull icon</title>
<a class="f6 fw4 hover-white no-underline white-70 br1 dib ml2 pv2 ph3 ba grow" href="#">Connect</a> <path
</div> 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>
</nav> </svg>
</a>
</nav>
</header>

@ -7,55 +7,68 @@
{% block body_class %}helvetica bg-black-10{% endblock %} {% block body_class %}helvetica bg-black-10{% endblock %}
{% block content %} {% 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="bg-black-80 pb5 pb6-m pb7-l"> {% include "header.html" %}
<div class="tc-l pt4 pt5-m pt6-l pb3"> <div id="hero-text" class="tc-l mt4 mt5-m mt6-l ph3">
<h1 class="f2 f1-l fw2 white-90 mb0 lh-title">Datasketch</h1> <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 <h2 class="fw1 f3 white-80 mt3 mb4">A full stack shop for web design, application development, and training</h2>
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>
<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>
<span class="dib v-mid ph3 white-70 mb3">or</span> <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>
</div> </div>
</header> </div>
<main class="pv4 ph2 tc"> <main id="services" class="pv4 ph2 tc">
<h1>Just a man trying to make a buck</h1> <h1 class="f2 fw6">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"> <div class="flex-ns justify-center-ns">
<div class="tc"> <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
<img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you"> <div class="tc">
<h1 class="f4">Training</h1> <img src="{% static 'icon/basic_book_pen.svg' %}" class="h3 w3 dib" title="Photo of a kitty staring at you">
<hr class="mw3 bb bw1 b--black-10"> <h1 class="f4">Training</h1>
</div> <hr class="mw3 bb bw1 b--black-10">
<p class="lh-copy measure f6 black-70"> </div>
As a college educator I learned what does and does not work for students. I strive to bring each of my students <p class="lh-copy measure f6 black-70">
along thier learning journey. As a college educator I learned what does and does not work for students. I strive to bring each of my students
</p> along thier learning journey.
</article> </p>
<article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4"> </article>
<div class="tc"> <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
<img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you"> <div class="tc">
<h1 class="f4">Websites</h1> <img src="{% static 'icon/basic_webpage_txt.svg' %}" class="h3 w3 dib" title="web-icon">
<hr class="mw3 bb bw1 b--black-10"> <h1 class="f4">Websites</h1>
</div> <hr class="mw3 bb bw1 b--black-10">
<p class="lh-copy measure center f6 black-70"> </div>
Design & Development, eCommerce, Responsive Design. I can deliver you a stunning website. <p class="h3 lh-copy measure center f6 black-70">
</p> Design & Development, eCommerce, Responsive Design. I can deliver you a stunning website.
</article> </p>
<article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4"> </article>
<div class="tc"> <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
<img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you"> <div class="tc">
<h1 class="f4">App Development</h1> <img src="{% static 'icon/basic_settings.svg' %}" class="h3 w3 dib" title="App development icon">
<hr class="mw3 bb bw1 b--black-10"> <h1 class="f4">App Development</h1>
</div> <hr class="mw3 bb bw1 b--black-10">
<p class="lh-copy measure center f6 black-70"> </div>
Quite affectionate and outgoing. <p class="lh-copy measure center f6 black-70">
She loves to get chin scratches and will Quite affectionate and outgoing.
roll around on the floor waiting for you give her more of them. She loves to get chin scratches and will
</p> roll around on the floor waiting for you give her more of them.
</article> </p>
</article>
</div>
</main> </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 %} {% endblock %}

Loading…
Cancel
Save