New style. Eventually keep this one.

This commit is contained in:
Blallo 2019-03-23 17:43:02 +01:00
parent d263e596ab
commit cd56ce3725
No known key found for this signature in database
GPG key ID: 0CBE577C9B72DC3F
12 changed files with 364 additions and 24 deletions

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -4,20 +4,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circolog</title> <title>Circolog</title>
<link rel="stylesheet" type="text/css" href="res/css/main.css"> <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"> <link rel="stylesheet" type="text/css" href="res/css/asciinema-player.css">
<script src="res/js/asciinema-player.js"></script> <script src="res/js/asciinema-player.js"></script>
</head> </head>
<body> <body class="trianglify">
<div class="section" id="title"> <div class="section" id="title">
<div class="container"> <div class="container">
<h1>CIRCOLOG</h1> <h1>CIRCOLOG</h1>
</div> </div>
</div> </div>
<div class="section" id="intro"> <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> <h2>A syslog daemon which doesn't write to disk, ever.</h2>
</div> </div>
<div class="container"> <div class="container default-text-color">
<ul> <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>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 &amp; great CLI experience</li> <li>powerful queries &amp; great CLI experience</li>
@ -26,10 +27,10 @@
</div> </div>
</div> </div>
<div class="section" id="usage"> <div class="section" id="usage">
<div class="container"> <div class="container primary-text-color">
<h2>How does it work?</h2> <h2>How does it work?</h2>
</div> </div>
<div class="container"> <div class="container default-text-color">
<div class="pane" id="server"> <div class="pane" id="server">
<h3>Server</h3> <h3>Server</h3>
<asciinema-player src="res/media/server.cast"></asciinema-player> <asciinema-player src="res/media/server.cast"></asciinema-player>
@ -41,18 +42,18 @@
</div> </div>
</div> </div>
<div class="section" id="docs"> <div class="section" id="docs">
<div class="container"> <div class="container primary-text-color">
<h2>Want to know more?</h2> <h2>Want to know more?</h2>
</div> </div>
<div class="container"> <div class="container default-text-color">
<p>Read the <a href="/docs">docs</a></p> <p>Read the <a href="/docs">docs</a></p>
</div> </div>
</div> </div>
<div class="section" id="source"> <div class="section" id="source">
<div class="container"> <div class="container primary-text-color">
<h2>Want to contribute?</h2> <h2>Want to contribute?</h2>
</div> </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>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> <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> </div>

281
res/css/colors.css Normal file
View 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
View 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}

View file

@ -139,34 +139,31 @@ body .section:not(:first-child) {
animation-timing-function: cubic-bezier(.27,.72,.44,1.01); 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 { .section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: "Exo2"; font-family: "Exo2";
border: 5px solid #000; margin-left: 1em;
border-radius: 5px; margin-right: 1em;
margin-bottom: 2em; 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; overflow: hidden;
} }
.section > div { .section > div {
padding: 10px; padding: 10px;
color: #fff;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.section > *:nth-child(odd){
color: #FFDC00;
background-color: #0074D9;
}
.section > *:nth-child(even){
color: #001F3F;
background-color: #39CCCC;
}
.section > * { .section > * {
flex: 1 1 650px; flex: 1 1 650px;
} }
@ -181,10 +178,10 @@ body .section:not(:first-child) {
.container { .container {
text-align: center; text-align: center;
background: rgba(0,150,136,0.2);
} }
.container ul { .container ul {
color: #001F3F;
text-align: left; text-align: left;
padding-left: 5%; padding-left: 5%;
} }

10
res/css/palette(1).css Normal file
View 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
View 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
View 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
View 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
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB