Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing responsive styles #12

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Landing responsive styles #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/js/app.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions public/mix-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"/js/app.js": "/js/app.js?id=84dee8592591d504ac41",
"/css/app.css": "/css/app.css?id=7dd5816b06becb558481"
"/js/app.js": "/js/app.js?id=d607c4e7e783b7a0ecf7",
"/css/app.css": "/css/app.css?id=e5ff1aeb8ae31d70e1bb"
}
42 changes: 21 additions & 21 deletions resources/assets/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*/
@tailwind preflight;

@import "../../../node_modules/prismjs/themes/prism.css";
@import "../../../node_modules/prismjs/themes/prism-coy.css";
@import "../../../node_modules/botui/build/botui.min.css";
@import "../../../node_modules/botui/build/botui-theme-default.css";

textarea, input, button {
outline: none;
textarea, input, button {
outline: none;
}

a {
Expand Down Expand Up @@ -102,15 +102,15 @@ td {
.fill-none {
fill: none
}

.browser-mockup {
background-color: #fff;
border-top: 2em solid rgba(230, 230, 230, 0.7);
box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
position: relative;
border-radius: 3px 3px 0 0
}

.browser-mockup:before {
display: block;
position: absolute;
Expand All @@ -123,28 +123,28 @@ td {
background-color: #f44;
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

.landing-code {
@apply .h-64
}

.landing-code pre[class*="language-"] {
margin: 0;
box-shadow: none;
border: none;
@apply .h-full
}

.btn {
@apply .py-4 .px-6 .no-underline .text-center .uppercase .tracking-wide .text-sm .inline-block;
transition: 200ms;
}

.btn-icon {
@apply .p-2;
line-height: 0.5rem;
}

.btn-icon-landing {
@apply .p-4;
line-height: 0.5rem;
Expand All @@ -162,7 +162,7 @@ td {
.btn-sm {
@apply .py-2 .px-4
}

.btn-rounded-hover:hover {
@apply .rounded-full
}
Expand All @@ -174,49 +174,49 @@ td {
.bg-gradient {
background-image: url(/img/bg.png);
}

.btn-outline {
@apply .border .rounded-full .mr-4
@apply .border .rounded-full
}

.btn-outline:hover {
@apply .bg-white .text-black
}

.botman-logo {
max-height: 300px;
}

.botman-sidebar ul {
@apply .list-reset
}

.botman-sidebar > ul > li > ul {
@apply .mb-3 .ml-1 .border-l .border-grey-light
}
.botman-sidebar > ul > li > ul > li {
@apply .ml-4
}

.botman-sidebar p {
@apply .text-sm .uppercase .leading-loose .text-grey-darker .tracking-wide .mb-0
}

.botman-sidebar p > a {
@apply .text-base .normal-case .leading-normal .text-black .tracking-normal
}

.botman-sidebar a {
@apply .leading-normal .text-grey-darkest .no-underline
}
.botman-sidebar a:hover {
@apply .text-teal
}

.botman-documentation-content h1 + ul {
@apply .list-reset .mt-4 .mb-8
}

.botman-documentation-content h1 + ul li a {
@apply .block .no-underline
}
Expand Down
32 changes: 16 additions & 16 deletions resources/views/landing.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,18 @@
</div>
<div class="container mx-auto px-4 md:px-0 mt-32 md:mt-0">
<div class="block md:flex flex-wrap w-full md:w-4/5 mx-auto bg-white shadow-lg rounded-sm">
<div class="flex border-b">
<div class="flex w-full lg:w-2/5 h-64">
<div class="ml-8 mt-8">
<h1 class="font-varela-round text-teal antialiased text-grey-darkest text-2xl">
<div class="flex border-b items-end">
<div class="flex w-full lg:w-2/5">
<div class="my-8 mx-4">
<h1 class="font-varela-round text-teal antialiased text-grey-darkest text-2xl m-0">
Want to support a new messenger? Easy!
</h1>
<p class="mt-4 text-grey-darkest leading-normal">
Write your chatbot logic once and connect it to one of the available messaging services, including Amazon Alexa, Facebook Messenger, Slack, Telegram or even your own Website.
</p>
</div>
</div>
<div class="overflow-hidden h-64 hidden lg:flex lg:w-3/5">
<div class="overflow-hidden hidden lg:flex h-64 lg:w-3/5">
<div class="browser-mockup mt-8 ml-4 w-full">
<div class="bg-black text-green-lighter h-full w-full font-mono p-4">
~/my-bot$ composer require botman/driver-slack<br/>
Expand All @@ -53,31 +53,31 @@
</div>
</div>
</div>
<div class="flex border-b">
<div class="overflow-hidden h-64 hidden lg:flex lg:w-3/5">
<div class="browser-mockup mt-8 ml-4 mr-4 w-full">
<div class="flex border-b items-end md:pt-4">
<div class="overflow-hiddenhidden lg:flex lg:w-3/5 h-64 sm:hidden">
<div class="browser-mockup m-5 w-full">
<div class="bg-black text-green-lighter h-full w-full font-mono p-4">
~/my-bot$ botman new chatbot
</div>
</div>
</div>
<div class="flex w-full lg:w-2/5 h-64">
<div class="ml-8 mt-8">
<h1 class="mt-0 font-varela-round text-teal antialiased text-grey-darkest text-2xl">
<div class="flex w-full lg:w-2/5">
<div class="my-8 mx-4">
<h1 class="m-0 font-varela-round text-teal antialiased text-grey-darkest text-2xl">
Existing project?<br>
Starting from scratch?<br>
We got you covered!
</h1>
<p class="mt-4 pr-8 text-grey-darkest leading-normal">
<p class="mt-4 text-grey-darkest leading-normal">
BotMan is framework agnostic - that means you can use it in your existing codebase, whatever framework you might use. Starting a new chatbot project? <b class="text-teal">BotMan Studio</b> is a Laravel 5.5 boiler project to get you started in no time!
</p>
</div>
</div>
</div>
<div class="flex border-b">
<div class="flex border-b items-end">
<div class="flex w-full lg:w-2/5 h-64">
<div class="ml-8 mt-8">
<h1 class="font-varela-round text-teal antialiased text-grey-darkest text-2xl">
<div class="my-8 mx-4">
<h1 class="font-varela-round text-teal antialiased text-grey-darkest text-2xl m-0">
We like readable code
</h1>
<p class="mt-4 text-grey-darkest leading-normal">
Expand All @@ -97,7 +97,7 @@

<div class="w-full flex flex-wrap text-center mt-8">
<div class="w-full md:w-1/2 md:text-right">
<a class="btn btn-outline text-white border-white"
<a class="btn btn-outline text-white border-white md:mr-4"
href="https://github.com/botman/botman">
GitHub
</a>
Expand Down