fix: Re-style sign in form
This commit is contained in:
Robert Prehn
parent
98e90dd32c
commit
8216060402
22 changed files with 2758 additions and 3205 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -26,7 +26,7 @@ legendary-*.tar
|
|||
npm-debug.log
|
||||
|
||||
# The directory NPM downloads your dependencies sources to.
|
||||
/assets/node_modules/
|
||||
node_modules
|
||||
|
||||
# Since we are building assets from assets/,
|
||||
# we ignore priv/static. You may want to comment
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../css/app.css"
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
|
|
@ -12,4 +12,4 @@ import "../css/app.scss"
|
|||
// import {Socket} from "phoenix"
|
||||
// import socket from "./socket"
|
||||
//
|
||||
import "phoenix_html"
|
||||
import "phoenix_html"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../css/app.css"
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
|
|
@ -12,4 +12,4 @@ import "../css/app.scss"
|
|||
// import {Socket} from "phoenix"
|
||||
// import socket from "./socket"
|
||||
//
|
||||
import "phoenix_html"
|
||||
import "phoenix_html"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../css/app.css"
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
|
|
|
|||
|
|
@ -1,41 +1,38 @@
|
|||
<div class="ui middle aligned center aligned grid">
|
||||
<div class="column">
|
||||
<h2 class="ui teal image header">
|
||||
<div class="content">
|
||||
Log-in To My Account
|
||||
</div>
|
||||
</h2>
|
||||
<%= flash_block(@conn) %>
|
||||
<%= changeset_error_block(@changeset) %>
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<div class="ui stacked segment">
|
||||
<div class="field <%= error_class(f, :password) %>">
|
||||
<div class="ui left icon input">
|
||||
<i class="user icon"></i>
|
||||
<%= text_input f, Pow.Ecto.Schema.user_id_field(@changeset), placeholder: "E-mail address" %>
|
||||
<section class="absolute w-full h-full">
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-gray-700"
|
||||
></div>
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<div class="flex content-center items-center justify-center h-full">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h1 class="relative text-white text-xl font-semibold text-center pb-6">Log In</h1>
|
||||
<%= changeset_error_block(@changeset) %>
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0"
|
||||
>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-6">
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), icon: "user", placeholder: "joe@example.org" %>
|
||||
<%= styled_input f, :password, icon: "lock", type: "password" %>
|
||||
<%= hidden_input f, :persistent_session, value: "true" %>
|
||||
<div class="text-center mt-6">
|
||||
<%= submit "Sign In", class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= error_tag f, Pow.Ecto.Schema.user_id_field(@changeset), class: "ui error message" %>
|
||||
</div>
|
||||
<div class="field <%= error_class(f, :password) %>">
|
||||
<div class="ui left icon input">
|
||||
<i class="lock icon"></i>
|
||||
<%= password_input f, :password, placeholder: "Password" %>
|
||||
<div class="flex flex-wrap mt-6">
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new) %></span>
|
||||
</div>
|
||||
<%= error_tag f, :password, class: "ui error message" %>
|
||||
</div>
|
||||
<%= hidden_input f, :persistent_session, value: "true" %>
|
||||
<%= submit "Login", class: "ui fluid large teal submit button" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="ui message">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new) %></span>
|
||||
<%= if pow_extension_enabled?(PowResetPassword) do %>
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new)) %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= if pow_extension_enabled?(PowResetPassword) do %>
|
||||
<div class="ui message">
|
||||
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new)) %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../css/app.css"
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
|
|
@ -12,4 +12,4 @@ import "../css/app.scss"
|
|||
// import {Socket} from "phoenix"
|
||||
// import socket from "./socket"
|
||||
//
|
||||
import "phoenix_html"
|
||||
import "phoenix_html"
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ defmodule Content.PostsController do
|
|||
defp try_static_post(conn, id) do
|
||||
path = "static_pages/#{id}.html"
|
||||
try do
|
||||
render(conn, path)
|
||||
render(conn |> put_flash(:error, "Tits!"), path)
|
||||
rescue
|
||||
e in Phoenix.Template.UndefinedError ->
|
||||
case e do
|
||||
|
|
|
|||
|
|
@ -1,180 +1,700 @@
|
|||
<style type="text/css">
|
||||
.hidden.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.heroic {
|
||||
min-height: 700px;
|
||||
padding: 1em 0em;
|
||||
}
|
||||
.masthead .logo.item img {
|
||||
margin-right: 1em;
|
||||
}
|
||||
.masthead .ui.menu .ui.button {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.masthead h1.ui.header {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 0em;
|
||||
font-size: 4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.masthead h2 {
|
||||
font-size: 1.7em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui.vertical.stripe {
|
||||
padding: 8em 0em;
|
||||
}
|
||||
.ui.vertical.stripe h3 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ui.vertical.stripe .button + h3,
|
||||
.ui.vertical.stripe p + h3 {
|
||||
margin-top: 3em;
|
||||
}
|
||||
.ui.vertical.stripe .floated.image {
|
||||
clear: both;
|
||||
}
|
||||
.ui.vertical.stripe p {
|
||||
font-size: 1.33em;
|
||||
}
|
||||
.ui.vertical.stripe .horizontal.divider {
|
||||
margin: 3em 0em;
|
||||
}
|
||||
|
||||
.quote.stripe.segment {
|
||||
padding: 0em;
|
||||
}
|
||||
.quote.stripe.segment .grid .column {
|
||||
padding-top: 5em;
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
.footer.segment {
|
||||
padding: 5em 0em;
|
||||
}
|
||||
|
||||
.secondary.pointing.menu .toc.item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.ui.fixed.menu {
|
||||
display: none !important;
|
||||
}
|
||||
.secondary.pointing.menu .item,
|
||||
.secondary.pointing.menu .menu {
|
||||
display: none;
|
||||
}
|
||||
.secondary.pointing.menu .toc.item {
|
||||
display: block;
|
||||
}
|
||||
.masthead.segment {
|
||||
min-height: 350px;
|
||||
}
|
||||
.masthead h1.ui.header {
|
||||
font-size: 2em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.masthead h2 {
|
||||
margin-top: 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="pusher">
|
||||
<div class="ui inverted vertical heroic masthead center aligned segment">
|
||||
<div class="ui text container">
|
||||
<h1 class="ui inverted header">
|
||||
Imagine-a-Company
|
||||
</h1>
|
||||
<h2>Do whatever you want when you want to.</h2>
|
||||
<div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
|
||||
<main>
|
||||
<div
|
||||
class="relative pt-16 pb-32 flex content-center items-center justify-center"
|
||||
style="min-height: 75vh;"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-center bg-cover"
|
||||
style='background-image: url("https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");'
|
||||
>
|
||||
<span
|
||||
id="blackOverlay"
|
||||
class="w-full h-full absolute opacity-75 bg-black"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui vertical stripe segment">
|
||||
<div class="ui middle aligned stackable grid container">
|
||||
<div class="row">
|
||||
<div class="eight wide column">
|
||||
<h3 class="ui header">We Help Companies and Companions</h3>
|
||||
<p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
|
||||
<h3 class="ui header">We Make Bananas That Can Dance</h3>
|
||||
<p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
|
||||
</div>
|
||||
<div class="six wide right floated column">
|
||||
<img src="/images/wireframe/white-image.png" class="ui large bordered rounded image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="center aligned column">
|
||||
<a class="ui huge button">Check Them Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui vertical stripe quote segment">
|
||||
<div class="ui equal width stackable internally celled grid">
|
||||
<div class="center aligned row">
|
||||
<div class="column">
|
||||
<h3>"What a Company"</h3>
|
||||
<p>That is what they all say about us</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3>"I shouldn't have gone with their competitor."</h3>
|
||||
<p>
|
||||
<img src="/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui vertical stripe segment">
|
||||
<div class="ui text container">
|
||||
<h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
|
||||
<p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
|
||||
<a class="ui large button">Read More</a>
|
||||
<h4 class="ui horizontal header divider">
|
||||
<a href="#">Case Studies</a>
|
||||
</h4>
|
||||
<h3 class="ui header">Did We Tell You About Our Bananas?</h3>
|
||||
<p>Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
|
||||
<a class="ui large button">I'm Still Quite Interested</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui inverted vertical footer segment">
|
||||
<div class="ui container">
|
||||
<div class="ui stackable inverted divided equal height stackable grid">
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header">About</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item">Sitemap</a>
|
||||
<a href="#" class="item">Contact Us</a>
|
||||
<a href="#" class="item">Religious Ceremonies</a>
|
||||
<a href="#" class="item">Gazebo Plans</a>
|
||||
<div class="container relative mx-auto">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
|
||||
<div class="pr-12">
|
||||
<h1 class="text-white font-semibold text-5xl">
|
||||
Your story starts with us.
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-gray-300">
|
||||
This is a simple example of a Landing Page you can build using
|
||||
Tailwind Starter Kit. It features multiple CSS components
|
||||
based on the Tailwindcss design system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header">Services</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item">Banana Pre-Order</a>
|
||||
<a href="#" class="item">DNA FAQ</a>
|
||||
<a href="#" class="item">How To Access</a>
|
||||
<a href="#" class="item">Favorite X-Men</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
<h4 class="ui inverted header">Footer Header</h4>
|
||||
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
|
||||
<div
|
||||
class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden"
|
||||
style="height: 70px; transform: translateZ(0px);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-gray-300 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="pb-20 bg-gray-300 -mt-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
|
||||
>
|
||||
<i class="fas fa-award"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Awarded Agency</h6>
|
||||
<p class="mt-2 mb-4 text-gray-600">
|
||||
Divide details about your product or agency work into parts.
|
||||
A paragraph describing a feature will be enough.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"
|
||||
>
|
||||
<i class="fas fa-retweet"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Free Revisions</h6>
|
||||
<p class="mt-2 mb-4 text-gray-600">
|
||||
Keep you user engaged by providing meaningful information.
|
||||
Remember that by this time, the user is curious.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
|
||||
>
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Verified Company</h6>
|
||||
<p class="mt-2 mb-4 text-gray-600">
|
||||
Write a few lines about each one. A paragraph describing a
|
||||
feature will be enough. Keep you user engaged!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center mt-32">
|
||||
<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
|
||||
<div
|
||||
class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-gray-100"
|
||||
>
|
||||
<i class="fas fa-user-friends text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal">
|
||||
Working with us is a pleasure
|
||||
</h3>
|
||||
<p
|
||||
class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
|
||||
>
|
||||
Don't let your uses guess by attaching tooltips and popoves to
|
||||
any element. Just make sure you enable them first via
|
||||
JavaScript.
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700"
|
||||
>
|
||||
The kit comes with three pre-built pages to help you get started
|
||||
faster. You can change the text and images and you're good to
|
||||
go. Just make sure you enable them first via JavaScript.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
|
||||
class="font-bold text-gray-800 mt-8"
|
||||
>Check Tailwind Starter Kit!</a
|
||||
>
|
||||
</div>
|
||||
<div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-pink-600"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
|
||||
class="w-full align-middle rounded-t-lg"
|
||||
/>
|
||||
<blockquote class="relative p-8 mb-4">
|
||||
<svg
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 583 95"
|
||||
class="absolute left-0 w-full block"
|
||||
style="height: 95px; top: -94px;"
|
||||
>
|
||||
<polygon
|
||||
points="-30,95 583,95 583,65"
|
||||
class="text-pink-600 fill-current"
|
||||
></polygon>
|
||||
</svg>
|
||||
<h4 class="text-xl font-bold text-white">
|
||||
Top Notch Services
|
||||
</h4>
|
||||
<p class="text-md font-light mt-2 text-white">
|
||||
The Arctic Ocean freezes every winter and much of the
|
||||
sea-ice then thaws every summer, and that process will
|
||||
continue whatever happens.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative py-20">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
|
||||
style="height: 80px; transform: translateZ(0px);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-white fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
|
||||
<img
|
||||
alt="..."
|
||||
class="max-w-full rounded-lg shadow-lg"
|
||||
src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 ml-auto mr-auto px-4">
|
||||
<div class="md:pr-12">
|
||||
<div
|
||||
class="text-pink-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-300"
|
||||
>
|
||||
<i class="fas fa-rocket text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-semibold">A growing company</h3>
|
||||
<p class="mt-4 text-lg leading-relaxed text-gray-600">
|
||||
The extension comes with three pre-built pages to help you get
|
||||
started faster. You can change the text and images and you're
|
||||
good to go.
|
||||
</p>
|
||||
<ul class="list-none mt-6">
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
|
||||
><i class="fas fa-fingerprint"></i
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-gray-600">
|
||||
Carefully crafted components
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
|
||||
><i class="fab fa-html5"></i
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-gray-600">Amazing page examples</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200 mr-3"
|
||||
><i class="far fa-paper-plane"></i
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-gray-600">Dynamic components</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pt-20 pb-48">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center text-center mb-24">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h2 class="text-4xl font-semibold">Here are our heroes</h2>
|
||||
<p class="text-lg leading-relaxed m-4 text-gray-600">
|
||||
According to the National Oceanic and Atmospheric
|
||||
Administration, Ted, Scambos, NSIDClead scentist, puts the
|
||||
potentially record maximum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="./assets/img/team-1-800x800.jpg"
|
||||
class="shadow-lg rounded-full max-w-full mx-auto"
|
||||
style="max-width: 120px;"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Ryan Tompson</h5>
|
||||
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
|
||||
Web Developer
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i></button
|
||||
><button
|
||||
class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-f"></i></button
|
||||
><button
|
||||
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="./assets/img/team-2-800x800.jpg"
|
||||
class="shadow-lg rounded-full max-w-full mx-auto"
|
||||
style="max-width: 120px;"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Romina Hadid</h5>
|
||||
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
|
||||
Marketing Specialist
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i></button
|
||||
><button
|
||||
class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="./assets/img/team-3-800x800.jpg"
|
||||
class="shadow-lg rounded-full max-w-full mx-auto"
|
||||
style="max-width: 120px;"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Alexa Smith</h5>
|
||||
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i></button
|
||||
><button
|
||||
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i></button
|
||||
><button
|
||||
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="./assets/img/team-4-470x470.png"
|
||||
class="shadow-lg rounded-full max-w-full mx-auto"
|
||||
style="max-width: 120px;"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Jenna Kardi</h5>
|
||||
<p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
|
||||
Founder and CEO
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i></button
|
||||
><button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i></button
|
||||
><button
|
||||
class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i></button
|
||||
><button
|
||||
class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pb-20 relative block bg-gray-900">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
|
||||
style="height: 80px; transform: translateZ(0px);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-gray-900 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
|
||||
<div class="flex flex-wrap text-center justify-center">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h2 class="text-4xl font-semibold text-white">Build something</h2>
|
||||
<p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
|
||||
Put the potentially record low maximum sea ice extent tihs year
|
||||
down to low ice. According to the National Oceanic and
|
||||
Atmospheric Administration, Ted, Scambos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-12 justify-center">
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-medal text-xl"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mt-5 font-semibold text-white">
|
||||
Excelent Services
|
||||
</h6>
|
||||
<p class="mt-2 mb-4 text-gray-500">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-poll text-xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl mt-5 font-semibold text-white">
|
||||
Grow your market
|
||||
</h5>
|
||||
<p class="mt-2 mb-4 text-gray-500">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-lightbulb text-xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
|
||||
<p class="mt-2 mb-4 text-gray-500">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative block py-24 lg:pt-0 bg-gray-900">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300"
|
||||
>
|
||||
<div class="flex-auto p-5 lg:p-10">
|
||||
<h4 class="text-2xl font-semibold">Want to work with us?</h4>
|
||||
<p class="leading-relaxed mt-1 mb-4 text-gray-600">
|
||||
Complete this form and we will get back to you in 24 hours.
|
||||
</p>
|
||||
<div class="relative w-full mb-3 mt-8">
|
||||
<label
|
||||
class="block uppercase text-gray-700 text-xs font-bold mb-2"
|
||||
for="full-name"
|
||||
>Full Name</label
|
||||
><input
|
||||
type="text"
|
||||
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
|
||||
placeholder="Full Name"
|
||||
style="transition: all 0.15s ease 0s;"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-gray-700 text-xs font-bold mb-2"
|
||||
for="email"
|
||||
>Email</label
|
||||
><input
|
||||
type="email"
|
||||
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
|
||||
placeholder="Email"
|
||||
style="transition: all 0.15s ease 0s;"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-gray-700 text-xs font-bold mb-2"
|
||||
for="message"
|
||||
>Message</label
|
||||
><textarea
|
||||
rows="4"
|
||||
cols="80"
|
||||
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
|
||||
placeholder="Type a message..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="text-center mt-6">
|
||||
<button
|
||||
class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
style="transition: all 0.15s ease 0s;"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="relative bg-gray-300 pt-8 pb-6">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
|
||||
style="height: 80px; transform: translateZ(0px);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-gray-300 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
|
||||
<h5 class="text-lg mt-0 mb-2 text-gray-700">
|
||||
Find us on any of these platforms, we respond 1-2 business days.
|
||||
</h5>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-white text-blue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
|
||||
type="button"
|
||||
>
|
||||
<i class="flex fab fa-twitter"></i></button
|
||||
><button
|
||||
class="bg-white text-blue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
|
||||
type="button"
|
||||
>
|
||||
<i class="flex fab fa-facebook-square"></i></button
|
||||
><button
|
||||
class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
|
||||
type="button"
|
||||
>
|
||||
<i class="flex fab fa-dribbble"></i></button
|
||||
><button
|
||||
class="bg-white text-gray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
|
||||
type="button"
|
||||
>
|
||||
<i class="flex fab fa-github"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="flex flex-wrap items-top mb-6">
|
||||
<div class="w-full lg:w-4/12 px-4 ml-auto">
|
||||
<span
|
||||
class="block uppercase text-gray-600 text-sm font-semibold mb-2"
|
||||
>Useful Links</span
|
||||
>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/presentation"
|
||||
>About Us</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://blog.creative-tim.com"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://www.github.com/creativetimofficial"
|
||||
>Github</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/bootstrap-themes/free"
|
||||
>Free Products</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<span
|
||||
class="block uppercase text-gray-600 text-sm font-semibold mb-2"
|
||||
>Other Resources</span
|
||||
>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md"
|
||||
>MIT License</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/terms"
|
||||
>Terms & Conditions</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/privacy"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/contact-us"
|
||||
>Contact Us</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-6 border-gray-400" />
|
||||
<div
|
||||
class="flex flex-wrap items-center md:justify-between justify-center"
|
||||
>
|
||||
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
|
||||
<div class="text-sm text-gray-600 font-semibold py-1">
|
||||
Copyright © 2019 Tailwind Starter Kit by
|
||||
<a
|
||||
href="https://www.creative-tim.com"
|
||||
class="text-gray-600 hover:text-gray-900"
|
||||
>Creative Tim</a
|
||||
>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
82
apps/core/assets/.stylelintrc
Normal file
82
apps/core/assets/.stylelintrc
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"plugins": [
|
||||
"stylelint-order"
|
||||
],
|
||||
"rules": {
|
||||
"order/properties-order": [
|
||||
[
|
||||
{
|
||||
groupName: "display",
|
||||
emptyLineBefore: "never",
|
||||
properties: [
|
||||
"display",
|
||||
"flex-wrap",
|
||||
"justify-content"
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: "positioning",
|
||||
emptyLineBefore: "never",
|
||||
properties: [
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index"
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: "box-model",
|
||||
emptyLineBefore: "never",
|
||||
properties: [
|
||||
"min-width",
|
||||
"width",
|
||||
"max-width",
|
||||
"min-height",
|
||||
"height",
|
||||
"max-height",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left"
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: "color-and-type",
|
||||
emptyLineBefore: "never",
|
||||
properties: [
|
||||
"background-color",
|
||||
"color",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-weight",
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: "decoration",
|
||||
emptyLineBefore: "never",
|
||||
properties: [
|
||||
"border",
|
||||
"border-color",
|
||||
"box-shadow"
|
||||
],
|
||||
}
|
||||
],
|
||||
{
|
||||
unspecified: "bottomAlphabetical"
|
||||
}
|
||||
]
|
||||
},
|
||||
"ignoreFiles": ["node_modules/**/*.css"]
|
||||
}
|
||||
5
apps/core/assets/css/app.css
Normal file
5
apps/core/assets/css/app.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "tailwindcss/base";
|
||||
|
||||
@import "tailwindcss/components";
|
||||
|
||||
@import "tailwindcss/utilities";
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// Menu buttons get a little spacing
|
||||
.masthead .ui.menu .ui.button {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[class*="top padded"] {
|
||||
padding-top: 4em;
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import '../semantic/src/semantic.less';
|
||||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../css/app.css"
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
|
|
@ -38,6 +37,10 @@ const toggleSidebar = (event) => {
|
|||
}
|
||||
|
||||
ready(() => {
|
||||
document.getElementById('nav-toggle').onclick = function(){
|
||||
document.getElementById("nav-content").classList.toggle("hidden");
|
||||
}
|
||||
|
||||
document.querySelectorAll('.js-passwordRevealer').forEach((el) => {
|
||||
el.addEventListener('click', togglePasswordFieldVisibility)
|
||||
})
|
||||
|
|
@ -45,4 +48,10 @@ ready(() => {
|
|||
document.querySelectorAll('.js-SidebarOpener').forEach((el) => {
|
||||
el.addEventListener('click', toggleSidebar)
|
||||
})
|
||||
|
||||
document.querySelectorAll('.js-flash-closer').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
el.closest('.js-flash').remove()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
4696
apps/core/assets/package-lock.json
generated
4696
apps/core/assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,10 +9,15 @@
|
|||
"profile": "webpack --mode development --plugin webpack/lib/debug/ProfilingPlugin"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.8.6",
|
||||
"csswring": "^7.0.0",
|
||||
"gulp": "^4.0.2",
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html",
|
||||
"simplemde": "^1.11.2"
|
||||
"postcss-color-function": "^4.1.0",
|
||||
"simplemde": "^1.11.2",
|
||||
"stylelint": "^13.6.1",
|
||||
"tailwindcss": "^1.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
|
|
@ -22,15 +27,19 @@
|
|||
"css-loader": "^3.4.2",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^6.0.0",
|
||||
"fomantic-ui": "^2.8.6",
|
||||
"image-webpack-loader": "^6.0.0",
|
||||
"less": "^3.11.3",
|
||||
"less-loader": "^6.2.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"node-sass": "^4.13.1",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"postcss-css-variables": "^0.17.0",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"terser-webpack-plugin": "^2.3.2",
|
||||
"webpack": "4.41.5",
|
||||
"webpack-cli": "^3.3.2"
|
||||
|
|
|
|||
10
apps/core/assets/postcss.config.js
Normal file
10
apps/core/assets/postcss.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import')(),
|
||||
require('stylelint')(),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
require('csswring')(),
|
||||
require('postcss-color-function')()
|
||||
],
|
||||
}
|
||||
11
apps/core/assets/tailwind.config.js
Normal file
11
apps/core/assets/tailwind.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true,
|
||||
},
|
||||
purge: [],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -17,16 +17,16 @@ module.exports = (env, options) => {
|
|||
new OptimizeCSSAssetsPlugin({})
|
||||
]
|
||||
},
|
||||
mode: options.mode,
|
||||
devtool: devMode ? 'source-map' : undefined,
|
||||
entry: {
|
||||
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
|
||||
'content-editor': ['./js/content-editor.js'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, '../priv/static/js'),
|
||||
publicPath: '/js/'
|
||||
filename: 'js/[name].js',
|
||||
path: path.resolve(__dirname, '../priv/static/')
|
||||
},
|
||||
devtool: devMode ? 'source-map' : undefined,
|
||||
module: {
|
||||
rules: [
|
||||
// For images and fonts found in our scss files
|
||||
|
|
@ -55,24 +55,11 @@ module.exports = (env, options) => {
|
|||
}
|
||||
},
|
||||
{
|
||||
test: /\.[s]?css$/,
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{loader: MiniCssExtractPlugin.loader, options: {sourceMap: true}},
|
||||
{loader: 'css-loader', options: {sourceMap: true}},
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{loader: 'postcss-loader', options: {sourceMap: true}},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -82,13 +69,12 @@ module.exports = (env, options) => {
|
|||
filename: 'css/[name].css',
|
||||
chunkFilename: '[id].css',
|
||||
}),
|
||||
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, 'static'),
|
||||
to: path.resolve(__dirname, '../priv/static'),
|
||||
},
|
||||
]),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"../../theme.config$": path.join(__dirname, "/semantic-ui/theme.config"),
|
||||
"../semantic-ui/site": path.join(__dirname, "/semantic-ui/site")
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,39 @@
|
|||
<div class="ui container">
|
||||
<div class="ui large secondary inverted pointing menu">
|
||||
<a class="toc item js-SidebarOpener">
|
||||
<i class="sidebar icon"></i>
|
||||
<nav class="flex items-center justify-between flex-wrap bg-grey-dark p-6 fixed w-full z-10 pin-t">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<a class="text-white no-underline hover:text-white hover:no-underline" href="/">
|
||||
<span class="text-2xl pl-2"><i class="em em-grinning"></i> <%= I18n.t! "en", "site.title" %></span>
|
||||
</a>
|
||||
<a class="item" href="/">Home</a>
|
||||
<%= if has_role?(@conn, :admin) do %>
|
||||
<a class="item" href="/admin">Admin</a>
|
||||
<% end %>
|
||||
<div class="right item">
|
||||
<%= if Pow.Plug.current_user(@conn) do %>
|
||||
<%= link "Sign out", to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :delete), method: :delete, class: "ui inverted button" %>
|
||||
<% else %>
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :new), class: "ui inverted button" do %>
|
||||
Log in
|
||||
<% end %>
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_registration_path(%URI{path: "/auth"}, :new), class: "ui inverted button" do %>
|
||||
Sign Up
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block lg:hidden">
|
||||
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
|
||||
<ul class="list-reset lg:flex justify-end flex-1 items-center">
|
||||
<%= if has_role?(@conn, :admin) do %>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block py-2 px-4 text-white no-underline" href="/admin">Admin</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<%= if Pow.Plug.current_user(@conn) do %>
|
||||
<li class="mr-3">
|
||||
<%= link "Sign Out", to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :delete), method: :delete, class: "inline-block text-white no-underline hover:text-white hover:text-underline py-2 px-4" %>
|
||||
</li>
|
||||
<% else %>
|
||||
<li class="mr-3">
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :new), class: "inline-block text-white no-underline hover:text-white hover:text-underline py-2 px-4" do %>
|
||||
Log In
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_registration_path(%URI{path: "/auth"}, :new), class: "inline-block text-white no-underline hover:text-white hover:text-underline py-2 px-4" do %>
|
||||
Sign Up
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="ui vertical inverted left sidebar menu">
|
||||
<a class="item" href="/">Home</a>
|
||||
<%= if has_role?(@conn, :admin) do %>
|
||||
<a class="item" href="/admin">Admin</a>
|
||||
<% end %>
|
||||
<%= if Pow.Plug.current_user(@conn) do %>
|
||||
<%= link "Sign out", to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :delete), method: :delete, class: "item" %>
|
||||
<% else %>
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_session_path(%URI{path: "/auth"}, :new), class: "item" do %>
|
||||
Log in
|
||||
<% end %>
|
||||
<%= link to: AuthWeb.Router.Helpers.pow_registration_path(%URI{path: "/auth"}, :new), class: "item" do %>
|
||||
Sign Up
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -9,10 +9,8 @@
|
|||
<%= feed_tag(@conn, @view_module, @view_template, assigns) %>
|
||||
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main role="main" class="container">
|
||||
<%= render "_side_menu.html", assigns %>
|
||||
|
||||
<body class="text-gray-800 antialiased">
|
||||
<main role="main">
|
||||
<!-- Page Contents -->
|
||||
<div class="pusher">
|
||||
<div class="ui inverted vertical masthead center aligned segment">
|
||||
|
|
|
|||
|
|
@ -25,11 +25,24 @@ defmodule CoreWeb.Helpers do
|
|||
|
||||
def flash_block(conn) do
|
||||
~E"""
|
||||
<%= [info: "info", error: "negative"] |> Enum.map(fn {level, class} -> %>
|
||||
<%= if get_flash(conn, level) do %>
|
||||
<p class="ui <%= class %> message" role="alert"><%= get_flash(conn, level) %></p>
|
||||
<% end %>
|
||||
<% end) %>
|
||||
<div class="fixed w-full z-50 mt-20">
|
||||
<%= [info: "grey", error: "red"] |> Enum.map(fn {level, color} -> %>
|
||||
<%= if get_flash(conn, level) do %>
|
||||
<div class="relative bg-<%= color %>-100 p-5 w-1/2 object-right rounded shadow-xl m-auto mb-5 js-flash">
|
||||
<div class="flex justify-between text-<%= color %>-700">
|
||||
<div class="flex space-x-3">
|
||||
<div class="flex-1 leading-tight text-sm font-medium">
|
||||
<%= get_flash(conn, level) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-none js-flash-closer">
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end) %>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
|
|
@ -41,26 +54,25 @@ defmodule CoreWeb.Helpers do
|
|||
|
||||
def styled_input(f, field, opts, options, do: content) do
|
||||
{icon, rest_opts} = Keyword.pop(opts, :icon, "")
|
||||
{classes, rest_opts} = Keyword.pop(rest_opts, :class, "")
|
||||
{classes, rest_opts} = Keyword.pop(rest_opts, :class, "px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full")
|
||||
{label_text, rest_opts} = Keyword.pop(rest_opts, :label)
|
||||
{input_helper, rest_opts} = Keyword.pop(rest_opts, :input_helper, :text_input)
|
||||
~E"""
|
||||
<div class="field <%= error_class(f, field) %>">
|
||||
<div class="relative w-full mb-3 <%= error_class(f, field) %>">
|
||||
<%= if label_text do %>
|
||||
<%= label f, field, label_text %>
|
||||
<%= label f, field, label_text, class: "block uppercase text-gray-700 text-xs font-bold mb-2" %>
|
||||
<% else %>
|
||||
<%= label f, field %>
|
||||
<%= label f, field, class: "block uppercase text-gray-700 text-xs font-bold mb-2" %>
|
||||
<% end %>
|
||||
|
||||
<div class="ui left icon <%= classes %> input">
|
||||
<i class="<%= icon %> icon"></i>
|
||||
<%= if options == nil do %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, rest_opts]) %>
|
||||
<% else %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, options, rest_opts]) %>
|
||||
<% end %>
|
||||
<%= content %>
|
||||
</div>
|
||||
<i class="<%= icon %> icon"></i>
|
||||
<%= if options == nil do %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, rest_opts ++ [class: classes]]) %>
|
||||
<% else %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, options, rest_opts ++ [class: classes]]) %>
|
||||
<% end %>
|
||||
<%= content %>
|
||||
|
||||
<%= error_tag f, field, class: "ui pointing red basic label" %>
|
||||
</div>
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ config :auth_web,
|
|||
config :auth_web, :pow,
|
||||
user: Auth.User,
|
||||
repo: Auth.Repo,
|
||||
extensions: [PowEmailConfirmation, PowPersistentSession],
|
||||
extensions: [PowEmailConfirmation, PowPersistentSession, PowResetPassword],
|
||||
controller_callbacks: Pow.Extension.Phoenix.ControllerCallbacks,
|
||||
mailer_backend: AuthWeb.Pow.Mailer,
|
||||
web_mailer_module: AuthWeb,
|
||||
|
|
|
|||
Loading…
Reference in a new issue