diff --git a/index.py b/index.py index f44280a..db70ae5 100644 --- a/index.py +++ b/index.py @@ -44,11 +44,12 @@ def index(): @app.route('/') def page(page): md = CONTENT_DIR + '%s_%s.md' % (page, lang) + html = 'page_%s.html' % lang if os.path.isfile(md): body = read_md(md) - return body + return render_template(html, body=body) else: return not_found() diff --git a/static/stylesheet.css b/static/stylesheet.css index a922df0..22e6918 100644 --- a/static/stylesheet.css +++ b/static/stylesheet.css @@ -4,12 +4,12 @@ * #17466E - Blue */ -html { +#html { height: 100%; display: flex; } -body { +#body { background-color: #F2F2FF; background-image: url("duck.png"); background-size: 50%; @@ -22,13 +22,13 @@ body { flex-direction: column; } -header { +#header { display: flex; justify-content: space-between; padding: 2rem; } -header h1 { +#title { font-family: "Noto Serif Display", "American Typewriter", serif; font-weight: normal; text-align: center; @@ -36,12 +36,17 @@ header h1 { margin: 0; } -header nav { +#title a { + text-decoration: none; + color: black; +} + +#links { display: flex; align-items: center; } -nav a { +#links a { margin: 1rem; font-size: 1.2rem; text-decoration: none; @@ -49,7 +54,7 @@ nav a { padding: 1rem; } -.button { +#links .button { background-color: #17466E; color: #F2F2FF; border-radius: 20px; @@ -73,11 +78,11 @@ nav a { margin: .5em 0; } -#social a img { +#social .icon { width: 100%; } -main { +#main { width: 100%; display: flex; align-items: center; @@ -85,48 +90,47 @@ main { flex-wrap: wrap-reverse; } -main figure { +#quote { max-width: 30%; display: block; font-size: 1.5rem; margin: 0; } -main figure figcaption { +#quote figcaption { text-align: right; } -main span { +#slogan { text-align: right; font-size: 3rem; } -mark { +#slogan mark { background-color: #17466E; color: #F2F2FF; position: relative; } @media only screen and (max-width: 600px) { - - body { + #body { background-image: none; } - main { + #main { margin-bottom: 0; } - header { + #header { flex-direction: column; align-items: center; } - main figure { + #quote { max-width: 100%; } - mark { + #slogan mark { background-color: #EDAF1F; color: black; } diff --git a/static/stylesheet_page.css b/static/stylesheet_page.css new file mode 100644 index 0000000..b47f3cd --- /dev/null +++ b/static/stylesheet_page.css @@ -0,0 +1,42 @@ +#wrapper { + display: flex; + justify-content: center; + padding: 3rem 1rem 5rem; +} + +#content { + background-color: white; + padding: 2rem; + box-shadow: 1px 0px 10px black; + text-align: justify; +} + +@media only screen and (max-width: 600px) { + #content { + max-width: 90%; + } +} + +@media only screen and (min-width: 600px) { + #content { + max-width: 80%; + } +} + +@media only screen and (min-width: 768px) { + #content { + max-width: 70%; + } +} + +@media only screen and (min-width: 992px) { + #content { + max-width: 60%; + } +} + +@media only screen and (min-width: 1200px) { + #content { + max-width: 50%; + } +} diff --git a/templates/index_en.html b/templates/index_en.html index 090d0e9..c543b34 100644 --- a/templates/index_en.html +++ b/templates/index_en.html @@ -1,16 +1,16 @@ - + Augusto Gunsch - -
-

Augusto
Gunsch

+ +