aboutsummaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/alaveteli-org.css180
-rw-r--r--assets/css/global.css356
2 files changed, 172 insertions, 364 deletions
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 77ae00b95..8cbae7021 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -25,32 +25,43 @@
text-align: center; }
/* Alaveteli's purple */
-.hero, .what-is-alaveteli, .features, .get-started, .about__intro, .deployments__intro {
+html {
+ background-color: #333333;
+ height: 100%;
+ min-height: 100%; }
+
+body {
+ background-color: transparent; }
+
+.no-svg .site-title {
+ background-image: url("../img/alaveteli-logo.png"); }
+
+.hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro {
padding: 2em 0; }
@media (min-width: 40em) {
- .hero, .what-is-alaveteli, .features, .get-started, .about__intro, .deployments__intro {
+ .hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro {
padding: 3.5em 0; } }
-.hero, .get-started, .about__intro, .deployments__intro {
+.hero, .how-does-it-work, .get-started, .about__intro, .deployments__intro {
background-color: #333333;
color: #fff; }
- .hero a, .get-started a, .about__intro a, .deployments__intro a {
+ .hero a, .how-does-it-work a, .get-started a, .about__intro a, .deployments__intro a {
color: #fff;
border-bottom: 1px dotted rgba(255, 255, 255, 0.3); }
- .hero a:hover, .get-started a:hover, .about__intro a:hover, .deployments__intro a:hover, .hero a:active, .get-started a:active, .about__intro a:active, .deployments__intro a:active, .hero a:focus, .get-started a:focus, .about__intro a:focus, .deployments__intro a:focus {
+ .hero a:hover, .how-does-it-work a:hover, .get-started a:hover, .about__intro a:hover, .deployments__intro a:hover, .hero a:active, .how-does-it-work a:active, .get-started a:active, .about__intro a:active, .deployments__intro a:active, .hero a:focus, .how-does-it-work a:focus, .get-started a:focus, .about__intro a:focus, .deployments__intro a:focus {
border-color: rgba(255, 255, 255, 0.6);
background-color: #863c83;
text-decoration: none; }
- .hero .button, .get-started .button, .about__intro .button, .deployments__intro .button {
+ .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
width: 100%;
margin-bottom: 1em; }
@media (min-width: 30em) {
- .hero .button, .get-started .button, .about__intro .button, .deployments__intro .button {
+ .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button {
width: auto;
margin-bottom: 0; } }
- .hero .button:hover, .get-started .button:hover, .about__intro .button:hover, .deployments__intro .button:hover, .hero .button:active, .get-started .button:active, .about__intro .button:active, .deployments__intro .button:active, .hero .button:focus, .get-started .button:focus, .about__intro .button:focus, .deployments__intro .button:focus {
+ .hero .button:hover, .how-does-it-work .button:hover, .get-started .button:hover, .about__intro .button:hover, .deployments__intro .button:hover, .hero .button:active, .how-does-it-work .button:active, .get-started .button:active, .about__intro .button:active, .deployments__intro .button:active, .hero .button:focus, .how-does-it-work .button:focus, .get-started .button:focus, .about__intro .button:focus, .deployments__intro .button:focus {
background-color: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.1); }
@@ -94,12 +105,12 @@ h3 {
@media (min-width: 47.5em) {
.nav-position {
position: absolute;
- top: 0.6em;
+ top: 0.4em;
left: 180px; } }
@media (min-width: 56.88889em) {
.nav-position {
left: 240px;
- top: 0.5em; } }
+ top: 0.35em; } }
.site-nav ul {
margin-top: 0;
@@ -146,7 +157,7 @@ h3 {
-o-user-select: none;
user-select: none;
position: absolute;
- top: 0.1em;
+ top: 0.4em;
right: 5em;
display: inline-block;
padding: 0.3em 0.75em;
@@ -194,7 +205,6 @@ h3 {
margin-right: 1em; }
.what-is-alaveteli {
- border-bottom: 1px solid #e4e3dd;
position: relative; }
@media (min-width: 56.88889em) {
@@ -215,15 +225,27 @@ h3 {
.what-is-alaveteli__item--foi {
background-image: url("../img/scales.svg"); }
+.no-svg .what-is-alaveteli__item--foi {
+ background-image: url("../img/scales.png"); }
+
.what-is-alaveteli__item--help {
background-image: url("../img/pointer.svg"); }
+.no-svg .what-is-alaveteli__item--help {
+ background-image: url("../img/pointer.png"); }
+
.what-is-alaveteli__item--published {
background-image: url("../img/binoculars.svg"); }
+.no-svg .what-is-alaveteli__item--published {
+ background-image: url("../img/binoculars.png"); }
+
.what-is-alaveteli__item--open {
background-image: url("../img/open.svg"); }
+.no-svg .what-is-alaveteli__item--open {
+ background-image: url("../img/open.png"); }
+
@media (min-width: 56.88889em) {
.what-is-alaveteli__international-reach-position {
width: 33.3333%;
@@ -264,6 +286,86 @@ h3 {
border-color: #2b8cdb;
color: #2b8cdb; }
+.no-svg .what-is-alaveteli__international-reach {
+ background-image: url("../img/worldmap.png"); }
+
+.how-does-it-work {
+ background-color: #974495;
+ overflow: hidden; }
+ .how-does-it-work img {
+ position: relative; }
+ @media (min-width: 56.88889em) {
+ .how-does-it-work img {
+ bottom: -1px; } }
+ @media (min-width: 30em) {
+ .how-does-it-work {
+ padding-top: 0;
+ padding-bottom: 0; }
+ .how-does-it-work .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 4.7em; }
+ .how-does-it-work h2, .how-does-it-work p {
+ width: 50%; }
+ .how-does-it-work img {
+ float: right;
+ width: 30em;
+ margin-right: -15em;
+ margin-top: -13em; } }
+ @media (min-width: 43.5em) {
+ .how-does-it-work .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 4.7em; }
+ .how-does-it-work h2, .how-does-it-work p {
+ width: 33.333%; }
+ .how-does-it-work img {
+ margin-right: -5em;
+ margin-top: -15em; } }
+ @media (min-width: 56.88889em) {
+ .how-does-it-work h2, .how-does-it-work p, .how-does-it-work .how-does-it-work__slide__nav {
+ width: 33.333%;
+ margin-left: 66.666%; }
+ .how-does-it-work img {
+ float: left;
+ width: 63.666%;
+ margin-top: -15em; } }
+
+.how-does-it-work__slide {
+ /**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */ }
+ .how-does-it-work__slide:before, .how-does-it-work__slide:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+ .how-does-it-work__slide:after {
+ clear: both; }
+ .how-does-it-work__slide {
+ *zoom: 1; }
+
+.how-does-it-work__slide__nav {
+ margin-top: 0.5em;
+ text-align: center; }
+ @media (min-width: 30em) {
+ .how-does-it-work__slide__nav {
+ text-align: left; } }
+
+.how-does-it-work__slide__skip {
+ display: inline-block;
+ padding: 0.3em;
+ cursor: pointer; }
+ .how-does-it-work__slide__skip span {
+ display: block;
+ border-radius: 1em;
+ width: 0.8em;
+ height: 0.8em;
+ background-color: rgba(0, 0, 0, 0.3); }
+ .how-does-it-work__slide__skip.active span {
+ background-color: rgba(255, 255, 255, 0.3); }
+ .how-does-it-work__slide__skip:hover span, .how-does-it-work__slide__skip:focus span, .how-does-it-work__slide__skip:active span {
+ background-color: rgba(0, 0, 0, 0.3); }
+
@media (min-width: 40em) {
.features__grid-unit {
width: 48.5%; }
@@ -300,7 +402,10 @@ h3 {
background-position: left center;
padding: 1em 0; }
.features__item--primary h3, .features__item--primary p {
- padding-left: 53%; } }
+ padding-left: 63%; } }
+ @media (min-width: 65em) {
+ .features__item--primary h3, .features__item--primary p {
+ padding-left: 53%; } }
.features__item--primary h3 {
font-size: 1.4em; }
@@ -308,6 +413,9 @@ h3 {
background-image: url("../img/devices.svg");
background-size: 258px 188px; }
+.no-svg .features__item--devices {
+ background-image: url("../img/devices.png"); }
+
.features__item--messaging {
background-image: url("../img/signs.svg");
background-size: 200px 166px; }
@@ -315,6 +423,12 @@ h3 {
.features__item--messaging {
background-position: 3em center; } }
+.no-svg .features__item--messaging {
+ background-image: url("../img/signs.png"); }
+
+.get-started {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+
@media (min-width: 30em) {
.get-started__grid-unit {
width: 48.5%;
@@ -457,6 +571,9 @@ h3 {
.deployments__intro p {
font-size: 1.666666667em; } }
+.no-svg .deployments__intro {
+ background-image: url("../img/worldmap-pale.png"); }
+
.deployments__content h2 {
margin-bottom: 1.5em; }
@@ -477,17 +594,17 @@ h3 {
.deployments__unit--minor {
display: inline-block;
- width: 48.5%;
+ width: 47.5%;
vertical-align: top; }
.deployments__unit--minor:nth-child(n) {
- margin-right: 3%; }
+ margin-right: 5%; }
.deployments__unit--minor:nth-child(even) {
margin-right: 0; }
@media (min-width: 37.22222em) {
.deployments__unit--minor {
- width: 31.333333333%; }
+ width: 30%; }
.deployments__unit--minor:nth-child(n) {
- margin-right: 3%; }
+ margin-right: 5%; }
.deployments__unit--minor:nth-child(3n+3) {
margin-right: 0; } }
@media (min-width: 56.88889em) {
@@ -533,12 +650,14 @@ h3 {
.deployment__link {
margin-top: 0;
margin-bottom: 0.5em;
- font-size: 0.888888889em;
- text-overflow: ellipsis;
- text-overflow: ellipsis;
- /* Required for text-overflow to do anything */
- white-space: nowrap;
- overflow: hidden; }
+ font-size: 0.888888889em; }
+ .deployment__link a {
+ display: block;
+ text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ /* Required for text-overflow to do anything */
+ white-space: nowrap;
+ overflow: hidden; }
@media (min-width: 56.88889em) {
.deployment__link {
font-size: 1em; } }
@@ -569,3 +688,18 @@ h3 {
.blog-title {
line-height: 1.3em; }
+
+.clearfix {
+ /**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */ }
+ .clearfix:before, .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+ .clearfix:after {
+ clear: both; }
+ .clearfix {
+ *zoom: 1; }
diff --git a/assets/css/global.css b/assets/css/global.css
index df477f358..4b6565a8c 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -338,8 +338,7 @@ table {
border-collapse: collapse;
border-spacing: 0; }
-.image-replacement, .ms-header__logo, .site-title, .owl-buttons .owl-next,
-.owl-buttons .owl-prev {
+.image-replacement, .ms-header__logo, .site-title {
text-indent: -1000%;
white-space: nowrap;
overflow: hidden; }
@@ -350,7 +349,7 @@ table {
margin: 0 auto;
position: relative; }
-.unstyled-list, .unstyled, .summary-of-features, .action-buttons, .site-footer ul, .primary-nav, .owl-buttons, .sidebar ul, .list-of-blog-posts, .definitions, .breadcrumb {
+.unstyled-list, .unstyled, .site-footer ul, .breadcrumb, .sidebar ul, .list-of-blog-posts, .definitions {
margin-left: 0;
padding-left: 0;
list-style: none outside none; }
@@ -365,9 +364,6 @@ table {
.text--center {
text-align: center; }
-.bg-default {
- background: lightblue; }
-
.highlight {
background: #ffffff; }
@@ -649,72 +645,6 @@ table {
.type-csharp .highlight .sc {
color: #a31515; }
-/**
- * Core Owl Carousel CSS File
- * v1.3.2
- */
-/* clearfix */
-.owl-carousel .owl-wrapper:after {
- content: ".";
- display: block;
- clear: both;
- visibility: hidden;
- line-height: 0;
- height: 0; }
-
-/* display none until init */
-.owl-carousel {
- display: none;
- position: relative;
- width: 100%;
- -ms-touch-action: pan-y; }
-
-.owl-carousel .owl-wrapper {
- display: none;
- position: relative;
- -webkit-transform: translate3d(0px, 0px, 0px); }
-
-.owl-carousel .owl-wrapper-outer {
- overflow: hidden;
- position: relative;
- width: 100%; }
-
-.owl-carousel .owl-wrapper-outer.autoHeight {
- -webkit-transition: height 500ms ease-in-out;
- -moz-transition: height 500ms ease-in-out;
- -ms-transition: height 500ms ease-in-out;
- -o-transition: height 500ms ease-in-out;
- transition: height 500ms ease-in-out; }
-
-.owl-carousel .owl-item {
- float: left; }
-
-.owl-controls .owl-page,
-.owl-controls .owl-buttons div {
- cursor: pointer; }
-
-.owl-controls {
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-
-/* mouse grab icon */
-.grabbing {
- cursor: url(grabbing.png) 8 8, move; }
-
-/* fix */
-.owl-carousel .owl-wrapper,
-.owl-carousel .owl-item {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0); }
-
/* Alaveteli's purple */
*, *:before, *:after {
-moz-box-sizing: border-box;
@@ -872,8 +802,7 @@ ul {
display: block;
background-position: top left;
background-repeat: no-repeat;
- background-image: url("../img/alaveteli-logo.svg");
- background-size: 140px 60px; }
+ background-image: url("../img/alaveteli-logo.svg"); }
.site-header {
border-top: 0.375em solid #424242;
@@ -920,6 +849,18 @@ ul {
.secondary-content-column:first-child {
padding-left: 0; } }
+.breadcrumb {
+ padding: 8px 0; }
+ .breadcrumb li {
+ display: inline;
+ font-size: 0.75em; }
+ .breadcrumb li:after {
+ content: '/';
+ margin: 0 0.33em;
+ color: #e4e3dd; }
+ .breadcrumb li a {
+ color: #787774; }
+
.sidebar ul {
-webkit-column-count: 2;
-moz-column-count: 2;
@@ -1141,148 +1082,6 @@ table.table td {
padding-top: 0.666em;
margin-left: 0em; }
-.homepage-feature {
- /**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */ }
- .homepage-feature:before, .homepage-feature:after {
- content: " ";
- /* 1 */
- display: table;
- /* 2 */ }
- .homepage-feature:after {
- clear: both; }
- .homepage-feature {
- *zoom: 1; }
- @media (min-width: 60em) {
- .homepage-feature .column {
- /* Use for multi-column grids where all columns are equal width, it gives them equal spacing */
- float: left;
- padding-left: 1.5%;
- padding-right: 1.5%;
- width: 50%; }
- .homepage-feature .column:nth-child(odd), .homepage-feature .column:first-child {
- padding-left: 0; }
- .homepage-feature .column:nth-child(even), .homepage-feature .column:last-child {
- padding-right: 0; } }
-
-.monitor {
- margin: 0 auto 96px;
- position: relative; }
- @media (min-width: 520px) {
- .monitor {
- width: 469px;
- height: 361px;
- background: url("../../theme/img/monitor.png"); } }
- @media (min-width: 50em) {
- .monitor {
- float: left; } }
- .monitor #owl-slide {
- margin: 0 auto;
- width: 100%;
- max-width: 412px;
- height: 232px;
- background: #fff; }
- @media (min-width: 520px) {
- .monitor #owl-slide {
- position: absolute;
- top: 30px;
- left: 32px; } }
-
-.summary-of-features {
- /**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */ }
- .summary-of-features:before, .summary-of-features:after {
- content: " ";
- /* 1 */
- display: table;
- /* 2 */ }
- .summary-of-features:after {
- clear: both; }
- .summary-of-features {
- *zoom: 1; }
- @media (min-width: 30em) {
- .summary-of-features li {
- /* Use for grids where the columns are different widths */
- float: left;
- padding-left: 3%;
- width: 25%;
- text-align: center; }
- .summary-of-features li:first-child {
- padding-left: 0; } }
- .summary-of-features .circle-icon {
- width: 114px;
- height: 114px;
- display: block;
- margin: 32px auto 16px;
- background-position: center top;
- background-size: 114px 114px;
- background-repeat: no-repeat; }
- .summary-of-features .icon-opensource {
- background-image: url("../../theme/img/icon-opensource.svg"); }
- .summary-of-features .icon-paint {
- background-image: url("../../theme/img/icon-paint.svg"); }
- .summary-of-features .icon-help {
- background-image: url("../../theme/img/icon-help.svg"); }
- .summary-of-features .icon-world {
- background-image: url("../../theme/img/icon-world.svg"); }
- .summary-of-features h3 {
- font-size: 1em;
- margin-bottom: 16px; }
- .summary-of-features p {
- font-size: 1em;
- margin: 8px 32px 32px; }
-
-.this-or-this .column {
- text-align: center;
- padding-bottom: 64px;
- /* Use for multi-column grids where all columns are equal width, it gives them equal spacing */
- float: left;
- padding-left: 1.5%;
- padding-right: 1.5%;
- width: 50%; }
- .this-or-this .column:nth-child(odd), .this-or-this .column:first-child {
- padding-left: 0; }
- .this-or-this .column:nth-child(even), .this-or-this .column:last-child {
- padding-right: 0; }
-
-@media (min-width: 50em) {
- .action-buttons li {
- width: 50%;
- float: left; } }
-.action-buttons li a {
- width: 100%;
- max-width: 9em;
- margin: 0 auto 1em;
- color: #fff; }
-.action-buttons li .icon {
- width: 30px;
- height: 50px;
- display: block;
- float: left;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 20px;
- opacity: 0.6;
- margin-left: -10px; }
-.action-buttons li .icon-document {
- background-image: url("../../theme/img/icon-document.svg"); }
-.action-buttons li .icon-download {
- background-image: url("../../theme/img/icon-download.svg"); }
-.action-buttons li .icon-github {
- background-image: url("../../theme/img/icon-github.svg"); }
-.action-buttons li .icon-email {
- background-image: url("../../theme/img/icon-email.svg"); }
-.action-buttons li .icon-twitter {
- background-image: url("../../theme/img/icon-twitter.svg"); }
-.action-buttons li .icon-irc {
- background-image: url("../../theme/img/icon-hash.svg"); }
-.action-buttons li .icon-post {
- background-image: url("../../theme/img/icon-mail.svg"); }
-
.site-footer {
width: 100%;
clear: left;
@@ -1382,128 +1181,3 @@ table.table td {
margin: 0; }
.site-footer a {
color: #eeeeee; }
-
-.primary-nav {
- margin: 0;
- text-align: center; }
- .primary-nav li {
- display: inline-block;
- padding: 0 64px; }
- @media (min-width: 30em) {
- .primary-nav li {
- display: inline; } }
- .primary-nav a {
- display: inline-block;
- padding: 10.66667px 0;
- color: #333333; }
-
-.btn, .btn--green, .btn--blue {
- display: inline-block;
- vertical-align: middle;
- white-space: nowrap;
- font-family: inherit;
- font-size: 100%;
- cursor: pointer;
- border: none;
- margin: 0;
- padding-top: 0;
- padding-bottom: 0;
- line-height: 3;
- padding-right: 1em;
- padding-left: 1em;
- border-radius: 3px;
- transition-duration: 0.2s; }
- .btn:hover, .btn--green:hover, .btn--blue:hover, .btn:active, .btn--green:active, .btn--blue:active {
- text-decoration: none;
- transition-duration: 0.2s; }
-
-.btn--green {
- background: #61b252; }
- .btn--green:hover {
- background: #53a044; }
- .btn--green:active {
- background: #388924;
- box-shadow: inset 0px 0px 6px #255b18; }
-
-.btn--blue {
- background: #54b1e4; }
- .btn--blue:hover {
- background: #2b8cdb; }
- .btn--blue:active {
- background: #207cba;
- box-shadow: inset 0px 0px 6px #15527c; }
-
-.bg-default {
- background: #f3f1eb; }
-
-.spacer-top {
- margin-top: 48px; }
-
-.spacer-bottom {
- margin-bottom: 48px; }
-
-.section-header {
- background: #333333;
- padding: 16px 0;
- float: left;
- width: 100%; }
- .section-header p {
- color: #e4e3dd;
- font-weight: normal;
- margin: 0;
- display: block; }
-
-.breadcrumb {
- padding: 8px 0; }
- .breadcrumb li {
- display: inline;
- font-size: 0.75em; }
- .breadcrumb li:after {
- content: '/';
- margin: 0 0.33em;
- color: #e4e3dd; }
- .breadcrumb li a {
- color: #787774; }
-
-/**
- * Owl Additions
- */
-.owl-carousel .owl__gap {
- float: left;
- padding-right: 100px; }
- @media (min-width: 520px) {
- .owl-carousel .owl__gap {
- padding-top: 100px; } }
-.owl-carousel h3 {
- margin-bottom: 0; }
-.owl-carousel p {
- margin-top: 0; }
-
-.owl-buttons {
- float: right;
- position: relative;
- top: -70px; }
- @media (min-width: 520px) {
- .owl-buttons {
- right: -20px;
- top: -130px; } }
- .owl-buttons .owl-next,
- .owl-buttons .owl-prev {
- display: block;
- background-color: #e4e3dd;
- float: left;
- background-position: center center;
- background-size: 16px;
- background-repeat: no-repeat;
- height: 48px;
- width: 48px;
- margin-right: 2px; }
- .owl-buttons .owl-next:hover,
- .owl-buttons .owl-prev:hover {
- background-color: #cfcec8; }
- .owl-buttons .owl-prev {
- background-image: url("../../theme/img/icon-arrow-left.svg");
- border-radius: 3px 0 0 3px; }
- .owl-buttons .owl-next {
- background-image: url("../../theme/img/icon-arrow-right.svg");
- border-radius: 0 3px 3px 0; }
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-12 20:36:06 +0000