Favicons and styles and stuff

.gitignore

@@ -1 +1,2 @@
 public/
+node_modules

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png?v=XBzaKGvaex"/>
+            <square150x150logo src="/mstile-150x150.png?v=XBzaKGvaex"/>
+            <square310x310logo src="/mstile-310x310.png?v=XBzaKGvaex"/>
+            <wide310x150logo src="/mstile-310x150.png?v=XBzaKGvaex"/>
+            <TileColor>#006563</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

faviconData.json

@@ -0,0 +1 @@
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/browserconfig.xml","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/favicon.ico","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png?v=XBzaKGvaex\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png?v=XBzaKGvaex\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png?v=XBzaKGvaex\">\n<link rel=\"manifest\" href=\"/site.webmanifest?v=XBzaKGvaex\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg?v=XBzaKGvaex\" color=\"#006563\">\n<link rel=\"shortcut icon\" href=\"/favicon.ico?v=XBzaKGvaex\">\n<meta name=\"msapplication-TileColor\" content=\"#006563\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png?v=XBzaKGvaex\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"true","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/cb61fa2e0539c4447d1970e6f4600700eddd9238/favicon_preview.png","version":"0.16"}

faviconDescription.json

@@ -0,0 +1,64 @@
+{
+  "masterPicture": "./favicon.svg",
+  "iconsPath": "/",
+  "design": {
+    "ios": {
+      "pictureAspect": "backgroundAndMargin",
+      "backgroundColor": "#ffffff",
+      "margin": "14%",
+      "assets": {
+        "ios6AndPriorIcons": false,
+        "ios7AndLaterIcons": false,
+        "precomposedIcons": false,
+        "declareOnlyDefaultIcon": true
+      }
+    },
+    "desktopBrowser": {},
+    "windows": {
+      "pictureAspect": "whiteSilhouette",
+      "backgroundColor": "#006563",
+      "onConflict": "override",
+      "assets": {
+        "windows80Ie10Tile": false,
+        "windows10Ie11EdgeTiles": {
+          "small": false,
+          "medium": true,
+          "big": false,
+          "rectangle": false
+        }
+      }
+    },
+    "androidChrome": {
+      "pictureAspect": "backgroundAndMargin",
+      "margin": "17%",
+      "backgroundColor": "#ffffff",
+      "themeColor": "#ffffff",
+      "manifest": {
+        "display": "standalone",
+        "orientation": "notSet",
+        "onConflict": "override",
+        "declared": true
+      },
+      "assets": {
+        "legacyIcon": false,
+        "lowResolutionIcons": false
+      }
+    },
+    "safariPinnedTab": {
+      "pictureAspect": "silhouette",
+      "themeColor": "#006563"
+    }
+  },
+  "settings": {
+    "compression": 1,
+    "scalingAlgorithm": "Mitchell",
+    "errorOnImageTooSmall": false,
+    "readmeFile": false,
+    "htmlCodeFile": false,
+    "usePathAsIs": false
+  },
+  "versioning": {
+    "paramName": "v",
+    "paramValue": "XBzaKGvaex"
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "brettkate.wedding",
+  "version": "1.0.0",
+  "description": "https://brettkate.wedding/",
+  "private": true,
+  "scripts": {
+    "postinstall": "npm run scss && npm run favicon",
+    "favicon": "real-favicon generate faviconDescription.json faviconData.json . && real-favicon inject faviconData.json . index.html",
+    "scss": "node-sass --include-path=node_modules/ --output-style=compressed --output=. styles.scss",
+    "dev": "node-sass --include-path=node_modules/ --output-style=compressed --output=. --watch=./styles.scss styles.scss"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brettlangdon/wedding-website.git"
+  },
+  "author": "Brett Langdon <me@brett.is>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/brettlangdon/wedding-website/issues"
+  },
+  "homepage": "http://brettkate.wedding/",
+  "devDependencies": {
+    "bulma": "^0.6.2",
+    "cli-real-favicon": "0.0.6",
+    "node-sass": "^4.7.2"
+  },
+  "dependencies": {
+    "npm": "^5.7.1"
+  }
+}

site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png?v=XBzaKGvaex",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png?v=XBzaKGvaex",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

styles.scss

@@ -0,0 +1,169 @@
+@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Montserrat|Playfair+Display');
+@import "bulma/sass/utilities/initial-variables";
+
+// Overrides
+$family-sans-serif: 'Montserrat', sans-serif;
+$family-serif: 'Playfair Display', serif;
+$family-cursive: 'Great Vibes', cursive;
+$turquoise: rgb(0,101,99);
+$turquoise-light: rgb(59,156,144);
+$maroon: rgb(98,7,49);
+$maroon-light: rgb(181,58,102);
+$yellow: rgb(205,163,73);
+$yellow-light: rgb(226,198,117);
+
+$grey: rgb(188,193,192);
+$grey-light: rgb(232,234,233);
+$grey-darker: rgb(37,43,42);
+$grey-dark: rgb(90,96,96);
+
+$text: $grey-darker;
+
+@import "bulma/sass/utilities/functions";
+@import "bulma/sass/utilities/derived-variables.sass";
+@import "bulma/bulma";
+
+.title {
+    font-family: $family-serif;
+
+    &.headline {
+        font-family: $family-cursive;
+    }
+}
+
+.subtitle {
+    font-family: $family-serif;
+}
+
+.tabs {
+    li {
+        font-family: $family-serif;
+    }
+}
+
+
+.hero-body {
+    background-image: url('background.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: scroll;
+    background-position: 0% 50%;
+}
+@media screen and (max-width: 1100px) {
+    .hero-body {
+        background-position: 50% 50%;
+    }
+}
+@media screen and (max-width: 750px) {
+    .hero-body {
+        background-position: 65% 50%;
+    }
+    .hero-body .title {
+        margin-top: -4rem;
+    }
+}
+
+
+.jump-to-top {
+    background-color: rgba(255, 255, 255, 0.8);
+    position: fixed;
+    right: 1rem;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    z-index: 90;
+
+    svg {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        top: 6px;
+        left: 5px;
+    }
+}
+
+
+.open-mobile-menu {
+    background-color: rgba(255, 255, 255, 0.8);
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    width: 40px;
+    height: 40px;
+    z-index: 90;
+
+    svg {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        width: 25px;
+        height: 25px;
+    }
+}
+
+
+.mobile-menu {
+    background-color: $grey-light;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+
+    .close-mobile-menu {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        margin-top: 1rem;
+        margin-left: 1rem;
+
+        svg {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            width: 25px;
+            height: 25px;
+        }
+    }
+}
+
+
+.section.is-grey {
+    background-color: $grey-light;
+}
+
+
+.headline {
+    @include from($desktop) {
+        font-size: $size-1;
+    }
+
+    @include until($desktop) {
+        font-size: $size-3;
+    }
+
+    &+.subtitle {
+        @include from($desktop){
+            font-size: $size-5;
+        }
+
+        @include until($desktop) {
+            font-size: $size-6;
+        }
+    }
+}
+
+
+.hero-logo {
+    position: absolute;
+    width: 10rem;
+    height: 10rem;
+    top: 1rem;
+    right: 1rem;
+
+    @include until($desktop) {
+        width: 7rem;
+        height: 7rem;
+    }
+}