kafka-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gwens...@apache.org
Subject [1/6] kafka-site git commit: new design
Date Tue, 04 Oct 2016 22:56:17 GMT
Repository: kafka-site
Updated Branches:
  refs/heads/asf-site 2d621da3b -> 6e3ea2d87


http://git-wip-us.apache.org/repos/asf/kafka-site/blob/1b8cdf48/project-security.html
----------------------------------------------------------------------
diff --git a/project-security.html b/project-security.html
index 7097d39..58b639a 100644
--- a/project-security.html
+++ b/project-security.html
@@ -16,19 +16,24 @@
 -->
 
 <!--#include virtual="includes/header.html" -->
-
-<h1>Kafka Security</h1>
-
-<p>
-	The Apache Software Foundation takes security issues very seriously. Apache Kafka specifically
offers security features and is responsive to issues around its features. If you have any
concern around Kafka Security or believe you have uncovered a vulnerability, we suggest that
you get in touch via the e-mail address <a href="mailto:security@kafka.apache.org?Subject=[SECURITY]
My security issue" target="_top">security@kafka.apache.org</a>. In the message, try
to provide a description of the issue and ideally a way of reproducing it. The security team
will get back to you after assessing the description.
-</p>
-
-<p>
-	Note that this security address should be used only for undisclosed vulnerabilities. Dealing
with fixed issues or general questions on how to use the security features should be handled
regularly via the user and the dev lists. <b>Please report any security problems to
the project security address before disclosing it publicly.</b>
-</p>
-
-<p>
-	The <span class="caps">ASF</span> Security team maintains a page with a description
of how vulnerabilities are handled, check their <a href="http://www.apache.org/security/">Web
page</a> for more information.  
-</p>
+<!--#include virtual="includes/top.html" -->
+<div class="content">
+	<!--#include virtual="includes/nav.html" -->
+	<div class="right">
+		<h1>Kafka security</h1>
+		<p>
+			The Apache Software Foundation takes security issues very seriously. Apache Kafka specifically
offers security features and is responsive to issues around its features. If you have any
concern around Kafka Security or believe you have uncovered a vulnerability, we suggest that
you get in touch via the e-mail address <a href="mailto:security@kafka.apache.org?Subject=[SECURITY]
My security issue" target="_top">security@kafka.apache.org</a>. In the message, try
to provide a description of the issue and ideally a way of reproducing it. The security team
will get back to you after assessing the description.
+		</p>
+		<p>
+			Note that this security address should be used only for undisclosed vulnerabilities. Dealing
with fixed issues or general questions on how to use the security features should be handled
regularly via the user and the dev lists. <b>Please report any security problems to
the project security address before disclosing it publicly.</b>
+		</p>
+		<p>
+			The <span class="caps">ASF</span> Security team maintains a page with a description
of how vulnerabilities are handled, check their <a href="http://www.apache.org/security/">Web
page</a> for more information.
+		</p>
 
 <!--#include virtual="includes/footer.html" -->
+
+<script>
+// Show selected style on nav item
+$(function() { $('.b-nav__security').addClass('selected'); });
+</script>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/1b8cdf48/project.html
----------------------------------------------------------------------
diff --git a/project.html b/project.html
new file mode 100644
index 0000000..960a6e5
--- /dev/null
+++ b/project.html
@@ -0,0 +1,63 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<!--#include virtual="includes/header.html" -->
+<!--#include virtual="includes/top.html" -->
+<div class="content">
+	<!--#include virtual="includes/nav.html" -->
+	<div class="right">
+		<h1>Project information</h1>
+		<h3 class="bullet">Wiki</h3>
+		<a class="pb-10" href="https://cwiki.apache.org/confluence/display/KAFKA/Index" target="_blank">Check
out the project wiki</a>
+		<h3 class="bullet">Bugs</h3>
+		<a class="pb-10" href="https://issues.apache.org/jira/browse/KAFKA" target="_blank">Follow
current development and issues</a>
+		<h3 class="bullet">Committers</h3>
+		<a class="pb-10" href="/committers.html">See the project committers</a>
+		<h3 class="bullet">Security</h3>
+		<a class="pb-10" href="/project-security.html">Learn about Kafka security</a>
+		<h3 class="bullet">Papers &amp; talks</h3>
+		<a class="pb-10" href="https://cwiki.apache.org/confluence/display/KAFKA/Kafka+papers+and+presentations"
target="_blank">View our papers and talks</a>
+		<h3 class="bullet">Developer info</h3>
+		<ul>
+			<li>
+				<a href="/code.html">Getting the code</a>
+			</li>
+			<li>
+				<a href="http://cwiki.apache.org/confluence/display/KAFKA/Projects" target="_blank">Projects</a>
+			</li>
+			<li>
+				<a href="/contributing.html">How to contribute</a>
+			</li>
+			<li>
+				<a href="/coding-guide.html">Code guidelines</a>
+			</li>
+			<li>
+				<a href="/protocol.html">Protocol guide</a>
+			</li>
+			<li>
+				<a href="https://builds.apache.org/" target="_blank">Unit tests</a>
+			</li>
+		</ul>
+		<h3 class="bullet">Twitter</h3>
+		<a href="https://twitter.com/apachekafka" target="_blank">@apachekafka</a>
+
+<!--#include virtual="includes/footer.html" -->
+
+<script>
+// Show selected style on nav item
+$(function() { $('.b-nav__project').addClass('selected'); });
+</script>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/1b8cdf48/quickstart.html
----------------------------------------------------------------------
diff --git a/quickstart.html b/quickstart.html
index 009c04e..49f3f2d 100644
--- a/quickstart.html
+++ b/quickstart.html
@@ -1,5 +1,14 @@
 <!--#include virtual="includes/header.html" -->
-
+<!--#include virtual="includes/top.html" -->
+<div class="content">
+  <!--#include virtual="includes/nav.html" -->
+  <div class="right">
+		<h1>Quickstart</h1>
 <!--#include virtual="0100/quickstart.html" -->
 
 <!--#include virtual="includes/footer.html" -->
+
+<script>
+// Show selected style on nav item
+$(function() { $('.b-nav__quickstart').addClass('selected'); });
+</script>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/1b8cdf48/styles.css
----------------------------------------------------------------------
diff --git a/styles.css b/styles.css
index e277373..339fb56 100644
--- a/styles.css
+++ b/styles.css
@@ -1,154 +1,478 @@
-html, body{
-	font-family: 'Source Sans Pro', sans-serif;
-    margin: 0px;
-	padding: 0px;
-	background-color: #fff;
-	color: #333;
-	line-height: 175%;
-	font-size: 13pt;
+/* globals */
+html, body {
+	height: 100%;
+}
+html {
+	font-size: 62.5%;
+}
+body {
+	display:flex;
+	flex-direction: column;
+	min-width: 32rem;
+	font-size: 1.4rem;
+	line-height: 1.6;
+	font-family: 'Roboto', sans-serif;
+	margin: 0;
 }
 code, pre {
-	font: 1em/normal "courier new", courier, monospace;
-}
+	font-family: 'Cutive Mono', monospace;
+	border-style: solid;
+	border-color: #E5E5E5;
+	border-width: .1rem .5rem;
+	overflow-x: scroll;
+	padding: 1rem 2rem 1.5rem;
+	color: #444444;
+	display: block;
+	margin: 2rem 0;
+}
+code b, pre b,
 h1, h2, h3, h4 {
-  color: #2e4a8e;
+	line-height: 1.2;
+}
+h1 a, h2 a, h3 a, h4 a {
+	color: #000000;
 }
 h1 {
-	font-size: 24pt;
+	font-size: 5.6rem;
+	font-weight: 900;
+	margin: 0;
 }
 h2 {
-	font-size: 18pt;
-}
-h3 {
-	font-size: 16pt;
+	text-transform: uppercase;
+	font-size: 2rem;
+	font-weight: 700;
+	margin: 0;
 }
-h4 {
-	font-size: 14pt;
+h3, h4 {
+	font-size: 2rem;
+	font-weight: 700;
 }
-a {
-	color: #2e4a8e;
-	font-weight: bold;
-	text-decoration: none;
+h3.bullet {
+	margin-bottom: 1rem;
 }
-#everything {
-	margin: auto;
-	width: 1000px;
-}
-#header {
-	margin: auto;
-	padding-left: 35px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	background-color: white;
-	min-width: 1000px;
-	overflow: hidden;
+h3.bullet::after {
+	content: "";
+	display: block;
+	background-color: #000000;
+	height: .2rem;
+	width: 5rem;
 }
-#header a {
-	color: black;
+a {
+	color: #0B6D88;
 	text-decoration: none;
 }
-#header table {
-	border-collapse: collapse;
-	border-spacing: 0px;
+a:hover {
+	color: #0C637B;
 }
-#header img {
-	margin: 5px;
+img {
+	max-width: 100%;
 }
-#footer {
+.btn {
+	background-color: #0B6D88;
+	color: #FFFFFF;
+	border-radius: .2rem;
+	-moz-border-radius: .2rem;
+	-webkit-border-radius: .2rem;
 	text-align: center;
-	font-size: 10pt;
-	width: 500px;
-	margin: auto;
-	line-height: 100%;
+	text-transform: capitalize;
+	padding: .9rem 2rem;
 }
-.title, .subtitle {
-	color: black;
-	font-size: 50pt;
-	line-height: 55%;	
-    text-align: center;
+.btn--secondary {
+	color: #0B6D88;
+	border: .2rem solid #0B6D88;
+	background-color: transparent;
 }
-.subtitle {
-	font-size: 20pt;
+.btn--sm {
+	padding: .5rem 1rem;
 }
-.feather {
-	margin: 5px;
-	border: 0px;
+.btn:hover {
+	background-color: #0C637B;
+	color: #FFFFFF;
 }
-.projects, .projects a {
-	font-style: normal;
-	font-size: 11pt;
+ul {
+	padding-left: 2rem;
 }
-.lsidebar {
-	float: left;
-	font-size: 15pt;
-	color: #2e4a8e;
-	width: 250px;
-	line-height: 120%;
-}
-.lsidebar li {
-	list-style-type: none;
+.toc {
+	padding: 0;
+	list-style: none;
+	text-transform: uppercase;
 }
-.lsidebar li a {
-	text-decoration: none;
-	font-weight: normal;
-	color: #2e4a8e;
+.toc a {
+	color: #000000;
 }
-.lsidebar li li {
-	list-style-type: circle;
+.toc ul {
+	padding: 0 3.2rem;
+	text-transform: none;
+	font-weight: 400;
+	margin-bottom: 1.5rem;
 }
-.content {
-	width: 800px;
-	margin-left: 250px;
-	min-height: 550px;
-	padding: 0px;
+.toc a:hover,
+.toc ul a {
+	color: #0B6D88;
 }
-.numeric {
-  text-align: right;
+.toc ul ul {
+	padding: 0 1.8rem;
+	margin-bottom: 0;
 }
 .data-table {
-  border: 1px solid #a9a9a9;
+	display: block;
+  border: none;
   border-collapse: collapse;
-  width: 1000px;
+  width: 100%;
+	overflow-x: scroll;
+	margin: 2rem 0;
+}
+.data-table tbody {
+	border-style: solid;
+	border-color: #E5E5E5;
+	border-width: 0 .5rem;
 }
 .data-table td, .data-table th {
-  border: 1px solid #888;
-  padding: 2px;
+  border: .1rem solid #cccccc;
+  padding: .5rem 1rem;
+	min-width: 10rem;
 }
 .data-table th {
-  background-color: #ccc;
-  font-weight: bold;
+	text-align: left;
+  background-color: #000000;
+	border: .1rem solid #222222;
+	color: #ffffff;
+	font-weight: 400;
+	padding: 1rem;
+	text-transform: uppercase;
+	overflow: hidden;
 }
-.advert-message {
-  border: 3px solid #2e4a8e;
-  padding: 15px;
+.data-table td {
+	/* These are technically the same, but use both */
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+
+	-ms-word-break: break-all;
+	/* This is the dangerous one in WebKit, as it breaks things wherever */
+	word-break: break-all;
+	/* Instead use this non-standard one: */
+	word-break: break-word;
+
+	/* Adds a hyphen where the word breaks, if supported (No Blink) */
+	-ms-hyphens: auto;
+	-moz-hyphens: auto;
+	-webkit-hyphens: auto;
+	hyphens: auto;
+}
+
+/* helper classes */
+.centered {
+	display: block;
+	margin: auto;
 }
-.buzzword {
-	font-size: 18pt;
-	line-height: 200%;
-	color: #2e4a8e;
+.pb-10 {
+	display: inline-block;
+	padding-bottom: 1rem;
+}
+
+/* components */
+.main {
+	margin: 0 auto;
+	width: 120rem;
+	padding: 0 2rem 8rem 2rem;
+}
+.header {
+	padding: 2rem 0 1rem;
+	background-color: #FFFFFF;
+}
+.footer {
+	flex: 1;
+	position: relative;
+}
+.footer__inner {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	border-top: .1rem solid #dedede;
+	font-size: .9rem;
+	color: #888888;
+	padding: 2rem 0;
+}
+.footer__legal {
+	margin: 0 2rem;
+}
+.sub-header {
+	overflow: hidden;
+	margin: 3rem 0 1rem;
 }
-.caption {
-	font-size: 11pt; 
-	font-weight: bold
+.content {
+	margin-top: 3rem;
 }
-.toc {
-	font-size: 15pt;
+nav {
+	float: left;
+	text-transform: uppercase;
+	width: 16rem;
+}
+.nav__item {
+	color: #000000;
+	border-right: 2px solid #000000;
+	display: block;
+	padding-top: 1.5rem;
+	position: relative;
+}
+.nav__item:first-of-type {
+	padding-top: 0;
+}
+.nav__item::after {
+	content: "";
+	display: block;
+	height: 1.1rem;
+	width: 1.1rem;
+	border-radius: 1rem;
+	-moz-border-radius: 1rem;
+	-webkit-border-radius: 1rem;
+	border: 2px solid #000000;
+	background: #FFFFFF;
+	position: absolute;
+	right: -.9rem;
+	top: 1.7rem;
+	opacity: 0;
+	transition: opacity .2s ease-out;
+}
+.nav__item.selected::after {
+	opacity: 1;
+}
+.nav__item.selected:first-of-type::after {
+	top: .2rem;
+}
+nav .btn {
+	display: block;
+	margin-top: 4rem;
+}
+.social-links {
+	margin-top: 2rem;
+	font-size: 1.2rem;
+}
+.twitter {
+	color: #888888;
+	text-transform: none;
+	background-image: url(/images/twitter_logo.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	padding-left: 1.9rem;
+}
+.twitter:hover {
+	color: #888888;
+	opacity: 0.8;
+}
+.right {
+	margin-left: 22rem;
+	min-height: 60rem;
+	overflow: hidden;
 }
-.toc ul {
-	font-size: 14pt;
+.apache-feather {
+	position: absolute;
+	bottom: 2rem;
+	right: 2rem;
+	transition: all .2s ease-out;
+
 }
-.toc ul ul {
-	font-size: 13pt;
+.apache-feather:hover {
+	-ms-transform: rotate(-56deg);
+  -webkit-transform: rotate(-56deg);
+  transform: rotate(-56deg);
 }
+
+/* pages */
 .index {
-	font-size:14pt;
-	width: 80%;
+	text-align: center;
+	padding-right: 25%;
 }
-.index big {
-	font-size:20pt;
-	font-weight: bold;
+.desc {
+	margin-left: 3rem;
+	margin-bottom: 6rem;
+	overflow: hidden;
+}
+.desc-item {
+	float: left;
+	width: 18rem;
+	margin-left: 4.2rem;
+}
+.desc-item:first-of-type {
+	width: 25rem;
+	margin-right: 1rem;
+	margin-left: 0;
+}
+.desc-item p {
+	margin: 0;
+	width: 18rem;
+}
+.desc-item p:before {
+	content: "";
+	border-top: 2px solid #000000;
+	display: block;
+	width: 5rem;
+	margin: .2rem 0 1rem;
+}
+.callout {
+	background-color: #F0F0F0;
+	padding: 1.5rem 2rem 3rem;
+	width: 33rem;
+	margin: 2rem auto 0;
+	position: relative;
+	text-align: center;
+}
+.callout::before {
+	content: "";
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 8rem 0 0 5rem;
+	border-color: transparent transparent transparent #F0F0F0;
+	top: -6rem;
+	right: 10rem;
+	position: absolute;
+	-ms-transform: rotate(-10deg);
+  -webkit-transform: rotate(-10deg);
+  transform: rotate(-10deg);
+}
+.callout__action {
+	display: inline-block;
+	width: 10rem;
+}
+
+/* Responsive styles */
+@media only screen and (max-width: 1240px) {
+	.main {
+		width: auto;
+		max-width: 100%;
+		margin: 0 2rem;
+	}
+}
+
+@media only screen and (max-width: 1035px) {
+	.desc {
+		margin-left: 0;
+		margin-bottom: 2rem;
+	}
+  .desc-item,
+	.desc-item:first-of-type {
+		float: none;
+		width: auto;
+		margin-left: 0;
+		margin-bottom: 4rem;
+	}
+	.desc-item p {
+		width: auto;
+	}
+	.index {
+		padding-right: 0;
+		text-align: left;
+	}
+	.callout {
+		margin: 2rem 1.5rem;
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.desc-item,
+	.desc-item:first-of-type {
+		margin-bottom: 3rem;
+	}
+	.kafka-diagram {
+		width: 80%;
+		min-width: 28rem;
+		height: auto;
+	}
+	.callout {
+		width: 60%;
+		min-width: 21rem;
+	}
+	.callout::before {
+		right: 25%;
+	}
+}
+
+@media only screen and (max-width: 650px) {
+	.kafka-diagram {
+		display: block;
+		margin: 0 auto;
+	}
+	.callout {
+		margin: 2rem auto;
+	}
+	.navindicator {
+		min-width: 32rem;
+		position: absolute;
+		top: -0.8rem;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		z-index: 2;
+	}
+	.navindicator__item {
+		height: .2rem;
+		width: calc(79% / 11);
+		background-color: #888888;
+		display: inline-block;
+		margin: 0 .5%;
+	}
+	.navindicator__item.selected {
+		background-color: #FFFFFF;
+	}
+	nav {
+		display: block;
+    position: fixed;
+    background-color: #000000;
+    bottom: 0;
+		left: 0;
+		z-index: 1;
+    width: 100%;
+	}
+	.nav-scroller {
+		overflow-x: scroll;
+		box-shadow: 0 0 1rem rgba(0,0,0,0.3);
+	}
+	.nav__inner {
+		width: 1500px;
+	}
+	.nav__item,
+	.nav__item:first-of-type {
+		color: #888888;
+		float: left;
+		padding: 2.2rem 1.6rem 1.1rem;
+		border: none;
+	}
+	.nav__item.selected,
+	.nav__item:hover {
+		color: #FFFFFF;
+	}
+	.nav__item::after,
+	.nav__item.selected::after,
+	nav.hovering .nav__item:hover::after,
+	nav .btn,
+	.social-links,
+	.footer {
+		display: none;
+	}
+	.right {
+		margin: 0;
+		min-height: auto;
+	}
+}
+
+@media only screen and (max-width: 460px) {
+	body {
+		font-size: 1.2rem;
+	}
+	h1 {
+		font-size: 3.6rem;
+	}
+	h2, h3, h4 {
+		font-size: 1.6rem;
+	}
+	.logo {
+		width: 23rem;
+		height: auto;
+	}
+	.desc-item,
+	.desc-item:first-of-type {
+		margin-bottom: 2rem;
+	}
 }
-.index li {
-	list-style: none;
-	margin: 5px;
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/1b8cdf48/uses.html
----------------------------------------------------------------------
diff --git a/uses.html b/uses.html
index b602ca0..ceed247 100644
--- a/uses.html
+++ b/uses.html
@@ -1,5 +1,15 @@
 <!--#include virtual="includes/header.html" -->
+<!--#include virtual="includes/top.html" -->
+<div class="content">
+  <!--#include virtual="includes/nav.html" -->
+  <div class="right">
+		<h1>Use cases</h1>
 
 <!--#include virtual="0100/uses.html" -->
 
 <!--#include virtual="includes/footer.html" -->
+
+<script>
+// Show selected style on nav item
+$(function() { $('.b-nav__uses').addClass('selected'); });
+</script>


Mime
View raw message