aboutsummaryrefslogtreecommitdiff
path: root/data/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'data/static/style.css')
-rw-r--r--data/static/style.css400
1 files changed, 0 insertions, 400 deletions
diff --git a/data/static/style.css b/data/static/style.css
deleted file mode 100644
index 3848e60..0000000
--- a/data/static/style.css
+++ /dev/null
@@ -1,400 +0,0 @@
-@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-21 19:13:44 +0000