This is an automated email from the ASF dual-hosted git repository.

kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git


The following commit(s) were added to refs/heads/aip-11 by this push:
     new 5d1d3f4  Add base typography styles (#66)
5d1d3f4 is described below

commit 5d1d3f49b9ab8142498c3e1be2bb71a5c071f4d3
Author: Kamil Gabryjelski <kamil.gabryjel...@gmail.com>
AuthorDate: Wed Oct 9 17:45:50 2019 +0200

    Add base typography styles (#66)
---
 landing-pages/site/assets/scss/_colors.scss        |  33 +++++
 landing-pages/site/assets/scss/_typography.scss    | 138 +++++++++++++++++++++
 landing-pages/site/assets/scss/main-custom.scss    |  20 +++
 landing-pages/site/content/en/examples/_index.html |  30 +++++
 .../site/layouts/partials/hooks/head-end.html      |  28 +++++
 5 files changed, 249 insertions(+)

diff --git a/landing-pages/site/assets/scss/_colors.scss 
b/landing-pages/site/assets/scss/_colors.scss
new file mode 100644
index 0000000..f79ea5a
--- /dev/null
+++ b/landing-pages/site/assets/scss/_colors.scss
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+$cerulean-blue: #017cee;
+$shamrock: #00ad46;
+$bright-sky-blue: #0cb6ff;
+$melon: #ff7557;
+$vermillion: #e43921;
+$aqua: #11e1ee;
+$shamrock-green: #04d659;
+$aqua-blue: #00c7d4;
+$white: #ffffff;
+$brownish-grey: #707070;
+$very-light-pink: #cbcbcb;
+$white: #f9f9f9;
+$slate-grey: #636365;
+$greyish-brown: #51504f;
diff --git a/landing-pages/site/assets/scss/_typography.scss 
b/landing-pages/site/assets/scss/_typography.scss
new file mode 100644
index 0000000..28aac4a
--- /dev/null
+++ b/landing-pages/site/assets/scss/_typography.scss
@@ -0,0 +1,138 @@
+/**
+ * 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.
+ */
+
+@import url('https://fonts.googleapis.com/css?family=Rubik:500&display=swap');
+@import 
url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
+@import 
url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
+@import "colors";
+
+$header-font: 'Rubik', sans-serif;
+$primary-font: 'Roboto', sans-serif;
+$monospace-font: 'Roboto Mono', monospace;
+
+@mixin header($size) {
+  font-family: $header-font;
+  color: $greyish-brown;
+  font-weight: 500;
+
+  @if $size == "large" {
+    font-size: 72px;
+    line-height: 1.17;
+  }
+  @if $size == "medium" {
+    font-size: 60px;
+    line-height: 1.23;
+  }
+  @if $size == "small" {
+    font-size: 48px;
+    line-height: 1.25;
+  }
+}
+
+@mixin bodytext($size, $color, $weight: normal) {
+  font-family: $primary-font;
+  color: $color;
+  font-weight: $weight;
+
+  @if $size == "large" {
+    font-size: 36px;
+    line-height: 1.22;
+  }
+  @if $size == "medium" {
+    font-size: 24px;
+    line-height: 1.5;
+  }
+  @if $size == "small" {
+    font-size: 18px;
+    line-height: 1.33;
+  }
+  @if $size == "xsmall" {
+    font-size: 16px;
+    line-height: 1.63;
+  }
+}
+
+@mixin monotext($color) {
+  font-family: $monospace-font;
+  color: $color;
+  font-size: 14px;
+  line-height: 1.71;
+}
+
+.header__large {
+  @include header("large");
+}
+
+.header__medium {
+  @include header("medium");
+}
+
+.header__small {
+  @include header("small");
+}
+
+
+.bodytext__large {
+  @include bodytext("large", $brownish-grey, bold);
+}
+
+.bodytext__medium--blue {
+  @include bodytext("medium", $cerulean-blue, 500);
+}
+
+.bodytext__medium--brownish {
+  @include bodytext("medium", $brownish-grey);
+}
+
+.bodytext__small {
+  @include bodytext("small", $greyish-brown, bold);
+}
+
+.bodytext__xsmall--greyish {
+  @include bodytext("xsmall", $greyish-brown, 500);
+}
+
+.bodytext__xsmall--blue {
+  @include bodytext("xsmall", $cerulean-blue);
+}
+
+.bodytext__xsmall--brownish {
+  @include bodytext("xsmall", $brownish-grey);
+}
+
+.bodytext__xsmall--white {
+  @include bodytext("xsmall", $white);
+}
+
+
+.monotext--vermillion {
+  @include monotext($vermillion);
+}
+
+.monotext--brownish {
+  @include monotext($brownish-grey);
+}
+
+.monotext--blue {
+  @include monotext($cerulean-blue);
+}
+
+.monotext--shamrock {
+  @include monotext($shamrock);
+}
diff --git a/landing-pages/site/assets/scss/main-custom.scss 
b/landing-pages/site/assets/scss/main-custom.scss
new file mode 100644
index 0000000..397d1a5
--- /dev/null
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+@import "typography";
diff --git a/landing-pages/site/content/en/examples/_index.html 
b/landing-pages/site/content/en/examples/_index.html
new file mode 100644
index 0000000..85b1bce
--- /dev/null
+++ b/landing-pages/site/content/en/examples/_index.html
@@ -0,0 +1,30 @@
+---
+title: Components
+linkTitle: Components
+menu:
+    main:
+        weight: 5
+
+---
+
+{{< blocks/section >}}
+<div class="col-12">
+    <h1 class="text-center header__large">This is a large header</h1>
+    <h2 class="text-center header__medium">This is a medium header</h2>
+    <h3 class="text-center header__small">This is a small header</h3>
+    <p class="text-center bodytext__large">This is a large bodytext</p>
+    <p class="text-center bodytext__medium--blue">This is a medium blue 
bodytext</p>
+    <p class="text-center bodytext__medium--brownish">This is a medium 
brownish bodytext</p>
+    <p class="text-center bodytext__small">This is a small bodytext</p>
+    <p class="text-center bodytext__xsmall--blue">This is a xsmall blue 
bodytext</p>
+    <p class="text-center bodytext__xsmall--brownish">This is a xsmall 
brownish bodytext</p>
+    <p class="text-center bodytext__xsmall--greyish">This is a xsmall greyish 
bodytext</p>
+    <p class="text-center bodytext__xsmall--white">This is a xsmall white 
bodytext</p>
+    <p class="text-center bodytext__xsmall">This is a xsmall white bodytext</p>
+    <p class="text-center monotext--blue">This is a blue monotext</p>
+    <p class="text-center monotext--brownish">This is a brownish monotext</p>
+    <p class="text-center monotext--shamrock">This is a shamrock monotext</p>
+    <p class="text-center monotext--vermillion">This is a vermillion 
monotext</p>
+</div>
+
+{{< /blocks/section >}}
diff --git a/landing-pages/site/layouts/partials/hooks/head-end.html 
b/landing-pages/site/layouts/partials/hooks/head-end.html
new file mode 100644
index 0000000..1092f39
--- /dev/null
+++ b/landing-pages/site/layouts/partials/hooks/head-end.html
@@ -0,0 +1,28 @@
+{{/*
+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.
+*/}}
+
+{{ $scssMain := "scss/main-custom.scss"}}
+{{ if .Site.IsServer }}
+    {{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) }}
+    <link href="{{ $css.RelPermalink }}" rel="stylesheet">
+{{ else }}
+    {{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" false) 
| postCSS | minify | fingerprint }}
+    <link rel="preload" href="{{ $css.RelPermalink }}" as="style">
+    <link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ 
$css.Data.integrity }}">
+{{ end }}

Reply via email to