felixangell/phi
1
1
Fork 0
mirror of https://github.com/felixangell/phi.git synced 2024-08-16 11:10:37 +03:00
Code Issues Projects Releases Wiki Activity

use grid layout

Browse Source
This commit is contained in:
Felix Angell 2019-05-17 00:04:37 +01:00
parent 56be6651d5
commit a883c279cb
3 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 201 KiB

After

Width:  |  Height:  |  Size: 802 KiB

25
index.html
View File

@ -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>
<div class="screenshotContainer">
<img alt="screenshot of the editor" class="fit" src="./images/screenshot.png">
</div>
</main>
</body>
</html>

55
main.css
View File

@ -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%;
}