Add first version of the site

This commit is contained in:
Gregory Trolliet 2019-09-20 07:51:22 +02:00
commit 0bbda99e9c
121 changed files with 17684 additions and 0 deletions

View file

@ -0,0 +1,203 @@
*,
*:after,
*:before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
color: $fg-color;
background-color: $bg-color;
font-family: $text-font-family;
font-size: 1.6em;
font-weight: 300;
line-height: 1.8em;
@media only screen and (max-width : 768px) {
font-size: 1.6em;
line-height: 1.6em;
}
}
a {
font-weight: 300;
color: $link-color;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
p {
margin: 2.0rem 0 2.0rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $heading-font-family;
font-weight: 700;
color: $alt-fg-color;
margin: 6.4rem 0 3.2rem 0;
}
h1 {
font-size: 3.2rem;
line-height: 3.6rem;
@media only screen and (max-width : 768px) {
font-size: 3.0rem;
line-height: 3.4rem;
}
}
h2 {
font-size: 2.8rem;
line-height: 3.2rem;
@media only screen and (max-width : 768px) {
font-size: 2.6rem;
line-height: 3.0rem;
}
}
h3 {
font-size: 2.4rem;
line-height: 2.8rem;
@media only screen and (max-width : 768px) {
font-size: 2.2rem;
line-height: 2.6rem;
}
}
h4 {
font-size: 2.2rem;
line-height: 2.6rem;
@media only screen and (max-width : 768px) {
font-size: 2.0rem;
line-height: 2.4rem;
}
}
h5 {
font-size: 2.0rem;
line-height: 2.4rem;
@media only screen and (max-width : 768px) {
font-size: 1.8rem;
line-height: 2.2rem;
}
}
h6 {
font-size: 1.8rem;
line-height: 2.2rem;
@media only screen and (max-width : 768px) {
font-size: 1.6rem;
line-height: 2.0rem;
}
}
b, strong {
font-weight: 700;
}
pre {
display: block;
font-family: $code-font-family;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.6rem;
margin: 2.0rem 0 2.0rem 0;
padding: 2.0rem;
overflow-x: auto;
code {
display: inline-block;
background-color: inherit;
color: inherit;
}
}
code {
font-family: $code-font-family;
font-size: 1.6rem;
font-weight: 400;
background-color: $alt-bg-color;
color: $fg-color;
padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}
blockquote {
border-left: 2px solid $alt-bg-color;
padding-left: 2.0rem;
line-height: 2.2rem;
font-weight: 400;
font-style: italic;
}
th, td {
padding: 1.6rem;
}
table {
border-collapse: collapse;
}
table td, table th {
border: 2px solid $alt-fg-color;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
img {
max-width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.container {
margin: 0 auto;
max-width: 90.0rem;
width: 100%;
padding-left: 2.0rem;
padding-right: 2.0rem;
}
.fab {
font-weight: 400;
}
.fas {
font-weight: 700;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.fab {
font-weight: 400;
}
.fas {
font-weight: 900;
}

View file

@ -0,0 +1,39 @@
body.inverted {
color: $fg-color-inverted;
background-color: $bg-color-inverted;
a {
color: $link-color-inverted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $alt-fg-color-inverted;
}
code {
background-color: $alt-bg-color-inverted;
color: $fg-color-inverted;
}
pre {
code {
background-color: inherit;
color: inherit;
}
}
blockquote {
border-left: 2px solid $alt-bg-color-inverted;
}
table td, table th {
border: 2px solid $alt-fg-color-inverted;
}
}

View file

@ -0,0 +1,23 @@
body.rtl {
direction: rtl;
pre {
direction: ltr;
}
blockquote {
border-left: none;
border-right: 2px solid $alt-bg-color;
padding-left: 0;
padding-right: 1.6rem;
}
table tr td:first-child,
table tr th:first-child {
border-right: 0;
}
table tr td:last-child,
table tr th:last-child {
border-left: 0;
}
}

View file

@ -0,0 +1,169 @@
.content {
flex: 1;
display: flex;
margin-top: 1.6rem;
margin-bottom: 3.2rem;
article {
header {
margin-top: 6.4rem;
margin-bottom: 3.2rem;
h1 {
font-size: 4.2rem;
line-height: 4.6rem;
margin: 0;
@media only screen and (max-width : 768px) {
font-size: 4.0rem;
line-height: 4.4rem;
}
}
}
footer {
margin-top: 4.0rem;
.see-also {
margin: 3.2rem 0;
h3 {
margin: 3.2rem 0;
}
}
}
}
.post {
.post-title {
margin-bottom: .75em;
}
.post-meta {
i {
text-align: center;
width: 1.6rem;
margin-left: 0;
margin-right: 0.5rem;
}
.date {
.posted-on {
margin-left: 0;
margin-right: 1.5rem;
}
}
}
}
figure {
margin: 0;
padding: 0;
}
figcaption p {
text-align: center;
font-style: italic;
font-size: 1.6rem;
margin: 0;
}
}
.avatar img{
width: 20rem;
height: auto;
border-radius: 50%;
@media only screen and (max-width : 768px) {
width: 10rem;
}
}
.list {
ul {
margin: 3.2rem 0 3.2rem 0;
list-style: none;
padding: 0;
li {
font-size: 1.8rem;
@media only screen and (max-width : 768px) {
margin: 1.6rem 0 1.6rem 0;
}
.date {
display: inline-block;
width: 20.0rem;
text-align: right;
margin-right: 3.0rem;
@media only screen and (max-width : 768px) {
display: block;
text-align: left;
}
}
.title {
font-size: 1.8rem;
color: $fg-color;
font-family: $heading-font-family;
font-weight: 700;
&:hover,
&:focus {
color: $link-color
}
}
}
}
}
.centered {
display: flex;
align-items: center;
justify-content: center;
.about {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
}
h2 {
margin-top: 1.0rem;
margin-bottom: 0.5rem;
font-size: 2.4rem;
@media only screen and (max-width : 768px) {
font-size: 2.0rem;
}
}
ul {
list-style: none;
margin: 3.0rem 0 1.0rem 0;
padding: 0;
li {
display: inline-block;
position: relative;
a {
color: $fg-color;
text-transform: uppercase;
margin-left: 1.0rem;
margin-right: 1.0rem;
font-size: 1.6rem;
&:hover,
&:focus {
color: $link-color;
}
@media only screen and (max-width : 768px) {
font-size: 1.4rem;
}
i {
font-size: 3.2rem;
}
}
}
}
}
.error {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
font-size: 4.6rem;
@media only screen and (max-width : 768px) {
font-size: 3.2rem;
}
}
h2 {
margin-top: 2.0rem;
margin-bottom: 3.2rem;
font-size: 3.2rem;
@media only screen and (max-width : 768px) {
font-size: 2.8rem;
}
}
}
}

View file

@ -0,0 +1,36 @@
body.inverted {
.content {
.list {
ul {
li {
.title {
color: $fg-color-inverted;
&:hover,
&:focus {
color: $link-color-inverted
}
}
}
}
}
.centered {
.about {
ul {
li {
a {
color: $fg-color-inverted;
&:hover,
&:focus {
color: $link-color-inverted;
}
}
}
}
}
}
}
}

View file

@ -0,0 +1,34 @@
body.rtl {
.content {
.post {
.post-meta {
.posted-on {
margin-left: 1.5rem;
margin-right: 0;
}
}
.tags,
.categories {
i {
margin-left: 0.5rem;
margin-right: 0;
}
}
}
}
.list {
ul {
li {
.date {
text-align: left;
margin-left: 3.0rem;
margin-right: 0;
@media only screen and (max-width : 768px) {
text-align: right;
}
}
}
}
}
}

View file

@ -0,0 +1,9 @@
.footer {
width: 100%;
text-align: center;
line-height: 2.0rem;
margin-bottom:1.0rem;
a {
color: $link-color;
}
}

View file

@ -0,0 +1,7 @@
body.inverted {
.footer {
a {
color: $link-color-inverted;
}
}
}

View file

@ -0,0 +1,96 @@
.navigation {
height: 6.0rem;
width: 100%;
a, span {
display: inline;
font-size: 1.6rem;
font-family: $heading-font-family;
font-weight: 700;
line-height: 6.0rem;
color: $fg-color;
}
a {
&:hover,
&:focus {
color: $link-color
}
}
.navigation-title {
letter-spacing: 0.1rem;
text-transform: uppercase;
}
.navigation-list {
float: right;
list-style: none;
margin-bottom: 0;
margin-top: 0;
@media only screen and (max-width : 768px) {
position: absolute;
top: 6.0rem;
right: 0;
z-index: 5;
visibility: hidden;
opacity: 0;
padding: 0;
max-height: 0;
width: 100%;
background-color: $bg-color;
border-top: solid 2px $alt-bg-color;
border-bottom: solid 2px $alt-bg-color;
transition: opacity 0.25s, max-height 0.15s linear;
}
.navigation-item {
float: left;
margin: 0;
position: relative;
@media only screen and (max-width : 768px) {
float: none !important;
text-align: center;
a, span {
line-height: 5.0rem;
}
}
a, span {
margin-left: 1.0rem;
margin-right: 1.0rem;
}
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color;
margin: 0 8.0rem;
span {
display: none;
}
}
}
}
#menu-toggle {
display: none;
@media only screen and (max-width : 768px) {
&:checked + label {
color: $alt-bg-color;
}
&:checked + label + ul {
visibility: visible;
opacity: 1;
max-height: 100rem;
}
}
}
.menu-button {
display: none;
@media only screen and (max-width : 768px) {
display: block;
font-size: 2.4rem;
font-weight: 400;
line-height: 6.0rem;
color: $fg-color;
cursor: pointer;
&:hover,
&:focus {
color: $link-color
}
}
}
}

View file

@ -0,0 +1,44 @@
body.inverted {
.navigation {
a, span {
color: $fg-color-inverted;
}
a {
&:hover,
&:focus {
color: $link-color-inverted;
}
}
.navigation-list {
@media only screen and (max-width : 768px) {
background-color: $bg-color-inverted;
border-top: solid 2px $alt-bg-color-inverted;
border-bottom: solid 2px $alt-bg-color-inverted;
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color-inverted;
}
}
}
#menu-toggle {
@media only screen and (max-width : 768px) {
&:checked + label {
color: $alt-bg-color-inverted;
}
}
}
.menu-button {
@media only screen and (max-width : 768px) {
color: $fg-color-inverted;
&:hover,
&:focus {
color: $link-color-inverted;
}
}
}
}
}

View file

@ -0,0 +1,18 @@
body.rtl {
.navigation-list {
float: left;
@media only screen and (max-width : 768px) {
left: 0;
right: auto;
}
.navigation-item {
float: right;
}
}
.menu-button {
@media only screen and (max-width : 768px) {
float: left;
}
}
}

View file

@ -0,0 +1,23 @@
.pagination {
margin-top: 6.0rem;
text-align: center;
font-family: $heading-font-family;
li {
display: inline;
text-align: center;
font-weight: 700;
span {
margin: 0;
text-align: center;
width: 3.2rem;
}
a {
font-weight: 300;
span {
margin: 0;
text-align: center;
width: 3.2rem;
}
}
}
}

View file

@ -0,0 +1,18 @@
// Fonts
$text-font-family: Merriweather, Georgia, serif;
$heading-font-family: Lato, Helvetica, sans-serif;
$code-font-family: 'Source Code Pro', 'Lucida Console', monospace;
// Colors
$bg-color: #FAFAFA !default;
$fg-color: #212121 !default;
$alt-bg-color: #E0E0E0 !default;
$alt-fg-color: #000 !default;
$link-color: #1565c0 !default;
// Colors inverted
$bg-color-inverted: #212121 !default;
$fg-color-inverted: #fafafa !default;
$alt-bg-color-inverted: #424242 !default;
$alt-fg-color-inverted: #fafafa !default;
$link-color-inverted: #f44336 !default;

View file

@ -0,0 +1,5 @@
@import "variables";
@import "base_inverted";
@import "content_inverted";
@import "navigation_inverted";
@import "footer_inverted";

View file

@ -0,0 +1,4 @@
@import "_variables";
@import "_base_rtl";
@import "_content_rtl";
@import "_navigation_rtl";

View file

@ -0,0 +1,6 @@
@import "variables";
@import "base";
@import "content";
@import "navigation";
@import "pagination";
@import "footer";