Skip to content

Commit 8c27469

Browse files
Meng-VMeng-V
authored
Merge pull request #49 from code4lib/issue-43
Issue 43
2 parents 478ae4d + e9ad775 commit 8c27469

File tree

5 files changed

+81
-42
lines changed

5 files changed

+81
-42
lines changed

‎assets/_scss/_color-test.scss‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,27 @@
77

88
// Background
99
$oxford-blue: #061A40;
10-
$jungle-green: #041F1E;
10+
$xiketic: #070413;
1111

1212
// Foreground
1313
$cultured-white: #F5F5F5;
1414
$turquoise: #00D5C0;
15-
$crayola-ink: #FA62F0;
15+
$crayola-pink: #FA62F0;
16+
$honey-yellow: #FDB827;
1617

18+
//Lighter
19+
$cultured-white-lighter: #FFF;
20+
$turquoise-lighter: lighten($turquoise, 10%);
21+
$crayola-pink-lighter: lighten($crayola-pink, 10%);
22+
$honey-yellow-lighter: lighten($honey-yellow, 10%);
1723
//
1824
// Settings
1925
// --------------------------------------------------
2026

2127
.CT-body {
2228
/* Margin bottom by footer height */
2329
color: $cultured-white;
24-
background-color: $jungle-green;
30+
background-color: $oxford-blue;
2531
font-family: $font-family-sans-serif;
2632
font-weight: 300;
2733
padding: 50px;
@@ -32,7 +38,7 @@ $crayola-ink: #FA62F0;
3238
}
3339

3440
.CT-body a:hover, .CT-body a:focus {
35-
background-color: $crayola-ink !important;
41+
background-color: $black !important;
3642
color: $cultured-white !important;
3743
}
3844

@@ -46,16 +52,16 @@ $crayola-ink: #FA62F0;
4652
}
4753

4854
.CT-body .speaker-box-inner {
49-
border-top: 3px solid $crayola-ink;
50-
border-left: 3px solid $crayola-ink;
51-
border-right: 3px solid $crayola-ink;
55+
border-top: 3px solid $crayola-pink;
56+
border-left: 3px solid $crayola-pink;
57+
border-right: 3px solid $crayola-pink;
5258
border-radius: 3px;
5359
}
5460

5561
.CT-body .arrow-down {
5662
border-left: 140px solid transparent;
5763
border-right: 140px solid transparent;
58-
border-top: 15px solid $crayola-ink;
64+
border-top: 15px solid $crayola-pink;
5965
height: 0;
6066
margin-top: 15px;
6167
opacity: 0;
@@ -65,29 +71,53 @@ $crayola-ink: #FA62F0;
6571
}
6672

6773
.CT-body .ct-btn-light{
68-
background-color: $cultured-white;
69-
color: $turquoise;
74+
background-color: $honey-yellow;
75+
color: $black;
76+
&:hover {
77+
background-color: $honey-yellow-lighter;
78+
}
79+
}
80+
81+
.CT-body .ct-btn-outline-light{
82+
border-color: $honey-yellow;
83+
color: $honey-yellow;
7084
&:hover {
71-
outline: 2px solid $crayola-ink;
72-
outline-offset: -2px;
85+
border-color: $honey-yellow-lighter;
86+
color: $honey-yellow-lighter;
7387
}
7488
}
7589

7690
.CT-body .ct-btn-middle{
77-
background-color: $gray-600;
78-
color: $cultured-white;
91+
background-color: $crayola-pink;
92+
color: $black;
7993
&:hover {
80-
outline: 2px solid $crayola-ink;
81-
outline-offset: -2px;
94+
background-color: $crayola-pink-lighter;
95+
}
96+
}
97+
98+
.CT-body .ct-btn-outline-middle{
99+
border-color: $crayola-pink;
100+
color: $crayola-pink;
101+
&:hover {
102+
border-color: $crayola-pink-lighter;
103+
color: $crayola-pink-lighter;
82104
}
83105
}
84106

85107
.CT-body .ct-btn-dark{
86-
background-color: $gray-900;
87-
color: $gray-300;
108+
background-color: $turquoise;
109+
color: $black;
110+
&:hover {
111+
background-color: $turquoise-lighter;
112+
}
113+
}
114+
115+
.CT-body .ct-btn-outline-dark{
116+
border-color: $turquoise;
117+
color: $turquoise;
88118
&:hover {
89-
outline: 2px solid $crayola-ink;
90-
outline-offset: -2px;
119+
border-color: $turquoise-lighter;
120+
color: $turquoise-lighter;
91121
}
92122
}
93123

‎assets/_scss/_homepage.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135

136136
// "Welcome to..." section of the home page
137137
.welcome {
138-
background-color: $oxford-blue;
138+
background-color: $xiketic;
139139
}
140140
.welcome a {
141141
@include link-styles;

‎assets/_scss/_sections.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ section:nth-of-type(3n+1) {
1616
}
1717

1818
section:nth-of-type(3n+2) {
19-
border-top: 2px solid $crayola-ink;
20-
border-bottom: 2px solid $crayola-ink;
19+
border-top: 2px solid $crayola-pink;
20+
border-bottom: 2px solid $crayola-pink;
2121
}
2222

2323
section:nth-of-type(3n+3) {

‎assets/_scss/_variables.scss‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,30 @@ $bootstrap-sass-asset-helper: true !default;
55
// --------------------------------------------------
66

77
// Background
8-
$oxford-blue: #061A40;
9-
$jungle-green: #041F1E;
8+
$oxford-blue: #060c40;
9+
$xiketic: #070413;
1010

1111
// Foreground
1212
$cultured-white: #F5F5F5;
1313
$turquoise: #00D5C0;
14-
$crayola-ink: #FA62F0;
14+
$crayola-pink: #F971F0 ;
15+
$honey-yellow: #FDB827;
16+
17+
//Foreground lighter
18+
$cultured-white-lighter: #FFF;
19+
$turquoise-lighter: lighten($turquoise, 10%);
20+
$crayola-pink-lighter: lighten($crayola-pink, 10%);
21+
$honey-yellow-lighter: lighten($honey-yellow, 10%);
1522

1623
// Buttons
17-
$btn-bg-color-mid: #495057; //$gray-700
18-
$btn-color-mid: $cultured-white;
19-
$btn-border-color-mid: #8e908c; //$gray-600
20-
$btn-border-hover: $crayola-ink;
24+
$btn-bg-color-mid: $honey-yellow;
25+
$btn-color-mid: #000;
26+
$btn-border-color-mid: #000;
27+
$btn-border-hover: $honey-yellow-lighter;
2128

2229
// Random Utils
2330
$transparent: transparent !important;
24-
$icosahedron-color: #2692b2;
31+
$icosahedron-color: $turquoise;
2532
$hero-transition: #770681;
2633

2734

@@ -51,20 +58,21 @@ $gray-darker: $gray-900 !default; // #222
5158
$gray-dark: $gray-800 !default; // #333
5259
$gray: $gray-600 !default; // #555
5360
$gray-light: $gray-400 !default; // #777
61+
$gray-light: $cultured-white; //2021 override
5462
$gray-lighter: $gray-200 !default; // #eee
5563
//End fo gray setting
5664

57-
$primary: $jungle-green;
65+
$primary: $xiketic;
5866
$primary-dark: darken($primary, 10%) !default;
5967
$primary-light: lighten($primary, 10%) !default;
6068

61-
$accent: $crayola-ink;
69+
$accent: $crayola-pink;
6270
$accent-dark: darken($accent, 10%) !default;
6371
$accent-light: lighten($accent, 10%);
6472
$accent-darker: darken($accent, 20%);
6573
$accent-lighter: lighten($accent, 20%);
6674

67-
$brand-primary: $jungle-green !default; // #337ab7
75+
$brand-primary: $oxford-blue !default; // #337ab7
6876
$brand-success: #5cb85c !default;
6977
$brand-info: #5bc0de !default;
7078
$brand-warning: $gray-600 !default;
@@ -87,7 +95,7 @@ $section-2-color: color-contrast($primary);
8795
$section-2-link: $accent-dark;
8896
$section-2-hover: $accent-lighter;
8997

90-
$section-3-bg: $jungle-green;
98+
$section-3-bg: $oxford-blue;
9199
$section-3-color: $gray-lighter;
92100
$section-3-link: $accent-dark;
93101
$section-3-hover: darken($accent-light, 6.5%);
@@ -108,10 +116,10 @@ $sponsor-badge-ribbon: $accent-light;
108116
$sponsor-badge-bg: $gray-lighter;
109117

110118
// Speaker Box
111-
$speaker-selected-bg: $oxford-blue;
119+
$speaker-selected-bg: $xiketic;
112120
$speaker-selected-color: $turquoise;
113-
$speaker-selected-outline: 2px solid $crayola-ink;
114-
$speaker-selected-arrow: $crayola-ink;
121+
$speaker-selected-outline: 2px solid $crayola-pink;
122+
$speaker-selected-arrow: $crayola-pink;
115123
$speaker-info-bg: $gray-light;
116124
$speaker-info-color: $gray-base;
117125

@@ -160,7 +168,7 @@ $night-event: $primary-dark;
160168
//## Settings for some of the most global styles.
161169

162170
//** Background color for `<body>`.
163-
$body-bg: $jungle-green !default;
171+
$body-bg: $oxford-blue !default;
164172
//** Global text color on `<body>`.
165173
$text-color: $cultured-white !default;
166174

‎color-test.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,10 @@ Oxford Blue (#061A40), do a test.)
2727
- Feel free to use shades or tints of colors to achieve accessible results.
2828

2929
<div class="mt-5">
30-
<p>Customized buttons here <button class="btn ct-btn-light">button light</button> </p>
31-
<p>Customized buttons here <button class="btn ct-btn-middle">button middle</button> </p>
32-
<p>Customized buttons here <button class="btn ct-btn-dark">button dark</button> </p>
30+
##Buttons
31+
<p>Customized buttons here <button class="btn ct-btn-light">button light</button> <button type="button" class="btn ct-btn-outline-light">light outline</button></p>
32+
<p>Customized buttons here <button class="btn ct-btn-middle">button middle</button> <button type="button" class="btn ct-btn-outline-middle">middle outline</button></p>
33+
<p>Customized buttons here <button class="btn ct-btn-dark">button dark</button> <button type="button" class="btn ct-btn-outline-dark">middle dark</button></p>
3334
</div>
3435

3536
---

0 commit comments

Comments
 (0)