Alex Barilaro
2 years ago
40 changed files with 278 additions and 491 deletions
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: "Best pages with words" |
|||
date: 2020-02-08T10:40:09+11:00 |
|||
--- |
|||
|
|||
@ -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 |
|||
--- |
|||
|
|||
|
|||
@ -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 |
|||
--- |
|||
|
|||
@ -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. |
|||
@ -0,0 +1,6 @@ |
|||
{{ define "main" }} |
|||
<h1>Best pages with words</h1> |
|||
{{ range ( where .Site.RegularPages "Params.recommended" "==" true )}} |
|||
{{ partial "entry" . }} |
|||
{{ end }} |
|||
{{ end }} |
|||
@ -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> |
|||
|
|||
@ -0,0 +1,4 @@ |
|||
{{ define "main" }} |
|||
<h2>Posts in {{ .Title }} format</h2> |
|||
{{ partial "list" . }} |
|||
{{ end }} |
|||
@ -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 }} |
|||
@ -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> |
|||
@ -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> · {{ range .Params.kinds }}{{ title . }}{{ end }}</p> |
|||
<p class='meta'>{{ .Description }} <a class='transitioner arrow' href='{{ .RelPermalink }}'>↪</a></p> |
|||
@ -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> |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
{{ range .Pages }} |
|||
{{ partial "entry" . }} |
|||
{{ end }} |
|||
@ -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> |
|||
@ -0,0 +1 @@ |
|||
<script src='/transition.js'></script> |
|||
@ -1,54 +1,4 @@ |
|||
{{ define "main" }} |
|||
{{ if .Params.landing }} |
|||
<h2>new <a class='more' href='/posts/all/'>see all ></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 }} |
|||
|
|||
@ -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> · {{ range .Params.kinds }}{{ title . }}{{ end }}</p> |
|||
<ul id='tags' class='meta'> |
|||
{{ range .Params.tags }} |
|||
<li>{{.}}</li> |
|||
{{ end }} |
|||
</ul> |
|||
{{ .Content }} |
|||
</article> |
|||
{{ end }} |
|||
|
|||
@ -0,0 +1,4 @@ |
|||
{{ define "main" }} |
|||
<h2>Posts tagged as {{ .Title }}</h2> |
|||
{{ partial "list" . }} |
|||
{{ end }} |
|||
@ -0,0 +1,6 @@ |
|||
{{ define "main" }} |
|||
<h2>List of tags</h2> |
|||
{{ range .Pages }} |
|||
<h3><a class='transitioner' href='{{ .RelPermalink }}'>{{ .Title }}</a></h3> |
|||
{{ end }} |
|||
{{ end }} |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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; } |
|||
} |
|||
@ -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…
Reference in new issue