diff options
Diffstat (limited to 'css/style.css')
| -rw-r--r-- | css/style.css | 225 |
1 files changed, 224 insertions, 1 deletions
diff --git a/css/style.css b/css/style.css index 770b979..21d4e6b 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,15 @@ body { - font-family: /*"Fira Code",*/ "Courier New", monospace; + font-family: Alegreya, serif; + font-size: 20px; + background-color: #FFF; + color: #333; + display: flex; + flex-direction: column; + align-items: center; } a { + color: inherit; text-decoration: none; } @@ -10,3 +17,219 @@ a:hover { text-decoration: underline; } +a:visited { + color: inherit; +} + +h1 { + font-size: 30px; +} + +header { + width: 800px; + padding: 20px 0px 60px 0px; + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; +} + +header h1 { + font-weight: normal; + font-size: inherit; + margin: 0; +} + +header h1:hover { + animation-name: shake; + animation-duration: 100ms; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite +} + +header h1 a:hover { + text-decoration: none; +} + +nav a { + padding: 2px; + transition: all 0.5s; +} + +nav a:hover { + font-size: 23px; +} + +main { + width: 800px; +} + +#intro { + display: flex; + flex-direction: row; +} + +#face { + width: 200px; + height: 200px; + margin-right: 24px; + border-radius: 12px; + filter: drop-shadow(1px 1px 2px #33333333); +} + +#profile a { + color: #1455FB; +} + +#profile p { + margin-top: 0px; +} + +footer { + width: 800px; + text-align: right; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-Regular.ttf); + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-Italic.ttf); + font-style: italic; + font-weight: 400; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-Medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-MediumItalic.ttf); + font-style: italic; + font-weight: 500; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-SemiBold.ttf); + font-weight: 600; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-SemiBoldItalic.ttf); + font-style: italic; + font-weight: 600; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-Bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-BoldItalic.ttf); + font-style: italic; + font-weight: 700; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-ExtraBold.ttf); + font-weight: 800; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-ExtraBoldItalic.ttf); + font-style: italic; + font-weight: 800; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-Black.ttf); + font-weight: 900; +} + +@font-face { + font-family: Alegreya; + src: url(../fonts/Alegreya/Alegreya-BlackItalic.ttf); + font-style: italic; + font-weight: 900; +} + +@font-face { + font-family: Calvin; + src: url(../fonts/Calvin/Calvin-Regular.ttf); + font-style: normal; +} + +@font-face { + font-family: Calvin; + src: url(../fonts/Calvin/Calvin-Outline.ttf); + font-style: oblique; +} + +@keyframes shake { + 0%, 100% {transform:translate(0, 0) rotate(0)} + 2% {transform:translate(1.5px, 0.5px) rotate(-0.5deg)} + 4% {transform:translate(-1.5px, 2.5px) rotate(0.5deg)} + 6% {transform:translate(2.5px, -0.5px) rotate(-0.5deg)} + 8% {transform:translate(1.5px, 2.5px) rotate(1.5deg)} + 10% {transform:translate(-0.5px, -1.5px) rotate(1.5deg)} + 12% {transform:translate(.5px, -0.5px) rotate(0.5deg)} + 14% {transform:translate(.5px, 0.5px) rotate(1.5deg)} + 16% {transform:translate(1.5px, 0.5px) rotate(-0.5deg)} + 18% {transform:translate(2.5px, -0.5px) rotate(1.5deg)} + 20% {transform:translate(-1.5px, -0.5px) rotate(0.5deg)} + 22% {transform:translate(1.5px, 1.5px) rotate(0.5deg)} + 24% {transform:translate(2.5px, -0.5px) rotate(1.5deg)} + 26% {transform:translate(-0.5px, -0.5px) rotate(-0.5deg)} + 28% {transform:translate(-0.5px, 2.5px) rotate(1.5deg)} + 30% {transform:translate(-0.5px, -0.5px) rotate(1.5deg)} + 32% {transform:translate(.5px, 2.5px) rotate(-0.5deg)} + 34% {transform:translate(2.5px, -1.5px) rotate(0.5deg)} + 36% {transform:translate(2.5px, 2.5px) rotate(-0.5deg)} + 38% {transform:translate(2.5px, 1.5px) rotate(-0.5deg)} + 40% {transform:translate(1.5px, 1.5px) rotate(-0.5deg)} + 42% {transform:translate(-0.5px, 1.5px) rotate(0.5deg)} + 44% {transform:translate(2.5px, 1.5px) rotate(0.5deg)} + 46% {transform:translate(-1.5px, -1.5px) rotate(-0.5deg)} + 48% {transform:translate(-0.5px, 1.5px) rotate(-0.5deg)} + 50% {transform:translate(2.5px, 0.5px) rotate(-0.5deg)} + 52% {transform:translate(-1.5px, 1.5px) rotate(0.5deg)} + 54% {transform:translate(2.5px, -1.5px) rotate(-0.5deg)} + 56% {transform:translate(-1.5px, 1.5px) rotate(1.5deg)} + 58% {transform:translate(.5px, 0.5px) rotate(1.5deg)} + 60% {transform:translate(-0.5px, -0.5px) rotate(1.5deg)} + 62% {transform:translate(1.5px, 2.5px) rotate(-0.5deg)} + 64% {transform:translate(2.5px, 0.5px) rotate(1.5deg)} + 66% {transform:translate(.5px, 0.5px) rotate(1.5deg)} + 68% {transform:translate(.5px, -1.5px) rotate(1.5deg)} + 70% {transform:translate(1.5px, 1.5px) rotate(1.5deg)} + 72% {transform:translate(-0.5px, -1.5px) rotate(-0.5deg)} + 74% {transform:translate(.5px, -0.5px) rotate(0.5deg)} + 76% {transform:translate(2.5px, -0.5px) rotate(-0.5deg)} + 78% {transform:translate(2.5px, 0.5px) rotate(1.5deg)} + 80% {transform:translate(2.5px, 0.5px) rotate(-0.5deg)} + 82% {transform:translate(-1.5px, 1.5px) rotate(-0.5deg)} + 84% {transform:translate(.5px, 1.5px) rotate(1.5deg)} + 86% {transform:translate(-0.5px, -1.5px) rotate(1.5deg)} + 88% {transform:translate(.5px, 1.5px) rotate(-0.5deg)} + 90% {transform:translate(-1.5px, 0.5px) rotate(-0.5deg)} + 92% {transform:translate(.5px, -0.5px) rotate(-0.5deg)} + 94% {transform:translate(-0.5px, 1.5px) rotate(0.5deg)} + 96% {transform:translate(1.5px, -0.5px) rotate(0.5deg)} + 98% {transform:translate(1.5px, -1.5px) rotate(1.5deg)} +} |