Skip to content

Commit 6a2cea7

Browse files
ansballardcontra
authored andcommitted
Added the "What is Gulp" section, including .feature2 and highlightjs (gulpjs#43)
* Added the "What is Gulp" section, including .feature2 and highlightjs * Removed highlightjs, replaced plaintext code example with rendered html * Swapped example code for a jade example from docs/API.md * Added `gulpfile.js` to the "menubar" of the example code * Remove "what is gulp" copy, replace code example, fix tabs in main.css * Replaced cli.svg, sized up "whatisgulp", changed code example The logo at the top of the page now uses `.editor-window`, so it's a regular `<pre><code>` block. This means it will scale the same as the code example, and it will be copy-paste-able. Also added breakpoints to the code example, so it is fully visible at all screen widths without scrolling. Both the logo and code example scale from font-size: 14pt to 13pt on small screens since the code example was just a bit too big at 14pt. * Made a syntax error when merging into master. Will pull down and confirm everything works before commenting.
1 parent 1c43630 commit 6a2cea7

File tree

2 files changed

+124
-3
lines changed

2 files changed

+124
-3
lines changed

css/main.css

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,21 @@ body {
2828
display: none;
2929
}
3030
}
31+
@media only screen and (min-width: 500px) {
32+
.mobile-show {
33+
display: none;
34+
}
35+
}
3136
.logo-img {
3237
max-width: 100%;
3338
max-height: 100%;
3439
height: 40px;
3540
}
41+
div.logo-cli {
42+
height: 100%;
43+
color: #85FF00;
44+
background-color: #002b36;
45+
}
3646
.logo-img-lg {
3747
height: 255px;
3848
}
@@ -249,8 +259,8 @@ p.paragraph {
249259
width: 100%;
250260
}
251261
.container-lrg {
252-
display: flex;
253-
max-width: 1080px;
262+
display: flex;
263+
max-width: 1080px;
254264
}
255265
.container-sml {
256266
max-width: 700px;
@@ -308,6 +318,75 @@ p.paragraph {
308318
margin: 10px 0 0 0;
309319
}
310320
}
321+
.whatisgulp {
322+
padding: 90px 0;
323+
background-color: #3A3E64;
324+
color: rgba(255, 255, 255, 0.6);
325+
}
326+
.hljs-keyword {
327+
color: rgba(195,154,78,1);
328+
}
329+
.hljs-string {
330+
color: rgba(130 ,140,91,1);
331+
}
332+
.hljs-built_in {
333+
color: rgba(112,75,40,1);
334+
}
335+
.editor-prefixed:before {
336+
content: "$ ";
337+
}
338+
.editor-window {
339+
background-color: #141414;
340+
}
341+
.editor-window .editor-menubar {
342+
background-color: #E5E4E4;
343+
height: 50px;
344+
display: flex;
345+
align-items: center;
346+
border-radius: 5px 5px 0 0;
347+
}
348+
.editor-window code,
349+
.editor-window code span {
350+
font-family: Menlo, 'DejaVu Sans Mono', 'Lucida Console', monospace;
351+
font-weight: 600;
352+
font-size: 14pt;
353+
}
354+
@media (max-width: 420px) {
355+
.editor-window code,
356+
.editor-window code span {
357+
font-size: 13pt;
358+
}
359+
}
360+
.editor-window pre {
361+
overflow-x: auto;
362+
border-radius: 0 0 5px 5px;
363+
padding-left: 20px;
364+
height: 100%;
365+
}
366+
.editor-menubar > .editor-button {
367+
border-radius: 50%;
368+
height: 10px;
369+
width: 10px;
370+
margin: 0 2px;
371+
box-shadow: 0px 0px 10px 1px;
372+
}
373+
.editor-filename {
374+
color: #141414;
375+
font-family: Menlo, 'DejaVu Sans Mono', 'Lucida Console', monospace;
376+
font-size: 12pt;
377+
font-weight: 600;
378+
margin-left: 10px;
379+
}
380+
.editor-menubar .close {
381+
background-color: red;
382+
margin-left: 10px;
383+
}
384+
.editor-menubar .minimize {
385+
background-color: yellow;
386+
}
387+
.editor-menubar .maximize {
388+
background-color: green;
389+
}
311390
.socialproof {
312391
padding: 90px 0;
313392
}

index.html

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,13 @@ <h1 class="heading text-center">Automate and enhance your workflow</h1>
3333
<div class="computerwrapper">
3434
<div class="computer">
3535
<div class="mask">
36-
<img class="mask-img" src="img/cli.svg">
36+
<div class="editor-window logo-cli">
37+
<pre><code>
38+
<span class="editor-prefixed">npm install gulp-cli -g</span>
39+
<span class="editor-prefixed">npm install gulp -D</span>
40+
<span class="editor-prefixed">touch gulpfile.js</span>
41+
<span class="editor-prefixed">gulp --help</span></code></pre>
42+
</div>
3743
</div>
3844
</div>
3945
</div>
@@ -78,6 +84,42 @@ <h3 class="subheading center">Quality Ecosystem</h3>
7884
</div>
7985
</div>
8086

87+
<div class="whatisgulp">
88+
<div class="container-lrg">
89+
<div class="col-12">
90+
<div class="editor-window">
91+
<div class="editor-menubar">
92+
<span class="editor-button close"></span>
93+
<span class="editor-button minimize"></span>
94+
<span class="editor-button maximize"></span>
95+
<span class="editor-filename">gulpfile.js</span>
96+
</div>
97+
<pre><code class="javascript hljs">
98+
<span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);
99+
<span class="hljs-keyword">var</span> jade = <span class="mobile-show"><br /> </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-jade'</span>);
100+
<span class="hljs-keyword">var</span> less = <span class="mobile-show"><br /> </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-less'</span>);
101+
<span class="hljs-keyword">var</span> minifyCSS = <span class="mobile-show"><br /> </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-csso'</span>);
102+
103+
gulp.task(<span class="hljs-string">'html'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
104+
<span class="hljs-keyword">return</span> gulp.src(<span class="mobile-show"><br /> </span><span class="hljs-string">'client/templates/*.jade'</span><span class="mobile-show"><br /> </span>)
105+
.pipe(jade())
106+
.pipe(gulp.dest(<span class="mobile-show"><br /> </span><span class="hljs-string">'build/html'</span><span class="mobile-show"><br /> </span>))
107+
});
108+
109+
gulp.task(<span class="hljs-string">'css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
110+
<span class="hljs-keyword">return</span> gulp.src(<span class="mobile-show"><br /> </span><span class="hljs-string">'client/templates/*.less'</span><span class="mobile-show"><br /> </span>)
111+
.pipe(less())
112+
.pipe(minifyCSS())
113+
.pipe(gulp.dest(<span class="mobile-show"><br /> </span><span class="hljs-string">'build/css'</span><span class="mobile-show"><br /> </span>))
114+
});
115+
116+
gulp.task(<span class="hljs-string">'default'</span>, <span class="mobile-show"><br /> </span>[ <span class="hljs-string">'html'</span>, <span class="hljs-string">'css'</span> ]<span class="mobile-show"><br /></span>);
117+
</code></pre>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
81123
<div class="socialproof">
82124
<div class="container-sml">
83125
<div class="flex text-center">

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy