From 18c0de1ff4ed0f9dda7f2d17974580c0ef6de33b Mon Sep 17 00:00:00 2001 From: eupiteco Date: Sun, 12 Aug 2018 13:56:30 -0300 Subject: [PATCH 1/4] alerts colors and shape updated --- _site/assets/styles/components.scss | 61 +++++++++++++++++------------ _site/assets/styles/main.css | 31 ++++++++------- assets/styles/components.scss | 61 +++++++++++++++++------------ 3 files changed, 91 insertions(+), 62 deletions(-) diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss index 1c9e10d..cf79536 100644 --- a/_site/assets/styles/components.scss +++ b/_site/assets/styles/components.scss @@ -1,39 +1,52 @@ .alert { - border-radius: 25px; + border-radius: 15px; &-custom { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #081b4f; } } &-primary { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #003600; + } + } + &-secondary { + color: $oc-gray-7; + background-color: $oc-gray-2; + border-color: $oc-gray-6; + + & hr { + border-top-color: $oc-gray-6; + } + + & .alert-link { + color: $oc-gray-8; } } &-success { - color: #075207; - background-color: #beffbe; - border-color: #a7f2a7; + color: #105c10; + background-color: #e1f2e1; + border-color: #60ab60; & hr { - border-top-color: #7ac57a; + border-top-color: #1d731d; } & .alert-link { @@ -41,12 +54,12 @@ } } &-warning { - color: #bd8200; - background-color: #ffffa9; - border-color: #ffff92; + color: #6b4c00; + background-color: #ffeab5; + border-color: #cca443; & hr { - border-top-color: #fff464; + border-top-color: #cca443; } & .alert-link { @@ -54,12 +67,12 @@ } } &-danger { - color: #9f1405; - background-color: #ffcbbc; - border-color: #ffb4a5; + color: #700b00; + background-color: #ffcac4; + border-color: #e15647; & hr { - border-top-color: #ff8677; + border-top-color: #e15647; } & .alert-link { @@ -355,7 +368,7 @@ } } #styleguide-nav { - background-color: $oc-white !important; + background-color: $oc-gray-0 !important; .nav-item:hover { box-shadow: inset 0 -5px $primary; diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css index ee62ba7..07744b4 100644 --- a/_site/assets/styles/main.css +++ b/_site/assets/styles/main.css @@ -78,21 +78,24 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .icon { font-size: 20px; background-color: #212529; padding: 20px; } -.alert { border-radius: 25px; } -.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } -.alert-custom hr { border-top-color: #7691d9; } -.alert-custom .alert-link { color: #000850; } -.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } -.alert-primary hr { border-top-color: #7691d9; } -.alert-primary .alert-link { color: #000850; } -.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; } -.alert-success hr { border-top-color: #7ac57a; } +.alert { border-radius: 15px; } +.alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; } +.alert-custom hr { border-top-color: #6679ac; } +.alert-custom .alert-link { color: #081b4f; } +.alert-primary { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; } +.alert-primary hr { border-top-color: #6679ac; } +.alert-primary .alert-link { color: #003600; } +.alert-secondary { color: #495057; background-color: #e9ecef; border-color: #868e96; } +.alert-secondary hr { border-top-color: #868e96; } +.alert-secondary .alert-link { color: #343a40; } +.alert-success { color: #105c10; background-color: #e1f2e1; border-color: #60ab60; } +.alert-success hr { border-top-color: #1d731d; } .alert-success .alert-link { color: #003b00; } -.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; } -.alert-warning hr { border-top-color: #fff464; } +.alert-warning { color: #6b4c00; background-color: #ffeab5; border-color: #cca443; } +.alert-warning hr { border-top-color: #cca443; } .alert-warning .alert-link { color: #a66b00; } -.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; } -.alert-danger hr { border-top-color: #ff8677; } +.alert-danger { color: #700b00; background-color: #ffcac4; border-color: #e15647; } +.alert-danger hr { border-top-color: #e15647; } .alert-danger .alert-link { color: #880000; } .background-primary { background-color: #4661A9; } @@ -185,7 +188,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .footer-extras ul li { margin: 0 0.5rem; } .footer .spacer { content: " "; height: 2rem; } -#styleguide-nav { background-color: #ffffff !important; } +#styleguide-nav { background-color: #f8f9fa !important; } #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; } #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } #styleguide-nav .nav-link { color: #212529; } diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 1c9e10d..cf79536 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -1,39 +1,52 @@ .alert { - border-radius: 25px; + border-radius: 15px; &-custom { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #081b4f; } } &-primary { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #003600; + } + } + &-secondary { + color: $oc-gray-7; + background-color: $oc-gray-2; + border-color: $oc-gray-6; + + & hr { + border-top-color: $oc-gray-6; + } + + & .alert-link { + color: $oc-gray-8; } } &-success { - color: #075207; - background-color: #beffbe; - border-color: #a7f2a7; + color: #105c10; + background-color: #e1f2e1; + border-color: #60ab60; & hr { - border-top-color: #7ac57a; + border-top-color: #1d731d; } & .alert-link { @@ -41,12 +54,12 @@ } } &-warning { - color: #bd8200; - background-color: #ffffa9; - border-color: #ffff92; + color: #6b4c00; + background-color: #ffeab5; + border-color: #cca443; & hr { - border-top-color: #fff464; + border-top-color: #cca443; } & .alert-link { @@ -54,12 +67,12 @@ } } &-danger { - color: #9f1405; - background-color: #ffcbbc; - border-color: #ffb4a5; + color: #700b00; + background-color: #ffcac4; + border-color: #e15647; & hr { - border-top-color: #ff8677; + border-top-color: #e15647; } & .alert-link { @@ -355,7 +368,7 @@ } } #styleguide-nav { - background-color: $oc-white !important; + background-color: $oc-gray-0 !important; .nav-item:hover { box-shadow: inset 0 -5px $primary; From d9783ed3e0103aa864e44829a1a111b7ef38a493 Mon Sep 17 00:00:00 2001 From: eupiteco Date: Sun, 12 Aug 2018 16:02:39 -0300 Subject: [PATCH 2/4] removed messy scrollspy --- _layouts/components.html | 3 --- _site/components/index.html | 21 --------------------- components.md | 1 - 3 files changed, 25 deletions(-) diff --git a/_layouts/components.html b/_layouts/components.html index f83ad4c..006785b 100644 --- a/_layouts/components.html +++ b/_layouts/components.html @@ -41,9 +41,6 @@ {% include components/paginate.html %}
- {% include components/scrollspy.html %} -
-
{% include components/tables.html %}
{% include scrollspy.html %} diff --git a/_site/components/index.html b/_site/components/index.html index 54e9ac2..66dd955 100644 --- a/_site/components/index.html +++ b/_site/components/index.html @@ -123,12 +123,6 @@ -
  • - Scrollspy -
  • - - -
  • Tables
  • @@ -425,21 +419,6 @@ - -
    - - -
    -
    -

    - Styleguide code licensed under MIT, documents licensed under a Creative Commons Attribution 3.0 United States License. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
    Templates and styles based on the Reproducible Builds styleguide.
    -

    -
    -
    -
    + {% include components/jumbotron.html %} +
    +
    {% include components/paginate.html %}
    diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss index cf79536..bd635fc 100644 --- a/_site/assets/styles/components.scss +++ b/_site/assets/styles/components.scss @@ -189,6 +189,19 @@ } } +.btn-white { + color: $primary !important; + background-color: $oc-white !important; + border-color: transparent !important; + padding: 1rem 1.5rem !important; + font-size: 1rem; + &:hover { + color: $oc-white !important; + background-color: $secondary !important; + border-color: transparent !important; + } +} + .btn-small { background-color: $primary !important; border-color: transparent !important; diff --git a/_site/assets/styles/layout.scss b/_site/assets/styles/layout.scss index 3e45704..323a9c4 100644 --- a/_site/assets/styles/layout.scss +++ b/_site/assets/styles/layout.scss @@ -165,6 +165,15 @@ background-color: #f1f3f5 !important; } +.bg { + &-primary { + background-color: $primary !important; + } + &-secondary { + background-color: $secondary !important; + } +} + .b-border { border-bottom: 2px solid lightgrey !important; } diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css index 07744b4..b1f0cfb 100644 --- a/_site/assets/styles/main.css +++ b/_site/assets/styles/main.css @@ -59,6 +59,9 @@ .bg-box { background-color: #f1f3f5 !important; } +.bg-primary { background-color: #4661A9 !important; } +.bg-secondary { background-color: #60AB60 !important; } + .b-border { border-bottom: 2px solid lightgrey !important; } .color { height: 100px; } @@ -146,6 +149,9 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; } .btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; } +.btn-white { color: #4661A9 !important; background-color: #ffffff !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; } +.btn-white:hover { color: #ffffff !important; background-color: #60AB60 !important; border-color: transparent !important; } + .btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; } .btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; } diff --git a/_site/components/index.html b/_site/components/index.html index 66dd955..26c2482 100644 --- a/_site/components/index.html +++ b/_site/components/index.html @@ -117,6 +117,12 @@ +
  • + Jumbotron +
  • + + +
  • Pagination
  • @@ -393,6 +399,29 @@
    +
    +
    +
    +

    Jumbotron

    +
    +
    +
    +
    +
    + +
    +
    +

    Privacy in numbers

    +

    Protect communication from dragnet surveillance and monitoring.

    +
    + Download I2P +
    +
    +
    +
    +
    +
    +