more css, status/link boxes

This commit is contained in:
Lynne Megido 2020-02-29 20:10:01 +10:00
parent 966e27e728
commit c3fa449032
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
3 changed files with 43 additions and 3 deletions

View file

@ -1,3 +1,4 @@
# new-tab-page # new-tab-page
[![Build Status](https://drone.bune.city/api/badges/lynnesbian/new-tab-page/status.svg)](https://drone.bune.city/lynnesbian/new-tab-page)
My own custom new tab page thingy My own custom new tab page thingy

View file

@ -9,6 +9,15 @@
<body> <body>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<div id='boxes'>
<div class='box'>
<h2>Status</h2>
</div>
<div class='box'>
<h2>Links</h2>
</div>
</div>
</body> </body>
</html> </html>

View file

@ -12,12 +12,14 @@ html {
background: #fafafa; background: #fafafa;
} }
h1 { h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", "Roboto", sans-serif; font-family: "Open Sans", "Roboto", sans-serif;
text-align: center; text-align: center;
font-size:4em;
font-weight: 200; font-weight: 200;
} }
h1 {
font-size:4em;
}
p, footer, ul { p, footer, ul {
width: 80%; width: 80%;
@ -39,6 +41,34 @@ a {
text-decoration: none; text-decoration: none;
} }
#boxes {
text-align: center;
}
.box {
position: relative;
margin: 0 30px;
min-height: 300px;
min-width: 300px;
border-radius: 3px;
box-shadow: 0 0 5px black;
display: inline-block;
background: transparent;
transition: 0.2s all linear;
}
.box:hover {
background: #00000011;
}
.box::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
background: radial-gradient(at 0% 0%, #99999911, 80%, #99999944);
}
footer { footer {
text-align: center; text-align: center;
color: grey; color: grey;