API klici

styles/main.css

@@ -3,6 +3,7 @@
 :root[data-theme="dark"] {
     --bg-color: #333;
     --text-color: #fff;
+    --link-color: #ddd;
     --nav-bg: #2b2b2b;
     --nav-btn-bg: #3a3a3a;
     --nav-btn-hover-bg: #474747;
@@ -16,6 +17,7 @@
 :root[data-theme="light"] {
     --bg-color: #fff;
     --text-color: #333;
+    --link-color: #007acc;
     --nav-bg: #f0f0f0;
     --nav-btn-bg: #e0e0e0;
     --nav-btn-hover-bg: #d0d0d0;
@@ -35,9 +37,12 @@
 body {
     margin: 0;
     min-height: 100vh;
+    min-height: 100dvh;
     font-family: "Georgia", "Times New Roman", serif;
     background-color: var(--bg-color);
     color: var(--text-color);
+    display: flex;
+    flex-direction: column;
 
     /* Smooth Theme Transition */
     transition: background-color 0.25s ease, color 0.25s ease
@@ -51,13 +56,75 @@ html {
     transition: background-color 0.25s ease, color 0.25s ease
 }
 
+.page-header {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
 header {
     position: sticky;
     top: 0;
     z-index: 1;
     width: 100%;
-    /*padding: 8px 12px;*/
-    padding-top: 6px;
+    padding: 0;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 10px;
+    background: var(--nav-bg);
+    color: var(--text-color);
+    font-size: 0.9rem;
+
+    /* Smooth Theme Transition */
+    transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+main {
+    flex: 1;
+}
+
+.page-footer {
+    margin-top: auto;
+}
+
+.page-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    color: var(--text-color);
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+
+    /* left side with padding */
+    text-align: left;
+    padding-left: 23px;
+}
+
+.page-paragraph {
+    font-size: 1rem;
+    line-height: 1.3;
+    margin-bottom: 8px;
+    color: var(--text-color);
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+
+    /* left side with padding */
+    text-align: left;
+    padding-left: 23px;
+}
+
+.page-link {
+    color: var(--link-color);
+    text-decoration: underline;
+    font-weight: 500;
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
 }
 
 nav {
@@ -65,8 +132,8 @@ nav {
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    width: min(1000px, calc(100% - 16px));
-    margin: 0 auto;
+    width: 100%;
+    margin: 0;
     padding: 10px 14px;
     /*border: 1px solid #444;
     border-radius: 10px;*/
@@ -205,4 +272,40 @@ nav {
     width: 1.1em;
     text-align: center;
     transition: color 0.25s ease;
+}
+
+/* Entry cards */
+.entry-container, #entry-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.entry-card {
+    border: 1px solid var(--nav-btn-border);
+    border-radius: 8px;
+    padding: 16px;
+    background: var(--nav-btn-bg);
+    color: var(--text-color);
+    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+.entry-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.entry-definition {
+    font-size: 0.8rem;
+    margin-bottom: 4px;
+}
+
+.entry-example {
+    margin-top: 8px;
+    font-size: 0.75rem;
+    font-style: italic;
 }