diff --git a/sass/_fonts.scss b/sass/_fonts.scss new file mode 100644 index 0000000..a903c61 --- /dev/null +++ b/sass/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;700&display=swap'); diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..2c4d972 --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,105 @@ +@import "fonts"; + +* { + box-sizing: border-box; +} + +html, body, h1, h2, h3, p, ul, li { + margin: 0; + padding: 0; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + font-size: 16px; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: stretch; + + &>* { + width: 100%; + } +} + +.wrap { + width: 100%; + max-width: 50em; + margin-left: auto; + margin-right: auto; +} + +nav { + min-height: 10em; + display: flex; + align-items: center; + border-bottom: 8px solid; + border-image: linear-gradient(to right, #BF616A 20%, #D08770 20%, #D08770 40%, #EBCB8B 40%, #EBCB8B 60%, #A3BE8C 60%, #A3BE8C 80%, #B48EAD 80%) 5; + + .wrap { + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 0 1em; + + ul { + list-style: none; + display: flex; + } + + a { + display: block; + padding: 1em; + color: inherit; + + &:hover { + text-decoration: underline; + } + } + } +} + +a { + text-decoration: none; + color: #fff; +} + +img { + max-width: 100%; + height: auto; +} + +header { + min-height: 35em; + background-color: #fff; + background-image: url('img/forest.svg'), url('img/panorama.jpg'); + background-size: contain, cover; + background-position: center bottom -4px, center center; // -4px fixes a visible line on some resolutions + background-repeat: no-repeat, no-repeat; + color: #fff; + + .wrap { + padding: 5em 1em; + } + + h1 { + font-size: 2.5em; + margin-bottom: 1.5em; + } +} + +section { + padding: 3em 1em; +} + +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 1em; + margin-top: auto; +} diff --git a/static/img/forest.svg b/static/img/forest.svg new file mode 100644 index 0000000..b4d2656 --- /dev/null +++ b/static/img/forest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/panorama.jpg b/static/img/panorama.jpg new file mode 100644 index 0000000..5b910ad Binary files /dev/null and b/static/img/panorama.jpg differ diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..ed86c12 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,31 @@ + + +
+ + +What the fuck did you just fucking say about me, you little bitch? I'll have you know I graduated top of my class in the Navy Seals, and I've been involved in numerous secret raids on Al-Quaeda, and I have over 300 confirmed kills. I am trained in gorilla warfare and I'm the top sniper in the entire US armed forces.
+