From 57b2af4cf830ad722605ddbeb0cd245cceb49151 Mon Sep 17 00:00:00 2001 From: Dmitri DB Date: Thu, 21 Apr 2022 08:06:18 -0700 Subject: initial commit --- style.css | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..6049c25 --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +/* init */ + +@font-face { + font-family: "SputnicSans"; + src: url('SputnicSans-2020.ttf'); +} + +/* main body and colors */ + +:root { + --sand1: hsl(59, 100%, 86%, 0.5); + --sand2: hsl(59, 100%, 86%, 0.2); + --sand3: hsl(59, 100%, 86%, 0.1); + --beachborder: hsl(255, 0, 0, 0.1); + --dark-blue: hsl(211, 100%, 50%); + --light-blue: hsl(179, 100%, 40%); + /* The 0.75 alpha here is so the dark black text flows with the gradient */ + --textcolor: hsla(0, 0%, 0%, 0.75); + --visitedcolor: hsl(211, 100%, 50%); + --linkcolor: hsl(215, 100%, 50%); + --textshadow: hsl(211, 100%, 50%); +} + +html { + width: 100%; + font: 1.6em "SputnicSans", sans-serif; + color: var(--textcolor); + background: linear-gradient(-45deg, var(--sand1), var(--light-blue), var(--dark-blue)); + background-size: 400% 400%; + animation: gradient 10s ease infinite; + height: 100vh; +} + +/* +body { + width: 100%; + height: 100%; + background: linear-gradient(to top left , var(--sand1), var(--sand2), var(--sand3), hsla(10,10%,10%,.10)); + background-size: 100% 100%; +} +*/ + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +a { + color: var(--linkcolor); + text-shadow: 0 0 5px var(--textshadow); + font-weight: 400; + padding-bottom: 5px; + background: url("wave.svg"); + /* + background-repeat: repeat; + background-position-x: 0%; + background-position-y: 0%; + background-size: auto auto; + */ + background-repeat: repeat-x; + background-size: 15px 5px; + background-position: 1px 19px; + animation: move 15s linear infinite; + -webkit-animation: move 15s linear infinite; + animation-play-state: paused; + text-decoration: none; + background-color: transparent; + -webkit-text-decoration-skip: objects; +} + +@-webkit-keyframes move { +from { + background-position: 2px 19px; + } + to { + background-position: 500px 19px; + } +} + +@keyframe move { +from { + background-position: 2px 19px; + } + to { + background-position: 500px 19px; + } +} + +a:hover { + color: var(--textcolor); + text-decoration-style: wavy; + animation-play-state: running; + text-shadow: 0 0 5px var(--textshadow); +} + +a:visited { + color: var(--vistedcolor); + text-shadow: 0 0 5px var(--textshadow); +} + +.content { + margin-bottom: 1em; +} + +div.menu { + text-align: center; +} + +ul.menu { + list-style-type: none; + padding: 0; +} + +ul.menu li { + display: inline-block; + margin: 0 1em; + text-decoration: none; +} + +div#copyright { + text-align: center; + font-size: 0.8em; +} + +img#haha { + width: 3%; + height: 3%; +} -- cgit v1.2.3