bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add application layout styling

Browse Source 
Added application navbar and the page background styling
This commit is contained in:
Yannick 2020-04-07 20:33:47 +02:00
parent 59faa4e545
commit 7e4280d451
3 changed files with 69 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/application.css.scss
View File

@ -14,18 +14,29 @@
*= require_self *= require_self
*/ */
@import "bulma/sass/utilities/initial-variables"; @import "bulma/sass/utilities/initial-variables";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Lobster&display=swap');
$family-sans-serif: "Helvetica", $family-sans-serif: "Helvetica",
"Arial", "Arial",
sans-serif; sans-serif;
// https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a $family-primary: 'Quicksand', sans-serif;
$blue: #083d77;
$red: #dd1c1a; // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
$orange: #ee964b; // $blue: #083d77;
$yellow: #f4d35e; // $red: #dd1c1a;
$light: #f5fafe; // #ebebd3; // $orange: #ee964b;
$primary: $blue; // $yellow: #f4d35e;
$green: #007932; // hsl(141, 53%, 53%); // $light: #f5fafe; // #ebebd3;
$footer-background-color: $light; // $primary: $blue;
// $green: #007932; // hsl(141, 53%, 53%);
// $footer-background-color: $light;
@import 'bulma/bulma'; @import 'bulma/bulma';
.is-font-logo {
font-family: 'Lobster', cursive;
}
body {
min-height: 100vh;
}

6
app/views/home/index.html.erb
View File

@ -1,3 +1,5 @@
<h1>Welcome</h1> <div class="hero">
<h1>Welcome</h1>
<%= link_to "Login", login_url %> <%= link_to "Login", login_url %>
</div>

42
app/views/layouts/application.html.erb
View File

@ -1,15 +1,49 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Tinyform</title> <title>Tinyform</title>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head> </head>
<body> <body class="has-background-white-bis">
<div class="has-background-white">
<div class="container ">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item is-size-3 has-text-black has-text-weight-bold is-font-logo" href="/">
TinyForms
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<%= link_to "Login", login_url, { :class => "button is-primary"} %>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<main class="container">
<%= yield %> <%= yield %>
</body> </main>
</body>
</html> </html>