diff options
| author | Jan Tuomi <jans.tuomi@gmail.com> | 2022-07-14 20:50:22 +0300 |
|---|---|---|
| committer | Jan Tuomi <jans.tuomi@gmail.com> | 2022-07-14 20:50:22 +0300 |
| commit | 58e0151fd1e9beb1c392163393f3669bfaa7eae1 (patch) | |
| tree | 37dbcb5f710c74a4593e4c8807c9f812c4c792da /src | |
| parent | e0fac3960f7cd246cb2ef70d58d9e6b532401f58 (diff) | |
Add contact me template, improve styling
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html.mustache | 5 | ||||
| -rw-r--r-- | src/styles.css | 45 |
2 files changed, 45 insertions, 5 deletions
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 |