@ashawnbandy/resume-landing

Version:
Resume landing page web components.
60 lines (53 loc) • 1.05 kB
CSS
section {
 height: 100vh;
 background:url('assets/landing/ufo.jpg') no-repeat center;
 /* flex-box thing */
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background-size: cover; 
}

img.logo {
  height: auto;
  width: 65%;
}

header {
  font-family: 'vincent';
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: var(--night-trees-darkerer-olive);
  z-index: 10000;
}

header span.logo {
  flex-grow: 1;
  flex-shrink: 1;
}

header span.logo img {
  width: 200px;
  height: auto;
}

header span,
slot[name=header-items]::slotted(a) {
  margin-left: 30px;
  margin-right: 30px;
  align-self: center;
  padding-top: 10px;
  padding-bottom: 25px;
}

slot[name=header-items]::slotted(a:link) {
  color: var(--color-light-grey);
}

@media only screen and (max-width: 768px) {
  header span.logo {
    display: none;
  }
}