fix list text to indent relative to bullets - Fix font loading issue
David Kebler
parent
9fa4b1149e
commit
55c43e6fe4
|
|
@ -2,32 +2,32 @@
|
|||
<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- base font -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
|
||||
<!-- Configurable Fonts -->
|
||||
{{ with .Site.Params }}
|
||||
|
||||
{{ with .font }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ with .navbar.font }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ with .hero.font }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ with .hero.headline_font }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ with .sections.font }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ with .sections.font_headline }}
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family={{ . }}" rel="stylesheet" type="text/css">
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
21
readme.md
21
readme.md
|
|
@ -1,26 +1,23 @@
|
|||
# Customizable Mobile First Responsive Landing Page Theme and More
|
||||
# Customizable Mobile First Responsive Landing Page Theme and Starter -- Noob Friendly
|
||||
|
||||
### Generated by Hugo using flexbox layouts, easy customizable style settings and your content. Plus handy shortcodes for things like embedding videos, making buttons, custom styling and layout.
|
||||
### A [Hugo](http://gohugo.io) theme based on flexbox layouts with loads of customizable style settings and an easy way to add your content. The theme includes a library of handy shortcodes(plugins) for things like embedding other third party content (e.g. youtube, googlemap), making button links, custom styling and layout, and photo galleries. It's mobile first and responsive which means with no work on your part it will look and work great on a mobile device or tablet as well as a laptop or desktop.
|
||||
|
||||
### TL;DR
|
||||
|
||||
for the hugo expert go [here](https://dkebler.github.io/landing-page-guide/)
|
||||
For those who are Hugo experienced and know what they are doing and are able to “figure out” the details simply clone the [starter repo](https://dkebler.github.io/landingpage-starter). Edit the markdown files in the /sections directory and settings in config.toml. To start from scratch by all means just clone (or submodule) this theme into an existing hugo project’s themes folder. If you need to cheat and see ths guide it's [here](https://dkebler.github.io/landingpage-guide/#tldr)
|
||||
|
||||
### About
|
||||
|
||||
A **complete** theme in a repo that's especially useful for **noobs** who just want to generate a landing page with some customized styling options (colors, fonts, etc.) and one's content without knowing any html, javascript or css nor much about [Hugo](http://gohugo.io).....but...you do have to learn about writing markdown
|
||||
*Seriously*....A **complete** theme in a repo that's especially useful for **noobs** who just want to generate a landing page with some customized styling options (colors, fonts, etc.) and one's content without knowing any html, javascript or css nor much about [Hugo](http://gohugo.io)...but... You do have to learn about writing markdown and how to deploy your generated site to where others can see it.
|
||||
|
||||
* [learn markdown](http://www.markdowntutorial.com/)
|
||||
* [markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
**Motivation:** Plenty of themes out there for Hugo but few that would allow a noob to customize their page without knowing css and Go/HTML templates and fewer still with all the javascript necessary to be fully responsive.
|
||||
|
||||
**Motivation:** Plenty of themes out there for Hugo but few that would allow a noob to customize their page without knowing css and go templates and fewer still with all the javascript necessary to be fully responsive.
|
||||
**Goal:** Create a mobile first responsive flexbox based Hugo landing page theme including shortcodes that would allow a noob to generate a customized landing page by only knowing a little markdown. Provide a starter repo and guide to make it easy to create one's own landing page in a few minutes
|
||||
|
||||
**Goal:** Create a mobile first responsive flexbox based Hugo landing page theme including shortcodes that would allow a noob to generate a customized landing page by only knowing a little markdown. Provide a starter repo to make it easy to create one's own landing page in a few minutes
|
||||
**Further Goal:** Add automated (via nodejs) deployment to github pages, S3 bucket or any server using ssh. My other project [4S](https://github.com/dkebler/4S) can do this it just needs to be integrated. Also want to automate building photo galleries. Currently this can be done but manually with [Thumbsup](https://github.com/thumbsup/thumbsup). The generated code is made into a shortcode and the generated thumbs and images added to the project manually. Also add in code minification and optimazation for production/distribution builds
|
||||
|
||||
**Further Goal:** Add automated (via nodejs) deployment to github pages, S3 bucket or any server using ssh. My other project [4S](https://github.com/dkebler/4S) can do this it just needs to be intregated. Also want to automate building photo galleries. Currently this is done with [Thumbsup](https://github.com/thumbsup/thumbsup) and the generated code is made into a shortcode and the generated thumbs and images added to the project manually. Also add in code minification and optimazation for production/distribution builds
|
||||
|
||||
**Ultimiate Goal:** Put together a noob virtualbox VM with all the tools (e.g. atom, smartgit, hugo, node, etc.) and code installed and configured and ready to go. Fire up the VM and you're instantly productive.
|
||||
**Ultimiate Goal:** Put together a noob virtualbox VM with all the tools (e.g. atom, git, smartgit, hugo, node, etc.) and code installed and configured and ready to go. Fire up the VM and you're instantly productive. Might as well make a few tutorial videos on using the entire project.
|
||||
|
||||
## Getting Started
|
||||
|
||||
See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the [landing page guide](https://dkebler.github.io/landingpage-guide/) (generated by Hugo and this theme of course)
|
||||
See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the [landing page guide](https://dkebler.github.io/landingpage-guide/) (generated by Hugo and this theme of course). Once you have the tools you'll need installed you can begin editing a copy of the starter repository. Quickly you'll have a rough version of **your** landing page in just a few minutes.
|
||||
|
|
|
|||
|
|
@ -92,14 +92,10 @@ p {
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* elements */
|
||||
|
||||
/* using ::before for list numbers and icons */
|
||||
nav,
|
||||
ul {
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -158,7 +154,6 @@ hr {
|
|||
border-style: solid;
|
||||
}
|
||||
|
||||
|
||||
.flex-col-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -25,15 +25,39 @@
|
|||
padding-bottom: 0.7em;
|
||||
}
|
||||
|
||||
/* lists in section content */
|
||||
.section__content li {
|
||||
font-size: 1em;
|
||||
list-style-type: none;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
|
||||
.section__content ul,
|
||||
.section__content ol {
|
||||
margin-left: 2em;
|
||||
list-style-position: inside;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.section__content ul > li::before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f18e";
|
||||
padding-right: 0.5em;
|
||||
padding-left: 0;
|
||||
padding-right: 1.1em;
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
.section__content ul > li {
|
||||
text-indent: -1.2rem;
|
||||
.section__content ol {
|
||||
counter-reset: foo;
|
||||
}
|
||||
|
||||
.section__content ol > li {
|
||||
counter-increment: foo;
|
||||
}
|
||||
|
||||
.section__content ol > li::before {
|
||||
content: counter(foo) ".";
|
||||
padding-right: 0.8em;
|
||||
margin-left: -1.4em;
|
||||
}
|
||||
|
||||
.section--even {
|
||||
|
|
@ -122,8 +146,6 @@
|
|||
font-size: 3rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box--avatar > img,
|
||||
img.avatar {
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
|
||||
/* small tablets */
|
||||
@media only screen and (min-width: 600px) {
|
||||
/* undo indent of small screens */
|
||||
.section__content ul > li {
|
||||
text-indent: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 600px) and (max-device-width: 799px) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue