diff options
| -rw-r--r-- | build.js | 11 | ||||
| -rw-r--r-- | src/index.html.mustache | 5 | ||||
| -rw-r--r-- | src/styles.css | 45 |
3 files changed, 55 insertions, 6 deletions
@@ -18,10 +18,12 @@ function transpose(matrix) { }
const GALLERY_DIR = "_gallery";
+const SITE_CONFIG_DIR = "_configuration";
const SRC_DIR = "src";
const DIST_DIR = "dist";
const HTML_TEMP_PATH = path.join(SRC_DIR, "index.html.mustache");
const HTML_OUT_PATH = path.join(DIST_DIR, "index.html");
+const CONTACT_INFO_PATH = path.join(SITE_CONFIG_DIR, "contact_info.json");
fs.rmSync(DIST_DIR, { recursive: true, force: true });
fs.cpSync(SRC_DIR, DIST_DIR, { recursive: true });
@@ -56,7 +58,14 @@ const galleryViews = galleryJsonList };
});
-const view = { galleries: galleryViews };
+const contactInfoJson = fs.readFileSync(CONTACT_INFO_PATH, "utf-8")
+const contactInfoView = JSON.parse(contactInfoJson);
+
+const view = {
+ galleries: galleryViews,
+ contact_info_title: contactInfoView["title"],
+ contact_info_body: contactInfoView["body"],
+};
const renderedHtml = M.render(htmlTemplate, view);
fs.writeFileSync(HTML_OUT_PATH, renderedHtml);
diff --git a/src/index.html.mustache b/src/index.html.mustache index 4f51721..d324803 100644 --- a/src/index.html.mustache +++ b/src/index.html.mustache @@ -36,5 +36,10 @@ {{/columns}}
</div>
{{/galleries}}
+
+ <h3>{{contact_info_title}}</h3>
+ <div class="contact-info">
+ {{&contact_info_body}}
+ </div>
</body>
</html>
\ No newline at end of file diff --git a/src/styles.css b/src/styles.css index c83169c..38eb3ba 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,6 +1,7 @@ :root {
--purple: #683863;
--grid-gap: 10px;
+ --body-w-relative: 0.7;
}
html {
@@ -10,8 +11,8 @@ html { }
body {
- max-width: 1440px;
- margin: 78px auto;
+ max-width: calc(100% * var(--body-w-relative));
+ margin: 70px auto 120px;
padding: 10px;
display: flex;
@@ -28,7 +29,7 @@ h1 { font-family: 'Amiri', serif;
font-size: 128px;
font-weight: 400;
- line-height: 109px;
+ line-height: 100%;
margin: 5px 0;
padding: 0;
white-space: nowrap;
@@ -38,6 +39,7 @@ h2 { font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 400;
+ line-height: 100%;
color: var(--purple);
margin: 0;
}
@@ -46,6 +48,8 @@ h3 { font-family: 'Amiri', serif;
font-size: 48px;
font-weight: 400;
+ line-height: 100%;
+ margin: 20px 0 8px;
}
#swoosh {
@@ -61,6 +65,30 @@ h3 { left: 612px;
}
+@media screen and (max-width: 1920px) {
+ body {
+ max-width: calc(1920px * var(--body-w-relative));
+ margin-top: 40px;
+ }
+
+ header {
+ margin-bottom: 100px;
+ }
+
+ h1 {
+ font-size: 100px;
+ }
+
+ h2 {
+ font-size: 25px;
+ }
+
+ #logo {
+ top: 49px;
+ left: 460px;
+ }
+}
+
@media screen and (max-width: 850px) {
h1 {
font-size: 14vw;
@@ -73,7 +101,6 @@ h3 { h3 {
font-size: 8vw;
- margin-bottom: 8px;
}
#logo {
@@ -81,7 +108,7 @@ h3 { }
header {
- margin-bottom: 20px;
+ margin-bottom: 30px;
}
}
@@ -109,3 +136,11 @@ h3 { .gallery .column img {
width: 100%;
}
+
+.contact-info {
+ font-size: 28px;
+}
+
+.contact-info a {
+ color: var(--purple) !important;
+}
\ No newline at end of file |