Add base files

1 files changed, 450 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..1f27ceb
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,450 @@
+@font-face {

+    font-family: 'DejaVu Sans';

+    src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_regular_macroman/DejaVuSans-webfont.woff') format('woff');

+    font-weight: normal;

+    font-style: normal;

+}

+

+@font-face {

+    font-family: 'DejaVu Sans';

+    src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_bold_macroman/DejaVuSans-Bold-webfont.woff') format('woff');

+    font-weight: bold;

+    font-style: normal;

+}

+

+@font-face {

+    font-family: 'DejaVu Sans';

+    src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_oblique_macroman/DejaVuSans-Oblique-webfont.woff') format('woff');

+    font-weight: normal;

+    font-style: italic;

+}

+

+@font-face {

+    font-family: 'DejaVu Sans';

+    src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_boldoblique_macroman/DejaVuSans-BoldOblique-webfont.woff') format('woff');

+    font-weight: bold;

+    font-style: italic;

+}

+

+@font-face {

+    font-family: 'DejaVu Sans';

+    src: url('/static/assets/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_extralight_macroman/DejaVuSans-ExtraLight-webfont.woff') format('woff');

+    font-weight: lighter;

+    font-style: normal;

+}

+

+* {

+    box-sizing: border-box;

+}

+

+html {

+    scroll-behavior: smooth;

+}

+

+body {

+    margin: 0;

+    font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

+}

+

+main {

+    padding: 1rem;

+    padding-top: 7rem;

+    padding-bottom: 3rem;

+    max-width: 85rem;

+    margin-left: auto;

+    margin-right: auto;

+}

+

+header {

+    position: fixed;

+    width: 100%;

+    display: flex;

+    align-items: center;

+    padding: 1rem;

+    background-color: white;

+    border-bottom: 0.1rem solid black;

+    z-index: 100;

+}

+

+.logo-w-name {

+    display: flex;

+}

+

+.logo {

+    padding-left: .75rem;

+    padding-right: .75rem;

+    height: 1.5rem;

+    filter: invert(70%)

+}

+

+.name {

+    font-weight: bold;

+    margin: auto 1rem;

+    color: rgb(100, 100, 100)

+}

+

+h1 {

+  display: none;

+  font-size: 2.5rem;

+  color: rgb(143, 143, 143);

+  /* padding-left: 1rem; */

+  /* border-left: 1rem solid rgb(59, 195, 219); */

+  /* border-bottom: .12rem solid rgb(196, 196, 196); */

+}

+

+b {

+  color:rgb(100, 100, 100);

+}

+

+.main-nav-position {

+    display: flex;

+    justify-content: right;

+    flex-grow: 1;

+    padding-right: 2rem;

+    border-right: .5rem solid rgb(196, 196, 196);

+}

+

+.main-nav {

+    display: flex;

+    gap: 2rem;

+    padding-top: .5rem;

+    padding-bottom: .5rem;

+    font-size: .8rem;

+}

+

+.toggler, .hamburger {

+    display: none;

+}

+

+.even-2-col-grid {

+    display: grid;

+    grid-template-columns: 1fr 1fr;

+}

+

+.uneven-column {

+	display: flex;

+	gap: 4rem;

+}

+

+.uneven-column-grid {

+  display: grid;

+  gap: 3rem;

+  grid-template-columns: 25rem 1fr;

+}

+

+.side-info {

+	min-width: 20rem;

+	max-width: 30%;

+	/*background-color: rgb(240,240,240);*/

+}

+

+/* img {

+    max-width: 100%;

+    height: auto;

+    vertical-align: middle;

+    font-style: italic;

+    shape-margin: 1rem;

+} */

+

+img, video {

+  max-width: 100%;

+  height: auto;

+  display: block;

+  font-style: italic;

+/*   color: rgb(177, 177, 177);

+  background-color: rgb(73, 73, 73); */

+}

+

+iframe {

+  max-width: 100%;

+  aspect-ratio: 16/9;

+  display: block;

+}

+

+.thumbnail img {

+  width: fit-content;

+  aspect-ratio: 4/3;

+  object-fit: cover;

+  display: block;

+  position: relative;

+  z-index: -1;

+}

+

+.thumbnail {

+	position: relative;

+}

+

+.title {

+  z-index: -1;

+  opacity: 0;

+  display: block;

+	position: absolute;

+	top: 0;

+	left: 0;

+	padding: 8rem 1rem;

+	text-align: center;

+	font-weight: bold;

+	color: white;

+	background-color: rgba(27, 27, 27, 0.726);

+	min-width: 100%;

+	min-height: 100%;

+  transition: all 0.3s ease-in-out;

+}

+

+.thumbnail:hover .title {

+	opacity: 100%;

+}

+

+a {

+  color: black;

+}

+

+header a, .projects a {

+  text-decoration: none;

+}

+

+a:hover:not(.thumbnail) {

+  opacity: 60%;

+}

+

+.projects p {

+  margin-top: 0.5rem;

+  border-right: .5rem solid rgb(196, 196, 196);

+  border-top: .12rem solid rgb(196, 196, 196);

+}

+

+.projectContent p {

+  margin-left: 1.5rem;

+}

+

+.hide {

+  display: none;

+}

+

+.footer-logo {

+    filter: invert(100%);

+    height: 1rem;

+    margin-left: .75rem;

+}

+

+footer {

+    display: flex;

+    background-color: black;

+    padding-left: 1rem;

+    padding-right: 1rem;

+    gap: 1rem;

+    align-items: center;

+}

+

+address {

+    padding-left: 1rem;

+    gap: 2rem;

+    font-size: .7rem;

+}

+

+footer * {

+    color: white;

+}

+

+blockquote {

+  font-style: italic;

+}

+

+.sketchbook > img:first-of-type {

+  display: none;

+}

+

+.back-button {

+  background-color: orange;

+}

+

+@media screen and (max-width: 82rem) {

+  main {

+    margin-left: 5rem;

+    margin-right: 5rem;

+  }

+	.uneven-column {

+		flex-direction: column-reverse;

+	}

+	.side-info {

+		max-width: 100%;

+	}

+  .side-info img {

+    display: block;

+    margin: auto;

+  }

+}

+

+@media screen and (max-width: 70rem) {

+  main {

+    margin-left: 1rem;

+    margin-right: 1rem;

+  }

+}

+

+@media screen and (min-width: 45rem) {

+  address {

+    display: flex;

+  }

+}

+

+@media screen and (max-width: 45rem) {

+    main {

+      margin-left: 0.5rem;

+      margin-right: 0.5rem;

+    }

+    nav {

+      display: none;

+    }

+    .footer-logo {

+      height: 1.5rem;

+    }

+

+    header {

+        width: 100%;

+    }

+

+    .even-2-col-grid {

+        grid-template-columns: 1fr;

+    }

+

+    .toggler{

+    /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */

+      visibility: visible;

+      display: block;

+      z-index: 104;

+      height: 60px;

+      width: 60px;

+      position: fixed;

+      top: 0;

+      right: 1rem;

+      cursor: pointer;

+      opacity: 0;

+      margin: 0;

+    }

+

+    .hamburger{

+      z-index: 103;

+      position: fixed;

+      top: 0;

+      right: 1rem;

+      height: 60px;

+      width: 60px;

+      padding: 5px;

+      /*border-bottom-left-radius: 8px;

+      background-color: var(--dark-transparent);*/

+

+    /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */

+

+      display: flex;

+      align-items: center;

+      justify-content: center;

+    }

+

+    /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */

+

+    .hamburger > div{

+      position: relative;

+      top: 0;

+      right: 0;

+      background: black;

+      height: 2px;

+      width: 60%;

+      transition: all  0.4s ease;

+    }

+

+    /* CREATING THE TOP AND BOTTOM LINES :

+    TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */

+

+    .hamburger > div::before,

+    .hamburger > div::after{

+      content: '';

+      position: absolute;

+      top: -10px;

+      background: black;

+      width: 100%;

+      height: 2px;

+      transition: all  0.4s ease;

+    }

+

+    .hamburger > div::after{

+      top: 10px;

+    }

+

+    /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */

+

+    .toggler:checked + .hamburger > div{

+      background: rgba(0,0,0,0); /*Not bothering with var because one-off*/

+    }

+

+    .toggler:checked + .hamburger > div::before{

+      top: 0;

+      transform: rotate(-45deg);

+    }

+

+    /* AND ROTATING THE TOP AND BOTTOM LINES :  */

+

+    .toggler:checked + .hamburger > div::after{

+      top: 0;

+      transform: rotate(45deg);

+    }

+

+    /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */

+

+    .main-nav {

+

+    /* APPLYING TRANSITION TO THE MENU :  */

+

+      display: flex;

+      flex-direction: column;

+      position: fixed;

+      top: 0;

+      right: 0;

+      z-index: 102;

+      background-color: white;

+      padding: 6rem 2rem 1rem 2rem;

+      align-items: center;

+

+    /* HIDDEN INITIALLY  :  */

+

+      visibility: hidden;

+    }

+

+    .main-nav > a {

+      margin-top: 15px;

+      margin-bottom: 15px;

+      font-size: 2rem;

+    }

+

+    /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */

+

+    .toggler:checked ~ .main-nav{

+      visibility: visible;

+      animation: fadeIn 0.8s ease;

+    }

+    .toggler:checked ~ .bg-nav-block {

+      visibility: visible;

+      animation: fadeIn 0.8s ease;

+    }

+    .toggler:checked ~ .hamburger {

+      background-color: #00000000;

+    }

+}

+

+@media screen and (max-width: 27rem) {

+/*   .logo {

+    height: 5vw;

+  }

+  .name {

+    font-size: 3vw;

+  } */

+  .address {

+    font-size: .5rem;

+  }

+  .toggler{

+    top: .4rem;

+  }

+  .hamburger{

+    top: .4rem;

+  }

+}
\ No newline at end of file