From 40f114fe03cffaea257dc1f7611a95bda15bd228 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sat, 17 Sep 2022 19:11:03 +0300 Subject: New fonts and minor css --- static/css/style.css | 113 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 96 insertions(+), 17 deletions(-) (limited to 'static/css') diff --git a/static/css/style.css b/static/css/style.css index e650c7d..494dc57 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,8 +1,27 @@ +@font-face { + font-family: "headingsFont"; + src: url(/fonts/alice-v20-latin-regular.woff); +} + +@font-face { + font-family: "bannerFont"; + src: url(/fonts/AgilScript.ttf); +} + +@font-face { + font-family: "quoteFont"; + src: url(/fonts/lacquer-v15-latin-regular.woff); +} + +/* ------------------------------------------------ */ + body{ max-width: 900px; margin: auto; background-color: #E1D9D1; font-size: 1.1rem; + text-align: center; + font-family: sans-serif; } nav { margin-top: 10px; @@ -22,7 +41,7 @@ footer{ } /* Header */ -.main-image { +.headerImage { margin-top: 25px; position: relative; background: url(/img/bg.jpg) no-repeat center; @@ -30,7 +49,7 @@ footer{ height: 250px; } -.img-container { +.imgContainer { position: absolute; top: 50%; left: 50%; @@ -41,12 +60,13 @@ footer{ text-transform: uppercase; } -.img-container h1 { +.imgContainer h1 { margin: 0; font-size: 66px; + font-family: "bannerFont"; } -.img-container h1 span { +.imgContainer h1 span { border: 6px solid white; padding: 6px 14px; display: inline-block; @@ -54,33 +74,92 @@ footer{ /* container styles*/ +.main h1,h2,h3,h4{ + font-family: "headingsFont"; +} + .container{ text-align: center; } -.index-content{ - height: 500px; +.afterIntro{ + height: auto; display: flex; - border: 2px solid white; } -/* Right */ -.right{ - height: 500px; +/* Left */ +.left{ + height: auto; width: 60%; - border-right: 2px solid white; + border-right: 2px solid grey; + maring: 30px; } -.right h3{ - text-algin: center; +.left section{ + display: flex; + height: auto } -/* Left */ -.left{ - height: 500px; +.left .quote{ + font-size: .95rem; + font-family: "quoteFont"; +} + + +.left section .people, .writers{ + width: 50%; +} + +.left h4,ul > li{ + padding-left: 10px; + text-align: left !important; +} + + +/* Right */ +.right{ + height: auto; width: 40%; } -.left figure img{ +.right figure img{ width: 100%; } + + +/* Media Queries*/ + +@media screen and (max-width: 666px) { + .afterIntro{ + display: inline; + border: none; + } + + .left section{ + display: inline; + } + + .left .quote{ + display: none; + } + + .left{ + border-right: none; + } + + .left, .right{ + width: auto; + height: auto; + margin-bottom: 10px; + } + + nav a { + padding: 5px; + font-size: 20px; + font-weight: bold; + text-decoration: none; + color: #71BC68; + } + +} + -- cgit v1.2.3