diff --git a/assets/scss/index.scss b/assets/scss/index.scss new file mode 100644 index 0000000..25e4ce2 --- /dev/null +++ b/assets/scss/index.scss @@ -0,0 +1,235 @@ +$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + +* { + box-sizing: border-box; + word-break: break-word; +} + +html { + scroll-behavior: smooth; +} + +html, body { + height: 100%; +} + +body { + margin: 0; + display: flex; + flex-direction: column; + color: #333; + font-family: $font; + font-weight: 400; + font-style: normal; +} + +h1 { + margin: 0rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; +} + +p { + margin: 0.5rem; +} + +a { + text-decoration: none; + color: {{ .Site.Params.color.secondary }}; +} + +{{ if .Site.Params.list.icon }} + + ul { + list-style: none; + padding-left: 1rem; + } + + ul li { + display: flex; + } + + ul li:before { + content: url({{ .Site.Params.list.icon }}); + display: inline-block; + width: 21px; + height: 21px; + margin-right: 10px; + flex-shrink: 0; + } + +{{ end }} + +.col-3 {flex: 25%; width: 25%; max-width: 25%;} +.col-4 {flex: 33.33%; width: 33.33%; max-width: 33.33%;} +.col-5 {flex: 41.66%; width: 41.66%; max-width: 41.66%;} +.col-6 {flex: 50%; width: 50%; max-width: 50%;} +.col-7 {flex: 58.33%; width: 58.33%; max-width: 58.33%;} +.col-8 {flex: 66.66%; width: 66.66%; max-width: 66.66%;} +.col-9 {flex: 75%; width: 75%; max-width: 75%;} +.col-10 {flex: 83.33%; width: 83.33%; max-width: 83.33%;} +.col-11 {flex: 91.66%; width: 91.66%; max-width: 91.66%;} +.col-12 {flex: 100%; width: 100%; max-width: 100%;} + +[class*="col-"] { + float: left; +} + +.row { + display: flex; + flex-wrap: wrap; + flex-flow: column; +} + +/* Header */ + +/* Sections */ + +#content { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.content { + padding-top: 9rem; + padding-bottom: 2rem; + padding-right: 1.5rem; + padding-left: 1.5rem; + width: 100%; + max-width: 680px; + margin: 0; + align-self: center; + flex-grow: 1; +} + +.section { + padding-top: 2rem; + padding-bottom: 2.5rem; + padding-right: 1.5rem; + padding-left: 1.5rem; + width: 100%; + margin: 0; + align-self: center; + flex: 1 0 auto; +} + +.section-even { + background-color: #eee; +} + +.section-highlight { + background-color: {{ .Site.Params.color.primary }}; +} + +.section-content { + width: 100%; + max-width: 680px; + margin: auto; + justify-content: center; +} + +// .hero > div { +// width: 100%; +// max-width: 680px; +// margin: auto; +// } + +.hero .hero-content { + display: flex; + justify-content: center; +} + +.hero .description { + padding: 10px; + position: relative; + margin-block-start: 50px; + border: none; +} + +.hero .description::before, +.hero .description::after { + position: absolute; + width: 33px; + height: 25px; + content: ""; +} + +.hero .description::before { + left: 0; + top: 0; + border-left: 3px solid {{ .Site.Params.color.primary }}; + border-top: 3px solid {{ .Site.Params.color.primary }}; +} + +.hero .description::after { + right: 0; + bottom: 0; + border-right: 3px solid {{ .Site.Params.color.primary }}; + border-bottom: 3px solid {{ .Site.Params.color.primary }}; + } + +.hero-content div { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding-inline-start: 25px; +} + +/* Buttons */ + +button { + font-family: inherit; + font-size: 100%; + line-height: inherit; + color: inherit; + background-color: transparent; + background-image: none; + text-transform: none; + padding: 0; +} + +.button-filled { + background-color: {{ .Site.Params.color.primary }}; + color: white; + border: 2px solid {{ .Site.Params.color.primary }}; + border-radius: 4px; + padding: 0.5rem 1.5rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; +} + +.button-outlined { + background-color: transparent; + color: {{ .Site.Params.color.primary }}; + border: 2px solid {{ .Site.Params.color.primary }}; + border-radius: 4px; + padding: 0.5rem 1.5rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; +} + +.button-outlined:hover { + background-color: {{ .Site.Params.color.primary }}; + color: white; +} + +/* Images */ + +img { + margin: auto; + object-fit: contain; +} + +.avatar { + border-radius: 50%; + border: 3px solid {{ .Site.Params.color.primary }}; + object-fit: cover; + margin: 0 auto; + width: 150px; +} \ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html index e69de29..129d801 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -0,0 +1,3 @@ +{{ define "main" }} +404 +{{ end }} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5f8e2ec..5382966 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,11 +1,13 @@ - - {{- partial "head.html" . -}} -
- {{- partial "header.html" . -}} -