Initial commit

4 files changed, 122 insertions, 0 deletions

diff --git a/assets/scss/stip.scss b/assets/scss/stip.scss
new file mode 100644
index 0000000..bdce358
--- /dev/null
+++ b/assets/scss/stip.scss
@@ -0,0 +1,9 @@
+// Colours
+$color-background: {{ .Site.Params.colors.background | default "#fff" }};
+$color-circle: {{ .Site.Params.colors.circle | default "#164972" }};
+$color-foreground: {{ .Site.Params.colors.foreground | default "#fff" }};
+$color-hover: {{ .Site.Params.colors.hover | default "#88fcf0" }};
+
+@import 'stip/variables';
+@import 'stip/base';
+@import 'stip/layout';
diff --git a/assets/scss/stip/_base.scss b/assets/scss/stip/_base.scss
new file mode 100644
index 0000000..09ec497
--- /dev/null
+++ b/assets/scss/stip/_base.scss
@@ -0,0 +1,64 @@
+html,
+body {
+    color: $color-foreground;
+    margin: 0;    
+    padding: 1rem;
+}
+
+html {
+    font-family: $sans-serif;
+    font-size: 16px;
+    overflow-y: auto;
+}
+
+body {
+    background-color: $color-background;
+    background: url('/images/background.jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+a {
+    @include transition(color .2s ease-out);    
+    color: $color-foreground;
+
+    &:hover {
+        color: $color-hover;
+    }
+}
+
+h1 {
+    font-size: 9rem;
+    font-weight: 100;
+
+    @media screen and (max-width: $break-large) {
+        font-size: 6rem;
+    }
+}
+
+h2 {
+    font-size: 3rem;
+    font-weight: 100;
+}
+
+p {
+    font-family: $serif;
+    font-weight: 300;
+    line-height: 1.7;
+}
+
+img.portrait {
+    border-radius: 50%;
+    border: $portrait-border-width solid $color-foreground;
+    width: $portrait-size;
+    height: $portrait-size;
+}
+
+.portrait-container {
+    border-radius: 50%;
+    border: 65vw solid $color-circle;
+    margin: -63vw;
+    height: $portrait-size + 2 * $portrait-border-width;
+    width: $portrait-size + 2 * $portrait-border-width;
+
+}
\ No newline at end of file
diff --git a/assets/scss/stip/_layout.scss b/assets/scss/stip/_layout.scss
new file mode 100644
index 0000000..ab360bf
--- /dev/null
+++ b/assets/scss/stip/_layout.scss
@@ -0,0 +1,33 @@
+main {
+    display: flex;
+    flex-direction: row;
+
+    @media screen and (max-width: $break-large) {
+        flex-direction: column;
+    }
+}
+
+.content {
+    margin-left: 1rem;
+    max-width: 50vw;
+
+    @media screen and (max-width: $break-large) {
+        margin-left: 0;
+        max-width: 100vw;
+    }
+
+    .links {
+        margin-top: 2.5rem;
+        font-size: 1.5rem;
+
+        a {
+            margin-right: 0.5rem;
+            text-decoration: none;
+        }
+    }
+}
+
+.footer {
+    margin-top: 3rem;
+    font-size: 0.75rem;
+}
diff --git a/assets/scss/stip/_variables.scss b/assets/scss/stip/_variables.scss
new file mode 100644
index 0000000..17a39d7
--- /dev/null
+++ b/assets/scss/stip/_variables.scss
@@ -0,0 +1,16 @@
+// Fonts
+$sans-serif: 'Roboto', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+$serif: 'Lora', 'Times', 'Times New Roman', serif;
+
+// Responsive breaks
+$break-large: 980px;
+
+// Portrait size
+$portrait-size: 300px;
+$portrait-border-width: 20px;
+
+@mixin transition($args...) {
+    -webkit-transition: $args;
+       -moz-transition: $args;
+            transition: $args;
+}