You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/09 15:45:54 UTC
[airflow-site] branch aip-11 updated: Add base typography styles
(#66)
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 <ka...@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 }}