Browse Source

Theme rewrite, to follow the blog

master
Julio Biason 4 years ago
parent
commit
0b081fbe7f
  1. 62
      after-dark.css
  2. 94
      index.html
  3. 671
      terminimal.css

62
after-dark.css

@ -0,0 +1,62 @@
* {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 1em;
font-style: normal;
}
body {
max-width: 50rem;
padding: 20px 10px;
background: #000;
color: #ccc;
line-height: 1rem;
margin: 0 auto;
}
h1 {
display: block;
position: relative;
padding: 20px 0 10px;
margin 0;
overflow: hidden;
float: none;
line-height: 1.3rem;
}
h1:after {
content: "====================================================================================================";
position: absolute;
bottom: -7px;
left: 0;
}
h2 {
position: relative;
margin-top: 1rem;
margin-bottom: 10px;
}
h2:before {
content: "## ";
display: inline;
}
a, a:visited {
color: #ccc;
cursor: pointer;
border-bottom: 1px solid #ff2e88;
text-decoration: none;
}
a:after {
content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}
div.muted {
color: rgba(255,255,255,0.5);
}
div.hide {
display: none;
}

94
index.html

@ -3,85 +3,33 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentations</title>
<title>Presentations.JulioBiason.Me 4.1</title>
<style>
* {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 1em;
font-style: normal;
}
body {
max-width: 50rem;
padding: 20px 10px;
background: #000;
color: #ccc;
line-height: 1rem;
margin: 0 auto;
}
h1 {
display: block;
position: relative;
padding: 20px 0 10px;
margin 0;
overflow: hidden;
float: none;
line-height: 1.3rem;
}
h1:after {
content: "====================================================================================================";
position: absolute;
bottom: -7px;
left: 0;
}
h2 {
position: relative;
margin-top: 1rem;
margin-bottom: 10px;
}
h2:before {
content: "## ";
display: inline;
}
a, a:visited {
color: #ccc;
cursor: pointer;
border-bottom: 1px solid #ff2e88;
text-decoration: none;
}
a:after {
content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}
div.muted {
color: rgba(255,255,255,0.5);
}
div.hide {
display: none;
}
</style>
<link rel="stylesheet" href="terminimal.css" title="" type="">
</head>
<body>
<h1>Presentations</h1>
<div id='presentations'></div>
<script src="_external/jquery.js"></script>
<div id='record' class='hide'>
<h2 class="title"><a href='#'>Title</a></h2>
<div class="muted">Updated: <span class="updated">never</span></div>
<div class="container">
<header class="header">
<div class="header__iner">
<div class="header__logo">
<a href="https://presentations.juliobiason.me" style="text-decoration: none;">
<div class="logo">
Presentations.JulioBiason.Me 4.1
</div>
</a>
</div>
</div>
</header>
<div id='presentations'></div>
<div id='record' class='hide'>
<h1 class="post-title"><a href='#'>Title</a></h1>
</div>
</div>
<script src="_external/jquery.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({

671
terminimal.css

@ -0,0 +1,671 @@
:root {
--accent: rgb(35,176,255);
--accent-alpha-70: rgba(35,176,255,.7);
--accent-alpha-20: rgba(35,176,255,.2);
--background: #1D212C;
--color: white;
--border-color: rgba(255, 255, 255, .1)
}
.button-container {
display:table;
margin-left:auto;
margin-right:auto
}
button,
.button,
a.button {
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:8px 18px;
margin-bottom:5px;
text-align:center;
border-radius:8px;
border:1px solid transparent;
appearance:none;
cursor:pointer;
outline:none
}
button.outline,
.button.outline,
a.button.outline {
background:transparent;
box-shadow:none;
padding:8px 18px
}
button.outline :hover,
.button.outline :hover,
a.button.outline :hover {
transform:none;
box-shadow:none
}
button.primary,
.button.primary,
a.button.primary {
box-shadow:0 4px 6px rgba(50,50,93,0.11),0 1px 3px rgba(0,0,0,0.08)
}
button.primary:hover,
.button.primary:hover,
a.button.primary:hover {
box-shadow:0 2px 6px rgba(50,50,93,0.21),0 1px 3px rgba(0,0,0,0.08)
}
button.link,
.button.link,
a.button.link {
background:none;
font-size:1rem
}
button.small,
.button.small,
a.button.small {
font-size:.8rem
}
button.wide,
.button.wide,
a.button.wide {
min-width:200px;
padding:14px 24px
}
a.read-more,
a.read-more:hover,
a.read-more:active {
display:inline-flex;
background:none;
box-shadow:none;
padding:0;
max-width:100%
}
.code-toolbar {
margin-bottom:20px
}
.code-toolbar .toolbar-item a {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:3px 8px;
margin-bottom:5px;
text-align:center;
font-size:13px;
font-weight:500;
border-radius:8px;
border:1px solid transparent;
appearance:none;
cursor:pointer;
outline:none
}
.header {
display:flex;
flex-direction:column;
position:relative;
margin-bottom: 25px;
}
.header__inner {
display:flex;
align-items:center;
justify-content:space-between
}
.header__logo {
display:flex;
flex:1
}
.header__logo:after {
content:'';
background:repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px);
display:block;
width:100%;
right:10px
}
.header__logo a {
flex:0 0 auto;
max-width:100%
}
.header .menu {
margin:20px 0 0
}
.header .menu__inner {
display:flex;
flex-wrap:wrap;
list-style:none;
margin:0;
padding:0
}
.header .menu__inner li.active {
color:var(--accent-alpha-70)
}
.header .menu__inner li:not(:last-of-type) {
margin-right:20px;
margin-bottom:10px;
flex:0 0 auto
}
.header .menu__sub-inner {
position:relative;
list-style:none;
padding:0;
margin:0
}
.header .menu__sub-inner:not(:only-child) {
margin-left:20px
}
.header .menu__sub-inner-more {
position:absolute;
background:var(--background);
box-shadow:var(--shadow);
color:white;
border:2px solid;
margin:0;
padding:10px;
list-style:none;
z-index:99;
top:35px;
left:0
}
.header .menu__sub-inner-more-trigger {
color:var(--accent);
user-select:none;
cursor:pointer
}
.header .menu__sub-inner-more li {
margin:0;
padding:5px;
white-space:nowrap
}
.logo {
display:flex;
align-items:center;
text-decoration:none;
background:var(--accent);
color:black;
padding:5px 10px
}
html {
box-sizing:border-box
}
*,
*:before,
*:after {
box-sizing:inherit
}
body {
margin:0;
padding:0;
font-family:Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
font-size:1rem;
line-height:1.54;
background-color:var(--background);
color:var(--color);
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-webkit-overflow-scrolling:touch;
-webkit-text-size-adjust:100%
}
@media (max-width: 683px) {
body {
font-size:1rem
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
display:flex;
align-items:center;
font-weight:bold;
line-height:1.3
}
h1 {
font-size:1.4rem
}
h2 {
font-size:1.3rem
}
h3 {
font-size:1.2rem
}
h4,
h5,
h6 {
font-size:1.15rem
}
a {
color:inherit
}
img {
display:block;
max-width:100%
}
img.left {
margin-right:auto
}
img.center {
margin-left:auto;
margin-right:auto
}
img.right {
margin-left:auto
}
p {
margin-bottom:20px
}
figure {
display:table;
max-width:100%;
margin:25px 0
}
figure.left img {
margin-right:auto
}
figure.center img {
margin-left:auto;
margin-right:auto
}
figure.right img {
margin-left:auto
}
figure figcaption {
font-size:14px;
padding:5px 10px;
margin-top:5px;
background:var(--accent);
color:var(--background)
}
figure figcaption.left {
text-align:left
}
figure figcaption.center {
text-align:center
}
figure figcaption.right {
text-align:right
}
code {
font-family:Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
font-feature-settings:normal;
background:var(--accent-alpha-20);
padding:1px 6px;
margin:0 2px;
font-size:.95rem
}
pre {
font-family:Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
padding:20px;
font-size:.95rem;
overflow:auto;
border-top:1px solid rgba(255,255,255,0.1);
border-bottom:1px solid rgba(255,255,255,0.1)
}
@media (max-width: 683px) {
pre {
white-space:pre-wrap;
word-wrap:break-word
}
}
blockquote {
margin:8px 50px;
padding:8px
}
@media (max-width: 683px) {
blockquote {
padding-right:0
}
}
blockquote:before {
content:'”';
font-family:Georgia, serif;
font-size:3.875rem;
position:absolute;
left:-40px;
top:-20px
}
blockquote p:first-of-type {
margin-top:0
}
blockquote p:last-of-type {
margin-bottom:0
}
blockquote p {
position:relative
}
blockquote p:before {
content:'>';
display:block;
position:absolute;
left:-25px;
color:var(--accent)
}
table {
table-layout:fixed;
border-collapse:collapse;
width:100%;
margin:40px 0
}
table,
th,
td {
border:1px dashed var(--accent);
padding:10px
}
th {
color:var(--accent)
}
ul,
ol {
margin-left:30px;
padding:0
}
ul li,
ol li {
position:relative
}
@media (max-width: 683px) {
ul,
ol {
margin-left:20px
}
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-top:20px
}
ol ol {
list-style-type:lower-alpha
}
.container {
display:flex;
flex-direction:column;
padding:40px;
max-width:864px;
min-height:100vh;
margin:0 auto
}
@media (max-width: 683px) {
.container {
padding:20px
}
}
.content {
display:flex
}
hr {
width:100%;
border:none;
background:var(--border-color);
height:1px
}
.hidden {
display:none
}
.posts {
margin:0 auto
}
.post {
width:100%;
text-align:left;
margin:8px auto;
padding:20px 0
}
@media (max-width: 899px) {
.post {
max-width:660px
}
}
.post .post-meta,
.post .post-meta-inline {
font-size:1rem;
margin-bottom:10px;
color:var(--accent-alpha-70)
}
.post-meta-inline {
display:inline
}
.post-title {
position:relative;
color:var(--accent);
margin:0 0 8px;
border-bottom:var(--border);
font-weight:normal
}
.post-title a {
text-decoration:none
}
.post .post-tags,
.post .post-tags-inline {
margin-bottom:20px;
font-size:1rem;
opacity:.5
}
.post-tags {
display:block
}
.post-tags-inline {
display:inline
}
@media (max-width: 683px) {
.post-tags-inline {
display:block
}
}
.post-content {
margin-top:8px
}
.post-cover {
border:20px solid var(--accent);
background:transparent;
margin:40px 0;
padding:20px
}
@media (max-width: 683px) {
.post-cover {
padding:10px;
border-width:10px
}
}
.post ul {
list-style:none
}
.post ul li:before {
content:'►';
position:absolute;
left:-20px;
color:var(--accent)
}
.post--regulation h1 {
justify-content:center
}
.post--regulation h2 {
justify-content:center;
margin-bottom:10px
}
.post--regulation h2+h2 {
margin-top:-10px;
margin-bottom:20px
}
.post-list .post-date {
color:var(--accent-alpha-70);
text-decoration:none
}
.post-list a {
text-decoration:none
}
.post-list .post-list-title {
text-decoration:underline
}
.post-list .post-tag {
text-decoration:underline
}
.pagination {
margin-top:50px
}
.pagination__title {
display:flex;
text-align:center;
position:relative;
margin:100px 0 20px
}
.pagination__title-h {
text-align:center;
margin:0 auto;
padding:5px 10px;
background:var(--background);
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1
}
.pagination__title hr {
position:absolute;
left:0;
right:0;
width:100%;
margin-top:15px;
z-index:0
}
.pagination__buttons {
display:flex;
align-items:center;
justify-content:center
}
@media (max-width: 683px) {
.pagination__buttons {
flex-direction:column
}
}
.button {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1rem;
border-radius:8px;
max-width:40%;
padding:0;
cursor:pointer;
appearance:none
}
@media (max-width: 683px) {
.button {
max-width:80%
}
}
.button+.button {
margin-left:10px
}
.button a {
display:flex;
padding:8px 16px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden
}
.button__text {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden
}
.footer {
padding:40px 0;
flex-grow:0;
opacity:.5
}
.footer__inner {
display:flex;
align-items:center;
justify-content:space-between;
margin:0;
width:760px;
max-width:100%
}
@media (max-width: 899px) {
.footer__inner {
flex-direction:column
}
}
.footer a {
color:inherit
}
.footer .copyright {
display:flex;
flex-direction:row;
align-items:center;
font-size:1rem;
color:var(--light-color-secondary)
}
.footer .copyright--user {
margin:auto;
text-align:center
}
.footer .copyright>*:first-child:not(:only-child) {
margin-right:10px
}
@media (max-width: 899px) {
.footer .copyright>*:first-child:not(:only-child) {
border:none;
padding:0;
margin:0
}
}
@media (max-width: 899px) {
.footer .copyright {
flex-direction:column;
margin-top:10px
}
}
@media (max-width: 899px) {
.footer .copyright-theme-sep {
display:none
}
}
@media (max-width: 899px) {
.footer .copyright-theme {
font-size:0.75rem
}
}
.footnote-definition {
margin-bottom:8px
}
.footnote-definition p {
display:inline
}
/*!
* Hack typeface https://github.com/source-foundry/Hack
* License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
*/@font-face {
font-family:'Hack';
src:url("fonts/hack-regular.woff2?sha=3114f1256") format("woff2"),
url("fonts/hack-regular.woff?sha=3114f1256") format("woff");
font-weight:400;
font-style:normal
}
@font-face {
font-family:'Hack';
src:url("fonts/hack-bold.woff2?sha=3114f1256") format("woff2"),
url("fonts/hack-bold.woff?sha=3114f1256") format("woff");
font-weight:700;
font-style:normal
}
@font-face {
font-family:'Hack';
src:url("fonts/hack-italic.woff2?sha=3114f1256") format("woff2"),
url("fonts/hack-italic.woff?sha=3114f1256") format("woff");
font-weight:400;
font-style:italic
}
@font-face {
font-family:'Hack';
src:url("fonts/hack-bolditalic.woff2?sha=3114f1256") format("woff2"),
url("fonts/hack-bolditalic.woff?sha=3114f1256") format("woff");
font-weight:700;
font-style:italic
}
.hide {
display: none;
}
Loading…
Cancel
Save