Skip to content

Commit

Permalink
Refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
@lipis
lipis committed Dec 23, 2015
1 parent 615237e commit 8f583c7
Show file tree
Hide file tree
Showing 5 changed files with 339 additions and 61 deletions.
35 changes: 19 additions & 16 deletions Gruntfile.coffee
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
module.exports = (grunt)->
SRC_DIR = "less"
TARGET_DIR = "css"
less = 'less'
TARGET_DIR = 'css'

grunt.initConfig
less:
app_css:
src: "#{SRC_DIR}/flag-icon.less"
dest: "#{TARGET_DIR}/flag-icon.css"
flag:
src: 'less/flag-icon.less'
dest: 'css/flag-icon.css'
docs:
src: 'assets/docs.less'
dest: 'assets/docs.css'

cssmin:
app_css:
src: "#{TARGET_DIR}/flag-icon.css"
dest: "#{TARGET_DIR}/flag-icon.min.css"
flag:
src: 'css/flag-icon.css'
dest: 'css/flag-icon.min.css'

watch:
css:
options:
livereload: true
files: "#{SRC_DIR}/*.less"
tasks: ["build"]
files: '**/*.less'
tasks: ['build']

assets:
options:
Expand All @@ -32,10 +35,10 @@ module.exports = (grunt)->
keepalive: true


grunt.loadNpmTasks("grunt-contrib-less")
grunt.loadNpmTasks("grunt-contrib-cssmin")
grunt.loadNpmTasks("grunt-contrib-watch")
grunt.loadNpmTasks('grunt-contrib-connect')
grunt.loadNpmTasks 'grunt-contrib-less'
grunt.loadNpmTasks 'grunt-contrib-cssmin'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-contrib-connect'

grunt.registerTask("default", ["build", "watch"])
grunt.registerTask("build", ["less", "cssmin"])
grunt.registerTask 'build', ['less', 'cssmin']
grunt.registerTask 'default', ['build', 'watch']
137 changes: 127 additions & 10 deletions assets/docs.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
body {
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
.flag-wrapper {
width: 100%;
display: inline-block;
Expand All @@ -6,31 +18,136 @@
overflow: hidden;
margin-bottom: 20px;
}

.flag-wrapper:after {
padding-top: 75%; /* ratio */
padding-top: 75%;
/* ratio */
display: block;
content: '';
}

.flag-wrapper .flag {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}

.no-wrap {
white-space: nowrap;
margin-bottom: 8px;
overflow: hidden;
}

.all-flags .flag-icon-background {
cursor: pointer;
}
.jumbotron {
position: relative;
font-size: 16px;
color: #fff;
color: rgba(255, 255, 255, 0.75);
text-align: center;
border-radius: 0;
padding-bottom: 80px;
background: linear-gradient(to right, #0d6632, #f4c01a);
}
.jumbotron h1 {
margin-bottom: 15px;
font-weight: 300;
letter-spacing: -1px;
color: #fff;
}
.jumbotron iframe {
width: 100px!important;
height: 20px!important;
border: none;
overflow: hidden;
margin: 2px;
}
.jumbotron p a,
.jumbotron .jumbotron-links a {
font-weight: 500;
color: #fff;
}
.jumbotron .jumbotron-links {
margin-top: 15px;
margin-bottom: 0;
padding-left: 0;
list-style: none;
font-size: 14px;
}
.jumbotron .jumbotron-links li {
display: inline;
}
.jumbotron .jumbotron-links li + li {
margin-left: 20px;
}
.jumbotron .bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 18px;
background-color: rgba(0, 0, 0, 0.2);
}
.btn-outline {
margin-top: 15px;
margin-bottom: 15px;
padding: 18px 24px;
font-size: inherit;
font-weight: 500;
color: #fff;
/* redeclare to override the `.jumbotron a` */
background-color: transparent;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
transition: all 0.1s ease-in-out;
}
.btn-outline:hover,
.btn-outline:active {
color: #0d6632;
background-color: #fff;
border-color: #fff;
}
.how-to {
padding: 20px;
}
.how-to h2 {
text-align: center;
}
.how-to li {
font-size: 21px;
line-height: 1.7;
margin-top: 20px;
}
.how-to li p {
font-size: 16px;
color: #555;
}
.how-to code {
font-size: 85%;
word-wrap: break-word;
white-space: normal;
}
footer {
text-align: center;
opacity: .8;
padding: 50px;
background: linear-gradient(to right, #f4c01a, #0d6632);
}
footer a {
color: #fff;
}
footer a:hover {
color: #fff;
}
.links {
margin: 0;
list-style: none;
padding-left: 0;
}
.links li {
display: inline;
padding: 0 10px;
}
10 changes: 0 additions & 10 deletions assets/docs.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
window.onload = function () {
document.getElementById('btn-bootstrap').onclick = function() {
if (document.getElementById('bootstrap').rel == 'stylesheet') {
document.getElementById('bootstrap').rel = 'styleshit';
document.getElementById('btn-bootstrap').innerHTML = document.getElementById('btn-bootstrap').innerHTML.replace('Disable', 'Enable');
} else {
document.getElementById('bootstrap').rel = 'stylesheet';
document.getElementById('btn-bootstrap').innerHTML = document.getElementById('btn-bootstrap').innerHTML.replace('Enable', 'Disable');
}
}

$('.all-flags .flag-icon-background').click(function(event){
var flag = $(event.currentTarget).attr('title');
var w = 640;
Expand Down
162 changes: 162 additions & 0 deletions assets/docs.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
@color-from: #0d6632;
@color-to: #f4c01a;

body {
font-weight: 300;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}

.flag-wrapper {
width: 100%;
display: inline-block;
position: relative;
box-shadow: 0 0 2px black;
overflow: hidden;
margin-bottom: 20px;

&:after {
padding-top: 75%; /* ratio */
display: block;
content: '';
}

.flag {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
}

.no-wrap {
white-space: nowrap;
margin-bottom: 8px;
overflow: hidden;
}

.all-flags .flag-icon-background {
cursor: pointer;
}

.jumbotron {
position: relative;
font-size: 16px;
color: #fff;
color: rgba(255,255,255,.75);
text-align: center;
border-radius: 0;
padding-bottom: 80px;
background: linear-gradient(to right, @color-from, @color-to);
h1 {
margin-bottom: 15px;
font-weight: 300;
letter-spacing: -1px;
color: #fff;
}
iframe {
width: 100px!important;
height: 20px!important;
border: none;
overflow: hidden;
margin: 2px;
}

p
a,
.jumbotron-links a {
font-weight: 500;
color: #fff;
}

.jumbotron-links {
margin-top: 15px;
margin-bottom: 0;
padding-left: 0;
list-style: none;
font-size: 14px;
li {
display: inline;
}
li + li {
margin-left: 20px;
}
}

.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 18px;
background-color: fade(#000, 20%);
}
}

.btn-outline {
margin-top: 15px;
margin-bottom: 15px;
padding: 18px 24px;
font-size: inherit;
font-weight: 500;
color: #fff; /* redeclare to override the `.jumbotron a` */
background-color: transparent;
border-color: #fff;
border-color: rgba(255,255,255,.5);
transition: all .1s ease-in-out;
&:hover,
&:active {
color: @color-from;
background-color: #fff;
border-color: #fff;
}
}

.how-to {
padding: 20px;
h2 {
text-align: center;
}
li {
font-size: 21px;
line-height: 1.7;
margin-top: 20px;
p {
font-size: 16px;
color: #555;
}
}
code {
font-size: 85%;
word-wrap: break-word;
white-space: normal;
}
}

footer {
text-align: center;
opacity: .8;
padding: 50px;
background: linear-gradient(to right, @color-to, @color-from);

a {
color: #fff;
&:hover {
color: #fff;
}
}
}

.links {
margin: 0;
list-style: none;
padding-left: 0;
li {
display: inline;
padding: 0 10px;
}
}
Loading

0 comments on commit 8f583c7

Please sign in to comment.