herrhase
/
nano-buckets
1
0
Fork 0
Code Issues 3 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

adding

master
Björn 3 years ago
parent
faddb1276b
commit
706e611917
28 changed files with 634 additions and 27 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -1
      mix-manifest.json
  2. BIN
      public/css/IBMPlexMono-Bold.eot
  3. BIN
      public/css/IBMPlexMono-Bold.ttf
  4. BIN
      public/css/IBMPlexMono-Bold.woff
  5. BIN
      public/css/IBMPlexMono-Bold.woff2
  6. BIN
      public/css/IBMPlexMono.eot
  7. BIN
      public/css/IBMPlexMono.ttf
  8. BIN
      public/css/IBMPlexMono.woff
  9. BIN
      public/css/IBMPlexMono.woff2
  10. +233
    -0
      public/css/demo.html
  11. +5
    -0
      public/css/index.css
  12. +24
    -0
      public/css/stylesheet.css
  13. BIN
      public/fonts/IBMPlexMono-Bold.eot
  14. BIN
      public/fonts/IBMPlexMono-Bold.ttf
  15. BIN
      public/fonts/IBMPlexMono-Bold.woff
  16. BIN
      public/fonts/IBMPlexMono-Bold.woff2
  17. BIN
      public/fonts/IBMPlexMono.eot
  18. BIN
      public/fonts/IBMPlexMono.ttf
  19. BIN
      public/fonts/IBMPlexMono.woff
  20. BIN
      public/fonts/IBMPlexMono.woff2
  21. +233
    -0
      public/fonts/demo.html
  22. +24
    -0
      public/fonts/stylesheet.css
  23. +1
    -1
      public/symbol-defs.svg
  24. +58
    -0
      resources/icons/logo.svg
  25. +7
    -0
      resources/scss/index.scss
  26. +18
    -12
      resources/views/index.html
  27. +11
    -11
      resources/views/layout.html
  28. +9
    -2
      webpack.mix.js

+ 11
- 1
mix-manifest.json View File

@ -2,5 +2,15 @@
"/public/js/spritemap.js": "/public/js/spritemap.js", "/public/js/spritemap.js": "/public/js/spritemap.js",
"/public/js/index.js": "/public/js/index.js", "/public/js/index.js": "/public/js/index.js",
"/public/js/critical.js": "/public/js/critical.js", "/public/js/critical.js": "/public/js/critical.js",
"/public/css/index.css": "/public/css/index.css"
"/public/css/index.css": "/public/css/index.css",
"/public/css/demo.html": "/public/css/demo.html",
"/public/css/IBMPlexMono-Bold.eot": "/public/css/IBMPlexMono-Bold.eot",
"/public/css/IBMPlexMono-Bold.ttf": "/public/css/IBMPlexMono-Bold.ttf",
"/public/css/IBMPlexMono-Bold.woff": "/public/css/IBMPlexMono-Bold.woff",
"/public/css/IBMPlexMono-Bold.woff2": "/public/css/IBMPlexMono-Bold.woff2",
"/public/css/IBMPlexMono.eot": "/public/css/IBMPlexMono.eot",
"/public/css/IBMPlexMono.ttf": "/public/css/IBMPlexMono.ttf",
"/public/css/IBMPlexMono.woff": "/public/css/IBMPlexMono.woff",
"/public/css/IBMPlexMono.woff2": "/public/css/IBMPlexMono.woff2",
"/public/css/stylesheet.css": "/public/css/stylesheet.css"
} }

BIN
public/css/IBMPlexMono-Bold.eot View File


BIN
public/css/IBMPlexMono-Bold.ttf View File


BIN
public/css/IBMPlexMono-Bold.woff View File


BIN
public/css/IBMPlexMono-Bold.woff2 View File


BIN
public/css/IBMPlexMono.eot View File


BIN
public/css/IBMPlexMono.ttf View File


BIN
public/css/IBMPlexMono.woff View File


BIN
public/css/IBMPlexMono.woff2 View File


+ 233
- 0
public/css/demo.html View File

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* demo styles */
body {
background: #f0f0f0;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal;
font-style: normal;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

+ 5
- 0
public/css/index.css View File

@ -14910,3 +14910,8 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
height: 100%; height: 100%;
background-color: blue; background-color: blue;
} }
.app-header .logo {
font-size: 1.3rem;
fill: white;
}

+ 24
- 0
public/css/stylesheet.css View File

@ -0,0 +1,24 @@
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono.eot');
src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono.woff2') format('woff2'),
url('IBMPlexMono.woff') format('woff'),
url('IBMPlexMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono-Bold.eot');
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono-Bold.woff2') format('woff2'),
url('IBMPlexMono-Bold.woff') format('woff'),
url('IBMPlexMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

BIN
public/fonts/IBMPlexMono-Bold.eot View File


BIN
public/fonts/IBMPlexMono-Bold.ttf View File


BIN
public/fonts/IBMPlexMono-Bold.woff View File


BIN
public/fonts/IBMPlexMono-Bold.woff2 View File


BIN
public/fonts/IBMPlexMono.eot View File


BIN
public/fonts/IBMPlexMono.ttf View File


BIN
public/fonts/IBMPlexMono.woff View File


BIN
public/fonts/IBMPlexMono.woff2 View File


+ 233
- 0
public/fonts/demo.html View File

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* demo styles */
body {
background: #f0f0f0;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal;
font-style: normal;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

+ 24
- 0
public/fonts/stylesheet.css View File

@ -0,0 +1,24 @@
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono.eot');
src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono.woff2') format('woff2'),
url('IBMPlexMono.woff') format('woff'),
url('IBMPlexMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono-Bold.eot');
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono-Bold.woff2') format('woff2'),
url('IBMPlexMono-Bold.woff') format('woff'),
url('IBMPlexMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

+ 1
- 1
public/symbol-defs.svg
File diff suppressed because it is too large
View File


+ 58
- 0
resources/icons/logo.svg View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 483.125 483.125" style="enable-background:new 0 0 483.125 483.125;" xml:space="preserve">
<path d="M241.563,0C146.446,0,69.063,77.383,69.063,172.499v49.35c0,4.418,3.582,8,8,8h13.933v6.27
c0,9.204,4.023,17.978,11.687,25.957c0.007,0.071,0.007,0.14,0.016,0.211l20.519,161.027c0.603,25.264,41.692,59.812,118.345,59.812
s117.742-34.548,118.345-59.812l20.519-161.027c0.009-0.073,0.01-0.146,0.017-0.219c7.667-7.986,11.686-16.768,11.686-25.961v-6.257
h13.933c4.418,0,8-3.582,8-8v-49.35C414.062,77.383,336.679,0,241.563,0z M367.343,209.784
c-4.137-20.913-54.626-43.066-125.78-43.066s-121.644,22.153-125.78,43.066c-5.72-5.382-8.786-10.989-8.786-16.448
c0-23.189,55.265-49.026,134.566-49.026s134.566,25.837,134.566,49.026C376.129,198.796,373.063,204.403,367.343,209.784z
M159.156,229.717c-18.579-6.909-26.506-14.435-27.589-17.176c1.083-2.742,9.01-10.268,27.589-17.176
c15.516-5.769,42.406-12.646,82.406-12.646s66.891,6.877,82.406,12.646c18.579,6.909,26.506,14.435,27.589,17.176
c-1.083,2.742-9.01,10.268-27.589,17.176c-15.516,5.769-42.406,12.646-82.406,12.646S174.672,235.485,159.156,229.717z
M343.979,421.742c-0.043,0.335-0.064,0.673-0.064,1.011c0,6.599-7.425,17.475-24.011,26.897
c-14.033,7.972-39.017,17.475-78.341,17.475s-64.308-9.503-78.341-17.475c-16.586-9.422-24.011-20.298-24.011-26.897
c0-0.338-0.021-0.676-0.064-1.011l-18.622-146.141c5.132,2.954,10.888,5.721,17.257,8.269
c27.851,11.14,64.707,17.275,103.781,17.275c23.036,0,45.101-2.09,65.579-6.212c4.331-0.872,7.136-5.09,6.264-9.421
c-0.872-4.332-5.09-7.134-9.422-6.264c-19.441,3.914-40.442,5.898-62.421,5.898c-79.302,0-134.566-25.837-134.566-49.039v-12.74
c7.681,6.625,18.013,12.612,30.785,17.721c25.246,10.098,57.9,16.066,92.89,17.097c0.497,0.016,0.996,0.03,1.496,0.044
c0.972,0.025,1.942,0.053,2.917,0.07c2.14,0.041,4.299,0.063,6.479,0.063s4.338-0.023,6.479-0.063
c0.975-0.017,1.945-0.045,2.917-0.07c0.5-0.014,0.999-0.028,1.496-0.044c34.99-1.031,67.644-6.999,92.89-17.097
c12.772-5.109,23.104-11.096,30.785-17.721v12.752c0,11.275-12.837,23.042-35.218,32.282c-4.084,1.686-6.028,6.364-4.342,10.447
c1.273,3.085,4.255,4.949,7.397,4.949c1.018,0,2.052-0.195,3.05-0.607c5.708-2.356,10.905-4.897,15.584-7.593L343.979,421.742z
M398.062,213.849h-5.933v-20.513c0-18.725-16.615-35.684-46.785-47.751c-27.851-11.14-64.707-17.275-103.781-17.275
s-75.931,6.135-103.781,17.275c-30.17,12.068-46.785,29.026-46.785,47.751v20.513h-5.933v-41.35
C85.063,86.205,155.269,16,241.563,16s156.499,70.205,156.499,156.499V213.849z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 7
- 0
resources/scss/index.scss View File

@ -5,4 +5,11 @@
width: 5px; width: 5px;
height: 100%; height: 100%;
background-color: blue; background-color: blue;
}
.app-header {
.logo {
font-size: 1.3rem;
fill: white;
}
} }

+ 18
- 12
resources/views/index.html View File

@ -3,20 +3,26 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>
Buckets
<a class="button" href="/bucket/create">
<section class="flex m-bottom-5"">
<h2 class="m-bottom-2 m-right-2 highlight">
Buckets
</h2>
<a class="button m-0 " href="/bucket/create">
Create Create
</a> </a>
</h2>
<h3>
Your Buckets
</h3>
<app-buckets visiblity="private"></app-buckets>
<h3>
Other Buckets
</h3>
<app-buckets visiblity="public,community"></app-buckets>
</section>
<section class="m-bottom-5">
<h3 class="highlight">
Your Buckets
</h3>
<app-buckets visiblity="private"></app-buckets>
</section>
<section class="m-bottom-5">
<h3 class="highlight">
Other Buckets
</h3>
<app-buckets visiblity="public,community"></app-buckets>
</section>
</div> </div>
</div> </div>
</div> </div>

+ 11
- 11
resources/views/layout.html View File

@ -10,27 +10,27 @@
<body> <body>
<header class="app-header"> <header class="app-header">
<div class="bar"> <div class="bar">
<div class="bar__start">
<h1 class="h3 m-0 p-top-3 p-bottom-3">
<div class="bar__start align-center">
<svg class="icon fill-text-contrast m-right-3 logo" aria-hidden="true" alt="Nano Bucket Logo">
<use xlink:href="/symbol-defs.svg#icon-logo"></use>
</svg>
<h1 class="h5 m-0 m-right-3">
Nano Bucket Nano Bucket
</h1> </h1>
</div> </div>
<div class="bar__main"> <div class="bar__main">
<div class="tabs tabs--contrast">
<a href="/" class="tabs__item tabs__item--selected">
Dashboard
</a>
</div>
</div> </div>
</div> </div>
</header> </header>
<section class="app-section">
<div class="">
</div>
</section>
<main>
<main class="app-main">
<%~ it.body %> <%~ it.body %>
</main> </main>
</body> </body>
</html> </html>

+ 9
- 2
webpack.mix.js View File

@ -14,7 +14,10 @@ const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
mix.webpackConfig({ mix.webpackConfig({
plugins: [ plugins: [
new SvgSpritemapPlugin('node_modules/@tentakelfabrik/plain-ui/src/icons/mono-icons/svg/*.svg', {
new SvgSpritemapPlugin([
'node_modules/@tentakelfabrik/plain-ui/src/icons/mono-icons/svg/*.svg',
'resources/icons/*.svg'
], {
output: { output: {
filename: 'public/symbol-defs.svg', filename: 'public/symbol-defs.svg',
chunk: { chunk: {
@ -46,4 +49,8 @@ mix.options({
mix mix
.js('resources/js/index.js', 'public/js') .js('resources/js/index.js', 'public/js')
.js('resources/js/critical.js', 'public/js') .js('resources/js/critical.js', 'public/js')
.sass('resources/scss/index.scss', 'public/css')
.sass('resources/scss/index.scss', 'public/css')
.copy(
'node_modules/@tentakelfabrik/plain-ui/src/fonts/*',
'public/css'
)

Write Preview
Loading…
Cancel
Save