From e6bccd7471f5b937c277a99956c9ac1762d797b1 Mon Sep 17 00:00:00 2001 From: Georg Hopp Date: Mon, 26 Sep 2016 22:14:07 +0200 Subject: [PATCH] More fluid boxes in about section. There is still some special handling neccessary when display width is to small. --- app/assets/stylesheets/welcome.scss | 45 +++++++++++--------------- app/views/layouts/application.html.erb | 6 ++-- app/views/welcome/index.html.erb | 24 +++++++------- 3 files changed, 34 insertions(+), 41 deletions(-) diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss index 9f3ae0c..1ea6585 100644 --- a/app/assets/stylesheets/welcome.scss +++ b/app/assets/stylesheets/welcome.scss @@ -70,20 +70,18 @@ p { top: 50%; left: 85%; transform: translate(-50%, -50%); - width: 26.875em; clear: both; } #logo { height: 100%; - width: 100%; + width: 60%; } #logo img, -#logo a { +#logo .logotitle { position: relative; top: 50%; transform: translate(0, -50%); - float: left; } #logo img { border: 0.125em solid white; @@ -91,13 +89,19 @@ p { padding: 2px; opacity: 0.4; margin: 0 1em; + float: left; } -#logo a { +#logo .logotitle a { color: rgb(255,255,255); text-decoration: none; font-size: 1.875em; font-family: Arkitech; } +#logo .logotitle span { + color: rgb(255,255,255); + text-decoration: none; + font-family: Arkitech; +} #nav ul { display: block; @@ -190,6 +194,7 @@ p { list-style: none; text-align: justify; width: 100%; + height: 20em; top: 50%; transform: translate(0, -50%); position: absolute; @@ -202,15 +207,20 @@ p { } #about .textbox { text-align: justify; - padding: 10px; - width: 30%; - height: 10em; + padding: 0.625em; + width: calc(32% - 1.625em); + height: calc(100% - 1.625em); overflow: hidden; box-shadow: 0.625em 0.625em 0.625em rgba(0,0,0,0.7); } #about a { outline: 0; } +#about .source { + width: calc(32% - 2.875em); + bottom: 1.4375em; +} + .textbox { display: inline-block; @@ -221,23 +231,6 @@ p { text-align: center; } -.projectspace { - display: inline-block; - width: 35%; -} -.projects { - display: inline-block; - width: 60%; - list-style: none; - text-align: justify; - vertical-align: top; -} -.projects .textbox { - padding: 3px; - margin-top: 3px; - background-color: rgba(0,0,0,0); -} - .section { position: relative; overflow: hidden; @@ -422,8 +415,6 @@ p { .source { position: absolute; font-size: x-small; - bottom: 3.5em; - width: 30%; } /* #title { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f4c9428..11e1718 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,8 +10,10 @@