new design and added class function

style.css

@@ -3,47 +3,65 @@
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
+
+    --footer-height: 3rem;
+    --calendar-header-height: 4rem;
+}
+
+body {
+    background: #000;
+}
+
+footer {
+    height: var(--footer-height);
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+footer a {
+    color: #76d714;
+    text-decoration: none;
+}
+
+footer a:hover {
+    color: #609926;
 }
 
 .container {
     width: 100%;
-    height: 100dvh;
+    height: calc(100vh - var(--footer-height));
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 0 1 auto;
+    border-radius: .4rem;
 }
 
-.calendar {
-    width: 900px;
-    height: 650px;
-    background: floralwhite;
-    border: 1px solid black;
+#calendar {
+    width: 1080px;
+    height: 910px;
+
+    /* From https://css.glass */
+    background: rgba(62, 31, 31, 0.2);
+    border-radius: .4rem;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+/* ===== HEADER ===== */
 #calendar__header {
-    background: aliceblue;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
     display: flex;
     justify-content: space-between;
-    height: 3rem;
-}
-
-#calendar__body {
-    width: 100%;
-    height: calc(100% - 3rem);
-    padding: 0.5rem;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
-    gap: 0.5rem 0.5rem;
-    grid-template-areas:
-    ". . . . . . ."
-    ". . . . . . ."
-    ". . . . . . ."
-    ". . . . . . ."
-    ". . . . . . ."
-    ". . . . . . .";
+    height: var(--calendar-header-height);
+    border-radius: .4rem .4rem 0 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 #calendar__header * {
@@ -53,6 +71,10 @@
     display: flex;
     align-items: center;
     font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    user-select: none;
 }
 
 #calendar__header .year {
@@ -67,7 +89,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: .5rem;
+    gap: 1rem;
 }
 
 #calendar__header .actions button {
@@ -75,15 +97,60 @@
     justify-content: center;
     align-items: center;
     padding: 1rem;
+
+    background: none;
+    color: white;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
 }
 
-.day {
-    background: burlywood;
+/* ===== BODY ===== */
+#calendar__body {
+    width: 100%;
+    height: calc(100% - var(--calendar-header-height));
+    padding: 1rem;
+    border-radius: 10px;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr;
+    gap: 0.5rem 0.5rem;
+    grid-template-areas:
+    ". . . . . . ."
+    ". . . . . . ."
+    ". . . . . . ."
+    ". . . . . . ."
+    ". . . . . . ."
+    ". . . . . . ."
+    ". . . . . . .";
 }
 
-.weekday {
+#calendar__body .day {
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 0.2rem;
+    cursor: pointer;
+}
+
+#calendar__body .dim {
+    background: rgba(192, 192, 192, 0.7);
+}
+
+#calendar__body .weekday {
     height: 2.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
+    user-select: none;
+    cursor: initial;
+    text-transform: uppercase;
+}
+
+#calendar__body .monthday {
+    display: flex;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#calendar__body .monthday #date {
+    margin-top: .3rem;
+    margin-left: .5rem;
 }