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