mirror of
https://github.com/carloscuesta/gitmoji.git
synced 2025-12-08 20:14:12 +00:00
🚧 ✨ Update templates and styles add gitmoji gif
This commit is contained in:
Carlos Cuesta
parent
88ad926f82
commit
255402f1f0
BIN
src/images/gitmoji.gif
Normal file
BIN
src/images/gitmoji.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@ -2,4 +2,5 @@ $yellow: #FFDD67;
|
||||
$lightGray: #EBEFF1;
|
||||
$white: #FFF;
|
||||
$menu: #000;
|
||||
$accent: blue;
|
||||
$black: #000;
|
||||
$pink: #ff5a79;
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
@import '_includes/_flexbox';
|
||||
@import '_includes/_menu';
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -12,21 +16,13 @@ html, body {
|
||||
a {
|
||||
transition: color .5s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: $pink;
|
||||
|
||||
&:hover {
|
||||
animation: zomg .5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zomg {
|
||||
0%, 100% { color: #7ccdea; }
|
||||
16% { color: #0074D9; }
|
||||
32% { color: #2ECC40; }
|
||||
48% { color: #FFDC00; }
|
||||
64% { color: #B10DC9; }
|
||||
80% { color: #FF4136; }
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 3px;
|
||||
font-size: .85em;
|
||||
@ -35,16 +31,15 @@ code {
|
||||
border-radius: 2px;
|
||||
font-family: Consolas, Inconsolata, monospace, sans-serif;
|
||||
background: #F7FAFB;
|
||||
transition: color .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation: zomg .5s infinite;
|
||||
}
|
||||
section {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: $yellow;
|
||||
padding: 4em;
|
||||
padding: 5em 2em;
|
||||
}
|
||||
|
||||
.gitmoji-logo {
|
||||
@ -52,6 +47,14 @@ code {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: $pink;
|
||||
color: $white;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@ -61,28 +64,6 @@ main.wrap {
|
||||
padding: 3.5em 2em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 1.5em;
|
||||
background-color: $lightGray;
|
||||
|
||||
nav {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
|
||||
a:after {
|
||||
content: "·";
|
||||
color: #000!important;
|
||||
margin: 0 .75em;
|
||||
}
|
||||
|
||||
a:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: flex;
|
||||
|
||||
@ -126,9 +107,47 @@ main.wrap {
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0 .25em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 1.5em;
|
||||
background-color: #00E5FF;
|
||||
color: $white;
|
||||
|
||||
nav {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
|
||||
a:after {
|
||||
content: "·";
|
||||
color: $white!important;
|
||||
margin: 0 .75em;
|
||||
}
|
||||
|
||||
a:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
footer nav, footer h3 {
|
||||
justify-content: center!important;
|
||||
text-align: center!important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zomg {
|
||||
0%, 100% { color: #7ccdea;}
|
||||
16% { color: #0074D9;}
|
||||
32% { color: #2ECC40;}
|
||||
48% { color: #FFDC00;}
|
||||
64% { color: #B10DC9;}
|
||||
80% { color: #FF4136;}
|
||||
}
|
||||
|
||||
@ -2,7 +2,12 @@ footer.footer
|
||||
.wrap
|
||||
.row.middle-xs
|
||||
.made-with-love.col-xs-12.col-sm-6
|
||||
h3 Made with <3 by #[a(href="https://carloscuesta.me") Carlos Cuesta]
|
||||
h3
|
||||
| Made with
|
||||
svg.icon.icon-heart
|
||||
use(xlink:href='#icon-heart')
|
||||
| by
|
||||
a(href='https://carloscuesta.me') Carlos Cuesta
|
||||
nav.col-xs-12.col-sm-6
|
||||
a(href="/about") About
|
||||
a(href="https://github.com/carloscuesta/gitmoji") GitHub
|
||||
|
||||
5
src/templates/_includes/_icons.pug
Normal file
5
src/templates/_includes/_icons.pug
Normal file
@ -0,0 +1,5 @@
|
||||
svg(style='position: absolute; width: 0; height: 0;', width='0', height='0', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
|
||||
defs
|
||||
symbol#icon-heart(viewbox='0 0 64 64')
|
||||
title heart
|
||||
path.heart(d='m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8', fill='#ff5a79')
|
||||
@ -6,7 +6,7 @@ nav.nav.row.middle-xs
|
||||
.modal-content
|
||||
ul.navigation
|
||||
li.item
|
||||
a(href='/about', onmousedown="ga('send', 'event', 'Menu', 'Gitmoji');") Home
|
||||
a(href='https://carloscuesta.gitmoji.me', onmousedown="ga('send', 'event', 'Menu', 'Gitmoji');") Home
|
||||
li.item
|
||||
a(href='/about', onmousedown="ga('send', 'event', 'Menu', 'About');") About
|
||||
li.item
|
||||
|
||||
@ -10,25 +10,27 @@ html
|
||||
meta(name="twitter:card", content="summary")
|
||||
meta(name="twitter:title", content="gitmoji")
|
||||
meta(name="twitter:description", content="An emoji guide for your commit messages.")
|
||||
meta(name="twitter:image:src", content="")
|
||||
meta(name="twitter:image:src", content="https://gitmoji.carloscuesta.me/images/gitmoji.gif")
|
||||
meta(name="twitter:creator", content="@crloscuesta")
|
||||
meta(name="twitter:url", content="https://gitmoji.carloscuesta.me/about")
|
||||
meta(property="og:title", content="gitmoji")
|
||||
meta(name="og:description", content="An emoji guide for your commit messages.")
|
||||
meta(property="og:image", content="")
|
||||
meta(property="og:image", content="https://gitmoji.carloscuesta.me/images/gitmoji.gif")
|
||||
meta(name="og:url", content="https://gitmoji.carloscuesta.me/about")
|
||||
meta(name="robots", content="index, follow")
|
||||
link(href="css/style.css", rel="stylesheet", type="text/css")
|
||||
//-style
|
||||
include ../../dist/css/style.css
|
||||
body
|
||||
include _includes/_icons.pug
|
||||
include _includes/_nav.pug
|
||||
header.header
|
||||
include ../images/gitmoji.svg
|
||||
main
|
||||
section.wrap.row.col-xs-12
|
||||
main.wrap
|
||||
section
|
||||
h1 About
|
||||
p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
h1 Contributting to gitmoji
|
||||
h1 Share
|
||||
p Gitmoji is an emoji guide for GitHub commit messages.
|
||||
section
|
||||
h1 Contributting to gitmoji
|
||||
p You can contribute to gitmoji!
|
||||
include _includes/_footer.pug
|
||||
|
||||
@ -10,18 +10,19 @@ html
|
||||
meta(name="twitter:card", content="summary")
|
||||
meta(name="twitter:title", content="gitmoji")
|
||||
meta(name="twitter:description", content="An emoji guide for your commit messages.")
|
||||
meta(name="twitter:image:src", content="")
|
||||
meta(name="twitter:image:src", content="https://gitmoji.carloscuesta.me/images/gitmoji.gif")
|
||||
meta(name="twitter:creator", content="@crloscuesta")
|
||||
meta(name="twitter:url", content="https://gitmoji.carloscuesta.me")
|
||||
meta(property="og:title", content="gitmoji")
|
||||
meta(name="og:description", content="An emoji guide for your commit messages.")
|
||||
meta(property="og:image", content="")
|
||||
meta(property="og:image", content="https://gitmoji.carloscuesta.me/images/gitmoji.gif")
|
||||
meta(name="og:url", content="https://gitmoji.carloscuesta.me")
|
||||
meta(name="robots", content="index, follow")
|
||||
link(href="css/style.css", rel="stylesheet", type="text/css")
|
||||
//-style
|
||||
include ../../dist/css/style.css
|
||||
body
|
||||
include _includes/_icons.pug
|
||||
include _includes/_nav.pug
|
||||
header.header
|
||||
include ../images/gitmoji.svg
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user