From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Mon, 25 May 2020 15:07:03 -0700 Subject: Build system integration using vue-cli. --- src/assets/app.scss | 336 +++++++++++++++++++++++++++++++++++++++++++++ src/assets/defaults.yml | 39 ++++++ src/assets/themes/sui.scss | 34 +++++ 3 files changed, 409 insertions(+) create mode 100644 src/assets/app.scss create mode 100644 src/assets/defaults.yml create mode 100644 src/assets/themes/sui.scss (limited to 'src/assets') diff --git a/src/assets/app.scss b/src/assets/app.scss new file mode 100644 index 0000000..4b69864 --- /dev/null +++ b/src/assets/app.scss @@ -0,0 +1,336 @@ +@charset "utf-8"; + +@import url("//fonts.googleapis.com/css?family=Lato:400,700|Pacifico|Raleway&display=swap"); +@import "bulma"; + +// Themes import +@import "./themes/sui.scss"; + +@mixin ellipsis() { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +html { + height: 100%; +} + +body { + font-family: "Raleway", sans-serif; + height: 100%; + + #app { + min-height: 100%; + background-color: var(--background); + color: var(--text); + transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; + + a { + &:hover { + color: var(--link-hover); + } + } + + .title { + color: var(--text-title); + } + .subtitle { + color: var(--text-subtitle); + } + + .card { + background-color: var(--card-background); + box-shadow: 0 2px 15px 0 var(--card-shadow); + &:hover { + background-color: var(--card-background); + } + } + + .message { + background-color: var(--card-background); + .message-body { + color: var(--text); + } + } + + .footer { + background-color: var(--card-background); + box-shadow: 0 2px 15px 0 var(--card-shadow); + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: "Lato", sans-serif; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.7rem; + margin-top: 2rem; + margin-bottom: 1rem; + + .fas, + .fab, + .far { + margin-right: 10px; + } + + span { + font-weight: bold; + color: var(--highlight-secondary); + } + } + + [v-cloak] { + display: none; + } + + #bighead { + color: var(--text-header); + + .dashboard-title { + padding: 6px 0 0 80px; + } + + .first-line { + height: 100px; + vertical-align: center; + background-color: var(--highlight-primary); + + h1 { + margin-top: -12px; + font-size: 2rem; + } + + .headline { + margin-top: 5px; + font-size: 0.9rem; + } + + .container { + height: 80px; + padding: 10px 0; + } + + .logo { + float: left; + i { + vertical-align: top; + padding: 8px 15px; + font-size: 50px; + } + + img { + padding: 10px; + max-height: 70px; + max-width: 70px; + } + } + } + .navbar, + .navbar-menu { + background-color: var(--highlight-secondary); + + a { + color: var(--text-header); + padding: 8px 12px; + &:hover, + &:focus { + color: var(--text-header); + background-color: var(--highlight-hover); + } + } + } + .navbar-end { + text-align: right; + } + } + + #main-section { + margin-bottom: 2rem; + padding: 0; + + h2 { + padding-bottom: 0px; + @include ellipsis(); + } + + .title { + font-size: 1.1em; + @include ellipsis(); + } + + .subtitle { + font-size: 0.9em; + @include ellipsis(); + } + + .container { + padding: 1.2rem 0.75rem; + } + + .message { + margin-top: 45px; + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + + .message-header { + font-weight: bold; + } + + .message-body { + border: none; + } + } + } + + .media-content { + overflow: hidden; + text-overflow: inherit; + } + + .tag { + color: var(--highlight-secondary); + background-color: var(--highlight-secondary); + position: absolute; + top: 1rem; + right: -0.2rem; + width: 3px; + overflow: hidden; + transition: all 0.2s ease-out; + padding: 0; + + .tag-text { + display: none; + } + } + + .card { + border-radius: 5px; + border: none; + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); + transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; + + a { + outline: none; + } + } + + .card:hover { + transform: translate(0, -3px); + + .tag { + width: auto; + color: #ffffff; + padding: 0 0.75em; + + .tag-text { + display: block; + } + } + } + + .card-content { + height: 85px; + padding: 1.3rem; + } + + .layout-vertical { + .card { + border-radius: 0; + } + + .column div:first-of-type .card { + border-radius: 5px 5px 0 0; + } + + .column div:last-child .card { + border-radius: 0 0 5px 5px; + } + } + + .footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + padding: 0.5rem; + text-align: left; + color: #676767; + font-size: 0.85rem; + transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; + } + + .no-footer { + #main-section { + margin-bottom: 0; + } + + .footer { + display: none; + } + } + + .search-bar { + position: relative; + display: inline-block; + input { + border: none; + background-color: var(--highlight-hover); + border-radius: 5px; + margin-top: 2px; + padding: 2px 12px 2px 30px; + transition: all 100ms linear; + color: #ffffff; + height: 30px; + width: 100px; + + &:focus { + color: #000000; + width: 250px; + background-color: #ffffff; + } + } + + .search-label::before { + font-family: "Font Awesome 5 Free"; + position: absolute; + top: 14px; + left: 16px; + content: "\f002"; + font-weight: 900; + width: 20px; + height: 20px; + color: #ffffff; + } + + &:focus-within .search-label::before { + color: #6e6e6e; + } + } + + .offline-message { + text-align: center; + margin: 35px 0; + + svg { + font-size: 2rem; + } + + svg.fa-redo-alt { + font-size: 1.3rem; + line-height: 1rem; + vertical-align: middle; + cursor: pointer; + color: #3273dc; + } + } +} diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml new file mode 100644 index 0000000..1909328 --- /dev/null +++ b/src/assets/defaults.yml @@ -0,0 +1,39 @@ +--- +# Default configuration + +title: "Dashboard" +subtitle: "Homer" +logo: "logo.png" + +header: true +footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. + +theme: default +colors: + light: + highlight-primary: "#3367d6" + highlight-secondary: "#4285f4" + highlight-hover: "#5a95f5" + background: "#f5f5f5" + card-background: "#ffffff" + text: "#363636" + text-header: "#ffffff" + text-title: "#303030" + text-subtitle: "#424242" + card-shadow: rgba(0, 0, 0, 0.1) + link-hover: "#363636" + dark: + highlight-primary: "#3367d6" + highlight-secondary: "#4285f4" + highlight-hover: "#5a95f5" + background: "#131313" + card-background: "#2b2b2b" + text: "#eaeaea" + text-header: "#ffffff" + text-title: "#fafafa" + text-subtitle: "#f5f5f5" + card-shadow: rgba(0, 0, 0, 0.4) + link-hover: "#ffdd57" + +links: [] +services: [] diff --git a/src/assets/themes/sui.scss b/src/assets/themes/sui.scss new file mode 100644 index 0000000..f94433e --- /dev/null +++ b/src/assets/themes/sui.scss @@ -0,0 +1,34 @@ +/* + * SUI theme + * Inpired by the great https://github.com/jeroenpardon/sui start page + * Author: @bastienwirtz + */ +body #app.theme-sui { + #bighead .dashboard-title { + padding: 65px 0 0 12px; + + h1 { + margin-top: 0; + font-weight: bold; + font-size: 2.2rem; + } + } + + .navbar .navbar-item:hover { + background-color: transparent; + } + + .card, + .card:hover { + background-color: transparent; + box-shadow: none; + + .title { + font-weight: bold; + } + + .card-content { + padding: 0; + } + } +} -- cgit v1.2.3 From 9814a037a5158d31c77fecc8bfb3b61b45d015b3 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Fri, 29 May 2020 18:21:32 -0700 Subject: Pure CSS font awesome icon --- src/assets/defaults.yml | 1 + 1 file changed, 1 insertion(+) (limited to 'src/assets') diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml index 1909328..bf3a367 100644 --- a/src/assets/defaults.yml +++ b/src/assets/defaults.yml @@ -35,5 +35,6 @@ colors: card-shadow: rgba(0, 0, 0, 0.4) link-hover: "#ffdd57" +message: ~ links: [] services: [] -- cgit v1.2.3 From 1875c17aa5142d90fc03498875e195f2085d9640 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Sat, 30 May 2020 17:12:06 -0700 Subject: Full offline support (local fonts) --- src/assets/app.scss | 3 +- src/assets/webfonts/lato/OFL.txt | 93 ++++++++++++++++++++ .../webfonts/lato/lato-v16-latin-regular.woff | Bin 0 -> 28660 bytes .../webfonts/lato/lato-v16-latin-regular.woff2 | Bin 0 -> 23484 bytes src/assets/webfonts/raleway/OFL.txt | 95 +++++++++++++++++++++ .../raleway/raleway-v14-latin-regular.woff | Bin 0 -> 25244 bytes .../raleway/raleway-v14-latin-regular.woff2 | Bin 0 -> 20724 bytes src/assets/webfonts/webfonts.scss | 23 +++++ 8 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 src/assets/webfonts/lato/OFL.txt create mode 100644 src/assets/webfonts/lato/lato-v16-latin-regular.woff create mode 100644 src/assets/webfonts/lato/lato-v16-latin-regular.woff2 create mode 100644 src/assets/webfonts/raleway/OFL.txt create mode 100644 src/assets/webfonts/raleway/raleway-v14-latin-regular.woff create mode 100644 src/assets/webfonts/raleway/raleway-v14-latin-regular.woff2 create mode 100644 src/assets/webfonts/webfonts.scss (limited to 'src/assets') diff --git a/src/assets/app.scss b/src/assets/app.scss index 4b69864..001e3a4 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -1,6 +1,7 @@ @charset "utf-8"; -@import url("//fonts.googleapis.com/css?family=Lato:400,700|Pacifico|Raleway&display=swap"); +@import "./webfonts/webfonts.scss"; + @import "bulma"; // Themes import diff --git a/src/assets/webfonts/lato/OFL.txt b/src/assets/webfonts/lato/OFL.txt new file mode 100644 index 0000000..dfca0da --- /dev/null +++ b/src/assets/webfonts/lato/OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato" + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/assets/webfonts/lato/lato-v16-latin-regular.woff b/src/assets/webfonts/lato/lato-v16-latin-regular.woff new file mode 100644 index 0000000..189a0fe Binary files /dev/null and b/src/assets/webfonts/lato/lato-v16-latin-regular.woff differ diff --git a/src/assets/webfonts/lato/lato-v16-latin-regular.woff2 b/src/assets/webfonts/lato/lato-v16-latin-regular.woff2 new file mode 100644 index 0000000..6904b66 Binary files /dev/null and b/src/assets/webfonts/lato/lato-v16-latin-regular.woff2 differ diff --git a/src/assets/webfonts/raleway/OFL.txt b/src/assets/webfonts/raleway/OFL.txt new file mode 100644 index 0000000..3219811 --- /dev/null +++ b/src/assets/webfonts/raleway/OFL.txt @@ -0,0 +1,95 @@ +Copyright (c) 2010, Matt McInerney (matt@pixelspread.com), +Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com), +Copyright (c) 2011, Rodrigo Fuenzalida (www.rfuenzalida.com|hello@rfuenzalida.com), with Reserved Font Name Raleway + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff b/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff new file mode 100644 index 0000000..ab3a51b Binary files /dev/null and b/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff differ diff --git a/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff2 b/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff2 new file mode 100644 index 0000000..86b505e Binary files /dev/null and b/src/assets/webfonts/raleway/raleway-v14-latin-regular.woff2 differ diff --git a/src/assets/webfonts/webfonts.scss b/src/assets/webfonts/webfonts.scss new file mode 100644 index 0000000..df3b56b --- /dev/null +++ b/src/assets/webfonts/webfonts.scss @@ -0,0 +1,23 @@ +/* raleway-regular - latin */ +@font-face { + font-family: "Raleway"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Raleway"), local("Raleway-Regular"), + url("./webfonts/raleway/raleway-v14-latin-regular.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("./webfonts/raleway/raleway-v14-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* lato-regular - latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Lato Regular"), local("Lato-Regular"), + url("./webfonts/lato/lato-v16-latin-regular.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("./webfonts/lato/lato-v16-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} -- cgit v1.2.3 From 9052ec59b75a37b4518ad39c493ee6c2d4198b98 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Sat, 30 May 2020 23:16:55 -0700 Subject: Fix logo always shown issue. --- src/assets/defaults.yml | 1 - 1 file changed, 1 deletion(-) (limited to 'src/assets') diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml index bf3a367..a699d28 100644 --- a/src/assets/defaults.yml +++ b/src/assets/defaults.yml @@ -3,7 +3,6 @@ title: "Dashboard" subtitle: "Homer" -logo: "logo.png" header: true footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. -- cgit v1.2.3