aboutsummaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css400
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
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 22:42:31 +0000