add the sakura theme
This commit is contained in:
Andreas Zweili
parent
8b7eacaf8f
commit
11b5d3c3f2
198
docs/docs.org
198
docs/docs.org
|
|
@ -570,64 +570,178 @@ positioned on the page.
|
||||||
The inventory.css file get's loaded in the base.html file. It provides
|
The inventory.css file get's loaded in the base.html file. It provides
|
||||||
some generel theming over the application.
|
some generel theming over the application.
|
||||||
|
|
||||||
*** Body
|
The theme used in the inventory css is called "sakura earthly". It's
|
||||||
|
repository can be found here: https://github.com/oxalorg/sakura
|
||||||
Add a margin of a few pixels around the body.
|
I modified the theme slightly. I changed the font to sans-serif
|
||||||
|
because it makes in the inventory more sense. In addition I'm
|
||||||
|
displaying all lines in a table.
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||||
|
/* Sakura.css v1.0.0
|
||||||
|
* ================
|
||||||
|
* Minimal css theme.
|
||||||
|
* Project: https://github.com/oxalorg/sakura
|
||||||
|
*/
|
||||||
|
/* Body */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
font-family: sans-serif; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-top: 10px;
|
font-size: 1.8rem;
|
||||||
margin-bottom: 10px;
|
line-height: 1.618;
|
||||||
margin-right: 10px;
|
max-width: 38em;
|
||||||
margin-left: 20px;
|
margin: auto;
|
||||||
}
|
color: #4a4a4a;
|
||||||
#+END_SRC
|
background-color: #f9f9f9;
|
||||||
|
padding: 13px; }
|
||||||
|
|
||||||
*** Tables
|
@media (max-width: 684px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.53rem; } }
|
||||||
|
|
||||||
Display a border around tables.
|
@media (max-width: 382px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.35rem; } }
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
h1, h2, h3, h4, h5, h6 {
|
||||||
table, th, td {
|
line-height: 1.1;
|
||||||
border: 1px solid black;
|
font-family: Verdana, Geneva, sans-serif;
|
||||||
}
|
font-weight: 700;
|
||||||
#+END_SRC
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
-ms-word-break: break-all;
|
||||||
|
word-break: break-word;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
hyphens: auto; }
|
||||||
|
|
||||||
Align table headers on the left side.
|
h1 {
|
||||||
|
font-size: 2.35em; }
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
h2 {
|
||||||
th {
|
font-size: 2.00em; }
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
#+END_SRC
|
|
||||||
|
|
||||||
Add a padding around the table content.
|
h3 {
|
||||||
|
font-size: 1.75em; }
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
h4 {
|
||||||
th, td {
|
font-size: 1.5em; }
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
#+END_SRC
|
|
||||||
|
|
||||||
*** Code
|
h5 {
|
||||||
|
font-size: 1.25em; }
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
small, sub, sup {
|
||||||
|
font-size: 75%; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-color: #338618; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #338618; }
|
||||||
|
a:hover {
|
||||||
|
color: #5e5e5e;
|
||||||
|
border-bottom: 2px solid #4a4a4a; }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1.4em; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.4em; }
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
padding-left: 1em;
|
||||||
|
border-left: 3px solid #338618; }
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%; }
|
||||||
|
|
||||||
|
/* Pre and Code */
|
||||||
|
pre {
|
||||||
|
background-color: #C7E3BE;
|
||||||
|
display: block;
|
||||||
|
padding: 1em;
|
||||||
|
overflow-x: auto; }
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
|
||||||
code {
|
code {
|
||||||
background-color: lightgray;
|
font-size: 0.9em;
|
||||||
clear: left;
|
padding: 0 0.5em;
|
||||||
border: 1px solid;
|
background-color: #C7E3BE;
|
||||||
padding: 5px;
|
white-space: pre-wrap; }
|
||||||
}
|
|
||||||
#+END_SRC
|
|
||||||
|
|
||||||
*** Footer
|
pre > code {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
white-space: pre; }
|
||||||
|
|
||||||
Styles related to the footer.
|
/* Tables */
|
||||||
|
table {
|
||||||
|
text-align: justify;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse; }
|
||||||
|
|
||||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
td, th {
|
||||||
p.copyright {
|
padding: 0.5em;
|
||||||
font-size:10px
|
border: 1px solid #C7E3BE; }
|
||||||
}
|
|
||||||
|
/* Buttons, forms and input */
|
||||||
|
input, textarea {
|
||||||
|
border: 1px solid #4a4a4a; }
|
||||||
|
input:focus, textarea:focus {
|
||||||
|
border: 1px solid #338618; }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: #338618;
|
||||||
|
color: #f9f9f9;
|
||||||
|
border-radius: 1px;
|
||||||
|
border: 1px solid #338618;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .5; }
|
||||||
|
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
||||||
|
background-color: #5e5e5e;
|
||||||
|
border-color: #5e5e5e;
|
||||||
|
color: #f9f9f9;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
textarea, select, input[type] {
|
||||||
|
color: #4a4a4a;
|
||||||
|
padding: 6px 10px;
|
||||||
|
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #C7E3BE;
|
||||||
|
border: 1px solid #C7E3BE;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
textarea:focus, select:focus, input[type]:focus {
|
||||||
|
border: 1px solid #338618;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
input[type="checkbox"]:focus {
|
||||||
|
outline: 1px dotted #338618; }
|
||||||
|
|
||||||
|
label, legend, fieldset {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-weight: 600; }
|
||||||
#+END_SRC
|
#+END_SRC
|
||||||
|
|
||||||
** base.html
|
** base.html
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,165 @@
|
||||||
|
/* Sakura.css v1.0.0
|
||||||
|
* ================
|
||||||
|
* Minimal css theme.
|
||||||
|
* Project: https://github.com/oxalorg/sakura
|
||||||
|
*/
|
||||||
|
/* Body */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
font-family: sans-serif; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-top: 10px;
|
font-size: 1.8rem;
|
||||||
margin-bottom: 10px;
|
line-height: 1.618;
|
||||||
margin-right: 10px;
|
max-width: 38em;
|
||||||
margin-left: 20px;
|
margin: auto;
|
||||||
}
|
color: #4a4a4a;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 13px; }
|
||||||
|
|
||||||
table, th, td {
|
@media (max-width: 684px) {
|
||||||
border: 1px solid black;
|
body {
|
||||||
}
|
font-size: 1.53rem; } }
|
||||||
|
|
||||||
th {
|
@media (max-width: 382px) {
|
||||||
text-align: left;
|
body {
|
||||||
}
|
font-size: 1.35rem; } }
|
||||||
|
|
||||||
th, td {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
padding: 5px;
|
line-height: 1.1;
|
||||||
}
|
font-family: Verdana, Geneva, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
-ms-word-break: break-all;
|
||||||
|
word-break: break-word;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
hyphens: auto; }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.35em; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.00em; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75em; }
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5em; }
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25em; }
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
small, sub, sup {
|
||||||
|
font-size: 75%; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-color: #338618; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #338618; }
|
||||||
|
a:hover {
|
||||||
|
color: #5e5e5e;
|
||||||
|
border-bottom: 2px solid #4a4a4a; }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1.4em; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.4em; }
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
padding-left: 1em;
|
||||||
|
border-left: 3px solid #338618; }
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%; }
|
||||||
|
|
||||||
|
/* Pre and Code */
|
||||||
|
pre {
|
||||||
|
background-color: #C7E3BE;
|
||||||
|
display: block;
|
||||||
|
padding: 1em;
|
||||||
|
overflow-x: auto; }
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: lightgray;
|
font-size: 0.9em;
|
||||||
clear: left;
|
padding: 0 0.5em;
|
||||||
border: 1px solid;
|
background-color: #C7E3BE;
|
||||||
padding: 5px;
|
white-space: pre-wrap; }
|
||||||
}
|
|
||||||
|
|
||||||
p.copyright {
|
pre > code {
|
||||||
font-size:10px
|
padding: 0;
|
||||||
}
|
background-color: transparent;
|
||||||
|
white-space: pre; }
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
table {
|
||||||
|
text-align: justify;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse; }
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
padding: 0.5em;
|
||||||
|
border: 1px solid #C7E3BE; }
|
||||||
|
|
||||||
|
/* Buttons, forms and input */
|
||||||
|
input, textarea {
|
||||||
|
border: 1px solid #4a4a4a; }
|
||||||
|
input:focus, textarea:focus {
|
||||||
|
border: 1px solid #338618; }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: #338618;
|
||||||
|
color: #f9f9f9;
|
||||||
|
border-radius: 1px;
|
||||||
|
border: 1px solid #338618;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .5; }
|
||||||
|
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
||||||
|
background-color: #5e5e5e;
|
||||||
|
border-color: #5e5e5e;
|
||||||
|
color: #f9f9f9;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
textarea, select, input[type] {
|
||||||
|
color: #4a4a4a;
|
||||||
|
padding: 6px 10px;
|
||||||
|
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #C7E3BE;
|
||||||
|
border: 1px solid #C7E3BE;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
textarea:focus, select:focus, input[type]:focus {
|
||||||
|
border: 1px solid #338618;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
input[type="checkbox"]:focus {
|
||||||
|
outline: 1px dotted #338618; }
|
||||||
|
|
||||||
|
label, legend, fieldset {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-weight: 600; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue