Extreme structure changes and file renames. Move to new template format.

1 files changed, 400 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..3848e60
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,400 @@
+@font-face {
+  font-family: 'DejaVu Sans';
+  src: url('/static/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/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/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/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/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;
+}
+
+:root {
+  --primary-color: #464646;
+  --accent-color: white;
+  --anchor-hover-color: #bbb49f;
+  --thumbnail-hover-color: #b1b1b140;
+  --dark-transparent: #161616e3;
+  --subtext-color: rgb(139, 139, 139);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  /* background-image: url("/static/media/MKE_Skyline_Art_Museum_2K.webp"); */
+  /* background-image: url("/static/media/Leaves.jpg"); */
+  background-image: url("/static/grid.png");
+/*   background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: top center; */
+  background-color: rgb(101, 133, 117);
+  font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.imgGrid {
+  margin: 20px auto;
+  line-height: 0;
+  column-count: 2;
+  column-gap: 0px;
+}
+
+.imgGrid img {
+  width: 100% !important;
+  height: auto !important;
+}
+
+nav {
+  max-width: 100%;
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+nav a {
+  font-size: 18px;
+  color: var(--accent-color);
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+main {
+  color: var(--accent-color);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0%;
+  }
+  8% {
+    opacity: 0%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}
+
+h1 {
+  margin-top: 8vh;
+  margin-left: 4vw;
+  font-size: 45px;
+}
+
+.frontpage-subtitle {
+  margin-left: 6vw;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.frontpage-subtitle > p {
+  margin: 10px;
+}
+
+h2 {
+  font-weight: lighter;
+  margin-bottom: 40px;
+}
+
+@keyframes slideInFromBottom {
+  0% {
+    transform: translateY(100%);
+    opacity: 20%;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
+
+.posts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  max-height: 40vh;
+}
+
+.postContent {
+  background-color: var(--dark-transparent);
+  margin: 0 15vw;
+  padding: 10px 30px;
+}
+
+.postContent > p {
+  margin-left: 25px;
+}
+
+figcaption {
+  color: var(--subtext-color);
+}
+
+figure > a {
+  text-decoration: none;
+}
+
+a, a > figcaption {
+  color: inherit;
+}
+
+.bottom {
+  width: 100%;
+  background-color: var(--dark-transparent);
+  padding: 10px 20px;
+  position: fixed;
+  bottom: 0;
+  max-height: 50vh;
+  animation: 0.6s ease-out 0s 1 slideInFromBottom;
+}
+
+.bottom > .posts > .thumbnail {
+  padding: 10px 10px 30px 10px;
+  margin-bottom: 30px;
+}
+
+.bottom > .posts > .thumbnail:hover {
+  border-radius: 5px;
+  background-color: var(--thumbnail-hover-color);
+}
+
+.bottom > .posts > .thumbnail img {
+  width: 400px;
+  height: 100%;
+  object-fit: cover;
+}
+
+.f, .f * {
+  position:fixed;
+  max-width:100%;
+  max-height:100%;
+  top:50%;
+  left:50%;
+}
+
+.f * {
+  transform:translate(-50%,-50%);
+}
+
+.f {
+  display:none;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background:var(--dark-transparent);
+}
+
+*:focus+.f {
+  display:block;
+}
+
+img {
+  max-width:100%;
+}
+
+.toggler {
+  visibility: hidden;
+}
+
+@media screen and (max-width: 1000px) {
+  .bottom {
+    position: relative;
+    margin-top: 13vh;
+    max-height: fit-content;
+  }
+  .postContent {
+    margin: 0 40px;
+  }
+  .posts {
+    padding-left: 100px;
+    padding-right: 100px;
+    flex-direction: column;
+    max-height: fit-content;
+  }
+  .bottom > .posts > .thumbnail {
+    margin: 15px auto;
+  }
+  .bottom > .posts > .thumbnail img {
+    width: fit-content;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  span {
+    display: inline-block;
+  }
+  nav {
+    display: none;
+  }
+  span:hover~nav {
+    display: flex;
+    flex-direction: column;
+  }
+  h1 {
+    margin-top: 85px;
+    font-size: 36px;
+  }
+  .postContent {
+    margin: 100px 0 0 0;
+  }
+  .posts {
+    padding: 0;
+  }
+
+  .toggler{
+  /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
+    visibility: visible;
+    z-index: 4;
+    height: 60px;
+    width: 60px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    opacity: 0;
+    margin: 0;
+  }
+  
+  .hamburger{
+    z-index: 3;
+    position: fixed;
+    top: 0;
+    right: 0;
+    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: var(--accent-color);
+    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: var(--accent-color);
+    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 :  */
+
+  .menu {
+
+  /* APPLYING TRANSITION TO THE MENU :  */
+
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    background-color: var(--dark-transparent);
+    padding: 70px 25px 20px 25px;
+    border-bottom-left-radius: 8px;
+
+  /* HIDDEN INITIALLY  :  */
+
+    visibility: hidden;
+  }
+
+  .menu > a {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    font-size: 34px;
+  }
+
+  /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
+
+  .toggler:checked ~ .menu{
+    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;
+  }
+}
\ No newline at end of file