diff --git a/index.html b/index.html index d9c0204..186cd79 100644 --- a/index.html +++ b/index.html @@ -23,9 +23,26 @@

Psychiatric Imaging Group

About us

-

This page is under construction.

+
+
"Our research focuses on understanding the causes of mental illnesses and improving their treatment"
+

Oliver Howes

+
+ +

Mental illnesses are a major cause of ill health and premature death. They account for four of the six leading causes of adult disability in the world and one in every ten hospital beds in the UK is allocated for the treatment of psychotic disorders such as schizophrenia.

+ +

Current work in the group focuses on:

+ + +
-

In the meantime you can find more information about Psychiatric Imaging on the MRC LMS website and on the KCL website.

+ +

You can find more information about Psychiatric Imaging Group on the MRC LMS website and on the KCL website.

diff --git a/style/main_style.css b/style/main_style.css index 76b062c..ba4b2c6 100644 --- a/style/main_style.css +++ b/style/main_style.css @@ -10,13 +10,15 @@ body { font-family: Arial; + font-size: 20px; padding: 10px; background: #f1f1f1; + text-align: justify; } h2 { font-size: xx-large; - color: black; + color: var(--dark_blue); font-family: system-ui; text-align: center; padding: 0px 20px 20px;; @@ -25,11 +27,36 @@ h2 { margin-top: 30px; } +h3 { + font-size: x-large; + color: black; + font-family: system-ui; + text-align: left; + padding: 0px 0px 0px 0px;; + /* width: 50%; */ + margin-left: 0px; + color: var(--dark_blue); +} + @media screen and (orientation: portrait) { p { width: 80% ; margin: auto; } + h3 { + width: 80% ; + margin: auto; + margin-bottom: 20px; + margin-top: 20px; + } + .box { + width: 80% ; + margin: auto; + } + ul { + width: 80% ; + margin: auto; + } } @media screen and (orientation: landscape) { @@ -37,6 +64,26 @@ h2 { width: 50% ; margin: auto; } + .box p { + width: 100% ; + margin: auto; + } + h3 { + width: 50% ; + margin: auto; + margin-bottom: 20px; + margin-top: 20px; + } + .box { + width: 50% ; + /* margin: auto; */ + margin-left: auto; + margin-right: auto; + } + ul { + width: 50% ; + margin: auto; + } } @@ -60,7 +107,8 @@ p a, p a:link, p a:visited, p a:active { .header h1 { font-size: 50px; color: #f2f1f1; - width: 100%; + width: 100%; + z-index: 2; } h1 a:link, h1 a:active, h1 a:visited { @@ -73,6 +121,8 @@ h1 a:link, h1 a:active, h1 a:visited { overflow: hidden; top: 0; background-color: var(--dark_blue); + position: -webkit-sticky; + position: sticky; } /* Style the topnav links */ @@ -113,4 +163,33 @@ h1 a:link, h1 a:active, h1 a:visited { 'wght' 100, 'GRAD' 0, 'opsz' 0, - } \ No newline at end of file +} + +ul li { + padding-bottom: 15px; +} + .box { + display: flex; + flex-direction: column; + justify-content: flex-start; + /* background-color: var(--bbblue); */ + align-content: stretch; + column-gap: 10px; + -webkit-box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15); + -moz-box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15); + box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15); + margin-bottom: 40px; + margin-top: 20px; + padding: 20px; + border-left: 4px solid var(--dark_blue); + .text { + font-size: xx-large; + align-self: flex-start; + color: var(--dark_blue); + } + p { + align-self:flex-end; + text-align: right; + margin-top: 10px; + } +}