SIGMA/swedishchamber-granprize
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

* grid adjustments for the layout

Browse Source
This commit is contained in:
Dávid Danyi 2018-05-04 16:33:50 +02:00
parent e11803f273
commit 27248bd3e3
1 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/styles/main.css
View File

@ -2,13 +2,14 @@ html,
body { body {
height: 100%; height: 100%;
color: #003b70; color: #003b70;
--header-size: 22pt;
} }
.app-container { .app-container {
margin: auto; margin: auto;
display: grid; display: grid;
grid-column-gap: 10px; grid-column-gap: 20px;
grid-row-gap: 10px; grid-row-gap: 0;
min-height: 100%; min-height: 100%;
} }
@ -34,6 +35,7 @@ body {
h1 { h1 {
font-family: 'PT Serif', serif; font-family: 'PT Serif', serif;
font-size: var(--header-size);
} }
a:link, a:link,
@ -41,6 +43,7 @@ a:visited,
a:hover, a:hover,
a:active { a:active {
color: #003b70; color: #003b70;
text-decoration: none;
} }
a:hover { a:hover {
@ -51,34 +54,41 @@ a:hover {
article, article,
section { section {
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
font-size: 16pt;
} }
/* mobile */ /* mobile */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 779px) {
.app-container { .app-container {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: 100px auto auto auto 70px; grid-template-rows: 170px auto auto auto 70px;
grid-template-areas: "header" "nav" "content" "sidebar" "footer"; grid-template-areas: "header" "nav" "content" "sidebar" "footer";
} }
} }
/* tablet */ /* tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 780px) and (max-width: 1179px) {
.app-container { .app-container {
grid-template-columns: 200px auto 400px; grid-template-columns: auto 180px 580px auto;
grid-template-rows: 100px auto 70px; grid-template-rows: 170px auto auto 70px;
grid-template-areas: grid-template-areas:
"header header header" ". header header ."
"nav content sidebar" ". nav content ."
"footer footer footer"; ". nav sidebar ."
"footer footer footer footer";
}
.footer-content {
margin: auto;
width: 780px;
} }
} }
/* monitor */ /* monitor */
@media only screen and (min-width: 992px) { @media only screen and (min-width: 1180px) {
.app-container { .app-container {
grid-template-columns: auto 200px 600px 400px auto; grid-template-columns: auto 180px 580px 380px auto;
grid-template-rows: 100px auto 70px; grid-template-rows: 170px auto 70px;
grid-template-areas: grid-template-areas:
". header header header ." ". header header header ."
". nav content sidebar ." ". nav content sidebar ."
@ -87,7 +97,7 @@ section {
.footer-content { .footer-content {
margin: auto; margin: auto;
width: 1220px; width: 1180px;
} }
} }
@ -96,12 +106,13 @@ header.main-header {
} }
header .title { header .title {
font-size: 14pt; margin-top: 30px;
font-size: 40pt;
} }
header .description { header .description {
font-size: 10pt; font-size: 12pt;
letter-spacing: 1.5pt; letter-spacing: 1.75pt;
} }
header .logo { header .logo {
@ -149,6 +160,9 @@ nav li > ul {
nav > ul > li { nav > ul > li {
padding-left: 5px; padding-left: 5px;
font-weight: 700;
font-size: 22pt;
line-height: 28pt;
} }
nav > ul > li.current { nav > ul > li.current {
@ -160,20 +174,17 @@ nav li.current_ancestor > ul {
display: block; display: block;
} }
nav > ul > li {
font-weight: 700;
font-size: 18pt;
}
nav ul.menu_level_1 { nav ul.menu_level_1 {
padding-left: 5px; padding-left: 5px;
} }
nav ul.menu_level_1 > li { nav ul.menu_level_1 > li {
font-size: 12pt; font-size: 14pt;
line-height: 20pt; line-height: 18pt;
display: block; display: block;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px;
} }
nav ul.menu_level_1 > li.current { nav ul.menu_level_1 > li.current {