Landing page nearly working

This commit is contained in:
2020-07-14 12:20:55 +01:00
parent ce603dcddd
commit 39eed1002e
4 changed files with 31 additions and 19 deletions

View File

@@ -2,20 +2,20 @@
<html lang="en-GB"> <html lang="en-GB">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
<header class="site-header"> <div class="container">
<div class="wrapper" style="text-align: center;"> <header>
<h1 style="padding-top: 0.5em;">Arona Jones</h1> <h1 style="padding-top: 0.5em;">Arona Jones</h1>
</div> </header>
</header> <main aria-label="Content" style="height: 100%">
<main aria-label="Content" style="height: 100%"> <div style="display: flex; justify-content: center; background: black; margin-left: -3vw; margin-right: -3vw;">
<div style="display: flex; justify-content: center; background: black; margin-left: -3vw; margin-right: -3vw;"> <div class="bigimage"><img class="background" src="img/christian-wiediger-WkfDrhxDMC8-unsplash.jpg"><a class="button" href="development"><span class="fas fa-file-code"></span> Development</a></div>
<div class="bigimage"><img class="background" src="img/christian-wiediger-WkfDrhxDMC8-unsplash.jpg"><a class="button" href="development"><span class="fas fa-file-code"></span> Development</a></div> <div class="bigimage"><img class="background" src="img/1*0V2rDSk8SOr6mpfFf28EJA.jpeg"><a class="button" href="writing"><span class="fas fa-pen-fancy"></span> Writing</a></div>
<div class="bigimage"><img class="background" src="img/1*0V2rDSk8SOr6mpfFf28EJA.jpeg"><a class="button" href="writing"><span class="fas fa-pen-fancy"></span> Writing</a></div> <div class="bigimage"><img class="background" src="img/1*kV4-rHsyoDl4ursB1CG72Q.jpeg"><a class="button" href="technical"><span class="fas fa-lightbulb"></span> Technical</a></div>
<div class="bigimage"><img class="background" src="img/1*kV4-rHsyoDl4ursB1CG72Q.jpeg"><a class="button" href="technical"><span class="fas fa-lightbulb"></span> Technical</a></div> <div class="bigimage"><img class="background" src="img/1*2J4xTO7JYBYA3dcMwwGSlw.jpeg"><a class="button" href="blog"><span class="fas fa-portrait"></span> Personal</a></div>
<div class="bigimage"><img class="background" src="img/1*2J4xTO7JYBYA3dcMwwGSlw.jpeg"><a class="button" href="blog"><span class="fas fa-portrait"></span> Personal</a></div> </div>
</div> </main>
</main> {{ partial "footer.html" . }}
{{ partial "footer.html" . }} </div>
</body> </body>
</html> </html>

View File

@@ -1,2 +1,4 @@
<footer style="height: 100px; background: black;"> <footer>
<p style="color: white;">&#169; Copyright lolololol
<br/>All rights reversed</p>
</footer> </footer>

View File

@@ -1,5 +1,18 @@
.site-header { body {
width: 100%;
height: 100%;
font-family: helvetica, arial;
}
header, footer {
background: #202226; background: #202226;
padding: 1rem;
text-align: center;
}
.container {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
} }
/* TODO Proper theme overrides */ /* TODO Proper theme overrides */
h1, .site-title { h1, .site-title {
@@ -12,8 +25,8 @@ h1, .site-title {
transform: skew(-10deg); transform: skew(-10deg);
color: white; color: white;
padding: 2em; padding: 2em;
height: 75vh;
width: 100%; width: 100%;
height: 77vh;
text-align: center; text-align: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;

View File

@@ -1,9 +1,6 @@
/** Reset some basic elements */ /** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
/** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
/** Set `margin-bottom` to maintain vertical rhythm */ /** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }