@docmd/themes 0.4.0

package/src/docmd-theme-sky.css

@@ -0,0 +1,617 @@
+/* Source file from the docmd project — https://github.com/docmd-io/docmd */
+
+/* 
+ * Sky Theme
+ * Inspired by the clear blue sky
+ * Features: Blue tones, clean lines, subtle gradients
+ */
+
+:root {
+    --sky-primary: #0097ff
+}
+
+:root[data-theme=light] {
+    --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    --accent-color: #0097ff;
+    --sky-primary: #0097ff;
+    --sky-primary-light: #e5f4ff;
+    --sky-primary-dark: #0078cc;
+    --sky-text: #1a1f36;
+    --sky-text-light: #4a5568;
+    --sky-text-lightest: #718096;
+    --sky-background: #fff;
+    --sky-background-alt: #f9fafb;
+    --sky-border: #e2e8f0;
+    --sky-border-light: #edf2f7;
+    --bg-color: var(--sky-background);
+    --text-color: var(--sky-text);
+    --sidebar-bg: #f7fafc;
+    --sidebar-text: var(--sky-text-light);
+    --sidebar-link-active-bg: #e5f4ff;
+    --sidebar-link-active-text: var(--sky-primary);
+    --link-color: var(--sky-primary);
+    --border-color: var(--sky-border);
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-primary-dark);
+    --header-bg: var(--sky-background);
+    --header-border: var(--sky-border);
+    --shadow-sm: 0 1px 2px 0 #0000000d;
+    --shadow-md: 0 4px 6px -1px #0000001a 0 2px 4px -1px #0000000f;
+    --shadow-lg: 0 10px 15px -3px #0000001a 0 4px 6px -2px #0000000d;
+    --image-border-color: var(--sky-border);
+    --image-shadow: var(--shadow-md);
+    --image-caption-bg: var(--sky-background-alt);
+    --image-caption-text: var(--sky-text-light);
+    --image-hover-transform: translateY(-2px);
+    --image-hover-shadow: var(--shadow-lg);
+    --image-border-radius: 8px;
+    --image-transition: all .3s ease
+}
+
+:root[data-theme=dark] {
+    --sky-primary: #3b82f6;
+    --sky-primary-light: #1e293b;
+    --sky-primary-dark: #60a5fa;
+    --sky-text: #f1f5f9;
+    --sky-text-light: #cbd5e1;
+    --sky-text-lightest: #94a3b8;
+    --sky-background: #0f172a;
+    --sky-background-alt: #1e293b;
+    --sky-border: #334155;
+    --sky-border-light: #1e293b;
+    --bg-color: var(--sky-background);
+    --text-color: var(--sky-text);
+    --sidebar-bg: #0f172a;
+    --sidebar-text: var(--sky-text-light);
+    --sidebar-link-active-bg: #1e293b;
+    --sidebar-link-active-text: var(--sky-primary);
+    --link-color: var(--sky-primary);
+    --border-color: var(--sky-border);
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-text);
+    --header-bg: var(--sky-background);
+    --header-border: var(--sky-border);
+    --shadow-sm: 0 1px 2px 0 #0000004d;
+    --shadow-md: 0 4px 6px -1px #0000004d 0 2px 4px -1px #0003;
+    --shadow-lg: 0 10px 15px -3px #0000004d 0 4px 6px -2px #0003;
+    --image-border-color: var(--sky-border);
+    --image-shadow: 0 4px 8px #00000080;
+    --image-caption-bg: var(--sky-background-alt);
+    --image-caption-text: var(--sky-text-light);
+    --image-hover-transform: translateY(-2px);
+    --image-hover-shadow: 0 6px 12px #000000b3;
+    --image-border-radius: 8px;
+    --image-transition: all .3s ease
+}
+
+body {
+    font-feature-settings: salt, ss01, ss02;
+    letter-spacing: -.01em
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 2em;
+    margin-bottom: .5em;
+    color: var(--sky-text)
+}
+
+.sidebar nav li a.active,
+.sidebar nav li a:hover {
+    background-color: var(--sidebar-link-active-bg);
+    color: var(--sidebar-link-active-text)
+}
+
+pre,
+table {
+    margin: 1.5em 0;
+    border-radius: 8px;
+    box-shadow: var(--shadow-sm)
+}
+
+td,
+th {
+    padding: .75rem 1rem
+}
+
+th,
+tr:hover {
+    background-color: var(--sky-background-alt)
+}
+
+.callout,
+.steps {
+    position: relative
+}
+
+.card,
+figure,
+table {
+    overflow: hidden
+}
+
+.docmd-container,
+.sidebar,
+figure,
+pre,
+table {
+    box-shadow: var(--shadow-sm)
+}
+
+.card .card-content>:last-child,
+figure img {
+    margin-bottom: 0
+}
+
+.card .card-content>:first-child,
+h1 {
+    margin-top: 0
+}
+
+h1 {
+    font-size: 2.25rem;
+    font-weight: 700
+}
+
+h2 {
+    font-size: 1.75rem;
+    border-bottom: 1px solid var(--sky-border-light);
+    padding-bottom: .5rem
+}
+
+h3 {
+    font-size: 1.5rem
+}
+
+h4 {
+    font-size: 1.25rem
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color .2s
+}
+
+a:hover {
+    text-decoration: underline
+}
+
+p {
+    margin: .5em 0;
+    padding: .5em 0;
+    line-height: 1.7
+}
+
+.sidebar nav li a {
+    border-radius: 6px;
+    margin-bottom: 2px;
+    transition: .2s
+}
+
+.sidebar nav li a.active {
+    font-weight: 500
+}
+
+.content-area {
+    padding: 2.5rem 5%
+}
+
+pre {
+    background-color: var(--code-bg);
+    padding: 1.25em
+}
+
+code {
+    font-size: .9em;
+    border-radius: 4px;
+    padding: .2em .4em
+}
+
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0
+}
+
+th {
+    text-align: left;
+    font-weight: 600
+}
+
+td {
+    border-top: 1px solid var(--sky-border-light)
+}
+
+.docmd-container {
+    padding: .5rem 1.5rem;
+    margin: 1.75rem 0;
+    border-radius: 10px;
+    border: 1px solid var(--sky-border-light);
+    background-color: var(--sky-background)
+}
+
+.callout,
+.card {
+    background-color: var(--card-bg)
+}
+
+.callout {
+    border: none;
+    border-left: 5px solid
+}
+
+.callout-title {
+    font-weight: 600;
+    margin-bottom: .75em;
+    display: flex;
+    align-items: center
+}
+
+.callout-title::before {
+    margin-right: .5rem;
+    font-size: 1.1em
+}
+
+.callout-info {
+    border-left-color: var(--sky-primary)
+}
+
+.callout-info .callout-title::before {
+    content: "ℹ️"
+}
+
+.callout-warning {
+    border-left-color: #f59e0b
+}
+
+.callout-warning .callout-title::before {
+    content: "⚠️"
+}
+
+.callout-success,
+.callout-tip {
+    border-left-color: #10b981
+}
+
+.callout-tip .callout-title::before {
+    content: "💡"
+}
+
+.callout-danger {
+    border-left-color: #ef4444
+}
+
+.callout-danger .callout-title::before {
+    content: "🚨"
+}
+
+.callout-success .callout-title::before {
+    content: "✅"
+}
+
+.card {
+    border: 1px solid var(--sky-border);
+    box-shadow: var(--text-color);
+    transition: transform .2s, box-shadow .2s;
+    display: flex;
+    flex-direction: column
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg)
+}
+
+.card .card-title {
+    padding: .5rem 1.5rem 1rem;
+    border-bottom: 1px solid var(--sky-border);
+    font-weight: 600;
+    margin-top: 0
+}
+
+.card .card-content {
+    flex: 1;
+    padding: .25rem
+}
+
+.steps {
+    counter-reset: step-counter;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+    margin-left: 1rem
+}
+
+.steps::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0 !important;
+    left: 1.5rem !important;
+    width: 3px !important;
+    background-color: var(--sky-border);
+    transform: translateX(-50%);
+    z-index: 0
+}
+
+.steps .step {
+    position: relative;
+    padding: .5rem 2.5em;
+    border-radius: 10px;
+    margin-bottom: 1em;
+    display: block;
+    background-color: var(--card-bg)
+}
+
+.steps .step:last-child {
+    padding-bottom: 0
+}
+
+.steps h4,
+.steps ol li strong:first-child,
+.steps ol li:first-child {
+    position: relative;
+    counter-increment: step-counter;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    display: block
+}
+
+.steps h4::before,
+.steps ol li::before {
+    content: counter(list-counter) !important;
+    position: absolute;
+    left: -2.55rem;
+    top: .5rem;
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--sky-primary);
+    color: #fff !important;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem !important;
+    font-weight: 500 !important;
+    z-index: 1
+}
+
+.steps .step h4,
+.steps .step ol,
+.steps .step>div,
+.steps .step>p,
+.steps .step>pre,
+.steps ol,
+.steps ol li {
+    display: block
+}
+
+.step-content,
+.step-content>div,
+.step-content>p,
+.step-content>pre {
+    display: block;
+    margin-top: .5rem;
+    margin-bottom: 1rem
+}
+
+.steps ol+*,
+.steps pre {
+    margin-top: 1rem
+}
+
+.steps ol {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0
+}
+
+.steps ol li {
+    position: relative;
+    margin-bottom: 1rem
+}
+
+.steps .step h4 {
+    font-weight: 600;
+    margin-bottom: 1rem
+}
+
+.steps .step ol {
+    counter-reset: none;
+    list-style: decimal;
+    padding-left: 1.5rem;
+    margin-top: .5rem
+}
+
+.steps .step ol li {
+    padding-left: 0;
+    margin-bottom: .5rem;
+    display: list-item
+}
+
+.steps .step ol li::before {
+    display: none
+}
+
+.steps pre {
+    margin-bottom: 1rem
+}
+
+.button,
+button {
+    padding: .5rem 1rem;
+    background-color: var(--sky-primary);
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color .2s
+}
+
+.image-gallery figure,
+figure,
+img {
+    transition: var(--image-transition)
+}
+
+.button:hover,
+button:hover {
+    background-color: var(--sky-primary-dark)
+}
+
+.docmd-search-trigger,
+.theme-toggle-button {
+    background-color: var(--sky-background-alt);
+    border-color: var(--sky-border-light);
+    border-radius: 6px;
+    transition: .2s
+}
+
+.docmd-search-trigger:hover,
+.theme-toggle-button:hover {
+    background-color: var(--sky-primary-light)
+}
+
+img {
+    border-radius: var(--image-border-radius)
+}
+
+img.with-border {
+    border: 1px solid var(--image-border-color);
+    padding: 8px;
+    background-color: var(--bg-color)
+}
+
+img.with-shadow {
+    box-shadow: var(--image-shadow)
+}
+
+img.with-shadow:hover {
+    box-shadow: var(--image-hover-shadow)
+}
+
+figure {
+    border-radius: var(--image-border-radius)
+}
+
+figure:hover {
+    box-shadow: var(--shadow-md)
+}
+
+figure img {
+    border-radius: var(--image-border-radius) var(--image-border-radius) 0 0
+}
+
+figcaption {
+    background-color: var(--image-caption-bg);
+    color: var(--image-caption-text);
+    padding: .75rem 1rem;
+    font-size: .9rem;
+    font-weight: 500
+}
+
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0
+}
+
+.image-gallery figure {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0
+}
+
+.image-gallery figure:hover {
+    transform: var(--image-hover-transform)
+}
+
+.image-gallery img {
+    height: 200px;
+    width: 100%;
+    object-fit: cover;
+    margin: 0
+}
+
+.image-gallery figcaption {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center
+}
+
+.image-gallery.zoom img {
+    transition: transform .5s
+}
+
+.image-gallery.zoom figure:hover img {
+    transform: scale(1.05)
+}
+
+img.lightbox {
+    cursor: zoom-in
+}
+
+img.framed {
+    border: 8px solid #fff;
+    box-shadow: 0 0 0 1px var(--image-border-color), var(--image-shadow);
+    box-sizing: border-box
+}
+
+figure.polaroid {
+    background: #fff;
+    padding: 10px 10px 30px;
+    box-shadow: var(--shadow-md)
+}
+
+figure.polaroid img {
+    border-radius: 0;
+    box-shadow: none
+}
+
+figure.polaroid figcaption {
+    background: #fff;
+    color: var(--sky-text);
+    font-family: Caveat, cursive, var(--font-family-sans);
+    font-size: 1.1rem
+}
+
+@media (max-width:768px) {
+    .content-area {
+        padding: 1.5rem 1rem
+    }
+
+    h1 {
+        font-size: 1.75rem
+    }
+
+    h2 {
+        font-size: 1.5rem
+    }
+
+    h3 {
+        font-size: 1.25rem
+    }
+
+    .image-gallery {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+    }
+
+    .image-gallery img {
+        height: 150px
+    }
+}