**Fresh** is a theme for the [Hugo](https://gohugo.io) static site generator adapted from the gorgeous, [Bulma](https://bulma.io)-based theme of the same name from [CSS Ninja](https://cssninja.io/product/fresh). You can find a live demo of the original theme [here](https://fresh.cssninja.io/) and a live demo of the Hugo theme [here](https://hugo-fresh.vercel.app).
================================================
FILE: assets/fresh/core.scss
================================================
/* ==========================================================================
Main SCSS file / Fresh
========================================================================== */
//Imports
@import 'partials/colors';
@import 'partials/navbar';
@import 'partials/dropdowns';
@import 'partials/sections';
@import 'partials/hero';
@import 'partials/footer';
@import 'partials/buttons';
@import 'partials/cards';
@import 'partials/forms';
@import 'partials/animations';
@import 'partials/sidebar';
@import 'partials/testimonials';
@import 'partials/responsive';
@import 'partials/utils';
================================================
FILE: assets/fresh/partials/_animations.scss
================================================
/* ==========================================================================
General Keyframes animations
========================================================================== */
.animated {
animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
}
//Delays
.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}
// FADE IN LEFT
@keyframes fadeInLeft {
from {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes fadeInLeft {
from {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.preFadeInLeft {
opacity: 0;
}
.fadeInLeft {
opacity: 0;
animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
}
// FADE IN UP
@keyframes fadeInUp {
from {
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes fadeInUp {
from {
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.preFadeInUp {
opacity: 0;
}
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
//Gelatine
.gelatine {
animation: gelatine 0.6s;
animation-duration: 0.6s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
================================================
FILE: assets/fresh/partials/_buttons.scss
================================================
/* ==========================================================================
Classes to change the feel of bulma buttons
========================================================================== */
// CTA buttons
.button {
cursor: pointer;
transition: all 0.5s;
&.cta {
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
font-weight: 600;
padding: 26px 40px 26px 40px;
}
&.is-clear {
line-height: 0 !important;
}
&.rounded {
border-radius: 500px;
}
&.raised:hover {
box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
opacity: 0.8;
}
&.btn-outlined {
background: transparent;
}
&.signup-button {
font-size: .9rem;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
padding: 24px 26px;
width: 130px;
}
}
.button {
&.primary-btn {
outline: none;
border-color: $primary;
background-color: $primary;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
&.raised:hover {
box-shadow: 0 14px 26px -12px rgba(79, 193, 234, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(79, 193, 234, 0.2) !important;
opacity: 0.8;
}
&.btn-outlined {
border-color: $primary;
color: $primary;
background-color: transparent;
&:hover {
color: $white;
background-color: $primary;
}
}
}
&.secondary-btn {
outline: none;
border-color: $secondary;
background-color: $secondary;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
&.raised:hover {
box-shadow: 0 14px 26px -12px rgba(243, 146, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(243, 146, 0, 0.2) !important;
opacity: 0.8;
}
&.btn-outlined {
border-color: $secondary;
color: $secondary;
background-color: transparent;
&:hover {
color: $white;
background-color: $secondary;
}
}
}
&.button.accent-btn {
outline: none;
border-color: $accent;
background-color: $accent;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
&.raised:hover {
box-shadow: 0 14px 26px -12px rgba(104, 187, 136, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(104, 187, 136, 0.2) !important;
opacity: 0.8;
}
&.btn-outlined {
border-color: $accent;
color: $accent;
background-color: transparent;
&:hover {
color: $white;
background-color: $accent;
}
}
}
}
================================================
FILE: assets/fresh/partials/_cards.scss
================================================
/*! _cards.scss v1.0.0 | Commercial License | built on top of bulma.io/Bulmax */
/* ==========================================================================
Cards and Card content styles
========================================================================== */
// Feature Card
.feature-card {
width: 300px;
height: 320px;
background-color: #fff;
border-radius: 3px;
margin: 0 auto;
.card-title h4 {
font-family: 'Open Sans', sans-serif;
padding-top: 25px;
font-size: 1.2rem;
font-weight: 600;
color: $blue-grey;
}
.card-icon img {
height: 120px;
margin-top: 20px;
}
.card-text {
padding: 0 40px;
p {
color: $muted-grey;
}
}
.card-action {
margin-top: 10px;
}
&.is-bordered {
border: 1px solid $fade-grey;
}
}
// Flex Card
.flex-card {
position: relative;
background-color: #fff;
border: 0;
border-radius: 0.1875rem;
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 20px;
&.raised {
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}
.tabs {
padding: 15px 0.7rem;
}
.navtab-content {
min-height: 190px;
p {
padding: 0 0.8rem 20px;
}
}
.navigation-tabs {
&.outlined-pills .tabs.tabs-header {
&.primary {
background-color: $primary;
}
&.secondary {
background-color: $secondary;
}
&.accent {
background-color: $accent;
}
ul li a {
color: $grey-white;
}
ul li.is-active a {
color: $white;
border: 1px solid $white;
border-bottom-color: $white !important;
}
}
}
}
================================================
FILE: assets/fresh/partials/_colors.scss
================================================
/* ==========================================================================
Color variables
========================================================================== */
$white: #fff;
$smoke-white: #fcfcfc;
$grey-white: #f2f2f2;
$primary: #4FC1EA;
$secondary: #F39200;
$accent: #00efb7;
$fade-grey: #ededed;
$light-grey: #EFF4F7;
$title-grey: #A9ABAC;
$blue-grey: #444F60;
$muted-grey: #999;
$light-blue-grey: #98a9c3;
$medium-grey: #66676b;
$basaltic-grey: #878787;
$purple: #7F00FF;
$mint: #11FFBD;
$bloody: #FC354C;
$pinky: #ff00cc;
$frost: #004e92;
$placeholder: #cecece;
$dark-grey: #344258;
$border-grey: #ccc;
$muted-grey: #999;
$section-grey: #fbfbfb;
================================================
FILE: assets/fresh/partials/_dropdowns.scss
================================================
/* ==========================================================================
Dropdown styles
========================================================================== */
// Hover Dropdowns
div.nav-item.is-drop a {
padding-right: 7px;
}
div.nav-item.is-drop:hover .dropContain .dropOut {
opacity: 1;
}
div.nav-item.is-drop:hover, div.nav-item.is-drop:hover a, {
border-bottom: 1px solid transparent !important;
color: $secondary;
}
div.nav-item.is-drop:hover .dropContain {
top: 65px;
animation: fadeInUp 0.27s ease-out;
}
span.drop-caret {
position: relative;
top: 5px;
}
div.nav-item.is-drop {
position: relative;
.dropContain {
width: 220px;
position: absolute;
z-index: 3;
left: 50%;
margin-left: -110px; /* half of width */
top: -400px;
.dropOut {
width: 220px;
background: $white;
float: left;
position: relative;
margin-top: 15px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid $white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropOut ul li {
text-align: left;
float: left;
width: 200px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
&:hover {
background: $light-grey;
cursor: pointer;
}
}
.dropOut ul {
float: left;
padding: 10px 0;
}
}
}
================================================
FILE: assets/fresh/partials/_footer.scss
================================================
/* ==========================================================================
Fresh Footer
========================================================================== */
footer.footer-dark {
background: $blue-grey;
color: $white;
.columns {
margin-top: 35px;
}
.footer-logo {
img {
height: 40px;
}
}
.footer-column {
.footer-header h3 {
font-weight:500;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
ul.link-list {
line-height: 40px;
font-size: 1.1rem;
a {
color: $light-blue-grey;
font-weight: 400;
transition: all 0.5s;
}
:hover {
color: $smoke-white;
}
}
.level-item .icon {
color: $secondary;
transition: all 0.5s;
:hover {
color: $smoke-white;
}
}
}
}
================================================
FILE: assets/fresh/partials/_forms.scss
================================================
/* ==========================================================================
Inputs styles
========================================================================== */
input.input {
color: $basaltic-grey;
box-shadow: none !important;
transition: all 0.8s;
padding-bottom: 3px;
&.is-small {
padding-bottom: 2px;
padding-left: 10px;
}
&.is-medium {
padding-bottom: 5px;
}
&.is-large {
padding-bottom: 7px;
}
&:focus, &:active {
border-color: $light-grey;
}
&.rounded {
border-radius: 100px;
}
&.is-primary-focus:focus {
border-color: $primary;
~ span.icon i {
color: $primary;
}
}
&.is-secondary-focus:focus {
border-color: $secondary;
~ span.icon i {
color: $secondary;
}
}
&.is-accent-focus:focus {
border-color: $accent;
~ span.icon i {
color: $accent;
}
}
&.is-bloody-focus:focus {
border-color: $bloody;
~ span.icon i {
color: $bloody;
}
}
}
.form-footer {
width: 100%;
}
================================================
FILE: assets/fresh/partials/_hero.scss
================================================
/* ==========================================================================
Hero styles
========================================================================== */
.hero-body {
padding-top: 6rem;
padding-bottom: 6rem;
.title, .subtitle {
font-family: 'Open Sans', sans-serif;
}
.title {
&.is-bold {
font-weight: 700;
}
}
.subtitle {
&.is-muted {
color: $muted-grey;
}
}
}
.hero-foot {
img.partner-logo {
height: 70px;
}
}
================================================
FILE: assets/fresh/partials/_navbar.scss
================================================
/* ==========================================================================
Navbar
========================================================================== */
//Navbar
.navbar.is-fresh {
position: relative;
min-height: 3.8rem;
transition: all .3s;
z-index: 99;
.container {
min-height: 4rem;
}
&.no-shadow {
box-shadow: none !important;
}
//Responsive menu icon
.navbar-burger {
width: 4rem;
height: 4rem;
}
//Brand
.navbar-brand {
min-height: 4rem;
img {
max-height: 36px !important;
height: 36px;
}
//Removing navbar item default hover behaviour
&:hover {
.navbar-item {
background: transparent !important;
}
}
}
.navbar-end {
align-items: center;
}
//Navbar items
.navbar-item {
color: $muted-grey;
&.is-secondary {
&:hover {
color: $secondary !important;
}
}
&.has-dropdown {
padding: 10px 0;
.navbar-link {
color: $muted-grey;
&:after {
top: 55%;
height: 0.5em;
width: 0.5em;
border-width: 2px;
border-color: $muted-grey;
}
}
.navbar-dropdown {
top: 3.4rem;
min-width: 220px;
margin-top: 4px;
border-top-color: $secondary;
.navbar-item {
padding: 10px 20px;
}
}
&:hover {
.navbar-link {
color: $secondary;
&:after {
border-color: $secondary;
}
}
}
}
.signup {
display: block;
line-height: 0;
font-size: .9rem !important;
}
}
//Fixed navbar modifier
&.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 4rem !important;
background: $white;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
a {
color: $blue-grey;
&:hover {
color: $primary;
}
}
}
}
//Cloned fixed navbar
#navbar-clone {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: $white;
transform: translateY(-100%);
z-index: 100;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
&.is-active {
transform: translateY(0);
}
}
================================================
FILE: assets/fresh/partials/_responsive.scss
================================================
/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 767px) {
.landing-caption {
text-align: center;
}
.navbar-menu {
.is-static {
position: absolute;
width: 100%;
}
.is-fixed {
position: fixed;
width: 100%;
}
.navbar-item {
text-align: center !important;
.signup-button {
width: 100% !important;
}
}
.navbar-link {
padding: 10px 20px !important;
}
}
.title.section-title {
font-size: 2rem !important;
}
.level-left.level-social {
display: flex;
justify-content: flex-start;
}
.pushed-image {
margin-top: 0 !important;
}
.testimonial {
margin: 0 auto;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.landing-caption {
text-align: center;
}
.navbar-menu {
.is-static {
position: absolute;
width: 100%;
}
.is-fixed {
position: fixed;
width: 100%;
}
.navbar-item {
text-align: center !important;
.signup-button {
width: 100% !important;
}
}
.navbar-link {
padding: 10px 20px !important;
}
}
.pushed-image {
margin-top: 0 !important;
}
.testimonial {
margin: 0 auto;
}
.is-centered-tablet-portrait {
text-align: center !important;
.divider {
margin: 0 auto !important;
}
}
}
================================================
FILE: assets/fresh/partials/_sections.scss
================================================
/* ==========================================================================
Section Styles
========================================================================== */
//Sections
.section {
&.section-light-grey {
background-color: $light-grey;
}
&.section-feature-grey {
background-color: $section-grey;
}
&.section-secondary {
background-color: $secondary;
}
&.section-half {
height: 75vh !important;
}
.title, .subtitle {
font-family: 'Open Sans', sans-serif;
}
.subtitle {
&.is-muted {
color: $muted-grey;
}
}
}
//Titles
.title-wrapper {
max-width: 500px;
margin: 0 auto;
.title, .subtitle {
font-family: 'Open Sans', sans-serif;
}
.subtitle {
&.is-muted {
color: $muted-grey;
}
}
}
//Divider
.divider {
height: 3px;
border-radius: 50px;
background: $secondary;
width: 60px;
&.is-centered {
margin: 0 auto;
}
}
//Wrapper
.content-wrapper {
padding: 60px 0;
}
//Pulled image
img.pushed-image {
margin-top: -5vh;
}
//Icon box
.media.icon-box {
border-top: none !important;
.media-content .content p {
span {
display: block;
}
.icon-box-title {
color: $blue-grey;
font-size: 1.2rem;
font-weight: 600;
}
.icon-box-text {
color: $title-grey;
font-size: 1rem;
font-weight: 400;
}
}
}
================================================
FILE: assets/fresh/partials/_sidebar.scss
================================================
/* ==========================================================================
Sidebar Styles
========================================================================== */
//Sidebar animated icon trigger
.menu-icon-wrapper {
position: relative;
left: 0;
top: 0;
//margin: -12px 0px 0px -12px;
width: 34px;
height: 34px;
pointer-events: none;
transition: 0.1s;
svg {
position: absolute;
top: -18px;
left: -18px;
transform: scale(0.07);
transform-origin: 0 0;
path {
stroke: $secondary;
stroke-width: 40px;
stroke-linecap: round;
stroke-linejoin: round;
fill: transparent;
transition: stroke-dasharray 0.5s;
&.path1 {
stroke-dashoffset: 5803.15px;
stroke-dasharray: 2901.57px, 2981.57px, 240px;
}
&.path2 {
stroke-dashoffset: 800px;
stroke-dasharray: 400px, 480px, 240px;
}
&.path3 {
stroke-dashoffset: 6993.11px;
stroke-dasharray: 3496.56px, 3576.56px, 240px;
}
}
}
&.open {
svg {
path {
&.path1 {
stroke-dasharray: 2901.57px, 5258.15px, 240px;
}
&.path2 {
stroke-dasharray: 400px, 600px, 0px;
}
&.path3 {
stroke-dasharray: 3496.56px, 6448.11px, 240px;
}
}
}
}
.menu-icon-trigger {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
pointer-events: auto;
background: none;
border: none;
margin: 0;
padding: 0;
}
}
//Sidebar
.sidebar {
background: $dark-grey;
width: 280px;
height: 100%;
position: fixed;
top: 0;
left: 0;
transform: translateX(-281px);
transition: all .3s;
z-index: 10000;
overflow-y: auto;
&.is-active {
transform: translateX(0);
}
.sidebar-header {
height: 4.25rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lighten($dark-grey, 5%);
padding: 0 20px;
img {
height: 32px;
}
a {
width: 24px;
height: 24px;
}
svg {
stroke: $white;
transform: rotate(0);
transition: all .3s;
cursor: pointer;
&:hover {
stroke: $secondary;
transform: rotate(180deg);
}
}
}
.inner {
position: relative;
.sidebar-menu {
margin: 0;
padding: 0;
max-width: 400px;
list-style: none;
list-style-type: none;
font-family: 'Open Sans', sans-serif !important;
li {
a {
padding: 20px 25px;
display: block;
text-decoration: none;
color: $white;
&:hover {
padding: 20px 25px;
display: block;
text-decoration: none;
color: $white;
}
}
a span {
margin-right: 20px;
color: $white;
}
&.have-children {
ul {
padding: 0px;
}
li {
a {
background-color: darken($dark-grey, 5%);
padding-left: 62px;
border-bottom: 1px solid darken($dark-grey, 2%);
font-size: .8rem;
&:hover {
color: $primary;
padding-left: 62px;
}
}
}
span::after {
position: absolute;
top: 27px;
right: 30px;
content: "\f054";
color: $white;
transition: all .5s;
font-weight: 200 !important;
font-size: .8rem;
}
}
}
}
li.have-children, li {
position: relative;
}
li.have-children.active > a, li.have-children.active > a span, li.have-children.active > a span:after {
color: $secondary;
}
li.active.have-children span::after {
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidebar-menu .have-children > ul {
display: none;
}
}
}
================================================
FILE: assets/fresh/partials/_testimonials.scss
================================================
/* ==========================================================================
Testimonials Styles
========================================================================== */
.testimonial {
position: relative;
overflow: hidden;
margin: 10px auto;
min-width: 220px;
max-width: 310px;
width: 100%;
color: #333;
text-align: left;
box-shadow: none !important;
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
height: 80px;
width: 80px;
border-radius: 50%;
margin-right: 5px;
display: block;
z-index: 1;
position: absolute;
right: 60%;
}
blockquote {
margin: 0;
display: block;
border-radius: 8px;
position: relative;
background-color: $smoke-white;
padding: 30px 50px 65px 50px;
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 -40px;
line-height: 1.6em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
blockquote:before, blockquote:after {
font-family: 'FontAwesome';
content: "\f10d";
position: absolute;
font-size: 20px;
opacity: 0.3;
font-style: normal;
}
blockquote:before {
top: 35px;
left: 20px;
}
blockquote:after {
content: "\f10e";
right: 20px;
bottom: 35px;
}
.author {
margin: 0;
height: 80px;
display: block;
text-align: left;
color: $white;
padding: 0 35px;
position: relative;
z-index: 0;
h5, span {
left: 50%;
position: absolute;
opacity: 0.8;
padding: 3px 5px;
}
h5 {
text-transform: capitalize;
bottom: 60%;
margin: 0;
font-weight: 600;
font-size: 1.2rem;
color: $blue-grey;
}
span {
font-size: 0.8em;
color: $white;
top: 50%;
}
}
}
================================================
FILE: assets/fresh/partials/_utils.scss
================================================
// Resets
section:focus {
outline: none !important;
}
button {
&:focus, &:active {
outline: none;
}
}
// Preloader
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $white;
z-index: 99;
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
// centers the loading animation horizontally on the screen
top: 50%;
// centers the loading animation vertically on the screen
background-image: url(../images/loaders/rings.svg);
background-size: 80px 80px;
// path to loading animation
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
// width and height divided by two
}
// Back to top button
#backtotop {
position: fixed;
right: 0;
opacity: 0;
visibility: hidden;
bottom: 25px;
margin: 0 25px 0 0;
z-index: 9999;
transition: 0.35s;
transform: scale(0.7);
transition: all 0.5s;
}
#backtotop.visible {
opacity: 1;
visibility: visible;
transform: scale(1);
}
#backtotop.visible a:hover {
outline: none;
opacity: 0.9;
background: $secondary;
}
#backtotop a {
outline: none;
text-decoration: none;
border: 0 none;
display: block;
width: 46px;
height: 46px;
background-color: $medium-grey;
opacity: 1;
transition: all 0.3s;
border-radius: 50%;
text-align: center;
font-size: 26px
}
body #backtotop a {
outline: none;
color: #fff;
}
#backtotop a:after {
outline: none;
content: "\f106";
font-family: "FontAwesome";
position: relative;
display: block;
top: 50%;
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
}
//Helpers
.is-disabled {
pointer-events: none;
opacity: 0.4;
cursor: default !important;
}
.is-hidden {
display: none !important;
}
.stuck {
position:fixed !important;
top: 0 !important;
z-index: 2 !important;
}
.light-text {
color: $white !important;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-60 {
margin-bottom: 60px;
}
.mt-20 {
margin-top: 20px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.mt-60 {
margin-top: 60px;
}
.ml-30 {
margin-left: 30px;
}
.huge-pb {
padding-bottom: 100px;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-40 {
padding-bottom: 40px !important;
}
//Input placeholders
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $placeholder;
}
::-moz-placeholder { /* Firefox 19+ */
color: $placeholder;
}
:-ms-input-placeholder { /* IE 10+ */
color: $placeholder;
}
:-moz-placeholder { /* Firefox 18- */
color: $placeholder;
}
================================================
FILE: assets/style.sass
================================================
@import "bulma/bulma"
@import "fresh/core"
================================================
FILE: config.yaml
================================================
# Dependency 'bulma' is brought in as module
# and mount points are declared
module:
imports:
- path: github.com/jgthms/bulma
mounts:
- source: bulma.sass
target: assets/bulma/bulma.sass
- source: bulma-rtl.sass
target: assets/bulma/bulma-rtl.sass
- source: sass
target: assets/bulma/sass
- source: sass/base
target: assets/bulma/sass/base
- source: sass/components
target: assets/bulma/sass/components
- source: sass/elements
target: assets/bulma/sass/elements
- source: sass/form
target: assets/bulma/sass/form
- source: sass/grid
target: assets/bulma/sass/grid
- source: sass/helpers
target: assets/bulma/sass/helpers
- source: sass/layout
target: assets/bulma/sass/layout
- source: sass/utilities
target: assets/bulma/sass/utilities
================================================
FILE: docs/content/deepmodifications.md
================================================
---
title: Deep modification
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Deep modifications
In case you want to make deep modifications of this theme (like changing the colors) you have to
add the theme as an git submodule rather than as a [hugo module](../module).
To create a new site using this theme as hugo module:
```bash
# Create site and cd into it
hugo new site my-site && cd my-site
# Make a git project out of it
git init
# Add this theme as a git submodule
git submodule add https://github.com/StefMa/hugo-fresh.git themes/hugo-fresh
# Add the dependency to the css files as a git submodule and checkout version 0.9.4
git submodule add https://github.com/jgthms/bulma.git themes/bulma
cd themes/bulma && git checkout 0.9.4
# Go back from themes/bulma dir
cd ../..
# Remove the default config
rm config.toml
# Fetch the example config
curl -O https://raw.githubusercontent.com/StefMa/hugo-fresh/master/exampleSite/hugo.yaml
# Configure the theme as git submodule
# Remove the 'module' section in the `hugo.yml` and add
# theme: 'hugo-fresh' (See also https://github.com/StefMa/hugo-fresh/issues/175#issuecomment-1863358700)
# Change the path of the bulma css files
# Replace `github.com/jgthms/bulma` with `bulma` in
# my-site/themes/hugo-fresh/config.yml
# Run the site locally
hugo server
# Open the site in your browser
open http://localhost:1313
```
Now you're able to change anything in the theme to your needs.
To change the colors for example, open
`my-site/themes/hugo-fresh/assets/fresh/partials/_colors.scss`
and customizes to your needs.
```diff
- $primary: #4FC1E;
- $secondary: #F39200;
+ $primary: #b85ca2;
+ $secondary: #2ee62e;
```
================================================
FILE: docs/content/getstarted.md
================================================
---
title: Get Started
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## The Fresh theme for Hugo
**Fresh** is a theme for the [Hugo](https://gohugo.io) static site generator adapted from the gorgeous, [Bulma](https://bulma.io)-based theme of the same name from [CSS Ninja](https://cssninja.io/product/fresh). You can find a live demo of the original theme [here](https://fresh.cssninja.io) and a live demo of the Hugo theme [here](https://hugo-fresh.now.sh/).
## Getting started
To create a new site using this theme as hugo module:
Make sure `go` > 1.13 is installed on your system. [Download](https://go.dev/dl/) and install if needed.
```bash
# Create site and cd into it
hugo new site my-site && cd my-site
# Transform your hugo site to an module
hugo mod init YOUR_MODULE_NAME
# Remove the default config
rm hugo.toml
# Fetch the example config
curl -O https://raw.githubusercontent.com/StefMa/hugo-fresh/master/exampleSite/hugo.yaml
# Run the site locally
hugo server
# Open the site in your browser
open http://localhost:1313
```
## Customizing your page
Checkout the [Landing page docs](../landingpage) to customize the landing page.
There is also the option to create single pages. Check the [Single page docs](../singlepage) for more.
Have some troubles? Check our [troubleshooting](../troubleshooting) guide.
Interested in changed colors? Checkout the [Deep modifications](../deepmodifications) guide.
================================================
FILE: docs/content/landingpage.md
================================================
---
title: Landing page
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Customize the landing page
There's a wide variety of customizations that you can make to your Hugo Fresh landing page by modifying the `hugo.yaml` file that you downloaded.
> **Note**: There is always an up-to-date config file at [`exampleSite/hugo.yaml`](https://github.com/StefMa/hugo-fresh/blob/master/exampleSite/hugo.yaml) that contains all possible configurations.
Please make sure you check them out as well.
{{< title4 preloader >}}
Preloader ensures images are loaded before displaying to the user.
If you don't want it, set it to `false`.
```yaml
preloader: false
```
{{< title4 navbarlogo >}}
Define the logo of the navigation bar in the upper left corner.
Code
```yaml
navbarlogo:
image: logos/fresh.svg # Logo (from static/images/logos/)
link: /
```
{{< title4 font >}}
Set the font of the site.
Code
```yaml
font:
name: "Open Sans"
sizes: [400,600]
```
{{< title4 hero >}}
The "main" page which you see when you open the website.
Code
```yaml
hero:
title: Manage. Deploy.
subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry
buttontext: Get started
buttonlink: "#"
image: illustrations/worker.svg
# Footer logos (from static/images/logos/clients/*.svg)
# urls are optional
clientlogos:
- logo: systek
url: https://google.com
- logo: tribe
url: https://stefma.github.io/hugo-fresh/
- logo: kromo
url: https://github.com/StefMa/hugo-fresh
- logo: infinite
url: https://hugo-fresh.vercel.app/
- logo: gutwork
url: https://bulma.io/
```
{{< title4 navbar >}}
The navigation bar which is at the top of the site.
For a dropdown, add a "sublinks" list.
Code
```yaml
navbar:
- title: Features
url: /
- title: Pricing
url: /
- title: Dropdown
sublinks:
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Log in
url: /
- title: Sign up
url: /
button: true
```
{{< title4 sidebar >}}
The sidebar is an optional parameter where you can place even more navigation items.
Code
```yaml
sidebar:
# Logo (from /images/logos/___.svg)
logo: fresh-square
sections:
- title: User
icon: user
links:
- text: Profile
url: /
- text: Account
url: /
- text: Settings
url: /
- title: Messages
icon: envelope
links:
- text: Inbox
url: /
- text: Compose
url: /
- title: Images
icon: image
links:
- text: Library
url: /
- text: Upload
url: /
- title: Settings
icon: cog
links:
- text: User settings
url: /
- text: App settings
url: /
```
{{< title4 section1 >}}
Describes the second "page" which you will see when you scroll down. Currently it will have **always** three `titles`.
Code
```yaml
section1:
title: Great power comes
subtitle: with great responsibility
tiles:
- title: App builder
icon: mouse-globe
text: This is some explanatory text that is on two rows
url: /
buttonText: Free trial
- title: Cloud integration
icon: laptop-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
- title: Add-ons & plugins
icon: plug-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
```
{{< title4 section2 >}}
Shows information why someone should use this product.
Code
```yaml
section2:
title: You're here because you want the best
subtitle: And we know it
features:
- title: Powerful and unified interface
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
# Icon (from /images/illustrations/icons/___.svg)
icon: laptop-globe
- title: Cross-device synchronisation
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: doc-sync
- title: Nomad system
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: mobile-feed
```
{{< title4 section3 >}}
Display a bright image of your product.
Code
```yaml
section3:
title: One platform
subtitle: To rule them all
image: illustrations/mockups/app-mockup.png
buttonText: Get started
buttonLink: "#"
```
{{< title4 section4 >}}
What clients says about us.
Code
```yaml
section4:
title: Our Clients love us!
subtitle: Lorem ipsum sit dolor amet is a dummy text used by typography industry
clients:
- name: Irma Walters
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Accountant
img: 1 # From (static/images/illustrations/faces)
- name: John Bradley
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Financial Analyst
img: 2
- name: Gary Blackman
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: HR Manager
img: 3
```
{{< title4 section5 >}}
Write us.
Code
```yaml
section5:
title: Drop us a line or two
subtitle: We'd love to hear from you
buttonText: Send Message
action: https://formspree.io/f/{ID}
method: POST
```
{{< title4 footer >}}
The footer of the site.
Code
```yaml
footer:
# Logo (from /static/images/logos/___)
logo: fresh-white-alt.svg
# Social media links (GitHub, Twitter, etc.). All are optional.
socialmedia:
- link: https://github.com/StefMa/hugo-fresh
# Icons are from Font Awesome
icon: github
- link: https://dribbble.com/#
icon: dribbble
- link: https://facebook.com/#
icon: facebook
- link: https://twitter.com/lucperkins
icon: twitter
- link: https://bitbucket.org/#
icon: bitbucket
bulmalogo: true
quicklinks:
column1:
title: "Product"
links:
- text: Discover features
link: /
- text: Why choose our product?
link: /
- text: Compare features
link: /
- text: Our roadmap
link: /
- text: AGB
link: /agb
column2:
title: "Docs"
links:
- text: Get started
link: /
- text: User guides
link: /
- text: Admin guide
link: /
- text: Developers
link: /
column3:
title: "Blog"
links:
- text: Latest news
link: /blog/first
- text: Tech articles
link: /blog/second
```
================================================
FILE: docs/content/markdown-syntax.md
================================================
---
title: Markdown Syntax Guide
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
## Headings
The following HTML `
`—`
` elements represent six levels of section headings. `
` is the highest section level while `
` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.
#### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.
>
> — Rob Pike[^1]
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
| Name | Age |
| ----- | --- |
| Bob | 27 |
| Alice | 23 |
#### Inline Markdown within tables
| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
## Code Blocks
#### Inline Code
`This is Inline Code`
#### Only `pre`
This is pre text
#### Code block with backticks
```
Example HTML5 Document
Test
```
#### Code block with backticks and language specified
```html {linenos=true}
Example HTML5 Document
Test
```
#### Code block indented with four spaces
Example HTML5 Document
Test
#### Code block with Hugo's internal highlight shortcode
{{< highlight html >}}
Example HTML5 Document
Test
{{< /highlight >}}
#### Gist
{{< gist spf13 7896402 >}}
## List Types
#### Ordered List
1. First item
2. Second item
3. Third item
#### Unordered List
- List item
- Another item
- And another item
#### Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
## Other Elements — abbr, sub, sup, kbd, mark
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
================================================
FILE: docs/content/misc.md
================================================
---
title: Misc
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Favicon
You can replace the default favicon by adding your own to `static/images/favicon.png`.
As for now, only pngs are possible.
================================================
FILE: docs/content/module.md
================================================
---
title: Hugo module
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Module
The theme is an [hugo modules](https://gohugo.io/hugo-modules/)-theme.
It is not recommended to add this theme as a git submodule.
However, it is still possible. See the [Deep modifications](../deepmodifications) guide for me.
Using the theme as a hugo module provides several benefits for the development of this theme.
### Versioning / stable theme
With modules it is possible to point to any git hash you like. Nevertheless, it is strongly recommended to only use a versionised version of this theme. Checkout the [GitHub Release page](https://github.com/StefMa/hugo-fresh/releases/) for the latest version.
You can run the follwing command to update/change the theme version:
```
hugo mod get -u github.com/StefMa/hugo-fresh@v[SEMVER_VERSION]
```
There can be als an `hash` or an `branch` name after the `@`-sign.
### Usage
1. To use the theme you first have to transform your own hugo site to an module. Doing this is possible with the following command:
```
hugo mod init MODULE_NAME
```
A typical module name follows the following convention: `domain-name.tld/something`.
2. After that you can declare the hugo module in your config file (yaml example):
```yaml
module:
imports:
path: github.com/StefMa/hugo-fresh
```
================================================
FILE: docs/content/singlepage.md
================================================
---
title: Single page
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Creating a single page
Single pages displays a single unit of information and are more or less independent from the landing page above.
You can create single pages in the `content` directory (even sub-dirs are possible).
If you'd like to have the footer displayed on your single page include `include_footer: true` in your front matter.
Code
```yaml
---
title: AGB
sidebar: true # or false to display the sidebar
sidebarlogo: fresh-white-alt # From (static/images/logo/)
include_footer: true # or false to display the footer
---
```
================================================
FILE: docs/content/troubleshooting.md
================================================
---
title: Troubleshooting
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Hugo extended
If you see `error: failed to transform resource: TOCSS: failed to transform "style.sass"` when attempting to run your `hugo server`, make sure you have the extended version of Hugo installed!
================================================
FILE: docs/go.mod
================================================
module github.com/stefma/hugo-fresh/docs
go 1.15
replace github.com/StefMa/hugo-fresh => ../
require github.com/StefMa/hugo-fresh v1.0.0 // indirect
================================================
FILE: docs/go.sum
================================================
github.com/jgthms/bulma v0.0.0-20220508134905-3e00a8e6d0d0/go.mod h1:89FLBKXYFKfOKAoDeUT26V0pHGwzr205cMXAEqtAVOI=
================================================
FILE: docs/hugo.yml
================================================
baseURL: "https://stefma.github.io/hugo-fresh"
languageCode: "en-us"
title: "Hugo Fresh documentation"
module:
imports:
path: github.com/StefMa/hugo-fresh
params:
navbarlogo:
image: logos/fresh.svg
link: /hugo-fresh
hero:
title: hugo fresh documentation
subtitle: Probably the best hugo theme out there!
buttontext: Go to docs
buttonlink: getstarted
image: illustrations/worker.svg
navbar:
- title: GitHub
url: https://github.com/StefMa/hugo-fresh
button: true
markup:
goldmark:
renderer:
unsafe: true # Allows you to write raw html in your md files
================================================
FILE: exampleSite/.gitignore
================================================
.hugo_build.lock
public
resources
================================================
FILE: exampleSite/.htmltest.yml
================================================
DirectoryPath: public
================================================
FILE: exampleSite/content/agb.md
================================================
---
title: AGB
include_footer: true
sidebar: false
---
{{% title3 "§1 Lorem" %}}
Bacon ipsum dolor amet pig pork hamburger tenderloin burgdoggen spare ribs bacon pancetta pork loin tail turducken. Chicken pastrami jerky tongue ball tip strip steak. Ball tip alcatra turkey, cupim strip steak swine short loin tenderloin pancetta corned beef ribeye cow short ribs. Turkey turducken flank filet mignon beef ribs pastrami rump, andouille prosciutto picanha kevin strip steak. Corned beef fatback landjaeger hamburger alcatra, bacon buffalo tongue cow biltong salami sirloin swine.
{{% title3 "§2 Bacon" %}}
{{% subtitle5 "§2.1 Bacon1" %}}
Buffalo cupim kielbasa spare ribs frankfurter. Ribeye pork burgdoggen tenderloin, tail strip steak bacon ham hock pork loin cupim. Bresaola biltong salami, cow ham hock doner pork chop bacon sausage short ribs. Picanha shank sausage turducken. Ham hock t-bone cupim, tri-tip biltong venison flank beef. Cupim bresaola kevin, ham hock beef hamburger tri-tip biltong sirloin filet mignon.
{{% subtitle5 "§2.2 Bacon2" %}}
Beef jowl tail alcatra frankfurter bacon t-bone hamburger shankle. Ham hock ball tip spare ribs turkey fatback shank short loin buffalo meatball burgdoggen pork chop shankle. Porchetta buffalo pork belly chicken leberkas drumstick. Jerky chuck brisket spare ribs ribeye pork chop shankle beef ribs beef capicola. Boudin short ribs rump flank picanha. Brisket pork loin turducken, flank jerky pastrami pork chop spare ribs bresaola beef ribs. Cow fatback tenderloin pork loin pancetta.
================================================
FILE: exampleSite/content/blog/first.md
================================================
---
title: First
sidebar: true
sidebarlogo: fresh-white-alt
---
My super sweet first blog post!!
================================================
FILE: exampleSite/content/blog/second.md
================================================
---
title: Second
sidebar: true
sidebarlogo: fresh-white-alt
---
{{% title2 "My awesome blogpost" %}}
My super sweet second blog post
================================================
FILE: exampleSite/go.mod
================================================
module github.com/StefMa/hugo-fresh/exampleSite
go 1.12
replace github.com/StefMa/hugo-fresh => ../
require github.com/StefMa/hugo-fresh v1.0.0 // indirect
================================================
FILE: exampleSite/go.sum
================================================
github.com/jgthms/bulma v0.0.0-20220508134905-3e00a8e6d0d0/go.mod h1:89FLBKXYFKfOKAoDeUT26V0pHGwzr205cMXAEqtAVOI=
================================================
FILE: exampleSite/hugo.work
================================================
go 1.19
use ../
================================================
FILE: exampleSite/hugo.yaml
================================================
baseURL: http://something-fresh.org/
languageCode: en-us
title: Hugo Fresh Theme
module:
# uncomment line below for local development of module
# workspace: hugo.work
imports:
path: github.com/StefMa/hugo-fresh
googleAnalytics: # Put in your tracking code without quotes like this: UA-XXX for universal tracking or G-XXX analytics v4 tracking
# Disables warnings
disableKinds:
- taxonomy
markup:
goldmark:
renderer:
unsafe: true # Allows you to write raw html in your md files
params:
# Open graph allows easy social sharing. If you don't want it you can set it to false or just delete the variable
openGraph: true
# Used as meta data; describe your site to make Google Bots happy
description:
# Preloader ensures images are loaded before displaying to the user. If you don't want it uncomment to set it to false
# preloader: false
navbarlogo:
# Logo (from static/images/logos/___)
image: logos/fresh.svg
link: /
# Default width/height. Uncomment if you need to change
# width: 112
# height: 28
font:
name: "Open Sans"
sizes: [400,600]
hero:
# Main hero title
title: Manage. Deploy.
# Hero subtitle (optional)
subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry
# Button text
buttontext: Get started
# Where the main hero button links to
buttonlink: "#"
# Hero image (from static/images/___)
image: illustrations/worker.svg
# Footer logos (from static/images/logos/clients/*.svg)
# urls are optional
clientlogos:
- logo: systek
url: https://google.com
- logo: tribe
url: https://stefma.github.io/hugo-fresh/
- logo: kromo
url: https://github.com/StefMa/hugo-fresh
- logo: infinite
url: https://hugo-fresh.vercel.app/
- logo: gutwork
url: https://bulma.io/
# Customizable navbar. For a dropdown, add a "sublinks" list.
navbar:
- title: Features
url: /
- title: Pricing
url: /
- title: Dropdown
sublinks:
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Log in
url: /
- title: Sign up
url: /
button: true
sidebar:
# Logo (from static/images/logos/___.svg)
logo: fresh-square
sections:
- title: User
icon: user
links:
- text: Profile
url: /
- text: Account
url: /
- text: Settings
url: /
- title: Messages
icon: envelope
links:
- text: Inbox
url: /
- text: Compose
url: /
- title: Images
icon: image
links:
- text: Library
url: /
- text: Upload
url: /
- title: Settings
icon: cog
links:
- text: User settings
url: /
- text: App settings
url: /
section1:
title: Great power comes
subtitle: with great responsibility
tiles:
- title: App builder
icon: mouse-globe
text: This is some explanatory text that is on two rows
url: /
buttonText: Free trial
- title: Cloud integration
icon: laptop-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
- title: Add-ons & plugins
icon: plug-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
section2:
title: You're here because you want the best
subtitle: And we know it
features:
- title: Powerful and unified interface
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
# Icon (from static/images/illustrations/icons/___.svg)
icon: laptop-globe
- title: Cross-device synchronisation
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: doc-sync
- title: Nomad system
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: mobile-feed
section3:
title: One platform
subtitle: To rule them all
image: illustrations/mockups/app-mockup.png
buttonText: Get started
buttonLink: "#"
section4:
title: Our Clients love us!
subtitle: Lorem ipsum sit dolor amet is a dummy text used by typography industry
clients:
- name: Irma Walters
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Accountant
img: 1
- name: John Bradley
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Financial Analyst
img: 2
- name: Gary Blackman
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: HR Manager
img: 3
section5:
title: Drop us a line or two
subtitle: We'd love to hear from you
buttonText: Send Message
# action: https://formspree.io/f/
# method: POST
footer:
# Logo (from static/images/logos/___)
logo: fresh-white-alt.svg
# Social Media Title
socialmediatitle: Follow Us
# Social media links (GitHub, Twitter, etc.). All are optional.
socialmedia:
- link: https://github.com/StefMa
# Icons are from Font Awesome
icon: github
- link: https://dribbble.com/#
icon: dribbble
- link: https://facebook.com/#
icon: facebook
- link: https://twitter.com/StefMa91
icon: twitter
- link: https://bitbucket.org/#
icon: bitbucket
bulmalogo: true
quicklinks:
column1:
title: "Product"
links:
- text: Discover features
link: /
- text: Why choose our product?
link: /
- text: Compare features
link: /
- text: Our roadmap
link: /
- text: AGB
link: /agb
column2:
title: "Docs"
links:
- text: Get started
link: /
- text: User guides
link: /
- text: Admin guide
link: /
- text: Developers
link: /
column3:
title: "Blog"
links:
- text: Latest news
link: /blog/first
- text: Tech articles
link: /blog/second
================================================
FILE: go.mod
================================================
module github.com/StefMa/hugo-fresh
go 1.12
require github.com/jgthms/bulma v0.0.0-20220508134905-3e00a8e6d0d0 // indirect
================================================
FILE: go.sum
================================================
github.com/jgthms/bulma v0.0.0-20220508134905-3e00a8e6d0d0 h1:d61c8CjPFq6aGikBXMepfewc8/3IbrTCiC1xHcMcvHI=
github.com/jgthms/bulma v0.0.0-20220508134905-3e00a8e6d0d0/go.mod h1:89FLBKXYFKfOKAoDeUT26V0pHGwzr205cMXAEqtAVOI=
================================================
FILE: layouts/_default/baseof.html
================================================
{{ partial "meta.html" . }}
{{ block "title" . }}{{ .Site.Title }}{{ end }}
{{ partial "css.html" . }}
{{ if ne .Site.Params.preloader false }}
================================================
FILE: layouts/partials/section4.html
================================================
{{- $section4 := .Site.Params.section4 }}
{{- $title := index $section4 "title" }}
{{- $subtitle := index $section4 "subtitle" }}
{{- $clients := index $section4 "clients" }}
{{ $title }}
{{- with $subtitle }}
{{ . }}
{{- end }}
{{- range $clients }}
{{ .quote }}
{{ .name }}
{{ .job }}
{{- end }}
================================================
FILE: layouts/partials/section5.html
================================================
{{- $section5 := .Site.Params.section5 }}
{{- if eq $section5 true }}
{{- $section5 = dict "_" "_" }}
{{- end }}
{{- $title := index $section5 "title" | default "Drop us a line or two "}}
{{- $subtitle := index $section5 "subtitle" | default "We'd love to hear from you" }}
{{- $action := index $section5 "action" }}
{{- $method := index $section5 "method" }}
{{- $buttonText := index $section5 "buttontext" | default "Send Message" }}
## Getting started
To create a new site using this theme as hugo module:
Make sure `go` > 1.13 is installed on your system. [Download](https://go.dev/dl/) and install if needed.
```bash
# Create site and cd into it
hugo new site my-site && cd my-site
# Transform your hugo site to an module
hugo mod init YOUR_MODULE_NAME
# Remove the default config
rm hugo.toml
# Fetch the example config
curl -O https://raw.githubusercontent.com/StefMa/hugo-fresh/master/exampleSite/hugo.yaml
# Run the site locally
hugo server
# Open the site in your browser
open http://localhost:1313
```
## Customizing your page
Checkout the [Landing page docs](../landingpage) to customize the landing page.
There is also the option to create single pages. Check the [Single page docs](../singlepage) for more.
Have some troubles? Check our [troubleshooting](../troubleshooting) guide.
Interested in changed colors? Checkout the [Deep modifications](../deepmodifications) guide.
================================================
FILE: docs/content/landingpage.md
================================================
---
title: Landing page
sidebar: true
sidebarlogo: fresh-white
include_footer: false
---
## Customize the landing page
There's a wide variety of customizations that you can make to your Hugo Fresh landing page by modifying the `hugo.yaml` file that you downloaded.
> **Note**: There is always an up-to-date config file at [`exampleSite/hugo.yaml`](https://github.com/StefMa/hugo-fresh/blob/master/exampleSite/hugo.yaml) that contains all possible configurations.
Please make sure you check them out as well.
{{< title4 preloader >}}
Preloader ensures images are loaded before displaying to the user.
If you don't want it, set it to `false`.
```yaml
preloader: false
```
{{< title4 navbarlogo >}}
Define the logo of the navigation bar in the upper left corner.
