style.css

/* 
======================
SHARED CSS
======================
*/
* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

/*49- set the color of header and footer here kaman , no idea why */
html {
  font-family: "Dosis", sans-serif;
  font-size: 16px;
  color: #1e4040;
}

/*47  header and footer color*/
header,
footer {
  background-color: #1e4040;
  color: #71d99e;
}

/*50-links color*/
a {
  color: #71d99e;
}

/*77-then merging the images in 78*/
img {
  border-radius: 5px;
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
  /*image in sidebar break la bsghr el screen shwya so max width fix it*/
  max-width: 100%;
}

/*69-*/
h1,
h2,
h3 {
  margin-top: 10px;
  margin-bottom: 20px;
}

/*70- then move to side bar*/
p {
  margin-bottom: 15px;
}

/* 
======================
CSS OUTER GRID STYLES
======================
*/

.outer-grid {
  display: grid;
  height: 100vh;
  grid-template-rows: 70px 1fr;
  grid-template-columns: 90px 1fr;
  grid-template-areas:
    "alias-header alias-header"
    "alias-innergrid alias-innergrid";
}

.outer-grid-expanded {
  grid-template-areas:
    "alias-header alias-header"
    "alias-nav alias-innergrid";
}

.hide-nav {
  display: none;
}

/*49- remove previously used color*/
header {
  grid-area: alias-header;
  align-items: center;
  /*41*/
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

/*42-*/
.left-header {
  display: flex;
  align-items: center;
}

.fa-bars {
  align-self: center;
  margin-right: 10px;
}

/*51- hover on menu*/
.fa-bars:hover {
  cursor: pointer;
  opacity: 0.8;
}

/*44- video and article*/
.right-header {
  display: flex;
}

/*45*/
.header-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

/*46 size of icons*/
.header-link i {
  font-size: 0.8rem;
  text-decoration: none;
}

nav {
  grid-area: alias-nav;
}

/* 
======================
CSS INNER GRID STYLES
======================
*/

.inner-grid {
  overflow-y: scroll;
  /*67- background-color: rgba(0, 31, 255, 0.2);*/
  display: grid;
  grid-area: alias-innergrid;
  grid-template-rows: 1fr auto 60px;

  grid-template-columns: 1fr;

  grid-template-areas:
    "alias-main alias-main"
    "alias-aside alias-aside"
    "alias-footer alias-footer";
}

main {
  /*66-remove background color, remove from inner grid too uppp foo2
  background-color: rgba(255, 122, 0);*/
  grid-area: alias-main;
  /*65-remove height*/
  /*height: 2000px;*/
  /*68- top-bottom the % left-right, go to shared styles to edit text style*/
  padding: 20px 5%;
}

aside {
  /*background-color: rgba(255, 122, 0, 0.4);*/
  grid-area: alias-aside;
  /*71- w mmkn yb2o f shared styles m3 main w n7oto foo2 for better practice, 72-html add footer*/
  padding: 20px 5%;
}

footer {
  /*74- delete color
  background-color: rgba(255, 122, 0, 0.7);*/
  grid-area: alias-footer;
}

/* 
======================
NAV STYLES
======================
*/

nav {
  padding-top: 20px;
  /*75- vertical line next to nav bar, then the line above side bar*/
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/*59*/
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*60*/
  margin-top: 15px;
}

.nav-link a {
  color: #1e4040;
  text-decoration: none;
}

.nav-link:hover {
  cursor: pointer;
  opacity: 0.8;
}

/*73 
======================
FOOTER  STYLES
======================
*/
footer p {
  color: white;
  /*74-set margin to 0 3shan a7na mdyeen p tag margin bs msh 3yzeno f el footer, go to nav styles*/
  margin: 0;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 75-
======================
SIDEBAR STYLES
======================
*/

aside {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 78 - https://www.youtube.com/watch?v=TWQN2Bb-cLU&list=PLYQSCk-qyTW3lOyu3PGmr5bpa0838LZLH&index=11 min 48:00
======================
COLLAGE CSS
======================
*/
.collage {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  height: 550px /*more than tallest image by 50px only*/;
  align-items: center;
}

.collage * {
  grid-row-start: 1;
  grid-row-end: 2;
}

.collage-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  z-index: 1;
  transform: rotate(-3deg);
}

.collage-2 {
  grid-column-start: 2;
  grid-column-end: 5;
  z-index: 2;
  box-shadow: 2px 4px 10px 2px rgba(0, 0, 0, 0.5);
}

.collage-3 {
  grid-column-start: 4;
  grid-column-end: 6;
  z-index: 1;
  transform: rotate(3deg);
}

/* 
======================
BREAKPOINTS
======================
*/

@media (min-width: 576px) {
  nav {
    display: block !important;
  }

  .outer-grid {
    grid-template-areas:
      "alias-header alias-header"
      "alias-nav alias-innergrid";
  }

  .fa-bars {
    display: none;
  }
}

@media (min-width: 992px) {
  .inner-grid {
    grid-template-rows: 1fr 60px;

    grid-template-columns: minmax(auto, 700px) 1fr;

    grid-template-areas:
      "alias-main alias-aside"
      "alias-footer alias-footer";
  }

  /*76*/
  aside {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 1440px) {
  /*57..go to html*/
  .outer-grid {
    grid-template-columns: 1fr 950px 1fr;
    grid-template-areas:
      "alias-header alias-header alias-header"
      "alias-nav alias-innergrid alias-innergrid";
  }

  /*T2RIBAN 52- 3yzeen Logo w article w video yb2o 3l large screen msh 3la l tarf awi yb2o f el nos shwya*/
  header {
    display: grid;
    /*53- no need for rows as it will be one row and 3 columns w b3d kda h5ly logo 3l tarf ymeen mn awl column(awl t2sema f grid..
    w video w article 3la ymeen column 3..kda hyb2o f nos with justify-self..54*/
    grid-template-columns: 1fr 950px 1fr;
    /*55-*/
    grid-template-areas: "alias-lh . alias-rh";
  }

  /*54- grid areas*/
  .left-header {
    grid-area: alias-lh;
    /*56*/
    justify-self: end;
  }

  .right-header {
    grid-area: alias-rh;
    justify-self: start;
  }

  /*61- we will add important to override the one in 576 breakpoint*/
  nav {
    display: flex !important;
    flex-direction: column;
    /*62-for items to go to the left--then creat new "sample" html files (2 files)*/
    align-items: flex-end;
    padding-right: 15px;
  }
}