New style. Eventually keep this one.
This commit is contained in:
parent
d263e596ab
commit
cd56ce3725
12 changed files with 364 additions and 24 deletions
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
19
index.html
19
index.html
|
|
@ -4,20 +4,21 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Circolog</title>
|
||||
<link rel="stylesheet" type="text/css" href="res/css/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="res/css/palette(6).css">
|
||||
<link rel="stylesheet" type="text/css" href="res/css/asciinema-player.css">
|
||||
<script src="res/js/asciinema-player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="trianglify">
|
||||
<div class="section" id="title">
|
||||
<div class="container">
|
||||
<h1>CIRCOLOG</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="intro">
|
||||
<div class="container">
|
||||
<div class="container primary-text-color">
|
||||
<h2>A syslog daemon which doesn't write to disk, ever.</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container default-text-color">
|
||||
<ul>
|
||||
<li>less logs means less privacy problem. [<a href="https://www.ctrl.blog/entry/gdpr-web-server-logs">too many logs are bad for your users</a> ]</li>
|
||||
<li>powerful queries & great CLI experience</li>
|
||||
|
|
@ -26,10 +27,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="section" id="usage">
|
||||
<div class="container">
|
||||
<div class="container primary-text-color">
|
||||
<h2>How does it work?</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container default-text-color">
|
||||
<div class="pane" id="server">
|
||||
<h3>Server</h3>
|
||||
<asciinema-player src="res/media/server.cast"></asciinema-player>
|
||||
|
|
@ -41,18 +42,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="section" id="docs">
|
||||
<div class="container">
|
||||
<div class="container primary-text-color">
|
||||
<h2>Want to know more?</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container default-text-color">
|
||||
<p>Read the <a href="/docs">docs</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="source">
|
||||
<div class="container">
|
||||
<div class="container primary-text-color">
|
||||
<h2>Want to contribute?</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container default-text-color">
|
||||
<p>We use git, on <a href="https://git.lattuga.net/boyska/circolog">git.lattuga.net</a> (read <a href="/not-on-github.html">why we are not on github</a>).</p>
|
||||
<p>Send us a patch by <a href="email:logs@porcod.io">email</a> (to produce a patch <code>git format-patch origin/master</code>)</p>
|
||||
</div>
|
||||
|
|
|
|||
281
res/css/colors.css
Normal file
281
res/css/colors.css
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
/***
|
||||
|
||||
colors.css v2.0.0
|
||||
http://clrs.cc
|
||||
@mrmrs
|
||||
MIT License
|
||||
|
||||
***/
|
||||
/*
|
||||
|
||||
SKINS
|
||||
- Backgrounds
|
||||
- Colors
|
||||
- Border colors
|
||||
- SVG fills
|
||||
- SVG Strokes
|
||||
|
||||
*/
|
||||
/* Backgrounds */
|
||||
.bg-navy {
|
||||
background-color: #001F3F; }
|
||||
|
||||
.bg-blue {
|
||||
background-color: #0074D9; }
|
||||
|
||||
.bg-aqua {
|
||||
background-color: #7FDBFF; }
|
||||
|
||||
.bg-teal {
|
||||
background-color: #39CCCC; }
|
||||
|
||||
.bg-olive {
|
||||
background-color: #3D9970; }
|
||||
|
||||
.bg-green {
|
||||
background-color: #2ECC40; }
|
||||
|
||||
.bg-lime {
|
||||
background-color: #01FF70; }
|
||||
|
||||
.bg-yellow {
|
||||
background-color: #FFDC00; }
|
||||
|
||||
.bg-orange {
|
||||
background-color: #FF851B; }
|
||||
|
||||
.bg-red {
|
||||
background-color: #FF4136; }
|
||||
|
||||
.bg-fuchsia {
|
||||
background-color: #F012BE; }
|
||||
|
||||
.bg-purple {
|
||||
background-color: #B10DC9; }
|
||||
|
||||
.bg-maroon {
|
||||
background-color: #85144B; }
|
||||
|
||||
.bg-white {
|
||||
background-color: #fff; }
|
||||
|
||||
.bg-gray {
|
||||
background-color: #aaa; }
|
||||
|
||||
.bg-silver {
|
||||
background-color: #ddd; }
|
||||
|
||||
.bg-black {
|
||||
background-color: #111; }
|
||||
|
||||
/* Colors */
|
||||
.navy {
|
||||
color: #001F3F; }
|
||||
|
||||
.blue {
|
||||
color: #0074D9; }
|
||||
|
||||
.aqua {
|
||||
color: #7FDBFF; }
|
||||
|
||||
.teal {
|
||||
color: #39CCCC; }
|
||||
|
||||
.olive {
|
||||
color: #3D9970; }
|
||||
|
||||
.green {
|
||||
color: #2ECC40; }
|
||||
|
||||
.lime {
|
||||
color: #01FF70; }
|
||||
|
||||
.yellow {
|
||||
color: #FFDC00; }
|
||||
|
||||
.orange {
|
||||
color: #FF851B; }
|
||||
|
||||
.red {
|
||||
color: #FF4136; }
|
||||
|
||||
.fuchsia {
|
||||
color: #F012BE; }
|
||||
|
||||
.purple {
|
||||
color: #B10DC9; }
|
||||
|
||||
.maroon {
|
||||
color: #85144B; }
|
||||
|
||||
.white {
|
||||
color: #fff; }
|
||||
|
||||
.silver {
|
||||
color: #ddd; }
|
||||
|
||||
.gray {
|
||||
color: #aaa; }
|
||||
|
||||
.black {
|
||||
color: #111; }
|
||||
|
||||
/* Border colors
|
||||
|
||||
Use with another border utility that sets border-width and style
|
||||
i.e .border { border-width: 1px; border-style: solid; }
|
||||
*/
|
||||
.border--navy {
|
||||
border-color: #001F3F; }
|
||||
|
||||
.border--blue {
|
||||
border-color: #0074D9; }
|
||||
|
||||
.border--aqua {
|
||||
border-color: #7FDBFF; }
|
||||
|
||||
.border--teal {
|
||||
border-color: #39CCCC; }
|
||||
|
||||
.border--olive {
|
||||
border-color: #3D9970; }
|
||||
|
||||
.border--green {
|
||||
border-color: #2ECC40; }
|
||||
|
||||
.border--lime {
|
||||
border-color: #01FF70; }
|
||||
|
||||
.border--yellow {
|
||||
border-color: #FFDC00; }
|
||||
|
||||
.border--orange {
|
||||
border-color: #FF851B; }
|
||||
|
||||
.border--red {
|
||||
border-color: #FF4136; }
|
||||
|
||||
.border--fuchsia {
|
||||
border-color: #F012BE; }
|
||||
|
||||
.border--purple {
|
||||
border-color: #B10DC9; }
|
||||
|
||||
.border--maroon {
|
||||
border-color: #85144B; }
|
||||
|
||||
.border--white {
|
||||
border-color: #fff; }
|
||||
|
||||
.border--gray {
|
||||
border-color: #aaa; }
|
||||
|
||||
.border--silver {
|
||||
border-color: #ddd; }
|
||||
|
||||
.border--black {
|
||||
border-color: #111; }
|
||||
|
||||
/* Fills for SVG */
|
||||
.fill-navy {
|
||||
fill: #001F3F; }
|
||||
|
||||
.fill-blue {
|
||||
fill: #0074D9; }
|
||||
|
||||
.fill-aqua {
|
||||
fill: #7FDBFF; }
|
||||
|
||||
.fill-teal {
|
||||
fill: #39CCCC; }
|
||||
|
||||
.fill-olive {
|
||||
fill: #3D9970; }
|
||||
|
||||
.fill-green {
|
||||
fill: #2ECC40; }
|
||||
|
||||
.fill-lime {
|
||||
fill: #01FF70; }
|
||||
|
||||
.fill-yellow {
|
||||
fill: #FFDC00; }
|
||||
|
||||
.fill-orange {
|
||||
fill: #FF851B; }
|
||||
|
||||
.fill-red {
|
||||
fill: #FF4136; }
|
||||
|
||||
.fill-fuchsia {
|
||||
fill: #F012BE; }
|
||||
|
||||
.fill-purple {
|
||||
fill: #B10DC9; }
|
||||
|
||||
.fill-maroon {
|
||||
fill: #85144B; }
|
||||
|
||||
.fill-white {
|
||||
fill: #fff; }
|
||||
|
||||
.fill-gray {
|
||||
fill: #aaa; }
|
||||
|
||||
.fill-silver {
|
||||
fill: #ddd; }
|
||||
|
||||
.fill-black {
|
||||
fill: #111; }
|
||||
|
||||
/* Strokes for SVG */
|
||||
.stroke-navy {
|
||||
stroke: #001F3F; }
|
||||
|
||||
.stroke-blue {
|
||||
stroke: #0074D9; }
|
||||
|
||||
.stroke-aqua {
|
||||
stroke: #7FDBFF; }
|
||||
|
||||
.stroke-teal {
|
||||
stroke: #39CCCC; }
|
||||
|
||||
.stroke-olive {
|
||||
stroke: #3D9970; }
|
||||
|
||||
.stroke-green {
|
||||
stroke: #2ECC40; }
|
||||
|
||||
.stroke-lime {
|
||||
stroke: #01FF70; }
|
||||
|
||||
.stroke-yellow {
|
||||
stroke: #FFDC00; }
|
||||
|
||||
.stroke-orange {
|
||||
stroke: #FF851B; }
|
||||
|
||||
.stroke-red {
|
||||
stroke: #FF4136; }
|
||||
|
||||
.stroke-fuchsia {
|
||||
stroke: #F012BE; }
|
||||
|
||||
.stroke-purple {
|
||||
stroke: #B10DC9; }
|
||||
|
||||
.stroke-maroon {
|
||||
stroke: #85144B; }
|
||||
|
||||
.stroke-white {
|
||||
stroke: #fff; }
|
||||
|
||||
.stroke-gray {
|
||||
stroke: #aaa; }
|
||||
|
||||
.stroke-silver {
|
||||
stroke: #ddd; }
|
||||
|
||||
.stroke-black {
|
||||
stroke: #111; }
|
||||
1
res/css/colors.min.css
vendored
Normal file
1
res/css/colors.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.bg-navy{background-color:#001F3F}.bg-blue{background-color:#0074D9}.bg-aqua{background-color:#7FDBFF}.bg-teal{background-color:#39CCCC}.bg-olive{background-color:#3D9970}.bg-green{background-color:#2ECC40}.bg-lime{background-color:#01FF70}.bg-yellow{background-color:#FFDC00}.bg-orange{background-color:#FF851B}.bg-red{background-color:#FF4136}.bg-fuchsia{background-color:#F012BE}.bg-purple{background-color:#B10DC9}.bg-maroon{background-color:#85144B}.bg-white{background-color:#fff}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-black{background-color:#111}.navy{color:#001F3F}.blue{color:#0074D9}.aqua{color:#7FDBFF}.teal{color:#39CCCC}.olive{color:#3D9970}.green{color:#2ECC40}.lime{color:#01FF70}.yellow{color:#FFDC00}.orange{color:#FF851B}.red{color:#FF4136}.fuchsia{color:#F012BE}.purple{color:#B10DC9}.maroon{color:#85144B}.white{color:#fff}.silver{color:#ddd}.gray{color:#aaa}.black{color:#111}.border--navy{border-color:#001F3F}.border--blue{border-color:#0074D9}.border--aqua{border-color:#7FDBFF}.border--teal{border-color:#39CCCC}.border--olive{border-color:#3D9970}.border--green{border-color:#2ECC40}.border--lime{border-color:#01FF70}.border--yellow{border-color:#FFDC00}.border--orange{border-color:#FF851B}.border--red{border-color:#FF4136}.border--fuchsia{border-color:#F012BE}.border--purple{border-color:#B10DC9}.border--maroon{border-color:#85144B}.border--white{border-color:#fff}.border--gray{border-color:#aaa}.border--silver{border-color:#ddd}.border--black{border-color:#111}.fill-navy{fill:#001F3F}.fill-blue{fill:#0074D9}.fill-aqua{fill:#7FDBFF}.fill-teal{fill:#39CCCC}.fill-olive{fill:#3D9970}.fill-green{fill:#2ECC40}.fill-lime{fill:#01FF70}.fill-yellow{fill:#FFDC00}.fill-orange{fill:#FF851B}.fill-red{fill:#FF4136}.fill-fuchsia{fill:#F012BE}.fill-purple{fill:#B10DC9}.fill-maroon{fill:#85144B}.fill-white{fill:#fff}.fill-gray{fill:#aaa}.fill-silver{fill:#ddd}.fill-black{fill:#111}.stroke-navy{stroke:#001F3F}.stroke-blue{stroke:#0074D9}.stroke-aqua{stroke:#7FDBFF}.stroke-teal{stroke:#39CCCC}.stroke-olive{stroke:#3D9970}.stroke-green{stroke:#2ECC40}.stroke-lime{stroke:#01FF70}.stroke-yellow{stroke:#FFDC00}.stroke-orange{stroke:#FF851B}.stroke-red{stroke:#FF4136}.stroke-fuchsia{stroke:#F012BE}.stroke-purple{stroke:#B10DC9}.stroke-maroon{stroke:#85144B}.stroke-white{stroke:#fff}.stroke-gray{stroke:#aaa}.stroke-silver{stroke:#ddd}.stroke-black{stroke:#111}
|
||||
|
|
@ -139,34 +139,31 @@ body .section:not(:first-child) {
|
|||
animation-timing-function: cubic-bezier(.27,.72,.44,1.01);
|
||||
}
|
||||
|
||||
.trianglify {
|
||||
size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-image: url(../media/bg.png);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: "Exo2";
|
||||
border: 5px solid #000;
|
||||
border-radius: 5px;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 2em;
|
||||
box-shadow: 5px 10px 5px 5px #2A202F, inset 2px 2px 5px 5px #3A2A1A;
|
||||
filter: drop-shadow(5px 5px 8px rgba(0,0,0,.4));
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.section > div {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section > *:nth-child(odd){
|
||||
color: #FFDC00;
|
||||
background-color: #0074D9;
|
||||
}
|
||||
|
||||
.section > *:nth-child(even){
|
||||
color: #001F3F;
|
||||
background-color: #39CCCC;
|
||||
}
|
||||
|
||||
.section > * {
|
||||
flex: 1 1 650px;
|
||||
}
|
||||
|
|
@ -181,10 +178,10 @@ body .section:not(:first-child) {
|
|||
|
||||
.container {
|
||||
text-align: center;
|
||||
background: rgba(0,150,136,0.2);
|
||||
}
|
||||
|
||||
.container ul {
|
||||
color: #001F3F;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
|
|
|||
10
res/css/palette(1).css
Normal file
10
res/css/palette(1).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/blue/teal */
|
||||
|
||||
.dark-primary-color { background: #1976D2; }
|
||||
.default-primary-color { background: #2196F3; }
|
||||
.light-primary-color { background: #BBDEFB; }
|
||||
.text-primary-color { color: #FFFFFF; }
|
||||
.accent-color { background: #009688; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
10
res/css/palette(2).css
Normal file
10
res/css/palette(2).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/blue/amber */
|
||||
|
||||
.dark-primary-color { background: #1976D2; }
|
||||
.default-primary-color { background: #2196F3; }
|
||||
.light-primary-color { background: #BBDEFB; }
|
||||
.text-primary-color { color: #FFFFFF; }
|
||||
.accent-color { background: #FFC107; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
10
res/css/palette(3).css
Normal file
10
res/css/palette(3).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/lime/cyan */
|
||||
|
||||
.dark-primary-color { background: #AFB42B; }
|
||||
.default-primary-color { background: #CDDC39; }
|
||||
.light-primary-color { background: #F0F4C3; }
|
||||
.text-primary-color { color: #212121; }
|
||||
.accent-color { background: #00BCD4; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
10
res/css/palette(4).css
Normal file
10
res/css/palette(4).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/deep-purple/orange */
|
||||
|
||||
.dark-primary-color { background: #512DA8; }
|
||||
.default-primary-color { background: #673AB7; }
|
||||
.light-primary-color { background: #D1C4E9; }
|
||||
.text-primary-color { color: #FFFFFF; }
|
||||
.accent-color { background: #FF9800; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
10
res/css/palette(5).css
Normal file
10
res/css/palette(5).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/yellow/lime */
|
||||
|
||||
.dark-primary-color { background: #FBC02D; }
|
||||
.default-primary-color { background: #FFEB3B; }
|
||||
.light-primary-color { background: #FFF9C4; }
|
||||
.text-primary-color { color: #212121; }
|
||||
.accent-color { background: #CDDC39; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
10
res/css/palette(6).css
Normal file
10
res/css/palette(6).css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Palette generated by Material Palette - materialpalette.com/light-blue/deep-orange */
|
||||
|
||||
.dark-primary-color { background: #0288D1; }
|
||||
.default-primary-color { background: #03A9F4; }
|
||||
.light-primary-color { background: #B3E5FC; }
|
||||
.text-primary-color { color: #FFFFFF; }
|
||||
.accent-color { background: #FF5722; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
BIN
res/media/bg.png
Normal file
BIN
res/media/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Loading…
Reference in a new issue