a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update logo and background colours

Browse Source
This commit is contained in:
Tom Russell 2018-04-11 22:35:35 +01:00
parent 20c5a1d2f2
commit 49fa19e6d0
2 changed files with 140 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
html/index.html
View File

@ -232,7 +232,32 @@ projects on the Colouring London site.
</article> </article>
<footer> <footer>
<a class="logo" href="index.html#top">Colouring London</a> <a class="logo" href="index.html#top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<div class="logotype">
<span>Colouring</span>
<span>London</span>
</div>
</a>
</footer> </footer>
</body> </body>

183
html/main.css
View File

@ -1,7 +1,9 @@
/** /**
* Layout * Layout
*/ */
html, body {
margin: 0;
}
/** /**
* Typography * Typography
@ -33,48 +35,55 @@ h1, h2, h3, h4 {
.white { .white {
background-color: #fff; background-color: #fff;
} }
.pink { .bold-yellow {
background-color: #fd97cd; background-color: #ffad00;
} }
.pink { .bright-yellow {
background-color: #eb0089; background-color: #f0d106;
}
.bold-orange {
background-color: #eb7905;
} }
.red { .red {
background-color: #fe1216; background-color: #e96762;
} }
.orange { .pastel-pink {
background-color: #ff954f; background-color: #e099c1;
} }
.orange { .pastel-purple {
background-color: #ee5f00; background-color: #7d6f94;
} }
.yellow { .blue-grey {
background-color: #ffff9b; background-color: #6f879c;
} }
.yellow { .bright-green {
background-color: #daa702; background-color: #5ec233;
} }
.green { .pastel-green {
background-color: #5ceb92; background-color: #72b889;
} }
.green { .bright-blue {
background-color: #01aa42; background-color: #72b2fe;
} }
.blue { .pale-grey {
background-color: #399ecc; background-color: #a6a6a7;
} }
.blue-two { .pale-brown {
background-color: #0042d1; background-color: #918e6e;
}
.grey {
background-color: #222;
} }
/** /**
* Logo * Logo
*/ */
.logo { .logo {
display: block;
font-size: 2em;
width: 6em;
margin: 0 auto;
padding: 0.5em 0 1em;
text-transform: uppercase; text-transform: uppercase;
color: #000;
text-decoration: none;
} }
.logo .logotype { .logo .logotype {
display: inline-block; display: inline-block;
@ -82,119 +91,149 @@ h1, h2, h3, h4 {
} }
.logo .logotype span { .logo .logotype span {
display: block; display: block;
font-size: 1.45rem; font-size: 0.75em;
letter-spacing: 0.25rem; letter-spacing: 0.15em;
} }
.logo .logotype span:first-child { .logo .logotype span:first-child {
font-size: 1.25rem; font-size: 0.625em;
letter-spacing: 0; letter-spacing: 0;
} }
.logo .grid { .logo .grid {
position: relative; position: relative;
top: -3px; top: -1px;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
font-size: 0; font-size: 0;
} }
.logo .row { .logo .row {
display: block; display: block;
margin: 0 0 3.5px 0; margin: 0 0 5px 0;
} }
.logo .cell { .logo .cell {
display: inline-block; display: inline-block;
background-color: #222; background-color: #222;
width: 14px; width: 15px;
height: 14px; height: 15px;
margin: 0 3px 0 0; margin: 0 3px 0 0;
} }
.logo .row:nth-child(1) .cell:nth-child(1) { .logo .row:nth-child(1) .cell:nth-child(1) {
animation: pulse 37s infinite; animation: pulse 47s infinite;
animation-delay: 1.5s; animation-delay: 1.5s;
} }
.logo .row:nth-child(1) .cell:nth-child(2) { .logo .row:nth-child(1) .cell:nth-child(2) {
animation: pulse 22s infinite; animation: pulse 32s infinite;
animation-delay: 0.5s; animation-delay: 0.5s;
} }
.logo .row:nth-child(1) .cell:nth-child(3) { .logo .row:nth-child(1) .cell:nth-child(3) {
animation: pulse 39s infinite; animation: pulse 49s infinite;
animation-delay: 6s; animation-delay: 6s;
} }
.logo .row:nth-child(1) .cell:nth-child(4) { .logo .row:nth-child(1) .cell:nth-child(4) {
animation: pulse 25s infinite; animation: pulse 35s infinite;
animation-delay: 10s; animation-delay: 10s;
} }
.logo .row:nth-child(2) .cell:nth-child(1) { .logo .row:nth-child(2) .cell:nth-child(1) {
animation: pulse 24s infinite; animation: pulse 34s infinite;
animation-delay: 7s; animation-delay: 7s;
} }
.logo .row:nth-child(2) .cell:nth-child(2) { .logo .row:nth-child(2) .cell:nth-child(2) {
animation: pulse 38s infinite; animation: pulse 48s infinite;
animation-delay: 9s; animation-delay: 9s;
} }
.logo .row:nth-child(2) .cell:nth-child(3) { .logo .row:nth-child(2) .cell:nth-child(3) {
animation: pulse 21s infinite; animation: pulse 31s infinite;
animation-delay: 5s; animation-delay: 5s;
} }
.logo .row:nth-child(2) .cell:nth-child(4) { .logo .row:nth-child(2) .cell:nth-child(4) {
animation: pulse 36s infinite; animation: pulse 46s infinite;
animation-delay: 4.5s; animation-delay: 4.5s;
} }
.logo .row:nth-child(3) .cell:nth-child(1) { .logo .row:nth-child(3) .cell:nth-child(1) {
animation: pulse 22s infinite; animation: pulse 32s infinite;
animation-delay: 3.5s; animation-delay: 3.5s;
} }
.logo .row:nth-child(3) .cell:nth-child(2) { .logo .row:nth-child(3) .cell:nth-child(2) {
animation: pulse 39s infinite; animation: pulse 49s infinite;
animation-delay: 5.5s; animation-delay: 5.5s;
} }
.logo .row:nth-child(3) .cell:nth-child(3) { .logo .row:nth-child(3) .cell:nth-child(3) {
animation: pulse 25s infinite; animation: pulse 35s infinite;
animation-delay: 4s; animation-delay: 4s;
} }
.logo .row:nth-child(3) .cell:nth-child(4) { .logo .row:nth-child(3) .cell:nth-child(4) {
animation: pulse 24s infinite; animation: pulse 34s infinite;
animation-delay: 17s; animation-delay: 17s;
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { 0%, 100% {
background-color: #0042d1; background-color: #ffad00;
} }
15% { 8% {
background-color: #0042d1; background-color: #ffad00;
} }
17% { 10% {
background-color: #eb0089; background-color: #f0d106;
} }
30% { 16% {
background-color: #eb0089; background-color: #f0d106;
}
18% {
background-color: #eb7905;
}
24% {
background-color: #eb7905;
}
26% {
background-color: #e96762;
} }
32% { 32% {
background-color: #daa702; background-color: #e96762;
} }
45% { 34% {
background-color: #daa702; background-color: #e099c1;
} }
47% { 40% {
background-color: #01aa42; background-color: #e099c1;
} }
60% { 42% {
background-color: #01aa42; background-color: #7d6f94;
} }
62% { 48% {
background-color: #ee5f00; background-color: #7d6f94;
} }
75% { 50% {
background-color: #ee5f00; background-color: #5ec233;
} }
77% { 56% {
background-color: #222; background-color: #5ec233;
}
58% {
background-color: #72b889;
}
64% {
background-color: #72b889;
}
66% {
background-color: #72b2fe;
}
72% {
background-color: #72b2fe;
}
74% {
background-color: #a6a6a7;
}
80% {
background-color: #a6a6a7;
}
82% {
background-color: #918e6e;
}
88% {
background-color: #918e6e;
} }
90% { 90% {
background-color: #222; background-color: #ffad00;
}
92% {
background-color: #0042d1;
} }
} }
@ -261,8 +300,12 @@ img {
/** /**
* Data categories * Data categories
*/ */
.data-category-list li { .data-category-list {
padding: 0;
text-align: center;
list-style: none; list-style: none;
}
.data-category-list li {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
width: 9em; width: 9em;
@ -273,8 +316,10 @@ img {
.data-category-list .category { .data-category-list .category {
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
margin: 1.4em 0 0.5em;
} }
.data-category-list .description { .data-category-list .description {
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
margin: 0;
} }