diff --git a/assets/images/banner/news.png b/assets/images/banner/news.png new file mode 100644 index 0000000..44fbe10 Binary files /dev/null and b/assets/images/banner/news.png differ diff --git a/themes/buha/assets/scss/article.scss b/themes/buha/assets/scss/article.scss new file mode 100644 index 0000000..8a03a89 --- /dev/null +++ b/themes/buha/assets/scss/article.scss @@ -0,0 +1,31 @@ +article { + .article_content { + } + .articlemeta { + margin-top: 1rem; + margin-bottom: .5rem; + &:first-child { + font-weight: bold; + } + } +} + + +.article_footer { + font-size: 20%; + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 1rem; + .mod_times, .foundations { + display: flex; + flex-direction: column; + .mod_times_item:first-child, { + margin-bottom: .4rem; + } + } + .foundations { + display: flex; + margin-bottom: 1rem; + } +} diff --git a/themes/buha/assets/scss/banner.scss b/themes/buha/assets/scss/banner.scss index 9472363..a2a5984 100644 --- a/themes/buha/assets/scss/banner.scss +++ b/themes/buha/assets/scss/banner.scss @@ -14,3 +14,42 @@ word-break: break-all; } } + +@media (min-width: 640px) { + .banner { + margin-left: auto; + margin-right: auto; + } +} +@media (min-width: 768px) { + .banner { + max-width: 768px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1024px) { + .banner { + max-width: 1024px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1280px) { + .banner { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1920px) { + .banner { + max-width: 1920px; + margin-left: auto; + margin-right: auto; + } + +} diff --git a/themes/buha/assets/scss/big.scss b/themes/buha/assets/scss/big.scss deleted file mode 100644 index aa24e5a..0000000 --- a/themes/buha/assets/scss/big.scss +++ /dev/null @@ -1,15 +0,0 @@ -@media only screen and (min-width: 600px) { - .main { - width: 80%; - margin-left: auto; - margin-right: auto; - } - .twolists { - display: flex; flex-wrap: wrap; justify-content: space-around; - div { - display: flex; - flex-direction: column; - width: 45%; - } - } -} diff --git a/themes/buha/assets/scss/font.scss b/themes/buha/assets/scss/font.scss index 88db02b..cdb6048 100644 --- a/themes/buha/assets/scss/font.scss +++ b/themes/buha/assets/scss/font.scss @@ -6,3 +6,19 @@ * { font-family: 'Nanum'; } + +@media (min-width: 640px) { + +} +@media (min-width: 768px) { + +} +@media (min-width: 1024px) { + +} +@media (min-width: 1280px) { + +} +@media (min-width: 1920px) { + +} diff --git a/themes/buha/assets/scss/gen_list.scss b/themes/buha/assets/scss/gen_list.scss new file mode 100644 index 0000000..b5ec76d --- /dev/null +++ b/themes/buha/assets/scss/gen_list.scss @@ -0,0 +1,42 @@ + .gen_list { + width: 100%; + .article_list { + margin-bottom: 5rem; + } + a { + text-decoration: none; + &:hover { + .img { + height: 140px; + background-size: 120% auto; + } + .img-only { + height: 360px; + background-size: 110% auto; + background-position: top; + } + } + } + img { + width: 100%; + } + h3 { + margin-top: 0rem; + } + .img { + width: 100%; + height: 140px; + transition: all .3s ease-in-out; + background-position: center center; + background-size: 100% auto; + background-repeat: no-repeat; + } + .img-only { + width: 100%; + height: 360px; + transition: all .2s ease-in-out; + background-size: 100% auto; + background-position: top center; + background-repeat: no-repeat; + } + } diff --git a/themes/buha/assets/scss/index.scss b/themes/buha/assets/scss/index.scss new file mode 100644 index 0000000..23f8b6c --- /dev/null +++ b/themes/buha/assets/scss/index.scss @@ -0,0 +1,16 @@ +.two_lists { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: auto; + margin-right: auto; +} + +@media (min-width: 640px) { + .two_lists { + flex-direction: row; + .gen_list { + width: 48%; + } + } +} diff --git a/themes/buha/assets/scss/main.scss b/themes/buha/assets/scss/main.scss index a034490..20b1c6d 100644 --- a/themes/buha/assets/scss/main.scss +++ b/themes/buha/assets/scss/main.scss @@ -1,91 +1,54 @@ +.page-intro { + text-align: center; + a { text-decoration: underline; } + margin-top: 3rem; + margin-bottom: 1rem; + padding-right: 1.1rem; + font-size: 150%; +} + main { flex-grow: 1; overflow: auto; - .main { - width: 98vw; - margin-left: auto; - margin-right: auto; - } - .page-intro { - text-align: center; - a { text-decoration: underline; } - margin-top: 3rem; - margin-bottom: 1rem; - padding-right: 1.1rem; - font-size: 150%; - } - .gen_list { - .text { - } - .article_list { - margin-bottom: 5rem; - } - a { - text-decoration: none; - &:hover { - .img { - height: 140px; - background-size: 120% auto; - } - .img-only { - height: 360px; - background-size: 110% auto; - background-position: top; - } - } - } - img { - width: 100%; - } - h3 { - margin-top: 0rem; - } - .img { - width: 100%; - height: 140px; - transition: all .3s ease-in-out; - background-position: center center; - background-size: 100% auto; - background-repeat: no-repeat; - } - .img-only { - width: 100%; - height: 360px; - transition: all .2s ease-in-out; - background-size: 100% auto; - background-position: top center; - background-repeat: no-repeat; - } - } + width: 98vw; + margin-left: auto; + margin-right: auto; + min-height: 90vh; } - -@media (min-width: 600px) { - +aside { + text-align: center; } + +.main_upper { + display: flex; + flex-direction: column; +} + @media (min-width: 640px) { - .main, .banner { - max-width: 640px; + .main { margin-left: auto; margin-right: auto; + aside { + text-align: right; + min-width: 25%; + } + .main_upper { + flex-direction: row; + justify-content: space-between; + } } } @media (min-width: 768px) { - .main, .banner { + .main { max-width: 768px; margin-left: auto; margin-right: auto; } - .two_lists { - display: flex; - justify-content: space-between; - .gen_list { - width: 45%; - } - } + } @media (min-width: 1024px) { - .main, .banner { + .main { max-width: 1024px; margin-left: auto; margin-right: auto; @@ -93,7 +56,7 @@ main { } @media (min-width: 1280px) { - .main, .banner { + .main { max-width: 1280px; margin-left: auto; margin-right: auto; @@ -101,7 +64,7 @@ main { } @media (min-width: 1920px) { - .main, .banner { + .main { max-width: 1920px; margin-left: auto; margin-right: auto; diff --git a/themes/buha/assets/scss/scss.scss b/themes/buha/assets/scss/scss.scss deleted file mode 100644 index 9a96573..0000000 --- a/themes/buha/assets/scss/scss.scss +++ /dev/null @@ -1,110 +0,0 @@ -:root { - --max-width: 1024px; } - -#container { - background: var(--background); -} - -header { - position: fixed; - width: 100%; - max-width: var(--max-width); - background: var(--background); -} - -.headerinner { - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row; - flex-wrap: wrap; - padding: .2rem; - padding-right: .7rem; - padding-bottom: .5rem; - a { - color: white; - margin-left: .8rem; - margin-top: .5rem; - text-shadow: 1px 2px 3px rgba(0, 0, 0, 1), 1px 2px 3px rgba(0, 0, 0, 1); - text-decoration: none; - } - img { - filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); - } -} - -.banner { - padding-top: 6rem; - display: flex; - justify-content: center; - align-items: center; - /* Set a specific height */ - height: 30vh; - - /* Position and center the image to scale nicely on all screens */ - background-position: top; - background-repeat: no-repeat; - background-size: auto 100vh; - background-attachment: fixed; - - h1 { - color: white; - text-shadow: 0px 3px 32px rgba(0, 0, 0, 1), 0px 3px 32px rgba(0, 0, 0, 1); - font-size: 350%; - } -} - -main { - display: flex; - padding-right: 1rem; - .content_intro { - text-align: center; margin-top: 3.5rem; margin-bottom: 3.5rem; - a { color: var(--text-bright); } - } - .index_section { padding: 1rem; - a { text-decoration: none; } - } - h3 { - margin-bottom: .5rem; - } - .articlemeta { - margin-bottom: .6rem; - &:first-child { - font-weight: bold; - } - } - .article_list_section { - margin-bottom: 6rem; - } - - .articlecontent { - padding-left: .8rem; - } - - .articletitle { - padding-left: .4rem; - font-size: 110%; - } -} - -article, .article_footer { - padding-left: 1rem; -} - -article { - margin-top: 1.5rem; - min-height: 33rem; -} - -@media only screen and (min-width: 600px) { - main { - .content_intro { - font-size: 130%; - } - .index_lists { - display: flex; flex-wrap: wrap; justify-content: space-around; - .index_section { max-width: 42%; } - } - } - -} diff --git a/themes/buha/layouts/_default/baseof.html b/themes/buha/layouts/_default/baseof.html index 5f7e95b..aed856a 100644 --- a/themes/buha/layouts/_default/baseof.html +++ b/themes/buha/layouts/_default/baseof.html @@ -10,7 +10,10 @@ {{ partial "snippets/banner" . -}}
{{ block "content" . -}}{{- end }} +
+ {{ block "add_content" . -}}{{- end }} {{ block "sidebar" . -}}{{- end }} +
{{ block "pagefooter" . -}}{{- end }}