diff options
author | Quentin Dufour <quentin@deuxfleurs.fr> | 2022-05-10 17:52:28 +0200 |
---|---|---|
committer | Quentin Dufour <quentin@deuxfleurs.fr> | 2022-05-10 17:52:28 +0200 |
commit | e9e2af423557b50c416b68559bab7786bee35ff2 (patch) | |
tree | abdc86803f1de9926bd628728a375f3c583a14bc /sass | |
download | guide.deuxfleurs.fr-e9e2af423557b50c416b68559bab7786bee35ff2.tar.gz guide.deuxfleurs.fr-e9e2af423557b50c416b68559bab7786bee35ff2.zip |
Initial commit
Diffstat (limited to 'sass')
-rw-r--r-- | sass/_markdown.scss | 45 | ||||
-rw-r--r-- | sass/_text.scss | 39 | ||||
-rw-r--r-- | sass/_ultility.scss | 13 | ||||
-rw-r--r-- | sass/juice.scss | 194 |
4 files changed, 291 insertions, 0 deletions
diff --git a/sass/_markdown.scss b/sass/_markdown.scss new file mode 100644 index 0000000..262c030 --- /dev/null +++ b/sass/_markdown.scss @@ -0,0 +1,45 @@ +.content { + padding: 0 40px; + display: flex; + flex-direction: column; + overflow-x: auto; +} + +.content pre { + overflow-x: auto; + padding: 1.25em 1.5em; + white-space: pre; + word-wrap: normal; + background-color: white; + color: #4a4a4a; + font-size: .875em; + font-family: monospace; +} + +.content code { + background-color: white; + color: #4a4a4a; + font-size: .875em; + font-weight: normal; + padding: 0.25em 0.5em; + font-family: monospace; +} + +.content pre code { + padding: 0; +} + +.content a { + color: var(--primary-link-color); + + &:hover { + text-decoration: underline; + } +} + +.content blockquote { + border-left: #e2dede 8px solid; + margin: 0; + background-color: #f2f1f0; + padding: 0 20px; +} diff --git a/sass/_text.scss b/sass/_text.scss new file mode 100644 index 0000000..40f47c9 --- /dev/null +++ b/sass/_text.scss @@ -0,0 +1,39 @@ +.heading-text { + font-family: "Fira Sans", sans-serif; + font-size: 32px; + font-weight: 600; + padding: 10px 0 25px 0; + color: var(--primary-text-color); +} + +h1, .title-text { + font-family: "Fira Sans", sans-serif; + font-size: 25px; + font-weight: 500; + color: var(--primary-text-color); + border-left: var(--primary-color) 8px solid; + padding-left: 10px; +} + +h2, .subtitle-text { + font-family: "Fira Sans", sans-serif; + font-size: 20px; + font-weight: 500; + color: var(--primary-text-color); +} + +.text { + font-family: "Fira Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0.2px; + color: var(--primary-text-color); +} + +.subtext { + font-family: "Fira Sans", sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.1px; +}
\ No newline at end of file diff --git a/sass/_ultility.scss b/sass/_ultility.scss new file mode 100644 index 0000000..e51f8dc --- /dev/null +++ b/sass/_ultility.scss @@ -0,0 +1,13 @@ +.text-center { + text-align: center; +} + +.pos-absolute { + right: 0; + left: 0; + position: absolute; +} + +.box-shadow { + box-shadow: 0 2px 10px 2px #ddd; +}
\ No newline at end of file diff --git a/sass/juice.scss b/sass/juice.scss new file mode 100644 index 0000000..d2069af --- /dev/null +++ b/sass/juice.scss @@ -0,0 +1,194 @@ +@import "_ultility.scss"; +@import "_text.scss"; +@import "_markdown.scss"; + +body { + padding: 0; + margin: 0; + box-sizing: border-box; + background-color: var(--secondary-color); + display: flex; + flex-direction: column; + min-height: 100vh; +} + +a { + text-decoration: none; +} + +ul { + margin-top: 0.5rem; +} + +ul > li { + padding: 0.3rem 0; +} + +p > img { + width: 100%; + height: auto; +} + +header { + background-color: var(--primary-color); + color: black; + padding: 20px 50px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + font-family: "Alfa Slab One", serif; + font-size: 32px; + color: var(--primary-text-color); + display: flex; + align-items: center; + margin: 0 40px; + + img { + width: 60px; + margin: 0 25px; + } +} + +.nav-item { + margin: 0 10px; + text-decoration: none; + font-size: 18px; + font-weight: bold; + + &:hover { + color: #000; + text-decoration: underline; + } +} + +.hero { + display: flex; + align-items: center; + justify-content: space-evenly; + height: 100vh; + background-color: var(--primary-color); + overflow-x: hidden; + padding: 0 40px; + + .explore-more { + position: absolute; + bottom: 20px; + cursor: pointer; + } +} + +main { + display: flex; + padding: 50px 100px; + flex-grow: 1; + + .toc { + max-width: 260px; + min-width: 240px; + } + + .toc-item { + padding: 10px 20px; + color: #424242; + } + + .toc-item a, .toc-item-child a { + color: var(--secondary-text-color); + + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + + .toc-item a.active, .toc-item-child a.active { + color: var(--toc-highlight-text-color); + } + + .toc-item-child { + padding: 0 30px 5px; + color: #424242; + } + +} + +.toc-sticky { + border-radius: 3px; + border-top: 5px solid var(--primary-color); + background-color: white; + position: sticky; + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; + top: 10px; + padding: 10px 0 20px; + max-height: 100vh; + overflow: auto; +} + +footer { + padding: 50px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #202020; + color: #fcfcfc; + + a { + color: #fcfcfc; + text-decoration: underline; + } +} + +@media screen and (min-width: 1280px) { + .content { + max-width: 60%; + min-width: 800px; + } +} + +@media screen and (max-width: 768px) { + header { + padding: 10px 30px; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .logo { + font-size: 28px; + margin: 10px; + + img { + width: 45px; + margin: 0 10px 0 0; + } + } + + .nav-item { + margin: 0 5px; + font-size: 14px; + } + + .hero { + padding: 40px 30px; + } + + main { + padding: 30px; + } + + .content { + padding: 0; + } + + .explore-more, .toc { + display: none; + } + +} |