mirror of
https://github.com/felixangell/phi.git
synced 2024-09-11 07:45:30 +03:00
use grid layout
This commit is contained in:
parent
56be6651d5
commit
a883c279cb
Binary file not shown.
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 802 KiB |
23
index.html
23
index.html
@ -8,23 +8,28 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<main>
|
||||
<header>
|
||||
<img class="logo" src="images/icon256.png">
|
||||
<div class="logoContainer">
|
||||
<img src="images/icon256.png">
|
||||
</div>
|
||||
|
||||
<h1 class="">phi code editor</h1>
|
||||
<div class="section">
|
||||
<div class="aboutContainer">
|
||||
<h1 class="title">phi code editor</h1>
|
||||
<p>
|
||||
Phi is a code editor whose main goals are simplicity,
|
||||
speed, and beauty. The editor is still a work in progress.
|
||||
speed, and beauty.
|
||||
</p>
|
||||
<p>
|
||||
The editor is still a work in progress.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<img alt="screenshot of the editor" class="fit" src="https://raw.githubusercontent.com/felixangell/phi/master/screenshot.png">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="screenshotContainer">
|
||||
<img alt="screenshot of the editor" class="fit" src="./images/screenshot.png">
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
55
main.css
55
main.css
@ -13,48 +13,31 @@ body {
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
h1.title {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 15px;
|
||||
.logoContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logoContainer img {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f8f273;;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: block;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img.fit {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
main {
|
||||
display: block;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
margin: 5em auto;
|
||||
}
|
||||
|
||||
.screenshotContainer img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
Loading…
Reference in New Issue
Block a user