#147 variables added to css for repeating color values
Merged 5 years ago by jflory7. Opened 5 years ago by phoenixabhishek.
Unknown source master  into  master

file modified
+15 -10
@@ -1,3 +1,8 @@

+ :root{

+     --primary-color: #3c6eb4;

+     --secondary-color: #294172;

+ }

+ 

  body {

      font-family: 'Open Sans';

      line-height: 1.8em;
@@ -10,11 +15,11 @@

  }

  

  a, a:hover {

-     color: #294172;

+     color: var(--secondary-color);

  }

  

  aside {

-     background: #3c6eb4;

+     background: var(--primary-color);

      margin: -20px 0 0 0;

  }

  
@@ -76,16 +81,16 @@

  

  .btn {

      background: white;

-     border: 1px solid #294172;

-     color: #294172;

+     border: 1px solid var(--secondary-color);

+     color: var(--secondary-color);

      text-transform: uppercase;

      padding: 0.9em 1.3em;

  }

  

  .btn:hover {

-     background: #294172;

+     background: var(--secondary-color);

      color: white;

-     border: 1px solid #294172;

+     border: 1px solid var(--secondary-color);

  }

  

  .row.content {
@@ -115,9 +120,9 @@

          position: fixed;

          display: flex;

          justify-content: center;

-         background: -moz-linear-gradient(top,  #3c6eb4 0%, #3c6eb4 27%, #3c6eb4 27%, #3c6eb4 100%);

-         background: -webkit-linear-gradient(top,  #3c6eb4 0%, #3c6eb4 27%, #3c6eb4 27%, #3c6eb4 100%);

-         background: linear-gradient(to bottom,  #3c6eb4 0%, #3c6eb4 27%, #3c6eb4 27%, #3c6eb4 100%);

+         background: -moz-linear-gradient(top,  var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);

+         background: -webkit-linear-gradient(top,  var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);

+         background: linear-gradient(to bottom,  var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);

      }

  

      aside .sidebar {
@@ -221,7 +226,7 @@

      }

  }

  .wearefedora {

-     color: #3c6eb4;

+     color: var(--primary-color);

      font-weight: 600;

      font-size:2.3rem;

  }

The color values were repeating at multiple places in the css file.
Added variables so that for any changes, only one value will have to be changed and will be reflected across other places.

As per discussed in #139

Metadata Update from @jflory7:
- Pull-request tagged with: improvement, type - frontend, type - summer coding
- Request assigned

5 years ago

@phoenixabhishek Easy enough. Changes look good. Merging! :clapper:

rebased onto f2948d2

5 years ago

Pull-Request has been merged by jflory7

5 years ago

@jflory7 Thank you :grin: :grin: :grin: :grin: :grin: