/* global style */ html { width: 100vw; height: 100vh; } /* ======================================================================================================================================= */ @media screen { body { min-height: 100vh; display: grid; grid-template-columns: auto; grid-template-areas: "header" "nav" "navlang" "main" "footer"; grid-template-rows: auto auto auto 4fr auto; grid-gap: 0; margin: 0; padding: 0; background-color: #000000; font-family: "sans-serif", "Helvetica", "Arial"; font-size: 1rem; line-height: 1.5rem; color: #FFFFFF; } /* ======================= */ header { grid-area: header; display: flex; margin: 0; padding: 0; background-image: linear-gradient( to top, rgba(0,0,0,1), rgba(132,49,245,0.2) ); } h1 { padding-top: 0.1rem; padding-bottom: 0.1rem; padding-left: 1rem; font-size: 1.5rem; text-align: left; color: #d1b6f7 ; } /* ======================= */ nav ul { margin: 0; padding-top: 0; padding-right: 0; list-style: none; font-size: 1.3rem; } nav ul li { padding-bottom: 1rem; } nav ul li a { font-weight: bold; text-decoration: none; transition: color 0.618s; } /* ======================= */ nav.menu { grid-area: nav; background-color: #000000; } nav.menu ul { display: flex; flex-flow: column; } nav.menu ul li a { color: #f0f0f0; } nav.menu ul li a:hover { color: #d1b6f7 ; } /* ======================= */ nav.lang { grid-area: navlang; background-image: linear-gradient( to bottom, rgba(0,0,0,1), rgba(132,49,245,0.2) ); } nav.lang ul { display: flex; flex-flow: row wrap; } nav.lang ul li { padding-right: 2rem; } nav.lang ul li a { color: #FFDDDD; } nav.lang ul li a:hover { color: #d1b6f7 ; } /* ======================= */ main { grid-area: main; margin: 0; padding: 0; background-color: #000000; } /* ======================= */ footer { grid-area: footer; margin: 0; padding-right: 1rem; padding-top: 0.1rem; padding-bottom: 0.1rem; /*background-color: #FFFFFF;*/ background-image: linear-gradient( to top, rgba(0,0,0,1), rgba(132,49,245,0.2) ); text-align: right; font-weight: bold; color: #d1b6f7 ; } } @media screen and (min-width: 300px) and (orientation: portrait) { } @media screen and (min-width: 600px) and (orientation: landscape) { body { grid-template-rows: auto auto auto 4fr auto; } nav.menu ul { flex-flow: row wrap; } nav.menu ul li { padding-right: 2rem; } nav.lang { grid-area: navlang; background-image: linear-gradient( to bottom, rgba(0,0,0,1), rgba(132,49,245,0.2) ); } } @media screen and (min-width: 1200px) { body { grid-template-areas: "header nav navlang" "main main main" "footer footer footer"; grid-template-columns: auto 8fr 2fr; grid-template-rows: auto 1fr auto; } header { background-image: linear-gradient( to bottom, rgba(0,0,0,1), rgba(132,49,245,0.2) ); } nav { background-image: linear-gradient( to bottom, rgba(0,0,0,1), rgba(132,49,245,0.2) ); padding-top: 1rem; } nav ul { justify-content: right; } nav.menu ul { flex-flow: row wrap; } }