Skip to content

D
docs
Commit 9739676c authored by Julius Volz's avatar Julius Volz
Browse files
Options

Merge pull request #386 from prometheus/design-experiments 

Improve overall website design.
parents cef3bb10 d55a613e
Show whitespace changes
Inline Side-by-side
Showing with 333 additions and 211 deletions
content/css/docs.css
View file @ 9739676c
/* Move down content because we have a fixed navbar that is 50px tall */
body {
font-family: 'Open Sans', serif;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}
.navbar {
margin-bottom: 0;
min-height: 60px;
}
.navbar-brand {
font-size: 20px;
margin-top: 4px;
font-family: Lato, sans-serif;
font-size: 26px;
font-weight: 300;
color: #aaa;
}
.navbar-brand img {
height: 27px;
height: 30px;
display: inline;
margin-top: -4px;
margin-top: -5px;
margin-right: 3px;
margin-left: 12px;
}
.navbar .github-stars {
......@@ -25,25 +29,60 @@ body {
height: 20px;
}
.navbar-toggle {
margin-top: 22px;
}
.navbar-jumbotron .navbar {
min-height: 83px;
}
.navbar-jumbotron .navbar-brand {
margin-top: 14px;
}
.navbar-jumbotron .main-nav {
margin-top: 17px;
}
.main-nav {
margin-top: 4px;
letter-spacing: 1px;
font-family: 'Lato', sans-serif;
font-size: 16px;
text-transform: uppercase;
}
.jumbotron {
background-color: #e6522c;
background-image: url("/assets/jumbotron-background.png");
text-align: center;
font-family: Lato, sans-serif;
text-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px;
margin-bottom: 50px;
padding: 40px 0;
}
.jumbotron h1 {
margin-top: 30px;
font-size: 52px;
font-weight: 300;
color: #fff;
}
.jumbotron p {
color: rgba(255,255,255,0.7);
.jumbotron .subtitle {
font-weight: 300;
font-size: 32px;
color: rgba(255,255,255,0.8);
margin-bottom: 20px;
}
.jumbotron a.btn {
border: none;
background-color: rgba(0,0,0,0.15);
color: #fff;
padding: 20px 25px 20px 25px;
margin-top: 15px;
}
.jumbotron a.btn:hover {
......@@ -51,34 +90,105 @@ body {
color: #fff;
}
.jumbotron img {
height: 100px;
padding-bottom: 15px;
.feature-item {
font-family: 'Lato', sans-serif;
font-weight: 300;
cursor: pointer;
height: 200px;
}
.jumbotron .subtitle {
margin-bottom: 20px;
.feature-item:hover {
background-color: #fad9d1;
border-radius: 3px;
}
.main .fa {
color: #e6522c;
.feature-item a {
text-decoration: none;
color: none;
}
.main h2 {
.feature-item h2 {
color: #333;
font-weight: 300;
font-size: 25px;
white-space: nowrap;
}
.feature-item .fa {
margin-right: 5px;
color: #e6522c;
}
.feature-item p {
font-size: 16px;
line-height: 1.8em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: #111;
}
.top-hr {
margin-top: 30px;
}
.quote {
margin: 25px 0 25px 0;
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
}
.quote-text {
width: 60%;
margin: auto;
font-size: 22px;
font-style: italic;
color: #be3511;
}
.quote-source {
font-size: 16px;
margin-top: 15px;
margin-left: 50px;
}
.open-source {
margin: 25px 0 25px 0;
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
}
.open-source h1 {
margin-top: 0;
font-weight: 300;
}
.open-source p {
width: 50%;
margin: auto;
font-size: 20px;
}
.trusted-by {
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 300;
padding-bottom: 10px;
}
.logos {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
}
footer {
font-size: 12px;
color: #333;
}
a.sc-logo img {
margin-left: 3px;
margin-bottom: 3px;
}
/* Docs-related styles. */
.side-nav-col {
z-index: 100;
......@@ -125,19 +235,17 @@ a.sc-logo img {
}
.doc-content {
margin-top: 25px;
}
.doc-content {
font-size: 18px;
font-size: 16px;
}
.doc-content p, .doc-content.ul, .doc-content .alert {
margin: 25px 0 25px 0;
margin: 15px 0 15px 0;
line-height: 1.5;
}
.doc-content > h1 {
color: #e6522c;
font-size: 30px;
text-transform: uppercase;
margin: 40px 0 10px 0;
}
......@@ -152,7 +260,7 @@ a.sc-logo img {
.doc-content > h2 {
color: #e6522c;
font-size: 25px;
font-size: 22px;
}
.doc-content > h2 code {
......@@ -161,7 +269,8 @@ a.sc-logo img {
}
.doc-content > h3 {
font-size: 22px;
font-size: 20px;
font-weight: bold;
}
.doc-content > h4 {
......@@ -214,7 +323,7 @@ a.sc-logo img {
.toc {
padding: 1em;
background-color: #eee;
background-color: #f9f2f4;
}
.toc-right {
......@@ -234,33 +343,21 @@ a.sc-logo img {
}
pre {
border: 1px solid #ddd;
border-left: 4px solid #e6522c;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
background-color: #f9f2f4;
border: 1px solid #333;
color: #333;
padding: 15px;
}
code {
color: #333;
pre code {
white-space: pre;
}
.main p {
font-size: 16px;
line-height: 1.8em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.main .desc {
margin-bottom: 20px;
}
.main-nav {
letter-spacing: 1px;
font-family: Avenir, 'Open Sans', serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
code {
color: #333;
}
aside {
......@@ -276,10 +373,3 @@ article {
.read-more > a {
color: #888;
}
.logos {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
}
content/index.html
View file @ 9739676c
---
layout: jumbotron
---
<div class="main">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-3">
<h2><i class="fa fa-flask"></i> Data model</h2>
<p class="desc">Prometheus implements a highly dimensional data model. Time series are identified by a metric name and a set of key-value pairs.</p>
<p><a class="btn btn-default" href="/docs/concepts/data_model/" role="button">View details &raquo;</a></p>
<div class="col-xs-12 col-md-8 col-sm-offset-2 center-xs">
<h1>From metrics to insight</h1>
<p class="subtitle">Power your metrics and alerting with a leading<br>open-source monitoring solution.</p>
<p>
<a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">GET STARTED</a>
</p>
</div>
</div>
<div class="col-md-3">
<h2><i class="fa fa-search"></i> Query language</h2>
<p class="desc">A flexible query language allows slicing and dicing of collected time series data in order to generate ad-hoc graphs, tables, and alerts.</p>
<p><a class="btn btn-default" href="/docs/querying/basics/" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-3">
<h2><i class="fa fa-line-chart"></i> Visualization</h2>
<p class="desc">Prometheus has multiple modes for visualizing data: a built-in expression browser, a GUI-based dashboard builder, and a console template language.</p>
<p><a class="btn btn-default" href="/docs/visualization/promdash/" role="button">View details &raquo;</a></p>
</div>
<div class="container">
<div class="main">
<div class="row">
<div class="col-md-3 feature-item">
<a href="/docs/concepts/data_model/">
<h2><i class="fa fa-flask"></i> Dimensional data</h2>
<p>Prometheus implements a highly dimensional data model. Time series are identified by a metric name and a set of key-value pairs.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/querying/basics/">
<h2><i class="fa fa-search"></i> Powerful queries</h2>
<p>A flexible query language allows slicing and dicing of collected time series data in order to generate ad-hoc graphs, tables, and alerts.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/visualization/grafana/">
<h2><i class="fa fa-line-chart"></i> Great visualization</h2>
<p>Prometheus has multiple modes for visualizing data: a built-in expression browser, Grafana integration, and a console template language.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/operating/storage/">
<h2><i class="fa fa-database"></i> Efficient storage</h2>
<p>Prometheus stores time series in memory and on local disk in an efficient custom format. Scaling is achieved by functional sharding and federation.</p>
</a>
</div>
</div>
</div>
<div class="main">
<div class="row">
<div class="col-md-3 feature-item">
<a href="/docs/operating/configuration/">
<h2><i class="fa fa-cog"></i> Simple operation</h2>
<p>Each server is independent for reliability, relying only on local storage. Written in Go, all binaries are statically linked and easy to deploy.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/alerting/rules/">
<h2><i class="fa fa-warning"></i> Precise alerting</h2>
<p>Alerts are defined based on Prometheus's flexible query language and maintain dimensional information. An alertmanager handles notifications and silencing.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/instrumenting/clientlibs/">
<h2><i class="fa fa-code"></i> Many client libraries</h2>
<p>Client libraries allow easy instrumentation of services. Currently, Go, Java, and Ruby are supported. Custom libraries are easy to implement.</p>
</a>
</div>
<div class="col-md-3 feature-item">
<a href="/docs/instrumenting/exporters/">
<h2><i class="fa fa-cloud-upload"></i> Many integrations</h2>
<p>Existing exporters allow bridging of third-party data into Prometheus. Examples: system statistics, as well as Docker, HAProxy, StatsD, and JMX metrics. </p>
</a>
</div>
</div>
</div>
<div class="row top-hr">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="col-md-3">
<h2><i class="fa fa-database"></i> Storage</h2>
<p class="desc">Prometheus stores time series in memory and on local disk in an efficient custom format. Scaling is achieved by functional sharding and federation.</p>
<p><a class="btn btn-default" href="/docs/operating/storage/" role="button">View details &raquo;</a></p>
<div class="row quote">
<div class="col-md-12">
<p class="quote-text">
«Even though Borgmon remains internal to Google, the idea of treating time-series data as a data source for generating alerts is now accessible to everyone through those open source tools like Prometheus [...]»
</p>
<p class="quote-source">
— <a href="http://shop.oreilly.com/product/0636920041528.do"><b>Site Reliability Engineering:</b> How Google Runs Production Systems</a> (O'Reilly Media)
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h2><i class="fa fa-cog"></i> Operation</h2>
<p class="desc">Each server is independent for reliability, relying only on local storage. Written in Go, all binaries are statically linked and easy to deploy.</p>
<p><a class="btn btn-default" href="/docs/operating/configuration/" role="button">View details &raquo;</a></p>
<div class="col-md-12">
<hr>
</div>
</div>
<div class="col-md-3">
<h2><i class="fa fa-code"></i> Client libraries</h2>
<p class="desc">Client libraries allow easy instrumentation of services. Currently, Go, Java, and Ruby are supported. Custom libraries are easy to implement.</p>
<p><a class="btn btn-default" href="/docs/instrumenting/clientlibs/" role="button">View details &raquo;</a></p>
<div class="row open-source">
<div class="col-md-12">
<h1><i class="fa fa-github"></i> Open Source</h1>
<p>Prometheus is 100% open source and community-driven. All components are available under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2 License</a> on <a href="https://github.com/prometheus">GitHub</a>.</p>
</div>
<div class="col-md-3">
<h2><i class="fa fa-warning"></i> Alerting</h2>
<p class="desc">Alerts are defined based on Prometheus's flexible query language and maintain dimensional information. An alertmanager handles notifications and silencing.</p>
<p><a class="btn btn-default" href="/docs/alerting/rules/" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-3">
<h2><i class="fa fa-cloud-upload"></i> Exporters</h2>
<p class="desc">Existing exporters allow bridging of third-party data into Prometheus. Examples: system statistics, as well as Docker, HAProxy, StatsD, and JMX metrics. </p>
<p><a class="btn btn-default" href="/docs/instrumenting/exporters/" role="button">View details &raquo;</a></p>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="container text-center">
<div class="row">
<hr>
<div class="col-md-12">Trusted by:</div>
<div class="col-md-12 trusted-by">Some of our users include:</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6 logos">
<a href="http://argus-sec.com/"><img src="assets/company-logos/Argus.png"/></a>
......@@ -127,4 +190,6 @@ layout: jumbotron
<a href="https://www.weave.works/"><img src="assets/company-logos/weave.png"/></a>
</div>
</div>
<%= render 'container_footer' %>
</div>
layouts/container_footer.html
View file @ 9739676c
......@@ -2,6 +2,6 @@
<footer>
<p class="pull-left">
&copy; Prometheus Authors 2015
&copy; Prometheus Authors 2016
</p>
</footer>
layouts/header.html
View file @ 9739676c
......@@ -43,7 +43,8 @@
<!-- Custom Fonts -->
<link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="/assets/docs.js"></script>
......@@ -51,6 +52,7 @@
<body>
<div class="<%= @item[:layout] == 'jumbotron' ? 'navbar-jumbotron' : '' %>">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
......@@ -64,8 +66,7 @@
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a href="/">Overview</a></li>
<li><a href="/docs/introduction/overview/">Documentation</a></li>
<li><a href="/docs/introduction/overview/">Docs</a></li>
<li><a href="/community/">Community</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="https://github.com/prometheus"><i class="fa fa-github"></i> Github</a></li>
......@@ -76,3 +77,4 @@
</div>
</div>
</nav>
</div>
layouts/jumbotron.html
View file @ 9739676c
<%= render 'header' %>
<div class="jumbotron">
<div class="container">
<h1><img src="/assets/prometheus_logo.svg" alt="Prometheus logo"> Prometheus</h1>
<p class="subtitle">An open-source service monitoring system and time series database.</p>
<p>
<a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">Get Started</a>
<a class="btn btn-default btn-lg" href="https://promcon.io/" role="button">PromCon 2016</a>
</p>
</div>
</div>
<div class="container">
<%= yield %>
<%= render 'container_footer' %>
</div>
<%= yield %>
<%= render 'footer' %>
static/prometheus_logo.svg deleted 100644 → 0
View file @ cef3bb10
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="115.333px" height="114px" viewBox="0 0 115.333 114" enable-background="new 0 0 115.333 114" xml:space="preserve">
<g id="Layer_2">
</g>
<g>
<path fill="#FFFFFF" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666
s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283
H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92
c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413
c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308
c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469
c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16
c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148
c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z"/>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023