From 930908e2c46e818b805bbfacfbf3ac4ace6599fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Niemier?= Date: Thu, 26 Nov 2020 00:44:41 +0100 Subject: [PATCH] fix: send CSS to the gym --- content/_index.md | 2 +- sass/_buttons.scss | 92 +++++++++++++++++++++++++++ sass/_footer.scss | 52 ++++++++++++++++ sass/_header.scss | 90 ++++++++++++++++++++++++++ sass/_logo.scss | 8 +++ sass/_main.scss | 105 +++++-------------------------- sass/_pagination.scss | 81 ++++++++++++++++++++++++ sass/_post.scss | 142 ++++++++++++++++++++++++++++++++++++++++++ sass/_variables.scss | 2 + sass/style.scss | 19 ++++-- templates/index.html | 10 ++- 11 files changed, 499 insertions(+), 104 deletions(-) create mode 100644 sass/_buttons.scss create mode 100644 sass/_footer.scss create mode 100644 sass/_header.scss create mode 100644 sass/_logo.scss create mode 100644 sass/_pagination.scss create mode 100644 sass/_post.scss create mode 100644 sass/_variables.scss diff --git a/content/_index.md b/content/_index.md index 47b3187..29da8a1 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,6 +1,6 @@ +++ sort_by = "date" transparent = false -paginate_by = 3 +paginate_by = 4 insert_anchor_links = "right" +++ diff --git a/sass/_buttons.scss b/sass/_buttons.scss new file mode 100644 index 0000000..3aa1bd3 --- /dev/null +++ b/sass/_buttons.scss @@ -0,0 +1,92 @@ +.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-decoration: none; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + + /* variants */ + + &.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; + + :hover { + transform: none; + box-shadow: none; + } + } + + &.primary { + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); + + &:hover { + box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); + } + } + + &.link { + background: none; + font-size: 1rem; + } + + /* sizes */ + + &.small { + font-size: .8rem; + } + + &.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; + margin: 20px 0; + max-width: 100%; +} + +.code-toolbar { + margin-bottom: 20px; + + .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; + } +} diff --git a/sass/_footer.scss b/sass/_footer.scss new file mode 100644 index 0000000..c97203f --- /dev/null +++ b/sass/_footer.scss @@ -0,0 +1,52 @@ +@import "variables"; + +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: .5; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; + + @media (max-width: $tablet-max-width) { + flex-direction: column; + } + } + + a { + color: inherit; + } + + .copyright { + display: flex; + flex-direction: row; + align-items: center; + // so `--light-color-secondary` color exists no where else in the stylings + // color: var(--light-color-secondary); + // As a substitute, I'm going to use the alpha-70 version of accent. + color: var(--accent-alpha-70); + + &--user { + margin: auto; + text-align: center; + } + + & > *:first-child:not(:only-child) { + margin-right: 10px; + + @media (max-width: $tablet-max-width) { + margin: 0; + } + } + + @media (max-width: $tablet-max-width) { + flex-direction: column; + margin-top: 10px; + } + } +} diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..eb303ae --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,90 @@ +@import "variables"; + +@mixin menu { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; +} + +.header { + display: flex; + flex-direction: column; + position: relative; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + display: flex; + flex: 1; + + &:after { + content: ''; + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px); + display: block; + width: 100%; + right: 10px; + } + + a { + flex: 0 0 auto; + max-width: 100%; + text-decoration: none; + } + } + + .menu { + margin: 20px 0; + --shadow-color: var(--accent-alpha-70); + --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color); + + @media (max-width: $phone-max-width) { + @include menu; + top: 50px; + right: 0; + } + + &__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + + li:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; + } + + @media (max-width: $phone-max-width) { + flex-direction: column; + align-items: flex-start; + padding: 0; + + li { + margin: 0; + padding: 5px; + } + } + } + + &-trigger { + color: var(--accent); + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + position: relative; + } + } +} diff --git a/sass/_logo.scss b/sass/_logo.scss new file mode 100644 index 0000000..d455cc7 --- /dev/null +++ b/sass/_logo.scss @@ -0,0 +1,8 @@ +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; +} diff --git a/sass/_main.scss b/sass/_main.scss index 5a82446..f8b1175 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -1,4 +1,4 @@ -@import "../themes/zerm/sass/variables"; +@import "variables"; html { box-sizing: border-box; @@ -22,10 +22,6 @@ body { -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; - - @media (max-width: $phone-max-width) { - font-size: 1rem; - } } h1, h2, h3, h4, h5, h6 { @@ -44,8 +40,8 @@ h1, h2, h3, h4, h5, h6 { border-bottom-color: transparent; cursor: pointer; - @media(max-width: $phone-max-width){ - visibility: visible; + @media (hover: none){ + visibility: visible; } } @@ -56,21 +52,6 @@ h1, h2, h3, h4, h5, h6 { } } -// Actually keeping Pawroman's stylings here for font-size over h1-h6. -// I prefer differentiated header height. - -// OLD -// --------------------- -// h1, h2, h3 { -// font-size: 1.4rem; -// } - -// h4, h5, h6 { -// font-size: 1.2rem; -// } - -// Pawroman's -// --------------------- h1 { font-size: 1.4rem; } @@ -95,70 +76,12 @@ a { img { display: block; max-width: 100%; - - &.left { - margin-right: auto; - } - - &.center { - margin-left: auto; - margin-right: auto; - } - - &.right { - margin-left: auto; - } } p { margin-bottom: 20px; } -figure { - display: table; - max-width: 100%; - margin: 25px 0; - - &.left { - // img { - margin-right: auto; - // } - } - - &.center { - // img { - margin-left: auto; - margin-right: auto; - // } - } - - &.right { - // img { - margin-left: auto; - // } - } - - figcaption { - font-size: 14px; - padding: 5px 10px; - margin-top: 5px; - background: var(--accent); - color: var(--background); - - &.left { - text-align: left; - } - - &.center { - text-align: center; - } - - &.right { - text-align: right; - } - } -} - code { font-family: ui-monospace, monospace; background: var(--accent-alpha-20); @@ -186,12 +109,12 @@ pre { word-wrap: break-word; } - code { - background: none !important; - margin: 0; - padding: 0; - font-size: inherit; - border: none; + code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; } } @@ -256,9 +179,9 @@ ul, ol { padding: 0; li { - position: relative; - margin-top: 5px; - margin-bottom: 5px; + position: relative; + margin-top: 5px; + margin-bottom: 5px; } @media (max-width: $phone-max-width) { @@ -266,8 +189,8 @@ ul, ol { } ul, ol { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } } diff --git a/sass/_pagination.scss b/sass/_pagination.scss new file mode 100644 index 0000000..b59e245 --- /dev/null +++ b/sass/_pagination.scss @@ -0,0 +1,81 @@ +@import 'variables'; + +.pagination { + margin-top: 50px; + + &__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; + + &-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; + } + + hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } + } + + &__buttons { + display: flex; + align-items: center; + justify-content: center; + + a { + text-decoration: none; + } + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; + + + .button { + margin-left: 10px; + } + + a { + display: flex; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &.next .button__icon { + margin-left: 8px; + } + + &.previous .button__icon { + margin-right: 8px; + } +} diff --git a/sass/_post.scss b/sass/_post.scss new file mode 100644 index 0000000..b778d52 --- /dev/null +++ b/sass/_post.scss @@ -0,0 +1,142 @@ +@import "variables"; + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; + + @media (max-width: $tablet-max-width) { + max-width: 660px; + } + + &:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); + } + + &-meta { + margin-bottom: 10px; + color: var(--accent-alpha-70); + } + + &-title { + --border: 3px dotted var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + + &:after { + content: ''; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: var(--border); + } + + a { + text-decoration: none; + } + } + + &-tags { + display: block; + margin-bottom: 20px; + opacity: .5; + + a { + text-decoration: none; + } + } + + &-content { + margin-top: 30px; + } + + &-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; + + @media (max-width: $phone-max-width) { + padding: 10px; + border-width: 10px; + } + } + + ul { + list-style: none; + + li:before { + content: '⦿'; + position: absolute; + left: -20px; + color: var(--accent); + } + ul { + + li:before { + content: '■'; + position: absolute; + left: -20px; + color: var(--accent); + } + + ul { + + li:before { + content: '►'; + position: absolute; + left: -20px; + color: var(--accent); + } + } + } + } +} + +// TODO: try adapting this using a properly nested selector in the block above +// for ul items. +.tag-list { + @media(max-width: $phone-max-width) { + margin-left: 5%; + } +} + +.post--regulation { + h1 { + justify-content: center; + } + + h2 { + justify-content: center; + margin-bottom: 10px; + + &+ h2 { + margin-top: -10px; + margin-bottom: 20px; + } + } +} + +.post-list { + .post-date { + color: var(--accent-alpha-70); + text-decoration: none; + } + + a { + text-decoration: none; + } + + .post-list-title { + text-decoration: underline; + } + + .post-tag { + text-decoration: underline; + } +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..3b95a9c --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,2 @@ +$phone-max-width: 683px; +$tablet-max-width: 899px; diff --git a/sass/style.scss b/sass/style.scss index 2246471..f523096 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,7 +1,14 @@ -@import '../themes/zerm/sass/buttons'; -@import '../themes/zerm/sass/header'; -@import '../themes/zerm/sass/logo'; +@import 'variables'; +// @import 'buttons'; +@import 'header'; +@import 'logo'; @import 'main'; -@import '../themes/zerm/sass/post'; -@import '../themes/zerm/sass/pagination'; -@import '../themes/zerm/sass/footer'; +@import 'post'; +@import 'pagination'; +@import 'footer'; + +:root { + --phoneWidth: (max-width: #{$phone-max-width + 1px}); + --tabletWidth: (max-width: #{$tablet-max-width + 1px}); +} + diff --git a/templates/index.html b/templates/index.html index bb889be..8d18007 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,11 +1,9 @@ {% extends "zerm/templates/index.html" %} -{% block general_meta %} - - - - -{% endblock general_meta %} +{% block script %} + {{ footer::script() }} + +{% endblock script %} {% block header %}
-- 2.51.2