Browse Source

Overhaul taxonomy and layout

test
Alex Barilaro 2 years ago
parent
commit
61de921e64
  1. 3
      config.toml
  2. 5
      content/best/_index.md
  3. 10
      content/posts/4chan-json-converter.md
  4. 9
      content/posts/4chan-resilience.md
  5. 2
      content/posts/_index.md
  6. 7
      content/posts/all/_index.md
  7. 7
      content/posts/automatic-static-site-with-docker.md
  8. 7
      content/posts/black-roofs.md
  9. 14
      content/posts/cant-police-hate.md
  10. 7
      content/posts/folding-nums.md
  11. 10
      content/posts/gbos.md
  12. 11
      content/posts/kakerlaken-math.md
  13. 7
      content/posts/muli.md
  14. 10
      content/posts/pdf-metadata-script.md
  15. 9
      content/posts/pfsense-vm.md
  16. 9
      content/posts/pizza-algorithm.md
  17. 11
      content/posts/postmaker.md
  18. 10
      content/posts/scratch-sucks.md
  19. 9
      content/posts/speeding-laws.md
  20. 10
      content/posts/they-found-us.md
  21. 14
      content/status/_index.md
  22. 3
      layouts/_default/baseof.html
  23. 6
      layouts/best/list.html
  24. 62
      layouts/index.html
  25. 4
      layouts/kinds/list.html
  26. 6
      layouts/kinds/terms.html
  27. 8
      layouts/partials/drawer.html
  28. 3
      layouts/partials/entry.html
  29. 2
      layouts/partials/head.html
  30. 3
      layouts/partials/list.html
  31. 8
      layouts/partials/sidebar.html
  32. 1
      layouts/partials/transition.html
  33. 54
      layouts/posts/list.html
  34. 17
      layouts/posts/single.html
  35. 4
      layouts/tags/list.html
  36. 6
      layouts/tags/terms.html
  37. 16
      layouts/taxonomy/list.html
  38. 16
      layouts/taxonomy/terms.html
  39. 86
      static/home.css
  40. 283
      static/main.css

3
config.toml

@ -4,7 +4,6 @@ title = "barilaro.me"
disableKinds = ["RSS", "sitemap"]
[taxonomies]
tag = "tags"
category = "categories"
status = "status"
kind = "kinds"
[frontmatter]
lastmod = [":fileModTime"]

5
content/best/_index.md

@ -0,0 +1,5 @@
---
title: "Best pages with words"
date: 2020-02-08T10:40:09+11:00
---

10
content/posts/4chan-json-converter.md

@ -1,17 +1,13 @@
---
title: "The wonderful world of graphing 4chan"
description: "A tool to assist social media analysis of 4chan threads."
description: "A tool to assist social media analysis of 4chan threads"
date: 2019-09-20T12:05:40+11:00
status:
- finished
categories:
- projects
tags:
- 4chan
- python
- sna
- medium
recommended: true
kinds:
- experiment
---
### Why bother?

9
content/posts/4chan-resilience.md

@ -1,14 +1,13 @@
---
title: "Why won't you leave?!"
description: "An inquiry into 4chan's determination"
date: 2020-03-14T20:46:21+11:00
status:
- written
tags:
- 4chan
- webculture
categories:
- sociology
- culture
recommended: true
kinds:
- essay
---
Online communities die. No ifs, no buts, no digital coconuts.

2
content/posts/_index.md

@ -1,7 +1,5 @@
---
title: "Lists of pages with words"
date: 2020-02-08T10:40:09+11:00
updated: 2020-02-08T10:40:09+11:00
landing: true
---

7
content/posts/all/_index.md

@ -1,7 +0,0 @@
---
title: "All posts"
date: 2020-02-08T09:51:43+11:00
updated: 2020-02-08T09:51:43+11:00
landing: false
---

7
content/posts/automatic-static-site-with-docker.md

@ -1,14 +1,13 @@
---
title: "It seems I can contain myself"
description: "Automating your self-hosted static site deployment"
date: 2020-07-10T12:15:10+10:00
status:
- written
tags:
- docker
- webdev
categories:
- development
recommended: true
kinds:
- guide
---
Docker is really useful. You've probably heard that, but let me show you exactly why.

7
content/posts/black-roofs.md

@ -2,15 +2,12 @@
title: "Why are black roofs on cars fancy?"
description: "Don't you think it's a little strange?"
date: 2020-01-24T12:06:50+11:00
status:
- finished
categories:
- sociology
tags:
- crapitalism
- aesthetics
- medium
recommended: false
kinds:
- thought
---
If you've had the good fortune to have the opportunity to buy a car

14
content/posts/cant-police-hate.md

@ -1,17 +1,13 @@
---
title: "We can't police online hate speech"
description: "Why policing hate speech is both difficult and misguided"
date: 2020-02-13T10:05:35+11:00
status:
- written
tags:
- terrorism
- policing
- webculture
- socialmedia
- long
categories:
- sociology
- language
- culture
recommended: true
kinds:
- essay
---
As mass shootings and acts of domestic terrorism become

7
content/posts/folding-nums.md

@ -1,14 +1,13 @@
---
title: "Someone who's smart with encryption, check this..."
description: "Or: cool and maybe useful number patterns I came up with one time"
date: 2020-04-19T12:15:10+10:00
status:
- written
tags:
- encryption
- tiny
categories:
- math
recommended: false
kinds:
- thought
---
I'm not dead, I swear.

10
content/posts/gbos.md

@ -2,14 +2,12 @@
title: "GBOS: First steps"
description: "Why I've decided to develop an operating system for the original Nintendo Game Boy."
date: 2020-01-03T12:06:26+11:00
status:
- finished
categories:
- projects
tags:
- gbos
- medium
- gameboy
- assembly
recommended: false
kinds:
- thought
---
### Some backstory

11
content/posts/kakerlaken-math.md

@ -1,16 +1,13 @@
---
title: "How to win at Kaker Laken (Cockroach) Poker"
description: "See the mathematical way to a surefire win."
description: "See the mathematical way to a surefire win"
date: 2020-01-10T12:06:32+11:00
status:
- finished
categories:
- math
tags:
- boardgames
- probability
- medium
- math
recommended: true
kinds:
- experiment
---
Before we get into the math of it, let me introduce Kaker Laken Poker -

7
content/posts/muli.md

@ -2,14 +2,11 @@
title: "I will not forgive the man who killed my dog"
description: "A transcript of the moral debate I had in my head."
date: 2020-01-30T12:06:57+11:00
status:
- finished
categories:
- philosophy
tags:
- morality
- long
recommended: true
kinds:
- essay
---
On Tuesday last week, someone killed my best friend. Muli (pronounced

10
content/posts/pdf-metadata-script.md

@ -2,15 +2,11 @@
title: "PDF metadata script"
description: "A small script to correctly set the title and author metadata in a PDF."
date: 2019-10-30T12:06:18+11:00
status:
- finished
categories:
- projects
tags:
- pdf
- bash
- short
- software
recommended: false
kinds:
- info
---
After buying an ereader, I finally had a way to read all of my PDFs nicely.

9
content/posts/pfsense-vm.md

@ -2,15 +2,12 @@
title: "How to use a pfSense virtual machine for a DMZ"
description: "Set up a DMZ with pfSense without needing an external machine."
date: 2020-01-13T12:06:38+11:00
status:
- written
categories:
- networking
tags:
- pfsense
- guide
- long
- networking
recommended: false
kinds:
- guide
---
If you're starting out in the world of home servers and networking, you've

9
content/posts/pizza-algorithm.md

@ -1,15 +1,12 @@
---
title: "Passing the picky pizza trolls"
description: "Algorithmically beating a 90s educational video game"
date: 2020-02-14T19:27:59+11:00
status:
- finished
tags:
- zoombinis
- algorithms
- gaming
categories:
- compsci
recommended: false
kinds:
- experiment
---
Wait a minute, do you feel that? It feels like

11
content/posts/postmaker.md

@ -2,15 +2,12 @@
title: "postmaker"
description: "A dead simple site generator for people (including me) who don't want to learn anything except HTML."
date: 2020-01-23T12:06:43+11:00
status:
- finished
categories:
- projects
tags:
- web
- bash
- short
- software
- webdev
recommended: false
kinds:
- info
---
Ah, the site generator. Brilliant innovation in the website management sector,

10
content/posts/scratch-sucks.md

@ -1,15 +1,13 @@
---
title: "Scratch sucks; teach kids BASIC"
description: "How Scratch robs a teacher of their job and still fails to teach"
date: 2020-02-29T12:36:01+11:00
status:
- written
tags:
- programming
- scratch
- BASIC
categories:
- teaching
- pedagogy
recommended: true
kinds:
- essay
---
**Nota bene:** If you'd just like to skip to my awesome (I think)

9
content/posts/speeding-laws.md

@ -2,15 +2,12 @@
title: "Speed limits are silly"
description: "Speed laws punish risk instead of danger, and they don't even do that well."
date: 2020-02-08T12:07:08+11:00
status:
- in progress
categories:
- sociology
tags:
- driving
- risk
- traffic
- penology
recommended: true
kinds:
- essay
---
Speeding laws are a failure.

10
content/posts/they-found-us.md

@ -1,14 +1,12 @@
---
title: "They found us..."
description: "I'm watching you, Wazowski"
date: 2020-02-12T19:11:56+11:00
status:
- finished
tags:
- web
- short
categories:
- newz
- meta
recommended: false
kinds:
- info
---
### Under surveillance

14
content/status/_index.md

@ -1,14 +0,0 @@
---
title: "Status"
date: 2020-02-12T19:06:48+11:00
---
In case you're wondering what these mean, they're basically an indicator of how
far along a post is towards completion. An in-progress post is in the middle of
being written. They'll often have a list of things that need to be added, like
citations or more actual content. A post that's written is pretty much complete,
but might leave a little to be desired in the readability department. They'll
often undergo a few minor editing changes to make them easier to digest. Finally,
a post that's finished is exactly what you'd suspect. It may be updated in the
future if I get any more ideas I think are worth adding to it, but the content
is pretty much final.

3
layouts/_default/baseof.html

@ -2,11 +2,12 @@
<html>
{{ partial "head" . }}
<body>
{{ partial "sidebar" . }}
{{ partial "drawer" . }}
<main>
{{ block "main" . }}
{{ end }}
</main>
{{ partial "transition" . }}
</body>
</html>

6
layouts/best/list.html

@ -0,0 +1,6 @@
{{ define "main" }}
<h1>Best pages with words</h1>
{{ range ( where .Site.RegularPages "Params.recommended" "==" true )}}
{{ partial "entry" . }}
{{ end }}
{{ end }}

62
layouts/index.html

@ -1,56 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the world of tomorrow!</title>
<link rel='stylesheet' type='text/css' href='home.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Erica+One|Raleway&display=swap" rel="stylesheet">
</head>
{{ partial "head" . }}
<body>
<section id='home'>
<div id='greet' class='fade'>
<h1>hi, am alex</h1>
<nav>
<a href='#whomst'>whomst?</a>
<a href='/posts/'a>read my blog</a>
<a href='/categories/projects/'>see my shiz</a>
<header id='extendedDrawer'>
<button id='extended' href='/'>b</button>
<nav id='extendedNav'>
<h1><a class='drawerLink' href='/posts/'>all</a></h1>
<h1><a class='drawerLink' href='/best/'>best</a></h1>
<!-- TODO: Add href for kinds taxonomy -->
<h1><a class='drawerLink' href='/kinds/'>kinds</a></h1>
</nav>
</div>
</section>
<section id='about'>
<article>
<h2 id='whomst'>who is alex?</h2>
<p>I'm a guy who enjoys thinking, writing, and helping. My main interests are
technology and sociology, and the intersection between those two (think data
privacy, the cultures in and around different social media platforms, and how
we think about/on/because of the web and digital technology). I've also got a
love for various branches of philosophy. Ethics, in particular, is my jam.
And of course, my love of computer science has slowly infected me with a
love for mathematics, especially of the recreational kind.</p>
<h2>what can i expect to read here?</h2>
<p>You'll find anything from philosophical ramblings about something a movie
made me think about to the mathematics of something everyday to a cool program
I'm working on to an interesting phenomenon I've observed on 4chan, as well as
everything in between, as well as things that are none of those.</p>
<p>Basically, you can expect things that make you go 'huh, neat'.</p>
<h2>i have social mediums.</h2>
<p>Y'all can email me about stuff related to my site or work at
ciao dot barilaro dot me (ciao because
I'm Italian). I also hang around the GitHub locale under the name
<a href='https://github.com/magogware'>magogware</a>.</p>
<h2>sharing is caring.</h2>
<p>Because I like helping (I even volunteer helping disadvantaged
kids, so applaud whenever you're ready), all of the content on this
site is licensed with a <a href='https://creativecommons.org.au/learn/licences/'>CC BY-SA licence</a>.
That means you can reproduce
it as long as you tell people I made it (because I like seeing my name
on things), and you can remix what I've done however you like <em>as long
as</em> you share your stuff in the same way.</p>
<h2>now ya know.</h2>
<p>Cheers, thanks for reading. Now check out the rest of the site, ya chump!</p>
<a class='button' href='/posts/'>Consume my words</a>
<a class='button' href='/categories/projects/'>Behold my shiz</a>
</article>
</section>
</header>
<main>
</main>
{{ partial "transition" . }}
</body>
</html>

4
layouts/kinds/list.html

@ -0,0 +1,4 @@
{{ define "main" }}
<h2>Posts in {{ .Title }} format</h2>
{{ partial "list" . }}
{{ end }}

6
layouts/kinds/terms.html

@ -0,0 +1,6 @@
{{ define "main" }}
<h2>Kinds of pages with words</h2>
{{ range .Pages }}
<h3><a class='transitioner' href='{{ .RelPermalink }}'>{{ .Title }}</a></h3>
{{ end }}
{{ end }}

8
layouts/partials/drawer.html

@ -0,0 +1,8 @@
<header id='retractedDrawer'>
<button id='retracted' href='/'>b</button>
<nav id='retractedNav'>
<h1><a class='drawerLink' href='/posts/'>all</a></h1>
<h1><a class='drawerLink' href='/best/'>best</a></h1>
<h1><a class='drawerLink' href='/kinds/'>kinds</a></h1>
</nav>
</header>

3
layouts/partials/entry.html

@ -0,0 +1,3 @@
<h2><a class='transitioner' href='{{ .RelPermalink }}'>{{ .Title }}</a></h2>
<p class='meta'><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date}}</time> &middot; {{ range .Params.kinds }}{{ title . }}{{ end }}</p>
<p class='meta'>{{ .Description }} <a class='transitioner arrow' href='{{ .RelPermalink }}'>&#8618;</a></p>

2
layouts/partials/head.html

@ -1,6 +1,6 @@
<head>
<link rel='stylesheet' type='text/css' href='/main.css'>
<link href="https://fonts.googleapis.com/css?family=Erica+One|Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;400;500;600;700&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Serif:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}} | barilaro dot me</title>
</head>

3
layouts/partials/list.html

@ -0,0 +1,3 @@
{{ range .Pages }}
{{ partial "entry" . }}
{{ end }}

8
layouts/partials/sidebar.html

@ -1,8 +0,0 @@
<header>
<h1><a href='/posts/'>barilaro.me</a></h1>
<nav>
<a href='/'>{{ partial "icons/home" . }}</a>
<a href='/tags/'>{{ partial "icons/tag" . }}</a>
<a href='/categories/'>{{ partial "icons/folder" . }}</a>
</nav>
</header>

1
layouts/partials/transition.html

@ -0,0 +1 @@
<script src='/transition.js'></script>

54
layouts/posts/list.html

@ -1,54 +1,4 @@
{{ define "main" }}
{{ if .Params.landing }}
<h2>new <a class='more' href='/posts/all/'>see all &gt;</a></h2>
<nav class='fade'>
<ul>
{{ range first 3 .Site.RegularPages }}
<li class='entry'>
<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date}}</time></p>
</li>
{{ end }}
</ul>
</nav>
<h2>recommended</h2>
<nav class='fade'>
<ul>
{{ range first 3 (shuffle (where .Site.RegularPages "Params.recommended" "==" true)) }}
<li class='entry'>
<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date}}</time></p>
</li>
{{ end }}
</ul>
</nav>
<h2>recently updated</h2>
<nav class='fade'>
<ul>
{{ range first 3 (.Site.RegularPages.ByParam "lastmod").Reverse }}
<li class='entry'>
<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><time datetime='{{.Lastmod}}'>{{ dateFormat "Jan 02, 2006" .Lastmod}}</time></p>
</li>
{{ end }}
</ul>
</nav>
{{ else }}
<h2>all posts</h2>
<nav class='fade'>
<ul>
{{ range .Site.RegularPages }}
<li class='entry'>
<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date}}</time></p>
</li>
{{ end }}
</ul>
</nav>
{{ end }}
<h1>List of pages with words</h1>
{{ partial "list" . }}
{{ end }}

17
layouts/posts/single.html

@ -1,13 +1,12 @@
{{ define "main" }}
<article>
<h2>{{.Title}}</h2>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><a href='/status/'>status:</a> <em>{{ range .Params.status }}<a href='/status/{{urlize .}}'>{{.}}</a>{{ end }}</em>;
date added: <em><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date }}</time></em>;
last updated: <em><time datetime='{{.Lastmod}}'>{{ dateFormat "Jan 02, 2006" .Lastmod }}</time></em></p>
<p>tags: <em>{{ range .Params.tags }}
<a class='tag' href='/tags/{{urlize .}}'>{{.}}</a> {{ end }}</em></p>
<hr>
{{.Content}}
<h1 id='title'>{{.Title}}</h1>
<p class='meta'><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date }}</time> &middot; {{ range .Params.kinds }}{{ title . }}{{ end }}</p>
<ul id='tags' class='meta'>
{{ range .Params.tags }}
<li>{{.}}</li>
{{ end }}
</ul>
{{ .Content }}
</article>
{{ end }}

4
layouts/tags/list.html

@ -0,0 +1,4 @@
{{ define "main" }}
<h2>Posts tagged as {{ .Title }}</h2>
{{ partial "list" . }}
{{ end }}

6
layouts/tags/terms.html

@ -0,0 +1,6 @@
{{ define "main" }}
<h2>List of tags</h2>
{{ range .Pages }}
<h3><a class='transitioner' href='{{ .RelPermalink }}'>{{ .Title }}</a></h3>
{{ end }}
{{ end }}

16
layouts/taxonomy/list.html

@ -1,16 +0,0 @@
{{ define "main" }}
{{ if eq .Data.Plural "categories" }}<h2>posts categorised as <a class='category' href='{{.RelPermalink}}'>{{.Title}}</a></h2>
{{ else if eq .Data.Plural "tags" }}<h2>posts tagged as <a href='{{.RelPermalink}}'>{{.Title}}</a></h2>
{{ else }}<h2>posts that are <a href='{{.RelPermalink}}'>{{.Title}}</a></h2>{{ end }}
<nav class='fade'>
<ul>
{{ range .Pages }}
<li class='entry'>
<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
{{ range .Params.categories }}<a class='bubble' href='/categories/{{urlize .}}'>{{.}}</a>{{ end }}
<p><time datetime='{{.Date}}'>{{ dateFormat "Jan 02, 2006" .Date}}</time></p>
</li>
{{ end }}
</ul>
</nav>
{{ end }}

16
layouts/taxonomy/terms.html

@ -1,16 +0,0 @@
{{ define "main" }}
<h2>{{.Title}}</h2>
{{.Content}}
<nav class='fade'>
<ul>
{{$cat := false}}
{{ if eq .Data.Plural "categories" }}{{$cat := true}}{{ end }}
{{ range .Data.Terms.Alphabetical }}
<li class='entry'>
<h3><a {{ if $cat }}class='category'{{ end }} href='{{.Page.RelPermalink}}'>{{.Page.Title}}</a></h3>
<p class='bubble'>{{.Count}}</p>
</li>
{{ end }}
</ul>
</nav>
{{ end }}

86
static/home.css

@ -1,86 +0,0 @@
html {
scroll-behavior: smooth;
font-size: 18px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
h1, h2, h3 {
font-family: 'Erica One', serif;
font-weight: normal;
}
section {
max-width: 100vw;
}
#greet {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#greet { text-align: center; }
#greet h1 { font-size: 5rem; }
#greet nav a {
display: inline-block;
width: 30%;
font-size: 0.9rem;
}
#home {
background-color: #fe9b3b;
min-height: 100vh;
}
#about { background-color: #fff; }
article {
position: relative;
height: auto;
padding: 8vh 10vw 8vh 10vw;
background-color: #f2f2f2;
border-radius: 15px;
line-height: 1.8em;
}
a {
color: #0d4063;
font-weight: bold;
}
.button {
text-decoration: none;
background-color: #0d4063;
border-radius: 0.5em;
display: inline-block;
padding: 1em;
color: white;
margin: 3%;
}
.button:hover {
background-color: #6da0c3;
}
p img { text-align: center; }
@media (orientation: landscape) {
article {
max-width: 40vw;
left: 50%;
transform: translate(-50%, -10vh);
}
}
@media (orientation: portrait) {
#greet { width: 100%; }
article {
max-width: 70vw;
left: 50%;
transform: translate(-50%, -5vh);
}
}
.fade {
animation: fadeIn ease 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity; 1; }
}

283
static/main.css

@ -1,162 +1,183 @@
/*------------------------------
Boilerplate and site-wide styles
-------------------------------*/
html { font-size: 18px; }
body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
/**************************
* Boilerplate styles
**************************/
body {
background-color: #100c08;
color: #ccc;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 18px;
line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'IBM Plex Serif';
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Erica One', serif;
font-weight: normal;
a {
text-decoration: underline;
text-decoration-skip-ink: auto;
cursor: pointer;
}
/*------------------------------
Header/sidebar styles
-------------------------------*/
article a { color: #fe9b3b; }
.arrow {
color: #fe9b3b;
text-decoration: none;
}
/**************************
* Header/sidebar styling
**************************/
header {
left: 0;
top: 0;
left: 0;
background-color: #fe9b3b;
z-index: 3;
}
header h1 {
header button {
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: white;
font-weight: normal;
height: 2em;
width: 2em;
background-color: #100c08;
color: #ccc;
border-radius: 100em;
border: 2px solid #ccc;
display: block;
font-family: 'IBM Plex Serif';
font-weight: bold;
text-align: center;
font-size: 2.5rem;
}
header nav {
nav {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
header nav a {
display: inline-block;
}
/* ----------------------------
SVG Icons - svgicons.sparkk.fr
---------------------------- */
.svg-icon {
width: 5vh;
height: 5vh;
text-align: center;
font-size: 2rem;
color: #100c08;
}
#retractedNav { display: none; }
#extendedNav { display: block; }
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #fff;
}
/**************************
* Article/content styling
**************************/
.svg-icon circle {
stroke: #fff;
stroke-width: 1;
}
/*------------------------------
Main content styles
-------------------------------*/
main {
padding: 4%;
color: #444;
}
a {
color: inherit;
text-decoration: none;
}
time { background-color: #eee; }
p { line-height: 1.8rem; }
.bubble {
background-color: #444;
color: #fff;
border-radius: 0.5rem;
text-decoration: none;
font-size: 0.7rem;
font-family: 'Raleway', sans-serif;
display: inline-block;
font-weight: bold;
line-height: 1rem;
}
.more { font-size: 0.6em; }
nav ul {
margin: auto;
padding: 0;
}
.entry {
margin: 1%;
list-style-type: none;
border-radius: 0.5rem;
border: 0.1rem solid #ccc;
}
.entry h3, .entry a, .entry p {
.meta {
margin: 0;
color: #999;
}
.entry h3, .entry a { display: inline-block; }
.entry h3 { color: #fe9b3b; }
.entry .bubble { float: right; }
article h2 {
display: inline-block;
margin-bottom: 0;
}
article a {
color: #0d4063;
background-color: rgba(13,64,99,0.1);
p.meta:nth-of-type(2n) { color: #ccc; }
#tags li { display: inline; }
#tags li:before { content: '#'; }
#tags {
list-style-type: none;
padding: 0;
}
article figure {
width: 80%;
height: auto;
main {
max-width: 39em;
margin: 0 auto;
}
figure img {
width: 100%;
height: auto;
}
figcaption p { text-align: center; }
table { margin: 0 auto; }
thead tr th { border-top: 0.1rem solid black; }
thead tr th, tbody tr:last-child td { border-bottom: 0.1rem solid black; }
th, td {
#fadeOut {
transition: 0.4s;
opacity: 0;
}
#faded { opacity: 0; }
#fadeIn {
transition: 0.4s;
opacity: 1;
}
article p:nth-of-type(2):first-letter {
float: left;
font-family: 'IBM Plex Serif';
font-size: 4em;
padding-top: 0.15em;
padding-right: 0.1em;
padding-left: 0.1em;
}
figure {
max-width: 32em;
margin: 0 auto;
text-align: center;
padding: 0.5rem;
}
/*------------------------------
Animation definitions
-------------------------------*/
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity; 1; }
}
/*------------------------------
Device-specific styles
-------------------------------*/
}
img { max-width: 100%; }
/**************************
* Responsive styling
**************************/
@media (orientation: landscape) {
header {
height: 100vh;
width: 28vw;
position: fixed;
height: 100vh;
width: 5vw;
box-shadow:
0.5vw 0 0 #100c08,
1.5vw 0 0 #136F63,
2vw 0 0 #100c08,
3vw 0 0 #3E2F5B,
3.5vw 0 0 #100c08,
4.5vw 0 0 #B9314F;
}
#retractedDrawer {
transition: 0.4s;
width: 5vw;
}
#extendedDrawer {
transition: 0.4s;
width: 75vw;
}
header button {
top: 50vh;
left: 5vw;
}
#retracted {
transition: 0.4s;
left: 5vw;
}
header h1 { font-size: 3.2vw; }
header nav { top: 65%; }
main { margin-left: 28vw; }
.entry { padding: 0.3rem; }
.bubble { padding: 0.3rem; }
#extended {
transition: 0.4s;
left: 75vw;
}
main { margin-left: 17vw; }
}
@media (orientation: portrait) {
html { overflow-x: hidden; }
header {
height: 17vh;
width: 100vw;
position: absolute;
height: 7vh;
width: 100vw;
box-shadow:
0 0.5vh 0 #100c08,
0 2vh 0 #136F63,
0 2.5vh 0 #100c08,
0 4vh 0 #3E2F5B,
0 4.5vh 0 #100c08,
0 6vh 0 #B9314F;
}
#retractedDrawer {
transition: 0.4s;
height: 7vh !important;
}
#extendedDrawer {
transition: 0.4s;
height: 77vh !important;
}
header button {
height: 1.5em;
width: 1.5em;
top: 7vh;
left: 50vw;
}
#retracted {
transition: 0.4s;
top: 7vh !important;
}
header h1 {
font-size: 5vh;
top: 20%;
#extended {
transition: 0.4s;
top: 77vh !important;
}
header nav { top: 80%; }
main { margin-top: 20vh; }
.entry { padding: 0.5rem; }
.bubble { padding: 0.4rem; }
.entry h3 { margin-bottom: 0.3rem }
main { margin-top: 17vh; }
}

Loading…
Cancel
Save