SVG Logos
-A curated collection of logos for web technologies, libraries, frameworks, servers and services.
+A collection of logos of web technologies, editors, libraries, frameworks, servers and services.
Github
- 
+ 
+
@@ -41,9 +41,6 @@
- 
-
- 
- 
+ 
+
@@ -72,7 +69,7 @@
- 
+ 
+
@@ -93,7 +90,7 @@
- 
+ 
+
@@ -153,7 +150,7 @@
- 
+ 
+
@@ -384,7 +381,7 @@
- 
+ 
+
diff --git a/assets/og-image.png b/assets/og-image.png
new file mode 100644
index 0000000..d58e4cc
Binary files /dev/null and b/assets/og-image.png differ
diff --git a/assets/styles/base/_utils.scss b/assets/styles/base/_utils.scss
new file mode 100755
index 0000000..1c2ca02
--- /dev/null
+++ b/assets/styles/base/_utils.scss
@@ -0,0 +1,129 @@
+@mixin background-image-retina($file, $type, $width, $height) {
+ background-image: url($file + '.' + $type);
+ background-size: $width $height;
+
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
+ background-image: url($file + '@2x.' + $type);
+ }
+}
+
+@mixin background-image-svg($name, $width, $height) {
+ background-image: url('#{$name}.png'); // IE8 & below
+ background-image: none, url('#{$name}.svg');
+ background-size: $width $height;
+}
+
+@mixin truncate($width: 100%) {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: $width;
+ white-space: nowrap;
+}
+
+@mixin vertical-align {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+@mixin media-query($media-query) {
+
+ @if $media-query == outdated {
+ @media (max-height: 540px) { @content; }
+ }
+
+ @if $media-query == xs-only {
+ @media (max-width: $screen-xs - 1) { @content; }
+ }
+
+ @if $media-query == sm {
+ @media (min-width: $screen-xs) { @content; }
+ }
+
+ @if $media-query == sm-only {
+ @media (max-width: $screen-sm - 1) { @content; }
+ }
+
+ @if $media-query == md {
+ @media (min-width: $screen-sm) { @content; }
+ }
+
+ @if $media-query == md-only {
+ @media (max-width: $screen-md - 1) { @content; }
+ }
+
+ @if $media-query == lg {
+ @media (min-width: $screen-md) { @content; }
+ }
+
+ @if $media-query == xl {
+ @media (min-width: $screen-lg) { @content; }
+ }
+
+ @if $media-query == retina {
+ @media (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { @content; }
+ }
+
+ @if $media-query == landscape {
+ @media (orientation: landscape) { @content; }
+ }
+}
+
+// Just mqs helpers...
+
+@mixin outdated {
+ @include media-query(outdated) { @content }
+}
+
+
+@mixin xs {
+ @include media-query(xs) { @content }
+}
+
+@mixin xxs-only {
+ @include media-query(xxs-only) { @content }
+}
+
+@mixin xs-only {
+ @include media-query(xs-only) { @content }
+}
+
+@mixin smt {
+ @include media-query(smt) { @content }
+}
+
+@mixin smt-only {
+ @include media-query(smt-only) { @content }
+}
+
+@mixin sm {
+ @include media-query(sm) { @content }
+}
+
+@mixin sm-only {
+ @include media-query(sm-only) { @content }
+}
+
+@mixin md {
+ @include media-query(md) { @content }
+}
+
+@mixin md-only {
+ @include media-query(md-only) { @content }
+}
+
+@mixin lg {
+ @include media-query(lg) { @content }
+}
+
+@mixin xl {
+ @include media-query(xl) { @content }
+}
+
+@mixin retina {
+ @include media-query(retina) { @content }
+}
+
+@mixin landscape {
+ @include media-query(landscape) { @content }
+}
diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss
new file mode 100755
index 0000000..c9fb1de
--- /dev/null
+++ b/assets/styles/base/_variables.scss
@@ -0,0 +1,7 @@
+$bg-color: #fff9f2;
+$link-color: #62cab8;
+
+$screen-xs: 480px;
+$screen-sm: 768px;
+$screen-md: 1024px;
+$screen-lg: 1280px;
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index d448a6a..65ecce7 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,18 +1,25 @@
+@import 'base/variables';
+@import 'base/utils';
+
html {
font-size: 62.5%;
height: 100%;
}
body {
- background-color: #FFF9F2;
+ background-color: $bg-color;
font-family: Montserrat, sans-serif;
margin: 0;
min-height: 100%;
padding: 0;
}
+* {
+ box-sizing: border-box;
+}
+
a {
- color: #62CAB8;
+ color: $link-color;
}
.container {
@@ -29,11 +36,29 @@ h5 {
h1 {
font-size: 3rem;
margin: 3rem 0 1.5rem;
+
+ @include md {
+ font-size: 4rem;
+ }
+
+ @include lg {
+ font-size: 8rem;
+ }
}
h3 {
font-size: 1.8rem;
margin: 0 auto 0.5rem;
+
+ @include md {
+ font-size: 2.5rem;
+ max-width: 80%;
+ }
+
+ @include lg {
+ font-size: 3rem;
+ max-width: 60%;
+ }
}
h5 {
@@ -42,48 +67,28 @@ h5 {
}
.logos {
- display: flex;
align-items: center;
+ display: flex;
flex-wrap: wrap;
- justify-content: space-around;
-}
+ justify-content: space-between;
-.logos > div {
- margin: 10% 4%;
- text-align: center;
- width: 92%;
-}
+ > div {
+ padding: 5vh 1vh;
+ text-align: center;
+ width: 100%;
-.logos > div img {
- display: block;
- margin: 0 auto;
- max-width: 100%;
-}
+ @include md {
+ width: 50%;
+ }
-@media (min-width: 768px) {
- .logos > div {
- margin: 6% 3%;
- width: 44%;
- }
- h1 {
- font-size: 4rem;
- }
- h3 {
- font-size: 2.5rem;
- max-width: 80%;
- }
-}
+ @include lg {
+ width: percentage(1/3);
+ }
-@media (min-width: 1024px) {
- .logos div {
- margin: 4% 2%;
- width: 28%;
- }
- h1 {
- font-size: 5rem;
- }
- h3 {
- font-size: 3rem;
- max-width: 70%;
+ img {
+ display: block;
+ margin: 0 auto;
+ max-width: 100%;
+ }
}
}
diff --git a/gulpfile.js b/gulpfile.js
index c96afa5..c3f5fe4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,7 @@
-var gulp = require('gulp'),
- $ = require('gulp-load-plugins')(),
- browserSync = require('browser-sync');
+var gulp = require('gulp'),
+ $ = require('gulp-load-plugins')(),
+ browserSync = require('browser-sync'),
+ del = require('del');
gulp.task('styles', function () {
return gulp.src('assets/styles/main.scss')
@@ -41,7 +42,7 @@ gulp.task('serve', ['clean', 'styles'], function () {
}
});
- gulp.watch('styles/**/*.scss', function (e) {
+ gulp.watch('assets/styles/**/*.scss', function (e) {
if (e.type === 'changed') {
gulp.start('styles');
}
@@ -49,7 +50,7 @@ gulp.task('serve', ['clean', 'styles'], function () {
});
gulp.task('deploy', ['styles', 'bundle'], function () {
- return gulp.src(['logos/*.svg', '.tmp/*.html', '.tmp/main.css', '*.md'])
+ return gulp.src(['logos/*.svg', '.tmp/*.html', '.tmp/main.css', 'assets/*.png', '*.md'])
.pipe($.ghPages({
force: true
}));
diff --git a/logos/angular-icon.svg b/logos/angular-icon.svg
new file mode 100644
index 0000000..721f222
--- /dev/null
+++ b/logos/angular-icon.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/logos/angular-logo.svg b/logos/angular-logo.svg
deleted file mode 100644
index 800aeed..0000000
--- a/logos/angular-logo.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
diff --git a/logos/angular.svg b/logos/angular.svg
index 721f222..800aeed 100644
--- a/logos/angular.svg
+++ b/logos/angular.svg
@@ -1,10 +1,30 @@
-