From 067538fdd551d71f40a6c47d7c207c5b7db4b151 Mon Sep 17 00:00:00 2001 From: 53hornet <53hornet@gmail.com> Date: Sat, 15 Sep 2018 17:37:20 -0400 Subject: Playing with navy background and parallax scrolling --- md/wedding/styles.css | 87 +++++++++++++++++++++------------------------------ 1 file changed, 36 insertions(+), 51 deletions(-) diff --git a/md/wedding/styles.css b/md/wedding/styles.css index 4865a35..8989cb5 100644 --- a/md/wedding/styles.css +++ b/md/wedding/styles.css @@ -1,22 +1,24 @@ -/* stylesheet for 53hor.net */ +/* stylesheet for wedding */ /* google fonts */ -@import url('https://fonts.googleapis.com/css?family=Arapey:400,400i|Fredericka+the+Great|Josefin+Sans:700'); -@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Homemade+Apple|Reenie+Beanie'); +@import url('https://fonts.googleapis.com/css?family=Arapey:400,400i|Reenie+Beanie'); :root { /* custom colors */ - --amy:#009999; + --teal:#009999; + --bg:#004380; } #topnav { - top: 0; + margin: 0; padding: 0; + width: 100%; + top: 0; overflow: hidden; - background-color: rgba(0, 0, 0, 0.5); text-align: center; position: fixed; - width: 100%; + background-color: white; + box-shadow: 0 0 10px black; } #topnav a { @@ -24,48 +26,46 @@ text-align: center; padding: 1em 1em; text-decoration: none; - color: white; + color: var(--teal); transition: 0.5s; - font-family: 'Josefin Sans', sans-serif; + font-family: 'Arapey', serif; + font-size: 1.2em; font-weight: 700; - font-style: bold; - font-size: 1em; } #topnav a:hover { - color: var(--amy); + box-shadow: 0 0 5px black; } html { - height: 100%; margin: 0; + padding: 0; + height: 100%; } body { - height: 100%; - padding: 0; margin: 0; - font-size: 1.2em; - font-weight: 400; - font-family: 'Arapey', serif; + padding: 0; + height: 100%; + font-size: 1em; background-repeat: no-repeat; - background-position: center bottom; + background-position: center top; background-attachment: fixed; background-size: cover; } article { - height: 100%; - margin-top: 4em; - margin-left: 10%; - width: 80%; + margin-top: 35%; + padding: 1em; + background-color: var(--bg); + box-shadow: 0 0 10px black; } figure { - margin: none; + margin: 0; padding: 1em; - background-color: white; - box-shadow: 0 5px 5px black; + background-color: snow; + box-shadow: 0 0 5px black; } figure img { @@ -76,44 +76,30 @@ figure figcaption { color: black; text-align: right; font-weight: 400; - font-size: 0.8em; font-style: italic; font-family: 'Arapey', serif; } -hr { - color: white; - margin-left: 4em; - margin-right: 4em; - border-bottom: none; -} - -p { - text-align: justify; +p { /* standalone blocks of text */ + text-align: center; text-indent: 2em; font-weight: 400; - font-size: 0.9em; - background-color: white; - margin: 1em; - padding: 1em; - box-shadow: 3px 3px 3px black; + font-family: 'Arapey', serif; } h1 { /* decorative page title */ font-weight: 400; - font-size: 4em; - font-family: 'Homemade Apple', cursive; - text-align: right; - color: white; - text-shadow: 3px 3px 3px black; + font-size: 5em; + font-family: 'Reenie Beanie', cursive; + text-align: center; + color: var(--teal); } h2 { /* decorative page subtitle */ font-weight: 700; font-size: 2em; - font-family: 'Josefin Sans', sans-serif; - text-align: right; - text-shadow: 3px 3px 3px black; + font-family: 'Arapey', serif; + text-align: center; color: white; } @@ -122,8 +108,7 @@ h3 { /* section title */ font-size: 3em; font-family: 'Reenie Beanie', cursive; color: white; - text-shadow: 3px 3px 3px black; - text-align: right; + text-align: center; margin: 1em; } -- cgit v1.2.3