steven-y-e
/
hinamizawa
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat(css): page layout 

also added some whitespace
main
steven 2020-12-03 16:24:34 -05:00
parent b80313ffc5
commit 68dd51bb5b
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/index.php
View File

@ -9,6 +9,7 @@
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ee0000"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ee0000">
<meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<?php <?php
function getByteString($bytes) { function getByteString($bytes) {
$symbols = array('B', 'KB', 'MB', 'GB', 'TB'); $symbols = array('B', 'KB', 'MB', 'GB', 'TB');
@ -55,6 +56,19 @@
getPercentageUsed($sonozaki_total, $sonozaki_used); getPercentageUsed($sonozaki_total, $sonozaki_used);
?> ?>
<style type="text/css"> <style type="text/css">
/* layout */
header, #homes, #services, footer {
width: 30%;
float: left;
}
header {
word-spacing: 100vw;
}
/* homes */
.home {
width: 50%;
}
.pie { .pie {
background: #bbb; background: #bbb;
border-radius: 100%; border-radius: 100%;
@ -130,13 +144,27 @@
--value: <?php echo ($sonozaki_percent ? $sonozaki_percent : 0); ?>; --value: <?php echo ($sonozaki_percent ? $sonozaki_percent : 0); ?>;
--over50: <?php echo ($sonozaki_percent > 50 ? '1' : '0'); ?> --over50: <?php echo ($sonozaki_percent > 50 ? '1' : '0'); ?>
} }
/* services */
.service {
width: 50%;
}
/* 700px breakpoint */
@media screen and (max-width: 700px) {
footer, #homes, #services, footer {
width: 100%;
}
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<h1>homo.casa</h1> <h1>homo.casa</h1>
<p>Gods and dice are both best when silent.</p> <p>Gods and dice are both best when silent.</p>
</header> </header>
<div id="homes"> <div id="homes">
<h2>homes</h2> <h2>homes</h2>
<div class="home"> <div class="home">
@ -205,6 +233,7 @@
?></em></h4> ?></em></h4>
</div> </div>
</div> </div>
<div id="services"> <div id="services">
<h2>services</h2> <h2>services</h2>
<p>note: authentication required for access.</p> <p>note: authentication required for access.</p>
@ -222,5 +251,6 @@
<footer> <footer>
<p>Child of Man. What is it you seek from this World?</p> <p>Child of Man. What is it you seek from this World?</p>
</footer> </footer>
</body> </body>
</html> </html>