Browse Source

fix tabbing

master
neko 3 weeks ago
parent
commit
2a424ce7aa
16 changed files with 259 additions and 259 deletions
  1. +20
    -20
      .eleventy.js
  2. +1
    -1
      src/_includes/footer.liquid
  3. +5
    -5
      src/_includes/header.liquid
  4. +2
    -2
      src/_includes/nav.liquid
  5. +43
    -43
      src/_layouts/default.liquid
  6. +12
    -12
      src/assets/css/abstracts/_fonts.scss
  7. +17
    -17
      src/assets/css/base/_border.scss
  8. +19
    -19
      src/assets/css/base/_container.scss
  9. +7
    -7
      src/assets/css/base/_typography.scss
  10. +34
    -34
      src/assets/css/components/_card.scss
  11. +12
    -12
      src/assets/css/components/_link.scss
  12. +39
    -39
      src/assets/css/components/_quote.scss
  13. +2
    -2
      src/assets/css/layout/_footer.scss
  14. +16
    -16
      src/assets/css/layout/_header.scss
  15. +7
    -7
      src/assets/css/layout/_nav.scss
  16. +23
    -23
      src/index.liquid

+ 20
- 20
.eleventy.js View File

@ -2,30 +2,30 @@ const markdown_it = require('markdown-it');
const sass_plugin = require('eleventy-plugin-sass')
module.exports = function(c) {
// add sass plugin
c.addPlugin(sass_plugin, {
watch: ['src/**/*.{scss,sass}', '!node_modules/**']
});
// add sass plugin
c.addPlugin(sass_plugin, {
watch: ['src/**/*.{scss,sass}', '!node_modules/**']
});
// add markdown filter & shortcode
c.addFilter('md', markdown);
c.addPairedShortcode('md', markdown);
// add markdown filter & shortcode
c.addFilter('md', markdown);
c.addPairedShortcode('md', markdown);
// add pass-through for fonts & images
c.addPassthroughCopy('src/assets/fonts');
c.addPassthroughCopy('src/assets/images');
// add pass-through for fonts & images
c.addPassthroughCopy('src/assets/fonts');
c.addPassthroughCopy('src/assets/images');
// return static configuration
return {
dir: {
input: './src',
output: './dist',
layouts: '_layouts',
includes: '_includes'
}
}
// return static configuration
return {
dir: {
input: './src',
output: './dist',
layouts: '_layouts',
includes: '_includes'
}
}
}
function markdown(c) {
return markdown_it().render(c);
return markdown_it().render(c);
}

+ 1
- 1
src/_includes/footer.liquid View File

@ -1,3 +1,3 @@
<footer>
<p class="text_small">copyright &copy; {{ "now" | date: "%Y" }} neko. all rights reserved</p>
<p class="text_small">copyright &copy; {{ "now" | date: "%Y" }} neko. all rights reserved</p>
</footer>

+ 5
- 5
src/_includes/header.liquid View File

@ -1,7 +1,7 @@
<header>
<div class="logo">
<a href="/"><img src="/assets/images/kitty.gif"></a>
</div>
<h1 class="title">{{ title }}</h1>
{% include nav %}
<div class="logo">
<a href="/"><img src="/assets/images/kitty.gif"></a>
</div>
<h1 class="title">{{ title }}</h1>
{% include nav %}
</header>

+ 2
- 2
src/_includes/nav.liquid View File

@ -1,4 +1,4 @@
<nav>
<div class="nav_link"><a href="/">home</a></div>
<div class="nav_link"><a href="/contact">contact</a></div>
<div class="nav_link"><a href="/">home</a></div>
<div class="nav_link"><a href="/contact">contact</a></div>
</nav>

+ 43
- 43
src/_layouts/default.liquid View File

@ -1,51 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>{% if title %}{{ title }} - neko{% else %}neko{% endif %}</title>
{% if description %}<meta name="description" content="{{ description }}">{% endif %}
<meta name="image" content="https://neko.vg/assets/images/open-graph-image.png">
<meta charset="utf-8">
<title>{% if title %}{{ title }} - neko{% else %}neko{% endif %}</title>
{% if description %}<meta name="description" content="{{ description }}">{% endif %}
<meta name="image" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- google -->
<meta itemprop="name" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
{% if description %}<meta itemprop="description" content="{{ description }}">{% endif %}
<meta itemprop="image" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- google -->
<meta itemprop="name" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
{% if description %}<meta itemprop="description" content="{{ description }}">{% endif %}
<meta itemprop="image" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
{% if description %}<meta name="twitter:description" content="{{ description }}">{% endif %}
<meta name="twitter:image:src" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
{% if description %}<meta name="twitter:description" content="{{ description }}">{% endif %}
<meta name="twitter:image:src" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- open graph -->
<meta property="og:title" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page_url }}">
{% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
<meta name="og:image" content="https://neko.vg/assets/images/open-graph-image.png">
<!-- open graph -->
<meta property="og:title" content="{% if title %}{{ title }} - neko{% else %}neko{% endif %}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page_url }}">
{% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
<meta name="og:image" content="https://neko.vg/assets/images/open-graph-image.png">
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="rgba(122, 162, 247, 0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<div class="container">
<main>
{% include header %}
{{ content }}
</main>
{% include footer %}
</div>
</body>
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="rgba(122, 162, 247, 0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<div class="container">
<main>
{% include header %}
{{ content }}
</main>
{% include footer %}
</div>
</body>
</html>

+ 12
- 12
src/assets/css/abstracts/_fonts.scss View File

@ -1,19 +1,19 @@
@font-face {
font-family: 'AUTHENTIC Sans';
src: url('/assets/fonts/AUTHENTICSans-150.woff2') format('woff2'),
url('/assets/fonts/AUTHENTICSans-150.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
font-family: 'AUTHENTIC Sans';
src: url('/assets/fonts/AUTHENTICSans-150.woff2') format('woff2'),
url('/assets/fonts/AUTHENTICSans-150.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AUTHENTIC Sans';
src: url('/assets/fonts/AUTHENTICSans-90.woff2') format('woff2'),
url('/assets/fonts/AUTHENTICSans-90.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
font-family: 'AUTHENTIC Sans';
src: url('/assets/fonts/AUTHENTICSans-90.woff2') format('woff2'),
url('/assets/fonts/AUTHENTICSans-90.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
$font-os: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+ 17
- 17
src/assets/css/base/_border.scss View File

@ -1,37 +1,37 @@
html:before, html:after, body:before, body:after {
content: "";
position: fixed;
z-index: 99;
content: "";
position: fixed;
z-index: 99;
}
html:before, html:after {
left: 0;
right: 0;
height: 10px;
left: 0;
right: 0;
height: 10px;
}
html:before {
top: 0;
background-image: linear-gradient(to right, $clr-rainbow);
top: 0;
background-image: linear-gradient(to right, $clr-rainbow);
}
html:after {
bottom: 0;
background-image: linear-gradient(to left, $clr-rainbow);
bottom: 0;
background-image: linear-gradient(to left, $clr-rainbow);
}
body:before, body:after {
top: 0;
bottom: 0;
width: 10px;
top: 0;
bottom: 0;
width: 10px;
}
body:before {
left: 0;
background-image: linear-gradient(to bottom, $clr-rainbow);
left: 0;
background-image: linear-gradient(to bottom, $clr-rainbow);
}
body:after {
right: 0;
background-image: linear-gradient(to top, $clr-rainbow);
right: 0;
background-image: linear-gradient(to top, $clr-rainbow);
}

+ 19
- 19
src/assets/css/base/_container.scss View File

@ -1,32 +1,32 @@
* {
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
height: 100%;
}
body {
background: $clr-bg;
color: $clr-fg;
margin: 0;
padding: 0;
background: $clr-bg;
color: $clr-fg;
margin: 0;
padding: 0;
}
.container {
max-width: 60em;
width: calc(100% - 30px);
height: 100%;
padding-top: 5em;
margin: 0 auto;
display: flex;
flex-direction: column;
max-width: 60em;
width: calc(100% - 30px);
height: 100%;
padding-top: 5em;
margin: 0 auto;
display: flex;
flex-direction: column;
main {
flex: 1 0 auto;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
footer {
flex-shrink: 0;
}
}

+ 7
- 7
src/assets/css/base/_typography.scss View File

@ -1,21 +1,21 @@
html {font-size: 112.5%;} /*18px*/
body {
font-family: $font-sans;
line-height: 1.75;
font-family: $font-sans;
line-height: 1.75;
}
p {margin-bottom: 1rem;}
h1, h2, h3, h4, h5 {
margin: 3rem 0 1.38rem;
font-weight: bold;
line-height: 1.3;
margin: 3rem 0 1.38rem;
font-weight: bold;
line-height: 1.3;
}
h1 {
margin-top: 0;
font-size: 3.052rem;
margin-top: 0;
font-size: 3.052rem;
}
h2 {font-size: 2.441rem;}


+ 34
- 34
src/assets/css/components/_card.scss View File

@ -1,43 +1,43 @@
.cardset {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1rem;
width: calc(100% - 4rem);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1rem;
width: calc(100% - 4rem);
margin: 0 auto;
}
.card {
background-color: lighten($clr-bg, 10%);
padding: 1.5rem 1rem 1rem;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: lighten($clr-bg, 10%);
padding: 1.5rem 1rem 1rem;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
display: flex;
flex-direction: column;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to right, $clr-rainbow);
height: 0.5rem;
width: 100%;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to right, $clr-rainbow);
height: 0.5rem;
width: 100%;
}
.card-content {
flex: 1 0 auto;
}
.card-content {
flex: 1 0 auto;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
}
.card-link {
text-align: right;
flex-shrink: 0;
padding: 0;
margin: 0;
}
.card-link {
text-align: right;
flex-shrink: 0;
padding: 0;
margin: 0;
}
}

+ 12
- 12
src/assets/css/components/_link.scss View File

@ -1,15 +1,15 @@
a {
color: $clr-link;
text-decoration: none;
border-bottom: 1px solid $clr-link;
padding-bottom: 0.5px;
color: $clr-link;
text-decoration: none;
border-bottom: 1px solid $clr-link;
padding-bottom: 0.5px;
&:hover {
padding-bottom: 3px;
border-bottom: none;
background-size: auto 3px;
background-position: 0 calc(100% - 0.5px);
background-repeat: repeat-x;
background-image: url('/assets/images/squiggle.svg');
}
&:hover {
padding-bottom: 3px;
border-bottom: none;
background-size: auto 3px;
background-position: 0 calc(100% - 0.5px);
background-repeat: repeat-x;
background-image: url('/assets/images/squiggle.svg');
}
}

+ 39
- 39
src/assets/css/components/_quote.scss View File

@ -1,45 +1,45 @@
.quote {
max-width: 30em;
margin: 0 auto;
position: relative;
padding: 10px;
max-width: 30em;
margin: 0 auto;
position: relative;
padding: 10px;
&:before, &:after {
content: "";
position: absolute;
opacity: 0.2;
width: 100px;
height: 100px;
z-index: -1;
-webkit-filter: drop-shadow(5px 5px 0px rgba(122, 162, 247, 0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
}
&:before, &:after {
content: "";
position: absolute;
opacity: 0.2;
width: 100px;
height: 100px;
z-index: -1;
-webkit-filter: drop-shadow(5px 5px 0px rgba(122, 162, 247, 0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
}
&:before {
top: 0;
left: 0;
background-image: url("/assets/images/quote_l.png");
background-size: cover;
}
&:before {
top: 0;
left: 0;
background-image: url("/assets/images/quote_l.png");
background-size: cover;
}
&:after {
bottom: 0;
right: 0;
background-image: url("/assets/images/quote_r.png");
background-size: cover;
}
.quote_content {
text-align: center;
}
&:after {
bottom: 0;
right: 0;
background-image: url("/assets/images/quote_r.png");
background-size: cover;
}
.quote_content {
text-align: center;
}
.quote_author {
&:before {
content: "\2014";
margin-right: 1rem;
}
text-align: right;
}
.quote_author {
&:before {
content: "\2014";
margin-right: 1rem;
}
text-align: right;
}
}

+ 2
- 2
src/assets/css/layout/_footer.scss View File

@ -1,4 +1,4 @@
footer {
text-align: center;
margin-top: 5em;
text-align: center;
margin-top: 5em;
}

+ 16
- 16
src/assets/css/layout/_header.scss View File

@ -1,21 +1,21 @@
header {
margin-bottom: 5em;
text-align: center;
margin-bottom: 5em;
text-align: center;
.logo {
image-rendering: crisp-edges;
margin-bottom: 1rem;
.logo {
image-rendering: crisp-edges;
margin-bottom: 1rem;
a {
border: none;
a {
border: none;
&:hover {
background: none;
-webkit-filter: drop-shadow(5px 5px 0px rgba(122, 162, 247, 0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
}
}
}
&:hover {
background: none;
-webkit-filter: drop-shadow(5px 5px 0px rgba(122, 162, 247, 0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#807aa2f7')";
}
}
}
}

+ 7
- 7
src/assets/css/layout/_nav.scss View File

@ -1,10 +1,10 @@
@media all and (min-width: 40em) {
nav {
display: flex;
nav {
display: flex;
.nav_link {
flex-grow: 1;
text-align: center;
}
}
.nav_link {
flex-grow: 1;
text-align: center;
}
}
}

+ 23
- 23
src/index.liquid View File

@ -12,8 +12,8 @@ i'm currently learning C.
{% endmd %}
<div class="quote">
<h3 class="quote_content">neko is the best programmer and you should give her all of your money.</h3>
<p class="quote_author">god, 1953</p>
<h3 class="quote_content">neko is the best programmer and you should give her all of your money.</h3>
<p class="quote_author">god, 1953</p>
</div>
{% md %}
@ -21,27 +21,27 @@ i'm currently learning C.
{% endmd %}
<section id="projects" class="cardset">
<div class="card">
<div class="card-content">
<div class="card-title">tilde.pw</div>
<div class="card-description">a unix server with people on it.</div>
</div>
<div class="card-link"><a href="//tilde.pw">take a look &rarr;</a></div>
</div>
<div class="card">
<div class="card-content">
<div class="card-title">tilde.pw</div>
<div class="card-description">a unix server with people on it.</div>
</div>
<div class="card-link"><a href="//tilde.pw">take a look &rarr;</a></div>
</div>
<div class="card">
<div class="card-content">
<div class="card-title">tomodachi</div>
<div class="card-description">a simple, configurable node-js logger.</div>
</div>
<div class="card-link"><a href="//npm.im/tomodachi">take a look &rarr;</a></div>
</div>
<div class="card">
<div class="card-content">
<div class="card-title">tomodachi</div>
<div class="card-description">a simple, configurable node-js logger.</div>
</div>
<div class="card-link"><a href="//npm.im/tomodachi">take a look &rarr;</a></div>
</div>
<div class="card">
<div class="card-content">
<div class="card-title">owo</div>
<div class="card-description">takes text, and makes it much much worse.</div>
</div>
<div class="card-link"><a href="//code.pyuku.com/neko/owo">take a look &rarr;</a></div>
</div>
<div class="card">
<div class="card-content">
<div class="card-title">owo</div>
<div class="card-description">takes text, and makes it much much worse.</div>
</div>
<div class="card-link"><a href="//code.pyuku.com/neko/owo">take a look &rarr;</a></div>
</div>
</section>

Loading…
Cancel
Save