All visual styles are written in SCSS and compiled to css/styles.min.css by Gulp. Color and typography are controlled through variables in two partials so you can restyle the entire site by changing a handful of values.
Color variables
All color variables live in sass/partials/_colors.scss:
sass/partials/_colors.scss
// Text colours
$txt-primary: rgba(28, 54, 83, 0.6); // body paragraph text
$txt-secondary: #3D4351; // heading font
$txt-light: #fff; // header / hero text
$txt-accent: #ACB1B4; // muted accent text
$form-placeholder: #BCC1C3; // form placeholder text
// Global colours
$accent-color: #e8ca6f; // global accent colour (gold)
$accent-color-hover: #d3b56a; // global accent colour hover state
$white-color: #fff;
$black-color: #000;
// Typography colours
$h2-color: #3D4351;
$h3-color: #3D4351;
$h5-color: #3D4351;
// Layout colours
$section-light: #fff; // light section background
$section-dark: #f8f9fd; // dark section background
$to-top-bg: #495061; // "back to top" button background
$footer-primary: #3D4351; // footer primary background
$footer-secondary: #373D4A; // footer secondary background
// Keylines
$keyline-color: #E6E9EA; // subtle divider lines
$footer-keyline-color: #4E566C; // divider lines inside the footer
$accent-color: #e8ca6f is the gold/champagne tone used throughout the site — button borders, hover states, icon colors, link colors, and form icons all reference this single variable. Changing it to your own wedding color will update the entire site’s accent consistently.
Font variables
Typography variables live in sass/partials/_typography.scss:
sass/partials/_typography.scss
// Font families
$sans-serif: 'Open Sans', sans-serif;
$serif: Merriweather, Georgia, 'Times New Roman', serif;
$accent-font: 'Nunito', sans-serif;
// Font weights
$light: 300;
$normal: 400;
$semibold: 500;
$bold: 700;
// Font sizes
$font-size-h1: 60px;
$font-size-h2: 40px;
$font-size-h3: 24px;
$font-size-h4: 18px;
$font-size-h5: 15px;
$font-size-p: 15px;
$nav-font-size: 13px;
$blog-post-title: 11px; // used for blog card titles in .blog section
// Responsive sizes
$responsive-h1: 40px;
// Line height
$base-line-height: 29px;
Open Sans, Merriweather, Nunito) are imported at the top of sass/styles.scss:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,400italic,300italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);
@import URL and update the corresponding font variable.
Button variants are defined in sass/partials/_buttons.scss and all use $accent-color for their active states:
sass/partials/_buttons.scss
// Base button — all buttons inherit this
.btn {
font-size: 13px;
border: solid 2px;
border-radius: 40px;
display: inline-block;
text-transform: uppercase;
}
.btn:hover, .btn:focus {
color: $white-color;
border-color: $accent-color;
background-color: $accent-color;
}
// Filled button (gold background)
.btn-fill {
color: $white-color;
border: solid 2px $accent-color;
border-radius: 40px;
display: inline-block;
text-transform: uppercase;
background-color: $accent-color;
}
.btn-fill:hover, .btn-fill:focus {
color: $white-color;
background-color: $accent-color-hover;
border-color: $accent-color-hover;
}
// White/outline button
.btn-white {
font-size: 13px;
border: solid 2px;
border-radius: 40px;
display: inline-block;
border-color: $txt-light;
}
.btn-white:hover, .btn-white:focus {
color: $accent-color;
border-color: $accent-color;
}
.btn-small — padding: 8px 30px.btn-large — padding: 15px 40px.btn-margin-right — margin-right: 20px
The class .btn-accent is used in index.html (on the RSVP button, dress code button, and Show Map button) but is not explicitly defined in _buttons.scss. It inherits from the base .btn class, which provides the rounded border and hover state using $accent-color.
Responsive styles
Responsive breakpoint overrides are in css/queries.css, loaded as a separate stylesheet after styles.min.css:
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="css/queries.css">
css/queries.css directly (it is plain CSS, not SCSS) to override styles at specific screen widths.
Gulp build pipeline
The Gulp build compiles SCSS to compressed CSS and minifies the JavaScript:
// compile scss to css
gulp.task('sass', function () {
return gulp.src('./sass/styles.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename({basename: 'styles.min'}))
.pipe(gulp.dest('./css'));
});
// minify js
gulp.task('minify-js', function () {
return gulp.src('./js/scripts.js')
.pipe(uglify())
.pipe(rename({basename: 'scripts.min'}))
.pipe(gulp.dest('./js'));
});
// default task — runs sass then minify-js
gulp.task('default', gulp.series('sass', 'minify-js'));
Workflow
After editing any .scss file:
# Compile SCSS and minify JS in one step
gulp
# Or compile SCSS only
gulp sass
# Watch for SCSS changes and recompile automatically
# Note: sass:watch uses Gulp 3 task syntax and may not work with Gulp 4
gulp sass:watch
css/styles.min.css. The index.html file already references this compiled file, so no further changes are needed.
The browser loads css/styles.min.css, not the raw SCSS files. You must re-run gulp (or gulp sass) after every SCSS change for the changes to appear in the browser. If you skip this step, your edits will have no visible effect.
