diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..530abaa --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +scss/csswatch.sh diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..ce61759 --- /dev/null +++ b/css/main.css @@ -0,0 +1,91 @@ +.sidebar { + width: 300px; + height: calc(100vh - 60px); + background: #121212; + padding: 1.5rem; + position: fixed; + left: 0; + top: 0; + overflow-y: auto; + color: #e0e0e0; +} +.sidebar h2 { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + color: #888; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.preview { + margin-left: 300px; + padding: 2rem; + min-height: calc(100vh - 60px); + width: 100%; + background: #2d2d2d; +} +.preview .terminal-preview { + background: #1a1a1a; + border-radius: 8px; + padding: 1.5rem; + font-family: "Fira Code", "Courier New", monospace; + font-size: 14px; + color: #e0e0e0; + height: 300px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 60px; + background: #121212; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} +.footer .logo { + font-size: 1.2rem; + font-weight: 600; + color: #0c7a57; +} +.footer .copy-btn { + background: #0c7a57; + color: white; + border: none; + padding: 0.5rem 1.2rem; + border-radius: 4px; + cursor: pointer; + font-weight: 500; + transition: all 0.2s ease; +} +.footer .copy-btn:hover { + background: rgb(15.6537313433, 159.1462686567, 113.4895522388); +} +.footer .copy-btn:active { + transform: scale(0.98); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; + background: #1a1a1a; + color: #e0e0e0; +} + +.container { + display: flex; + min-height: 100vh; + padding-bottom: 60px; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..613a2fa --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + ~/ShellStyler + + + +
+ + +
+
+ + user@host:~/Works/shell_styler$ +
+
+
+ + + + \ No newline at end of file diff --git a/scss/_footer.scss b/scss/_footer.scss new file mode 100644 index 0000000..530e002 --- /dev/null +++ b/scss/_footer.scss @@ -0,0 +1,38 @@ +.footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: $footer-height; + background: $bg-darker; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); + + .logo { + font-size: 1.2rem; + font-weight: 600; + color: $accent-color; + } + + .copy-btn { + background: $accent-color; + color: white; + border: none; + padding: 0.5rem 1.2rem; + border-radius: 4px; + cursor: pointer; + font-weight: 500; + transition: all 0.2s ease; + + &:hover { + background: lighten($accent-color, 8%); + } + + &:active { + transform: scale(0.98); + } + } +} \ No newline at end of file diff --git a/scss/_preview.scss b/scss/_preview.scss new file mode 100644 index 0000000..992ef04 --- /dev/null +++ b/scss/_preview.scss @@ -0,0 +1,19 @@ +.preview { + margin-left: $sidebar-width; + padding: 2rem; + min-height: calc(100vh - $footer-height); + width: 100%; + background: $bg-light; + + .terminal-preview { + background: $bg-dark; + border-radius: 8px; + padding: 1.5rem; + font-family: 'Fira Code', 'Courier New', monospace; + font-size: 14px; + color: $text-color; + height: 300px; + //width: 100%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + } +} \ No newline at end of file diff --git a/scss/_sidebar.scss b/scss/_sidebar.scss new file mode 100644 index 0000000..a47abad --- /dev/null +++ b/scss/_sidebar.scss @@ -0,0 +1,21 @@ +.sidebar { + width: $sidebar-width; + height: calc(100vh - $footer-height); + background: $bg-darker; + padding: 1.5rem; + position: fixed; + left: 0; + top: 0; + overflow-y: auto; + color: $text-color; + + h2 { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + color: $text-muted; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } +} \ No newline at end of file diff --git a/scss/_vars.scss b/scss/_vars.scss new file mode 100644 index 0000000..b6d8f6a --- /dev/null +++ b/scss/_vars.scss @@ -0,0 +1,12 @@ +// Colors +$bg-dark: #1a1a1a; +$bg-darker: #121212; +$bg-light: #2d2d2d; +//$accent-color: #4d8bf0; +$accent-color: #0c7a57; +$text-color: #e0e0e0; +$text-muted: #888; + +// Sizes +$sidebar-width: 300px; +$footer-height: 60px; \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..d2deb55 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,22 @@ +@import 'vars'; +@import 'sidebar'; +@import 'preview'; +@import 'footer'; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: $bg-dark; + color: $text-color; +} + +.container { + display: flex; + min-height: 100vh; + padding-bottom: $footer-height; +} \ No newline at end of file