diff options
| -rw-r--r-- | resources/pug/finals/index.pug | 7 | ||||
| -rw-r--r-- | resources/sass/style.scss | 35 |
2 files changed, 33 insertions, 9 deletions
diff --git a/resources/pug/finals/index.pug b/resources/pug/finals/index.pug index 546f1c8..65f015d 100644 --- a/resources/pug/finals/index.pug +++ b/resources/pug/finals/index.pug @@ -26,15 +26,14 @@ block content .container#content header#introduction - div(style="display:table-row;") + div img#profile(alt="Camil Staps", style="vertical-align:bottom;", src="/assets/img/profile.jpg", width="170") div#basicinfo(style="display:table-cell;vertical-align:bottom;") h1 | Camil Staps  small.text-muted - span [kaˈmil stɑps] - span   - span he/his + span.opt-break [kaˈmil stɑps]  + span.opt-break he/his p span.tt.obfuscate.wrap-anywhere | info@c diff --git a/resources/sass/style.scss b/resources/sass/style.scss index 874ed83..13242db 100644 --- a/resources/sass/style.scss +++ b/resources/sass/style.scss @@ -103,16 +103,41 @@ body { word-wrap: anywhere; /* utlity to prevent horizontal scrolling on small screens */ } +@media (max-width: 1269px) { + .opt-break { + clear: both; + display: inline-block; + } +} + abbr { border-width: 0 !important; } -img#profile { - margin: 1em 1em 1em 0; -} +header > div { + @media (min-width: 500px) { + display: table-row; + + img#profile { + margin: 1em 1em 1em 0; + max-width: 30vw; + } -div#basicinfo { - margin-top: 1em; + div#basicinfo { + margin-top: 1em; + } + } + + @media (max-width: 499px) { + img#profile { + margin: 1em 0; + max-width: unset !important; + } + + div#basicinfo { + clear: both; + } + } } hr { |