Create a light and a dark theme, with timelines
Simplify themes. Deleted expansive colour sass file for now; don't see the point in that complexity at this stage.
This commit is contained in:
Stavros Polymenis
parent
a71a961a5e
commit
f02e3a1931
@ -1,7 +1,7 @@
|
||||
<li><a href="{{url}}">
|
||||
<li>
|
||||
<time>{{date_human}}</time>
|
||||
<div>
|
||||
<span class="title">{{title}}</span>
|
||||
<a href="{{url}}" class="title">{{title}}</a>
|
||||
<p class="abstract">{{abstract}}</p>
|
||||
</div>
|
||||
</a></li>
|
||||
</li>
|
||||
@ -1,53 +0,0 @@
|
||||
// SASS style sheet */
|
||||
// Palette color codes */
|
||||
// Palette URL: http://paletton.com/#uid=53t100kxPrI9VNHnwxWGAiZWx60 */
|
||||
|
||||
// Feel free to copy&paste color codes to your application */
|
||||
|
||||
|
||||
// As hex codes */
|
||||
|
||||
$color-primary-0: #075E8C; // Main Primary color */
|
||||
$color-primary-1: #99C2D8;
|
||||
$color-primary-2: #337FA8;
|
||||
$color-primary-3: #034060;
|
||||
$color-primary-4: #00141E;
|
||||
|
||||
$color-secondary-1-0: #75CA00; // Main Secondary color (1) */
|
||||
$color-secondary-1-1: #D6F6AA;
|
||||
$color-secondary-1-2: #A2EB3E;
|
||||
$color-secondary-1-3: #508A00;
|
||||
$color-secondary-1-4: #192C00;
|
||||
|
||||
$color-secondary-2-0: #470C96; // Main Secondary color (2) */
|
||||
$color-secondary-2-1: #B99EDD;
|
||||
$color-secondary-2-2: #6E3AB2;
|
||||
$color-secondary-2-3: #2F0667;
|
||||
$color-secondary-2-4: #0E0020;
|
||||
|
||||
|
||||
|
||||
// As RGBa codes */
|
||||
|
||||
$rgba-primary-0: rgba( 7, 94,140,1); // Main Primary color */
|
||||
$rgba-primary-1: rgba(153,194,216,1);
|
||||
$rgba-primary-2: rgba( 51,127,168,1);
|
||||
$rgba-primary-3: rgba( 3, 64, 96,1);
|
||||
$rgba-primary-4: rgba( 0, 20, 30,1);
|
||||
|
||||
$rgba-secondary-1-0: rgba(117,202, 0,1); // Main Secondary color (1) */
|
||||
$rgba-secondary-1-1: rgba(214,246,170,1);
|
||||
$rgba-secondary-1-2: rgba(162,235, 62,1);
|
||||
$rgba-secondary-1-3: rgba( 80,138, 0,1);
|
||||
$rgba-secondary-1-4: rgba( 25, 44, 0,1);
|
||||
|
||||
$rgba-secondary-2-0: rgba( 71, 12,150,1); // Main Secondary color (2) */
|
||||
$rgba-secondary-2-1: rgba(185,158,221,1);
|
||||
$rgba-secondary-2-2: rgba(110, 58,178,1);
|
||||
$rgba-secondary-2-3: rgba( 47, 6,103,1);
|
||||
$rgba-secondary-2-4: rgba( 14, 0, 32,1);
|
||||
|
||||
|
||||
|
||||
// Generated by Paletton.com © 2002-2014 */
|
||||
// http://paletton.com */
|
||||
118
share/sass/layout.sass
Normal file
118
share/sass/layout.sass
Normal file
@ -0,0 +1,118 @@
|
||||
$font-url: "/static/fonts"
|
||||
|
||||
@import fonts/orbitron.sass
|
||||
|
||||
$font-face: "sans-serif"
|
||||
|
||||
body
|
||||
font-family: $font-face
|
||||
|
||||
body, body > *, article > *
|
||||
margin: auto
|
||||
|
||||
p, pre
|
||||
text-align: justify
|
||||
text-justify: inter-word
|
||||
|
||||
p, img, h1, h2, h3, h4, h5, article
|
||||
max-width: 80ch
|
||||
|
||||
pre
|
||||
display: block
|
||||
overflow: auto
|
||||
padding-left: 1ch
|
||||
|
||||
details, header > h1, p, pre, ul, ol
|
||||
margin: 1em auto
|
||||
|
||||
header > h1
|
||||
font-family: "Orbitron Light"
|
||||
font-size: 2em
|
||||
|
||||
details, details > *
|
||||
display: block
|
||||
|
||||
header, footer, details, details > *
|
||||
text-align: center
|
||||
|
||||
a, header a, header a:hover
|
||||
text-decoration: none
|
||||
|
||||
a:visited
|
||||
opacity: .8
|
||||
|
||||
a:hover
|
||||
text-decoration: underline
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
font-family: "Orbitron Medium"
|
||||
text-align: center
|
||||
font-weight: 100
|
||||
margin: 2em auto 1em
|
||||
|
||||
footer
|
||||
clear: both
|
||||
margin-top: 2em
|
||||
border-top: 1px dotted
|
||||
padding: 1em 0
|
||||
|
||||
fieldset
|
||||
border: .5mm dashed
|
||||
|
||||
fieldset > p
|
||||
margin: .5em auto
|
||||
padding: .5em
|
||||
float: left
|
||||
|
||||
label
|
||||
margin: .2em
|
||||
display: block
|
||||
|
||||
input, textarea
|
||||
display: block
|
||||
border: none
|
||||
border-bottom: .5mm solid
|
||||
min-width: 100%
|
||||
|
||||
textarea
|
||||
border: .5mm solid
|
||||
width: 80ch
|
||||
height: 40ch
|
||||
display: block-inline
|
||||
clear: both
|
||||
|
||||
button
|
||||
clear: both
|
||||
display: block
|
||||
margin: 1em auto
|
||||
border: .5mm solid
|
||||
|
||||
.timeline
|
||||
width: 90ch
|
||||
|
||||
.timeline > li
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
.timeline > li time
|
||||
float: left
|
||||
width: 14ch
|
||||
text-align: center
|
||||
|
||||
.timeline > li div
|
||||
float: left
|
||||
padding: 0 0 1em 2ch
|
||||
width: 60%
|
||||
|
||||
summary, .abstract
|
||||
opacity: .5
|
||||
|
||||
.topics > li
|
||||
display: inline
|
||||
margin-right: 2ch
|
||||
|
||||
.topics
|
||||
overflow: visible
|
||||
display: block
|
||||
clear: both
|
||||
text-align: center
|
||||
10
share/sass/main-dark.sass
Normal file
10
share/sass/main-dark.sass
Normal file
@ -0,0 +1,10 @@
|
||||
@import layout.sass
|
||||
|
||||
body
|
||||
background-color: #191B22
|
||||
|
||||
body, a, header a:visited
|
||||
color: #f2f2f2
|
||||
|
||||
pre, .timeline > li div
|
||||
border-left: 1mm solid #f2f2f233
|
||||
10
share/sass/main-light.sass
Normal file
10
share/sass/main-light.sass
Normal file
@ -0,0 +1,10 @@
|
||||
@import layout.sass
|
||||
|
||||
body
|
||||
background-color: #f2f2f2
|
||||
|
||||
body, a, header a:visited
|
||||
color: #191B22
|
||||
|
||||
pre, .timeline > li div
|
||||
border-left: 1mm solid #191B22
|
||||
@ -1,73 +1,38 @@
|
||||
$max-text-width: 80ch
|
||||
$font-url: "/static/fonts"
|
||||
|
||||
@import fonts/orbitron.sass
|
||||
@import colours/cyberlore.sass
|
||||
|
||||
$colour-fg: $color-primary-1
|
||||
$colour-fg-high: $color-primary-2
|
||||
$colour-bg: $color-primary-4
|
||||
$colour-bg-high: $color-primary-3
|
||||
$colour-action: $color-secondary-1-1
|
||||
|
||||
$font-face: "Sans"
|
||||
$font-face: "sans-serif"
|
||||
|
||||
body
|
||||
font-family: $font-face
|
||||
font-weight: 100
|
||||
background-color: $colour-bg
|
||||
color: $colour-fg
|
||||
|
||||
body
|
||||
background-color: #191B22
|
||||
|
||||
body, a, header a:visited
|
||||
color: #f2f2f2
|
||||
|
||||
pre, .timeline > li div
|
||||
border-left: 1mm solid #f2f2f233;
|
||||
|
||||
body, body > *, article > *
|
||||
margin: auto
|
||||
|
||||
p, pre
|
||||
margin: 1em auto
|
||||
text-align: justify
|
||||
text-justify: inter-word
|
||||
|
||||
p, img, h1, h2, h3, h4, h5, article
|
||||
max-width: $max-text-width
|
||||
max-width: 80ch
|
||||
|
||||
pre
|
||||
display: block
|
||||
max-width: $max-text-width
|
||||
overflow: scroll
|
||||
overflow: auto
|
||||
padding-left: 1ch
|
||||
|
||||
.timeline
|
||||
max-width: 210mm
|
||||
|
||||
.timeline > li
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
.timeline > li time
|
||||
float: left
|
||||
width: 12ch
|
||||
text-align: center
|
||||
vertical-align: middle
|
||||
|
||||
.timeline > li div
|
||||
float: left
|
||||
padding: 0 0 1em 2ch
|
||||
max-width: 60ch
|
||||
border-left: 1mm solid;
|
||||
|
||||
.abstract
|
||||
opacity: .5
|
||||
|
||||
.topics > li
|
||||
display: inline
|
||||
margin-right: 2ch
|
||||
|
||||
.topics
|
||||
overflow: visible
|
||||
display: block
|
||||
clear: both
|
||||
text-align: center
|
||||
|
||||
details, header > h1
|
||||
margin-bottom: 1em $colour-bg-high
|
||||
details, header > h1, p, pre, ul, ol
|
||||
margin: 1em auto
|
||||
|
||||
header > h1
|
||||
font-family: "Orbitron Light"
|
||||
@ -79,25 +44,20 @@ details, details > *
|
||||
header, footer, details, details > *
|
||||
text-align: center
|
||||
|
||||
a
|
||||
color: $colour-action
|
||||
a, header a, header a:hover
|
||||
text-decoration: none
|
||||
|
||||
a:visited
|
||||
color: opacify($colour-action, 0.2)
|
||||
opacity: .8
|
||||
|
||||
header a
|
||||
text-decoration: none
|
||||
color: $colour-fg
|
||||
|
||||
header a:visited
|
||||
color: $colour-fg
|
||||
a:hover
|
||||
text-decoration: underline
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
font-family: "Orbitron Medium"
|
||||
text-align: center
|
||||
font-weight: 100
|
||||
margin: 1em auto
|
||||
margin: 2em auto 1em
|
||||
|
||||
footer
|
||||
clear: both
|
||||
@ -106,7 +66,7 @@ footer
|
||||
padding: 1em 0
|
||||
|
||||
fieldset
|
||||
border: .5mm dashed $colour-bg-high
|
||||
border: .5mm dashed
|
||||
|
||||
fieldset > p
|
||||
margin: .5em auto
|
||||
@ -119,14 +79,12 @@ label
|
||||
|
||||
input, textarea
|
||||
display: block
|
||||
color: $colour-fg
|
||||
background-color: $colour-bg
|
||||
border: none
|
||||
border-bottom: .5mm solid $colour-bg-high
|
||||
border-bottom: .5mm solid
|
||||
min-width: 100%
|
||||
|
||||
textarea
|
||||
border: .5mm solid $colour-bg-high
|
||||
border: .5mm solid
|
||||
width: 80ch
|
||||
height: 40ch
|
||||
display: block-inline
|
||||
@ -136,6 +94,34 @@ button
|
||||
clear: both
|
||||
display: block
|
||||
margin: 1em auto
|
||||
color: $colour-fg
|
||||
background-color: $colour-bg-high
|
||||
border: .5mm solid $colour-bg-high
|
||||
border: .5mm solid
|
||||
|
||||
.timeline
|
||||
width: 90ch
|
||||
|
||||
.timeline > li
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
.timeline > li time
|
||||
float: left
|
||||
width: 14ch
|
||||
text-align: center
|
||||
|
||||
.timeline > li div
|
||||
float: left
|
||||
padding: 0 0 1em 2ch
|
||||
width: 60%
|
||||
|
||||
summary, .abstract
|
||||
opacity: .5
|
||||
|
||||
.topics > li
|
||||
display: inline
|
||||
margin-right: 2ch
|
||||
|
||||
.topics
|
||||
overflow: visible
|
||||
display: block
|
||||
clear: both
|
||||
text-align: center
|
||||
|
||||
@ -15,16 +15,12 @@
|
||||
src: url("/static/fonts/orbitron/orbitron-black.otf"); }
|
||||
|
||||
body {
|
||||
font-family: "Sans";
|
||||
font-weight: 100;
|
||||
background-color: #00141E;
|
||||
color: #99C2D8; }
|
||||
font-family: "sans-serif"; }
|
||||
|
||||
body, body > *, article > * {
|
||||
margin: auto; }
|
||||
|
||||
p, pre {
|
||||
margin: 1em auto;
|
||||
text-align: justify;
|
||||
text-justify: inter-word; }
|
||||
|
||||
@ -33,43 +29,11 @@ p, img, h1, h2, h3, h4, h5, article {
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
max-width: 80ch;
|
||||
overflow: scroll; }
|
||||
overflow: auto;
|
||||
padding-left: 1ch; }
|
||||
|
||||
.timeline {
|
||||
max-width: 210mm; }
|
||||
|
||||
.timeline > li {
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
|
||||
.timeline > li time {
|
||||
float: left;
|
||||
width: 12ch;
|
||||
text-align: center;
|
||||
vertical-align: middle; }
|
||||
|
||||
.timeline > li div {
|
||||
float: left;
|
||||
padding: 0 0 1em 2ch;
|
||||
max-width: 60ch;
|
||||
border-left: 1mm solid; }
|
||||
|
||||
.abstract {
|
||||
opacity: .5; }
|
||||
|
||||
.topics > li {
|
||||
display: inline;
|
||||
margin-right: 2ch; }
|
||||
|
||||
.topics {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
clear: both;
|
||||
text-align: center; }
|
||||
|
||||
details, header > h1 {
|
||||
margin-bottom: 1em #034060; }
|
||||
details, header > h1, p, pre, ul, ol {
|
||||
margin: 1em auto; }
|
||||
|
||||
header > h1 {
|
||||
font-family: "Orbitron Light";
|
||||
@ -81,25 +45,20 @@ details, details > * {
|
||||
header, footer, details, details > * {
|
||||
text-align: center; }
|
||||
|
||||
a {
|
||||
color: #D6F6AA;
|
||||
a, header a, header a:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
a:visited {
|
||||
color: #d6f6aa; }
|
||||
opacity: .8; }
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: #99C2D8; }
|
||||
|
||||
header a:visited {
|
||||
color: #99C2D8; }
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: "Orbitron Medium";
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
margin: 1em auto; }
|
||||
margin: 2em auto 1em; }
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
@ -108,7 +67,7 @@ footer {
|
||||
padding: 1em 0; }
|
||||
|
||||
fieldset {
|
||||
border: 0.5mm dashed #034060; }
|
||||
border: .5mm dashed; }
|
||||
|
||||
fieldset > p {
|
||||
margin: .5em auto;
|
||||
@ -121,14 +80,12 @@ label {
|
||||
|
||||
input, textarea {
|
||||
display: block;
|
||||
color: #99C2D8;
|
||||
background-color: #00141E;
|
||||
border: none;
|
||||
border-bottom: 0.5mm solid #034060;
|
||||
border-bottom: .5mm solid;
|
||||
min-width: 100%; }
|
||||
|
||||
textarea {
|
||||
border: 0.5mm solid #034060;
|
||||
border: .5mm solid;
|
||||
width: 80ch;
|
||||
height: 40ch;
|
||||
display: block-inline;
|
||||
@ -138,6 +95,43 @@ button {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
color: #99C2D8;
|
||||
background-color: #034060;
|
||||
border: 0.5mm solid #034060; }
|
||||
border: .5mm solid; }
|
||||
|
||||
.timeline {
|
||||
width: 90ch; }
|
||||
|
||||
.timeline > li {
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
|
||||
.timeline > li time {
|
||||
float: left;
|
||||
width: 14ch;
|
||||
text-align: center; }
|
||||
|
||||
.timeline > li div {
|
||||
float: left;
|
||||
padding: 0 0 1em 2ch;
|
||||
width: 60%; }
|
||||
|
||||
summary, .abstract {
|
||||
opacity: .5; }
|
||||
|
||||
.topics > li {
|
||||
display: inline;
|
||||
margin-right: 2ch; }
|
||||
|
||||
.topics {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
clear: both;
|
||||
text-align: center; }
|
||||
|
||||
body {
|
||||
background-color: #191B22; }
|
||||
|
||||
body, a, header a:visited {
|
||||
color: #f2f2f2; }
|
||||
|
||||
pre, .timeline > li div {
|
||||
border-left: 1mm solid #f2f2f233; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user