css.css

/* 
This is the start of the explanatory version of the CSS used
to build this project. It will be part of the "Learn to code companion"
project by Markus Eicher on GitHub. The goal of that project is to
provide relevant, managed and peer-reviewed content for people that
learn to code or as a reference for developers.
*/

/* Start of full reset following Myers. 

We do a full fledged reset of all the basic browser behaviors to start
with a most identical baseline on most systems currently in use. This is a 
hard reset of all defaults leaving everything unstyled. We plan to use this 
for bare HTML pages without any default styling applied. In most cases we 
don't use this for all projects. An alternative to this hard reset is to use
normalize https://github.com/necolas/normalize.css/ . This is less invasive 
and we probably will prefer normalize over reset. 

These settings are derived from the following source:

	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1,h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of full reset following Myers. */


/* Start of global declarations 
Here we define global settings and variables used in the project. We define
basic colors and values that we want to be consistent during the whole process.
*/

/* Start of variables definition */
:root{
  --primary: #FFC636;
  --secondary: #0A0B5B;
  --tertiary: #288105;
}
/* End of variables definition */

/* Start of fonts definition 
If we use fonts as filebased versions downloaded and made accessible to the 
browser from the assets on the server, we declare them here globally. This is not
necessary if fonts are used from the web like Google Fonts or others.
*/

@font-face {
  font-family: 'Rubik Regular';
  src: url("/assets/fonts/Rubik-Regular.ttf") format("ttf"),
}

body {
  font-family: 'Rubik Regular';
}
/* End of fonts definition */

/* Start of basic version for all browsers and screenreaders. Setting the minimal
viable experience with the webpage. The goal is to have a mobile first version of 
the page with all the necessary information readable on every device that can show 
webpages. */

@supports not (display: grid) {
   /* code that will only run if CSS Grid is supported by the browser  */
 }


/* Grid layout for mobile first - default setting */
.mainwrapper{
  display:grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 1fr;
  grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
  grid-template-areas:
    "nav"
    "sidebar"
    "main"
    "content1"
    "content2"
    "content3"
    "footer";
}

nav {
  background: #a7ffeb;
  grid-area: nav;
}

#sidebar {
  background: #18ffff;
  grid-area: sidebar;
}

main {
  background: #84ffff;
  grid-area: main;
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
}

#content2 {
  background: #64ffda;
  grid-area: content2;
}

#content3 {
  background: #64ffda;
  grid-area: content3;
}

footer {
  background: #1de9b6;
  grid-area: footer;
}

/* Navigation bar with flexbox mobile first - default setting */
.navlist {
  background:var(--primary);
  /* box-shadow: 0px 0px 10px var(--secondary); */
  padding: 1rem 0;
  /* border-radius: var(--radius); */
  display: flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
  width:100vw; 
}

.navitem {
  list-style: none;
  margin-right: 2rem;
}

.navitem a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
}

.navitem a:hover {
  color: var(--clr-primary-dark);
}

.navitem img{
  width:5rem;
  height:5rem;
  object-fit:cover;
  border-radius:50%;
  margin-left: 0;
  padding-left: auto;
  margin-right: auto;
}

/* Media queries mobile first ascending in viewport sizes */

/* watch styles */
@media only screen and (min-width: 160px) {
  
}

/* phone styles */
@media screen and (min-width: 360px){
  
  .mainwrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1.5fr 1fr 0.6fr;
  grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer";
  } 

  .navlist {
  background:var(--primary);
  /* box-shadow: 0px 0px 10px var(--secondary); */
  padding: 1rem 0;
  /* border-radius: var(--radius); */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100vw;
}
}

/* small tablet styles */
@media screen and (min-width: 480px){

  .mainwrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1.5fr 1fr 0.6fr;
  grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer";
  } 

  .navlist {
  background:var(--primary);
  /* box-shadow: 0px 0px 10px var(--secondary); */
  padding: 1rem 0;
  /* border-radius: var(--radius); */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  width: 100vw;
}
}

/* large tablet & laptop styles */
@media screen and (min-width: 960px){
}

/* desktop styles */
@media screen and (min-width: 1200px){
}