From 643dbe3ab80db53445bf33698fd40c5a322f99c7 Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 29 Oct 2024 14:49:35 +0100 Subject: [PATCH] A bit of responsiveness --- frontpage.css | 5 +++++ index.html | 4 ++-- portfolio/index.html | 2 +- portfolio/portfolio.css | 39 +++++++++++++++++++++++++++++++++++++++ style.css | 21 +-------------------- 5 files changed, 48 insertions(+), 23 deletions(-) create mode 100644 frontpage.css create mode 100644 portfolio/portfolio.css diff --git a/frontpage.css b/frontpage.css new file mode 100644 index 0000000..e677763 --- /dev/null +++ b/frontpage.css @@ -0,0 +1,5 @@ +@import url(./style.css); + +img { + width: 100%; +} \ No newline at end of file diff --git a/index.html b/index.html index ef78257..d6f6c90 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -22,7 +22,7 @@

CV / Resume

- + diff --git a/portfolio/index.html b/portfolio/index.html index 5da33ba..64f86a3 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -8,7 +8,7 @@ - + diff --git a/portfolio/portfolio.css b/portfolio/portfolio.css new file mode 100644 index 0000000..768e14c --- /dev/null +++ b/portfolio/portfolio.css @@ -0,0 +1,39 @@ +@import url(../style.css); + +img { + width: 100%; + max-width: 512px; + min-width: 256px; +} + +div.side-by-side { + display: flex; + flex: 1 1 0px; + flex-direction: row; +} + +div.side-by-side article { + margin: 0 32px; + flex-basis: 100%; +} + +a.hidden { + font-style: normal; + text-decoration: none; +} + +main p { + width: 100%; +} + +@media only screen and (max-width: 1152px) { + div.side-by-side { + flex-direction: column; + } +} + +@media only screen and (min-width: 1152px) { + div.side-by-side { + flex-direction: row; + } +} \ No newline at end of file diff --git a/style.css b/style.css index 5729e9e..be728b8 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,7 @@ html { color-scheme: light dark; width: 100%; + min-width: 320px; } body { @@ -13,23 +14,3 @@ body { * { font-family: 'mononoki'; } - -main { - margin: 0 auto; -} - -div.side-by-side { - display: flex; - flex: 1 1 0px; -} - -div.side-by-side article { - margin: 0 32px; - flex-basis: 100%; -} - -a.hidden { - font-style: normal; - text-decoration: none; -} -