aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/_branding.scss25
-rw-r--r--assets/scss/home.scss41
2 files changed, 60 insertions, 6 deletions
diff --git a/assets/scss/_branding.scss b/assets/scss/_branding.scss
new file mode 100644
index 0000000..2efdc4d
--- /dev/null
+++ b/assets/scss/_branding.scss
@@ -0,0 +1,25 @@
+/**
+ * Branding
+ **/
+
+span.ps {
+ background: url(../img/logo-ps.svg) top left / 3rem no-repeat;
+ opacity: 0.75;
+ color: transparent;
+ padding: 0.25rem;
+}
+
+body {
+ font-family: $sans-serif;
+ font-size: 1em; /* No rem here, bug workaround */
+
+ > header, > footer {
+ :link, :visited {
+ color: $fg-main;
+ }
+ }
+
+ :visited {
+ text-decoration: underline;
+ }
+}
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index a80e473..57ebccc 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -1,5 +1,7 @@
@charset 'UTF-8';
+@import 'variables';
+@import 'branding';
html[lang='en'] :lang(fr) {
display: none !important;
@@ -351,14 +353,11 @@ body > footer {
overflow-y: auto;
}
-
-
body > header:hover ~ footer {
position: fixed;
bottom: 0;
display: block;
}
-
body > header:hover ~ footer > nav {
display: block;
}
@@ -400,7 +399,7 @@ body > footer {
color: rgba(0,0,0,0.2);
}
- h4, p {
+ h4, p, figure {
display: none;
}
@@ -414,7 +413,7 @@ body > footer {
color: rgba(0, 0, 0, 1);
}
- h4, p {
+ h4, p, figure {
display: block;
padding: 1rem;
color: black;
@@ -426,7 +425,7 @@ body > footer {
.media #gfx {
background: rgba(191, 138, 112,0.7);
transform: rotate(-4deg);
- margin: 0 -5vw 0 -2vw;
+ margin: 0 -3vw 0 0;
left: 0;
h3 {
@@ -452,6 +451,13 @@ body > footer {
transform: rotate(0) translateX(0) translateY(-4rem);
}
+ figure {
+ display: inline-block;
+ width: 197px;
+ padding: 0;
+ margin: 1rem;
+ }
+
svg {
opacity: 0.3;
width: calc(100% + 4rem);
@@ -492,6 +498,7 @@ body > footer {
text-decoration: none;
color: inherit;
}
+ .media #gfx:hover p.tagline,
.media #txt:hover p.tagline {
position: absolute;
top: 6rem;
@@ -590,6 +597,16 @@ body > footer {
transform: rotate(2deg) translate(0rem, 19.5vh);
}
+ footer {
+ position: fixed;
+ left: 0;
+ right: 0;
+ font-size: smaller;
+ background-color: rgba(109, 78, 128, 1);
+ display: none;
+ margin: 5rem auto 2rem auto;
+ width: 80vw;
+ }
}
@media screen and (max-device-width: 1023px) {
@@ -604,6 +621,18 @@ body > footer {
background: url(../img/logo-ps.svg) center calc(92% - 50vh) / contain no-repeat fixed;
}
+ body > footer {
+ position: relative;
+ left: 0;
+ right: 0;
+ font-size: smaller;
+ background-color: rgba(109, 78, 128, 1);
+ display: none;
+ margin: 1rem auto;
+ width: 80vw;
+ font-size: smaller;
+ }
+
}
.sinewave{