quartznet/quartznet-info
2
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

moved static files

Browse Source 
improved css
This commit is contained in:
Ben Parsons
2020-08-20 15:42:54 +10:00
parent b5d25af1ff
commit dc6580e21c
15 changed files with 45 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Nav.svelte
View File

@@ -1,84 +1,42 @@
<script>
export let segment;
export let rightComponent;
export let segment;
export let rightComponent;
</script>
<style>
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
flex-flow: row nowrap;
position: relative;
justify-content: flex-start;
width: 100%;
margin-right: auto;
margin-left: auto;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
/* clearfix */
ul::after {
content: '';
display: inline-block;
clear: both;
}
li {
font-size: 1rem;
text-align: center;
padding: 5px;
box-sizing: border-box;
list-style: none;
}
[aria-current] {
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255, 62, 0);
display: block;
bottom: -1px;
}
a {
color: #CC99FF;
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
/*
/*
.right {
margin-left: auto;
align-self: flex-end !important;
}
*/
a {
font-size: 1rem;
text-align: center;
}
</style>
<header>
<div class="container">
<nav class="navbar navbar-expand-md">
<div class="navbar-collapse order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
<li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
<nav>
<ul>
<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
<li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a></li>
<li class="right">
<svelte:component this={rightComponent}/>
</li>
</ul>
</nav>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li>
<svelte:component this={rightComponent}/>
</li>
</ul>
</div>
</nav>
</div>
</header>

53
src/components/banner.svelte
View File

@@ -3,77 +3,28 @@
</script>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-display: swap;
font-size: 1rem;
line-height: 1.8;
margin-top: 0;
}
.description {
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
}
.overlay {
display: flex;
background-image: url("/bluenebula.webp");
background-image: url("/img/bluenebula.webp");
background-size: cover;
background-position: center;
min-height: 200px;
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
.title {
display: inline-block;
font-size: 3rem;
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-weight: 500;
margin-bottom: 0.5rem;
margin-top: 0px;
}
main {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
display: block;
box-sizing: border-box;
}
.description p {
margin-top: 0;
margin-bottom: 1rem;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
}
h5 {
color: var(--headings-color);
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
<div class="overlay">
<div class="description">
<div class="description col-md-5">
<h1 class="title">{title}</h1>
<p>Software, Games, Science, Space!</p>
</div>

58
src/components/gameProjectThumb.svelte
View File

@@ -7,70 +7,16 @@
</script>
<style>
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
box-sizing: border-box;
}
.thumb {
flex: 0 0 58.333333%;
max-width: 58.333333%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
.blurb {
flex: 0 0 41.666667%;
max-width: 41.666667%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
h2 {
font-size: 2rem;
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
box-sizing: border-box;
}
a {
color: #CC99FF;
text-decoration: none;
background-color: transparent;
}
img {
margin-bottom: 0 !important;
max-width: 100%;
height: auto;
vertical-align: middle;
border-style: none;
box-sizing: border-box;
}
</style>
<div class="row">
<div class="thumb">
<div class="thumb col-md-7">
<a href="{name}">
<img class={imgClass} {src} alt={name}>
</a>
</div>
<div class="blurb">
<div class="blurb col-md-5">
<h2>{name}</h2>
<p>{description}</p>
</div>

8
src/components/userManager.svelte
View File

@@ -5,17 +5,15 @@
<style>
img {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding: .2rem;
}
a {
position: relative;
right: 50%;
display: inline-block;
height: 100%;
}
</style>