daboh/plottservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First layout work

Browse Source 
Based on: https://www.youtube.com/watch?v=Y7i4ygh1wYw
This commit is contained in:
David Böhm
2024-07-31 15:52:56 +02:00
parent d81ef442fd
commit 40ea1910c7
4 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/images/person.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="8" viewBox="0 0 8 8" width="8" xmlns="http://www.w3.org/2000/svg"><path d="m4 0c-1.1 0-2 1.12-2 2.5s.9 2.5 2 2.5 2-1.12 2-2.5-.9-2.5-2-2.5zm-2.09 5c-1.06.05-1.91.92-1.91 2v1h8v-1c0-1.08-.84-1.95-1.91-2-.54.61-1.28 1-2.09 1s-1.55-.39-2.09-1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 262 B

1
app/assets/images/print.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26 6V1H6v5H2v12h4v5l8 8h12V18h4V6h-4zM8 3h16v3H8V3zm7 26v-7H8v-8h16v15h-9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

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

@@ -6,14 +6,34 @@
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %> <%= javascript_importmap_tags %>
</head> </head>
<body> <body>
<header class="container mx-auto px-4 py-6 flex items-center justify-between">
<a href="/" class="font-bold text-black text-xl">Plottservice</a>
<nav>
</nav>
<nav>
<ul>
<li>
<a href="#" class="rounded-full px-3 py-2 font-semibold bg-white bg-opacity-10 flex items-center group">
<span class="mr-2">Sign in</span>
<svg class="stroke-current" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style="stroke: rgb(194, 62, 110);">
<g fill-rule="evenodd">
<path class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-200" d="M0 5h7"></path>
<path class="HoverArrow__tipPath" d="M1 1l4 4-4 4"></path>
</g>
</svg>
</a>
</li>
</ul>
</nav>
</header>
<main class="container mx-auto mt-28 px-5 flex"> <main class="container mx-auto mt-28 px-5 flex">
<%= yield %> <%= yield %>
</main> </main>
<footer>
</footer>
</body> </body>
</html> </html>

22
config/tailwind.config.js
View File

@@ -1,22 +1,22 @@
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = { module.exports = {
content: [ content: [
'./public/*.html', "./public/*.html",
'./app/helpers/**/*.rb', "./app/helpers/**/*.rb",
'./app/javascript/**/*.js', "./app/javascript/**/*.js",
'./app/views/**/*.{erb,haml,html,slim}' "./app/views/**/*.{erb,haml,html,slim}",
], ],
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans], sans: ["Inter var", ...defaultTheme.fontFamily.sans],
}, },
}, },
}, },
plugins: [ plugins: [
require('@tailwindcss/forms'), require("@tailwindcss/forms"),
require('@tailwindcss/typography'), require("@tailwindcss/typography"),
require('@tailwindcss/container-queries'), require("@tailwindcss/container-queries"),
] ],
} };