Skip to content

Commit

Permalink
Restore footer and overall content.
Browse files Browse the repository at this point in the history
  • Loading branch information
@martindale
martindale committed Jun 21, 2016
1 parent d2058f9 commit bc6083e
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 109 deletions.
14 changes: 11 additions & 3 deletions private/less/maki.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
margin-top: -1em;
margin-bottom: -1em;
}
.ui.menu .logo.item>img:not(.ui) {
margin-right:1em;
}
.masthead .ui.menu .ui.button {
margin-left: 0.5em;
}
Expand All @@ -55,9 +58,6 @@
border-bottom: 0;
}

.ui.vertical.stripe {
padding: 8em 0em;
}
.ui.vertical.stripe h3 {
font-size: 2em;
}
Expand Down Expand Up @@ -91,6 +91,14 @@
display: none;
}

.sidebar .header a {
color: white;
}

.sidebar .header a img {
margin: 1em;
}

@media only screen and (max-width: 700px) {
.ui.fixed.menu {
display: none !important;
Expand Down
163 changes: 64 additions & 99 deletions views/index.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,70 @@ block masthead
i.right.chevron.icon

block content
.ui.header
h1.huge Hello, #{config.service.name}.
h2 !{ markdown( config.service.mission ) }

p !{ markdown( config.service.description ) }

.ui.stackable.three.column.grid
for point in config.service.points
.column
.ui.fluid.card
.content
h2.header #{ point.header }
//- TODO: use marked config, not a regex, to fix errant <p> tags
p.description
| !{ markdown( point.description ).replace(/<p>(.*)<\/p>/, '$1') }
if (point.action)
a.ui.bottom.attached.button(href="#{point.action.link}") !{point.action.text}
.ui.vertical.stripe.segment
.ui.text.container
h3.ui.horizontal.header.divider Semantic Interface Design
p Build applications with the <a href="/snippets/components">Interface Design Language</a> and enjoy harmony.

code.header generic-chat.interface:
.ui.segment
pre.jade.numbered
code.
extends layouts/default

block content
maki-chat-view(src="/rooms/lounge")

img.ui.centered.aligned.image(src="/img/image.png")

h3.ui.horizontal.header.divider Component Architecture
p Components can be built and customized to control the user experience of your application across multiple platforms.

.ui.two.column.centered.stackable.grid.container(style="margin-top: 2em; margin-bottom: 2em;")
.six.wide.column
code.header maki-chat-view.component:
.ui.segment
pre.jade.numbered
code.
component#maki-chat-view
template
maki-chat-messages
maki-chat-input
.six.wide.column
code.header maki-chat-input.component:
.ui.segment
pre.jade.numbered
code.
component#maki-chat-input
template
input(type="text", name="content")
button(type="submit", on-tap="submit")
behavior
function submit() {
// hooray!
}
.ui.three.column.centered.stackable.grid.container(style="margin-top: 2em; margin-bottom: 2em;")
.three.wide.column
h4 Mobile
img.ui.centered.aligned.image(src="/img/image.png")
.three.wide.column
h4 Desktop
img.ui.centered.aligned.image(src="/img/image.png")
.three.wide.column
h4 Web
img.ui.centered.aligned.image(src="/img/image.png")


.ui.vertical.stripe.quote.segment
.ui.equal.width.stackable.internally.celled.grid
.center.aligned.row
.column
h3 "This feels like the invention of the transistor."
p Will Ricketts, SailsJS Contributor
.column
h3 We're building something new.
a.ui.huge.primary.button(href="/developers/getting-involved") Come join us.
i.icon.right.chevron

//-block page
.pusher
Expand Down Expand Up @@ -72,85 +119,3 @@ block content
a.ui.huge.primary.button(href="/docs")
| Create Your First Project
i.right.chevron.icon
.ui.vertical.stripe.segment
.ui.middle.aligned.stackable.grid.container
.ui.equal.width.stackable.internally.celled.grid
.center.aligned.row
for point in config.service.points
.column
h3.header #{ point.header }
//- TODO: use marked config, not a regex, to fix errant <p> tags
p.description
| !{ markdown( point.description ).replace(/<p>(.*)<\/p>/, '$1') }
if (point.action)
a.ui.huge.fluid.button(href="#{point.action.link}") !{point.action.text}
.ui.vertical.stripe.segment
.ui.text.container
h3.ui.header Powerful Helpers
p Maki comes with a suite of powerful tools, out of the box. Each is completely optional and replaceable!
h4.ui.horizontal.header.divider The Power Suite
p By default, Maki apps are composed with <a href="http://jade-lang.com">Jade</a>, styled with <a href="https://semantic-ui.com">Semantic UI</a>, and bound together by <a href="https://facebook.github.io/flux/">the Flux architecture</a> (as implemented by <a href="https://facebook.github.io/react/">React</a>).
pre.jade
code.
extends layouts/default
block menu
Item(target="/settings") Settings
block navigation
Item(target="/") Home
Item(target="back") Back
block primary
ChatView(src="/rooms/lounge")
p This allows you to write your application <em>once</em>, and we can derive native interfaces directly &mdash; by default, provided by <a href="https://facebook.github.io/react-native/">React Native</a>.
h2.ui.header Loosely Coupled
p Have a better way to do things? Have a different compile target? All Maki components are <strong>optional</strong>, and can even be outright removed without disrupting the other components of the system.
.ui.vertical.stripe.quote.segment
.ui.equal.width.stackable.internally.celled.grid
.center.aligned.row
.column
h3 "This feels like the invention of the transistor."
p Will Ricketts, SailsJS Contributor
.column
h3 We're building something new.
a.ui.huge.primary.button(href="/developers/getting-involved") Come join us.
i.icon.right.chevron
.ui.inverted.vertical.footer.segment
.ui.container
.ui.stackable.inverted.divided.equal.height.stackable.grid
.six.wide.column
h4.ui.inverted.header About
p Maki is a labor of love, a result of several years of iterations and re-architectures in pursuit of a clean, hand-rolled framework for building clean, useful applications. We hope you like it.
//-.ui.inverted.link.list
a.item(href="#") Protocol
a.item(href="#") Whitepaper
a.item(href="#") Roadmap
a.item(href="#") Contact Us
.seven.wide.column
h4.ui.inverted.header Copyleft
p Maki is copyleft, and encourages you to copy, clone, and <em>create</em>. After all, without a rich public domain, how else can we innovate? Much to our chagrin, the software itself is more formally <a href="https://github.com/martindale/maki/blob/master/LICENSE">MIT licensed</a>, while our content is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>.
.three.wide.column
h4.ui.inverted.header Elsewhere
.ui.inverted.link.list
a.item(href="https://github.com/martindale/maki", rel="me")
i.icon.github
| GitHub
a.item(href="https://twitter.com/martindale", rel="me")
i.icon.twitter
| Twitter
a.item(href="https://facebook.com/eric.martindale", rel="me")
i.icon.facebook
| Facebook
//-a.item(href="#", rel="me")
i.icon.medium
| Medium
47 changes: 41 additions & 6 deletions views/layouts/default.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,16 @@ html.no-js
i.icon(class="#{resource.options.icon}")
| #{resource.names.handle}
.ui.vertical.inverted.sidebar.menu
a.logo.item(href="/")
if (config.service.logo)
img(src="#{config.service.logo}")
else
i.icon.left(class="#{ config.service.icon || 'lab' }")
| #{config.service.name}
.ui.center.aligned.inverted.header
a(href="/")
if (config.service.logo)
img.ui.centered.tiny.circular.bordered.image(src="#{config.service.logo}")
else
i.icon.left(class="#{ config.service.icon || 'lab' }")
| #{config.service.name}
p(style="text-align: center;")
//-small made with <i class="icon heart"></i>
small(style="color:rgba(255,255,255,0.5); font-size: 0.75em;") made with <i class="icon heart"></i>
each resource in resources
if (resource.public)
a.item(href="#{resource.routes.query}")
Expand Down Expand Up @@ -108,6 +112,37 @@ html.no-js
.ui.container.content(data-for="viewport", style="padding-top: 1em;")
include ../partials/flash
block content


.ui.inverted.vertical.footer.segment(style="margin-top: 2em;")
.ui.container
.ui.stackable.inverted.divided.equal.height.stackable.grid
.six.wide.column
h4.ui.inverted.header About
p Maki is a labor of love, a result of several years of iterations and re-architectures in pursuit of a clean, hand-rolled framework for building clean, useful applications. We hope you like it.
//-.ui.inverted.link.list
a.item(href="#") Protocol
a.item(href="#") Whitepaper
a.item(href="#") Roadmap
a.item(href="#") Contact Us
.seven.wide.column
h4.ui.inverted.header Copyleft
p Maki is copyleft, and encourages you to copy, clone, and <em>create</em>. After all, without a rich public domain, how else can we innovate? Much to our chagrin, the software itself is more formally <a href="https://github.com/martindale/maki/blob/master/LICENSE">MIT licensed</a>, while our content is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>.
.three.wide.column
h4.ui.inverted.header Elsewhere
.ui.inverted.link.list
a.item(href="https://github.com/martindale/maki", rel="me")
i.icon.github
| GitHub
a.item(href="https://twitter.com/martindale", rel="me")
i.icon.twitter
| Twitter
a.item(href="https://facebook.com/eric.martindale", rel="me")
i.icon.facebook
| Facebook
//-a.item(href="#", rel="me")
i.icon.medium
| Medium
//-.ui.page.grid
//-.row
Expand Down
2 changes: 1 addition & 1 deletion views/page.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ block masthead
h2 #{page.description}

block content
#page-content !{content}
.ui.text-container !{content}

0 comments on commit bc6083e

Please sign in to comment.