Skip to content

Commit

Permalink
fixed webpage styling
Browse files Browse the repository at this point in the history
  • Loading branch information
chwoerz committed Dec 19, 2024
1 parent b81f42b commit 3aaf9eb
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 38 deletions.
4 changes: 4 additions & 0 deletions extension/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Change Log

## [0.0.2]

- Bug Fixes and better UI

## [0.0.1]

- Initial release
4 changes: 2 additions & 2 deletions extension/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "type-buddy",
"displayName": "Type Buddy",
"description": "A simple extension to help you understand TypeScript types",
"version": "0.0.1",
"version": "0.0.2",
"publisher": "chwoerz",
"engines": {
"vscode": "^1.85.0"
Expand Down
33 changes: 17 additions & 16 deletions page/index.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Buddy 🤝</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/src/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Buddy 🤝</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/src/style.css">
</head>
<body>
<script type="module" src="/src/main.ts"></script>

<h1>Type Buddy</h1>
<div class="container">
<div class="editor" id="left">
<!-- Integrate your TypeScript editor here -->
<h2>Type-Input</h2>
</div>
<div class="editor" id="right">
<!-- Integrate your output editor here -->
<h2>Types as Functions</h2>
</div>
<div class="editor-container">
<div class="editor-block">
<h2>Type Editor</h2>
<p>Write your normal types in here</p>
<div id="left" class="editor"></div>
</div>
<div class="editor-block">
<h2>Type Function Editor</h2>
<p>Write your types as functions</p>
<div id="right" class="editor"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
60 changes: 41 additions & 19 deletions page/src/style.css
Original file line number Diff line number Diff line change
@@ -1,30 +1,52 @@
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
background: rgb(28, 28, 28);
color: white;
html, body {
margin: 0;
padding: 0;
background: rgb(49, 49, 49);
color: white;
font-family: Arial, sans-serif;
}

h1, h2 {
text-align: center;
.editor-container {
display: flex;
flex-direction: row;
gap: 2vw;
height: calc(100vh - 56px); /* Adjust based on your header height */
width: 94vw;
margin: 0 auto;
padding-left: 2vw;

box-sizing: border-box;
}

.container {
display: flex;
height: 100%;
h1 {
text-align: center;
font-size: 2.5rem;
}

h2 {
text-align: center;
font-size: 2rem;
margin: 0;
padding: 10px;
}
.editor-block {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
p {
text-align: center;
font-size: 1.5rem;
}
.editor {
flex: 1;
margin: 10px;
overflow: auto;

flex: 1;
position: relative;
}


/* Responsive: Stack editors vertically on narrow screens */
@media (max-width: 1200px) {
.container {
flex-direction: column;
}
.editor-container {
flex-direction: column;
}
}

0 comments on commit 3aaf9eb

Please sign in to comment.