diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js index 65025208a..68ab8abcf 100644 --- a/src/docs/pages/index.js +++ b/src/docs/pages/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { graphql } from 'gatsby'; +import { graphql, Link } from 'gatsby'; import { connect } from 'react-redux'; import { pushNewPage, pushNewQuery } from '../state/app'; @@ -7,6 +7,7 @@ import Shell from '../components/Shell'; import Meta from '../components/Meta'; import Search from '../components/Search'; import SnippetCard from '../components/SnippetCard'; +import SimpleCard from '../components/SimpleCard'; // =================================================== // Home page (splash and search) @@ -59,14 +60,20 @@ const IndexPage = props => { defaultValue={props.searchQuery} /> {searchQuery.length === 0 ? ( -

- Start typing a keyword to see matching snippets. -

+ <> +

+ Start typing a keyword to see matching snippets or click to view the whole list. +

+
+ ) : searchResults.length === 0 ? ( -

- We couldn't find any results for the keyword{' '} - {searchQuery}. -

+ <> +

+ We couldn't find any results for the keyword{' '} + {searchQuery}. +

+
+ ) : ( <>

@@ -83,6 +90,23 @@ const IndexPage = props => { ))} )} + +

30 seconds provides high quality learning resources for beginner and advanced developers in the form of snippet collections in various programming languages, since its inception in 2017. Today, 30 seconds consists of a community of over 250 contributors and more than 10 maintainers, dedicated to creating the best short-form learning resources for software developers. Our goal is to lower the barrier of entry to software development and help the open source community grow, by helping people learn to code for free.

Read more...

+ + +
    + { + [ + { name: '30 seconds of CSS', url: 'https://css.30secondsofcode.org/' }, + { name: '30 seconds of Python', url: 'https://python.30secondsofcode.org/' }, + { name: '30 seconds of React', url: 'https://react.30secondsofcode.org/' }, + { name: '30 seconds of PHP', url: 'https://php.30secondsofcode.org/' }, + { name: '30 seconds of Interviews', url: 'https://30secondsofinterviews.org/' }, + { name: '30 seconds of Knowledge', url: 'https://30secondsofknowledge.org/' }, + ].map(v => (
  • {v.name}
  • )) + } +
+
); diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss index 7057cd837..a2a146ead 100644 --- a/src/docs/styles/_layout.scss +++ b/src/docs/styles/_layout.scss @@ -112,6 +112,21 @@ img.website-logo { font-size: 1rem; } } +.index-spacer { + height: 2.5vh; +} +.index-light-sub { + color: var(--fore-color-darker); + font-size: 1rem; + text-align: center; + transition: 0.3s ease all; + line-height: 2; + margin: 0.125rem 1.25rem 0px; + a, a:link, a:visited { + color: inherit; + font-weight: 600; + } +} // Page title .page-title {