mirror of
https://forge.chapril.org/tykayn/orgmode-to-gemini-blog
synced 2025-06-20 09:04:42 +02:00
up style
This commit is contained in:
Tykayn
tykayn
parent
906e253dae
commit
76008e80bf
5 changed files with 232 additions and 207 deletions
42
templates/styles_src/_variables.scss
Normal file
42
templates/styles_src/_variables.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// Variables de couleurs
|
||||
$color-text: #000;
|
||||
$color-background: #fff;
|
||||
$color-heading: #333;
|
||||
$color-heading-h1: #221d30;
|
||||
$color-link: rgb(0, 123, 255);
|
||||
$color-footer-bg: #aaa;
|
||||
$color-footer-text: #dedede;
|
||||
$color-page-bg: #f4f4f4;
|
||||
$color-border: #dedede;
|
||||
$color-blockquote-border: grey;
|
||||
$color-link-hover-bg: #303030;
|
||||
|
||||
// Variables de taille
|
||||
$article-width: 75ch;
|
||||
$container-max-width: 70ch;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-body: 1.5rem;
|
||||
$font-size-content: 1.2rem;
|
||||
$font-size-h1: 2.5rem;
|
||||
$font-size-h2: 2rem;
|
||||
$font-size-h3: 1.5rem;
|
||||
$line-height-base: 1.5em;
|
||||
$line-height-heading: 1.3em;
|
||||
|
||||
// Variables d'espacement
|
||||
$spacing-xs: 0.5rem;
|
||||
$spacing-sm: 1rem;
|
||||
$spacing-md: 1.5rem;
|
||||
$spacing-lg: 2rem;
|
||||
$spacing-xl: 5rem;
|
||||
$padding-container: 5% 6%;
|
||||
$border-radius-sm: 0.5rem;
|
||||
$border-radius-md: 1rem;
|
||||
|
||||
// Variables de police
|
||||
$font-family-base: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
$font-family-heading: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
|
||||
// Variables de transition
|
||||
$transition-hover: 0.25s all ease-in;
|
||||
$transition-out: 0.25s box-shadow ease-out;
|
||||
|
|
@ -1,28 +1,79 @@
|
|||
/*style général scss*/
|
||||
|
||||
// Variables de couleurs
|
||||
$color-text: #000;
|
||||
$color-background: #fff;
|
||||
$color-heading: #333;
|
||||
$color-heading-h1: #221d30;
|
||||
$color-link: rgb(0, 123, 255);
|
||||
$color-footer-bg: #aaa;
|
||||
$color-footer-text: #dedede;
|
||||
$color-page-bg: #f4f4f4;
|
||||
$color-border: #dedede;
|
||||
$color-blockquote-border: grey;
|
||||
$color-link-hover-bg: #303030;
|
||||
|
||||
// Variables de taille
|
||||
$article-width: 75ch;
|
||||
$container-max-width: 70ch;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-body: 1.5rem;
|
||||
$font-size-content: 1.2rem;
|
||||
$font-size-h1: 2.5rem;
|
||||
$font-size-h2: 2rem;
|
||||
$font-size-h3: 1.5rem;
|
||||
$line-height-base: 1.5em;
|
||||
$line-height-heading: 1.3em;
|
||||
|
||||
// Variables d'espacement
|
||||
$spacing-xs: 0.5rem;
|
||||
$spacing-sm: 1rem;
|
||||
$spacing-md: 1.5rem;
|
||||
$spacing-lg: 2rem;
|
||||
$spacing-xl: 5rem;
|
||||
$padding-container: 5% 6%;
|
||||
$border-radius-sm: 0.5rem;
|
||||
$border-radius-md: 1rem;
|
||||
|
||||
// Variables de police
|
||||
$font-family-base: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
$font-family-heading: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
|
||||
// Variables de transition
|
||||
$transition-hover: 0.25s all ease-in;
|
||||
$transition-out: 0.25s box-shadow ease-out;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 1rem;
|
||||
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: left;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5em;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
font-size: $font-size-body;
|
||||
line-height: $line-height-base;
|
||||
color: $color-text;
|
||||
background: $color-background;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
nav,
|
||||
.navbar,
|
||||
.container,
|
||||
.body-wrap {
|
||||
max-width: 70ch;
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -32,53 +83,54 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2rem;
|
||||
color: #333;
|
||||
font-family: $font-family-heading;
|
||||
margin-top: $spacing-sm;
|
||||
margin-bottom: $spacing-lg;
|
||||
color: $color-heading;
|
||||
text-decoration: none !important;
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
line-height: $line-height-heading;
|
||||
}
|
||||
|
||||
hr+h1 {
|
||||
margin-top: 5rem;
|
||||
margin-top: $spacing-xl;
|
||||
}
|
||||
|
||||
h1:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 1. Use a more-intuitive box-sizing model */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
color: $color-heading-h1;
|
||||
font-size: $font-size-h1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
padding-bottom: 20vh;
|
||||
padding-bottom: 2rem;
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Improve media defaults */
|
||||
.content {
|
||||
font-size: 1.2rem;
|
||||
font-size: $font-size-content;
|
||||
min-height: 15rem;
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
width: 75ch;
|
||||
width: $article-width;
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 100%;
|
||||
margin-top: $spacing-sm;
|
||||
margin-bottom: $spacing-sm;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,45 +142,40 @@ pre,
|
|||
// ancres
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 1rem;
|
||||
color: rgb(0, 123, 255);
|
||||
border-radius: $border-radius-md;
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
padding: $spacing-sm;
|
||||
|
||||
main &:hover {
|
||||
background: #303030;
|
||||
color: rgb(0, 123, 255);
|
||||
background: $color-link-hover-bg;
|
||||
color: $color-link;
|
||||
|
||||
h2 {
|
||||
color: rgb(0, 123, 255);
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav &,
|
||||
|
||||
.page__index & {
|
||||
padding: 0.55rem 2rem;
|
||||
padding: $spacing-xs $spacing-lg;
|
||||
display: block;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: $spacing-sm;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.site-footer & {
|
||||
margin: 0 1rem;
|
||||
margin: 0 $spacing-sm;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a img {
|
||||
transition: 0.25s box-shadow ease-out;
|
||||
transition: $transition-out;
|
||||
|
||||
&:hover {
|
||||
|
||||
box-shadow: 0 0 1rem #ccc;
|
||||
transition: 0.25s all ease-in;
|
||||
box-shadow: 0 0 $spacing-sm #ccc;
|
||||
transition: $transition-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,35 +189,8 @@ select {
|
|||
p {
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: pretty;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #221d30;
|
||||
font-size: 2.5rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
line-height: 1.3em;
|
||||
margin-top: $spacing-md;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
#root,
|
||||
|
|
@ -178,20 +198,13 @@ h6 {
|
|||
isolation: isolate;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 4ch;
|
||||
padding-right: 4ch;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
#tags_page & {
|
||||
display: inline;
|
||||
|
|
@ -199,7 +212,7 @@ li {
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
margin-right: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -221,28 +234,27 @@ li {
|
|||
|
||||
.navbar-menu {
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
width: $spacing-lg;
|
||||
height: $spacing-lg;
|
||||
margin-right: $spacing-sm;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 1rem;
|
||||
margin: 0 $spacing-sm;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
#recherche {
|
||||
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: $spacing-md;
|
||||
margin-bottom: $spacing-md;
|
||||
float: right;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
padding: 0.5rem;
|
||||
padding: $spacing-xs;
|
||||
border: solid 1px #555;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: $border-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -252,82 +264,80 @@ li {
|
|||
.site-icon {
|
||||
width: 9rem;
|
||||
height: auto;
|
||||
margin: 1rem auto;
|
||||
margin: $spacing-sm auto;
|
||||
position: static;
|
||||
padding: 1rem;
|
||||
padding: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.header-image {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
padding: $spacing-sm;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.blog-title,
|
||||
.blog-subtitle {
|
||||
margin: 1rem;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 1rem #555;
|
||||
margin: $spacing-sm;
|
||||
color: $color-background;
|
||||
text-shadow: 0 0 $spacing-sm #555;
|
||||
}
|
||||
|
||||
#page {
|
||||
background: #f4f4f4;
|
||||
background: $color-page-bg;
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
background: #fff;
|
||||
padding: 5% 6%;
|
||||
background: $color-background;
|
||||
padding: $padding-container;
|
||||
margin-bottom: 5%;
|
||||
margin-top: 1rem;
|
||||
border-radius: 1rem;
|
||||
margin-top: $spacing-sm;
|
||||
border-radius: $border-radius-md;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 15rem;
|
||||
|
||||
}
|
||||
|
||||
.after-article {
|
||||
border-top: 1px solid #dedede;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.site-footer {
|
||||
min-height: 20vh;
|
||||
padding: 2rem;
|
||||
background: #aaa;
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
.site-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
min-height: 20vh;
|
||||
padding: $spacing-lg;
|
||||
background: $color-footer-bg;
|
||||
color: $color-footer-text;
|
||||
}
|
||||
|
||||
article {
|
||||
width: $article-width;
|
||||
max-width: calc(100vw - 6rem);
|
||||
}
|
||||
|
||||
.after-article {
|
||||
border-top: 1px solid $color-border;
|
||||
padding: $spacing-sm;
|
||||
}
|
||||
|
||||
.article-navigation {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: $spacing-lg;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
a {
|
||||
padding-right: 2rem;
|
||||
padding-right: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.article-tags {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: $spacing-sm;
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
a {
|
||||
margin-right: 1ch;
|
||||
padding: 0.5rem;
|
||||
padding: $spacing-xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.article-tags,
|
||||
.tags {
|
||||
ul {
|
||||
|
|
@ -338,15 +348,13 @@ li {
|
|||
margin-right: 2ch;
|
||||
display: inline-block;
|
||||
|
||||
|
||||
a {
|
||||
margin-right: 1ch;
|
||||
padding: 0.5rem;
|
||||
padding: $spacing-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
-webkit-hyphens: none;
|
||||
|
|
@ -354,10 +362,10 @@ q {
|
|||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
quotes: none;
|
||||
border-left: 3px solid grey;
|
||||
padding-left: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-left: 3px solid $color-blockquote-border;
|
||||
padding-left: $spacing-lg;
|
||||
padding-top: $spacing-md;
|
||||
padding-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.article-main-content {
|
||||
|
|
@ -376,16 +384,16 @@ q {
|
|||
img {
|
||||
max-width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: 1rem;
|
||||
margin-right: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 75ch) {
|
||||
@media (max-width: $article-width) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
padding: $spacing-sm;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue