knice/rainbow-banner.md

Forked from anonymous/untitled

Last active June 2, 2021 22:13

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/knice/f1d334a1aaef81319c4f.js"></script>
Save knice/f1d334a1aaef81319c4f to your computer and use it in GitHub Desktop.

Download ZIP

How we added a rainbow banner to the top of the UCSC homepage.

Raw

rainbow-banner.md

How we added a rainbow stripe to the top of the UCSC home page on June 26, 2015

I grabbed the colors from the rainbow banner on A List Apart.
We added this to the <head>:

<style type="text/css">

body {
  position: relative;
  padding-top: 10px !important;
}

.love-wins {
  width: 100%;
  height:10px;
  position: absolute;
  left:0;
  top:0;  
  
  background: linear-gradient(to right, #fcf8f5 0%, #fdafc7 9%, #76d5eb 18%, #603814 27%, #010300 36%, #e40303 45%, #ff8c00 54%, #ffed00 63%, #008026 72%, #004dff 81%, #750787 100%);
}

.love-wins a {
  display:block;
  width:100%;
  height:10px;
}

</style>

Then we added this just inside the <body>:

<div class="love-wins"><a href="http://news.ucsc.edu/2015/06/rev-fall-15-alumni-profile-perry.html"></a></div>

Author

knice commented Nov 14, 2015

Also, for France, November 13, 2015:

Colors are from Wikipedia.

<div class="paris">
    <div class="blue"></div>
    <div class="white"></div>   
    <div class="red"></div>
</div>

 body {
  position: relative;
  padding-top: 10px !important;
  margin: 0;
}

.paris {
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0;
  display: table;
}
.paris div {
  display: table-cell;
  width: 33%;
  height: 12px;
}
.paris .blue {
  background-color: #0055A4;
}
.paris .white {
  background-color: #ffffff;
}
.paris .red {
  background-color: #EF4135;
}

knice/rainbow-banner.md

How we added a rainbow stripe to the top of the UCSC home page on June 26, 2015

knice commented Nov 14, 2015

Uh oh!