Add new classes to the stylesheet
@iamphill, would you mind making these classes available for the website?
/* for whenever we need purple and orange stuff */
.gitlab-purple {
color: rgb(107,79,187);
}
.gitlab-orange {
color: rgb(226,67,41);
}
/* for orange and purple panels[1] */
.panel-gitlab-orange {
border-color: rgba(252,163,38,.3);
}
.panel-gitlab-orange > .panel-heading {
color: rgb(226,67,41);
background-color: rgba(252,163,38,.3);
border-color: rgba(252,163,38,.3);
}
.panel-gitlab-purple {
border-color: rgba(107,79,187,.3);
}
.panel-gitlab-purple > .panel-heading {
color: rgb(107,79,187);
background-color: rgba(107,79,187,.3);
border-color: rgba(107,79,187,.3);
}
/* for orange and purple alerts[2] */
.alert-gitlab-orange {
background-color: rgba(252,163,38,.3);
border-color: rgba(252,163,38,.3);
color: rgb(226,67,41) !important;
}
.alert-gitlab-purple {
background-color: rgba(107,79,187,.3);
border-color: rgba(107,79,187,.3);
color:rgb(107,79,187) !important;
}
/* to centralize stuff */
.center /* or .gitlab-center */ {
text-align: center;
}
/* to standardize the CTA for webcasts[3] */
.alert-webcast {
background-color: rgba(252,163,38,.3);
border-color: rgba(252,163,38,.3);
color: rgb(226,67,41) !important;
text-align: center;
}
.alert-webcast a {
color: rgb(107,79,187) !important;
}
.alert-webcast a:hover {
color: #1689e0 !important;
}
/* for centralized twitter widgets[4] */
.center twitterwidget {
margin-left: auto;
margin-right: auto;
display: block;
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
margin-bottom: 20px;
margin-top: 20px;
}
Examples where these classes are already applied to individual pages:
- Purple and orange: https://about.gitlab.com/2016/08/22/announcing-the-gitlab-issue-board/
- [1,2] Panels and alerts: https://about.gitlab.com/2016/09/13/gitlab-master-plan/
- [3] Webcast CTA: https://about.gitlab.com/2016/09/16/feature-preview-introducing-cycle-analytics/
- [1,4] Panels and twitter widget: https://about.gitlab.com/2016/09/14/gitlab-live-event-recap/
I'll have its documentation changed as soon as we have these classes available: