From a01067c66b0a68eaba83bc04144954d802db9f28 Mon Sep 17 00:00:00 2001 From: hendr-ik Date: Sun, 11 Aug 2019 21:32:56 +0200 Subject: [PATCH] basic layout --- homepage/pelicanconf.py | 2 +- homepage/theme/static/css/style.css | 9 - homepage/theme/templates/temp.html | 47 +++ styles/index.css | 527 ++++++---------------------- 4 files changed, 150 insertions(+), 435 deletions(-) create mode 100644 homepage/theme/templates/temp.html diff --git a/homepage/pelicanconf.py b/homepage/pelicanconf.py index 8a546fb..e8ac795 100644 --- a/homepage/pelicanconf.py +++ b/homepage/pelicanconf.py @@ -37,7 +37,7 @@ CATEGORIES_SAVE_AS = None TAGS_SAVE_AS = None # keep this for access to page variable -DIRECT_TEMPLATES = [] +DIRECT_TEMPLATES = ['temp'] GITHUB_ORG = 'https://github.com/offen' CONTACT_EMAIL = 'mail@offen.dev' diff --git a/homepage/theme/static/css/style.css b/homepage/theme/static/css/style.css index 3849338..e69de29 100644 --- a/homepage/theme/static/css/style.css +++ b/homepage/theme/static/css/style.css @@ -1,9 +0,0 @@ -section { -display: flex; -flex-flow: column; -} - -section .footnote { -padding-top: 30px; -order: 100; -} diff --git a/homepage/theme/templates/temp.html b/homepage/theme/templates/temp.html new file mode 100644 index 0000000..cff2361 --- /dev/null +++ b/homepage/theme/templates/temp.html @@ -0,0 +1,47 @@ + + + + + Temp + + + + + +
+
+ MENU +
+
+
+
+ INTRO +
+
+ +
+
+ CONTENT +
+
+ FEATURE-1 +
+
+ FEATURE-2 +
+
+ FEATURE-3 +
+
+ FEATURE-4 +
+
+ +
+
+ FOOTER +
+
+ + + diff --git a/styles/index.css b/styles/index.css index 7eee2aa..9ce02e0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,426 +1,103 @@ -/* Typo -------------------------------------------------------------- */ -body { -padding: 50px; -background-color: #fff; -color: #898989; -font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -font-size: 18px; -line-height: 1.5; -font-weight: 400; +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.page { + display: flex; + flex-wrap: wrap; +} + +.menu { + width: 100%; + height: 80px; + position: fixed; + top: 0; + right: 0; + background-color: #F7BF08; + border: 1px solid #000; +} + +.intro { + width: 100%; + height: 300px; + margin-top: 80px; + background-color: #F7BF08; + border: 1px solid #000; +} + +.content { + width: 100%; + height: 600px; + background-color: #fff; + border: 1px solid #000; +} + +.feature-1, +.feature-2, +.feature-3, +.feature-4 { + width: 100%; + height: 300px; + background-color: #fff; + border: 1px solid #000; + /* + display: flex; + justify-content: center; + align-items: center; + */ +} + +.footer { + width: 100%; + height: 400px; + background-color: #ccc; + border: 1px solid #000; +} + + + +/* Mobile Styles */ +@media only screen and (max-width: 400px) { +} + +/* Tablet Styles */ +@media only screen and (min-width: 401px) and (max-width: 960px) { + .feature-1, + .feature-2, + .feature-3, + .feature-4 { + width: 50%; + } +} + +/* Desktop Styles */ +@media only screen and (min-width: 961px) { + .page { + width: 960px; + margin: 0 auto; + } + .desktop_width { + width: 960px; + margin: 0 auto; + } + .feature-1, + .feature-2, + .feature-3 { + width: 33.3%; + } + .intro { + height: 400px; + } + + /* reorder + .feature-1 { + height: 200px; + order: 1; + } + .content { + order: 2; + } + */ } - -h1, -h2, -h3, -h4 { -color: #404040; -font-size: 28px; -line-height: 1.4; -font-weight: 400; -margin: 0 0 40px 0; -} - -h3, -h4 { -font-size: 18px; -margin: 30px 0 20px 0; -} - -.section-auditorium h3 { -margin: 0 0 10px 0; -} - -h4 { -color: #898989; -margin: 30px 0 6px 0; -} - -.section-auditorium h4 { -margin: 30px 0 20px 0; -} - - -/* Links -------------------------------------------------------------- */ -a, -a:hover, -a:focus { -color: #898989; -text-decoration: none; -font-weight: 700; -} - -button { -cursor: pointer; -font: inherit; -font-size: inherit; -font-weight: 700; -} - -h1 a, -h1 a:hover, -h1 a:focus { -color: #f7bf08; -text-decoration: none; -font-weight: 400; -} - -small a, -small a:hover, -small a:focus { -color: #898989; -text-decoration: none; -font-weight: 700; -} - -sup { -line-height: 1; -} - -sup a, -sup a:hover, -sup a:focus { -color: #cfcfcf; -} - -ol { -padding-inline-start: 20px; -} - -ol li p a, -ol li p a:hover, -ol li p a:focus { -color: #cfcfcf; -} - - - - -/* Typo Elements -------------------------------------------------------------- */ -.logo { -margin: -20px 0 0 0; -} - -blockquote { -border-left: 1px solid #e5e5e5; -margin: 0; -padding: 0 0 0 20px; -font-style: italic -} - -hr { -border-top: 1px solid #d5d5d5; -height: 0; -margin: 80px 0 0 0; -} - -.footnote hr { -border: 0; -height: 0; -margin: 0; -} - -blockquote { -border-left: 1px solid #d5d5d5; -margin: 40px 0 40px 0; -} - -strong { -font-weight: 700 -} - -strong, -h1 strong, -h2 strong, -h3 strong { -color: #404040; -text-decoration: none; -font-weight: 400; -} - -h1 strong, -h2 strong, -h3 strong { -color: #898989; -} - -tbody, -h4 strong { -color: #404040; -text-decoration: none; -font-weight: 700; -} - -h4 strong { -font-size: 36px; -} - - -/* Buttons -------------------------------------------------------------- */ -.btn { --webkit-border-radius: 0; --moz-border-radius: 0; -border-radius: 0px; -padding: 6px; -text-align: center; -text-decoration: none; -} - -.btn-color-grey, -.btn-color-grey:visited, -.btn-color-grey:link { -background: #fff; -color: #898989; -border: solid #898989 5px; -} - -.btn-color-orange, -.btn-color-orange:visited, -.btn-color-orange:link { -background: #fff; -color: #F7BF08; -border: solid #F7BF08 5px; -} - -.btn-color-grey:hover, -.btn-color-grey:active { -background: #898989; -color: #fff; -text-decoration: none; -} - -.btn-color-orange:hover, -.btn-color-orange:active { -background: #F7BF08; -color: #fff; -text-decoration: none; -} - -.btn { -margin: 0 0 15px 0; -} - -.button-wrapper { -display: flex; -flex-flow: column wrap; -justify-content: space-around; -} - -.navigation-wrapper { -margin: 60px 0 0 0; -} - -@media (min-width: 480px) { -.button-wrapper { -align-items: center; -flex-flow: row wrap; --ms-flex-flow: row wrap; --webkit-flex-flow: row wrap; -} -.btn { -flex-grow: 1; -} -.btn { -margin: 0 15px 15px 0; -} -.btn:last-of-type { -margin: 0 0 15px 0; -} -} - - - - -/* Custom Underline -------------------------------------------------------------- */ -em { -color: #898989; -background: linear-gradient(transparent 66%, #fde28c 66%); -font-style: normal; -} - - - - -/* Layout -------------------------------------------------------------- */ -.wrapper { -width: 860px; -margin: 0 auto -} - -header { -width: 270px; -float: left; -position: fixed; --webkit-font-smoothing: subpixel-antialiased -} - -section, -section-auditorium { -float: right; -width: 600px; -padding: 0 0 40px 0; -} - -section > p, -section-auditorium > p { -margin: 0 0 20px 0; -} - -section > p:last-child, -section-auditorium > p:last-child { -margin: 0 0 60px 0; -} - -.row { -display: flex; -justify-content: flex-start; -} - -.row h4 { -margin-right: 30px; -} - -.row h4:last-child { -margin-right: 0; -} - - - - -/* Tables -------------------------------------------------------------- */ -.table-full-width { -box-sizing: border-box -} - -td { -padding-right: 30px; -} - - - - -/* Footer -------------------------------------------------------------- */ -footer { -width: 270px; -float: left; -position: fixed; -bottom: 100px; --webkit-font-smoothing: subpixel-antialiased -} - -.footnote { -color: #d5d5d5; -font-size: 14px; -margin: 20px 0 0 0; -} - -.footnote ol { -margin-bottom: 0; -} - -.footer-list { -list-style-type: none; -padding: 0; -margin: 0; -} - -.footer-list li { -display: inline-block; -font-size: 14px; -margin-right: 0.14em; -} - - - - -/* Media Queries -------------------------------------------------------------- */ -@media screen and (max-width: 960px) { -div.wrapper { -width: auto; -margin: 0 -} -header, -section, -section-auditorium, -footer { -float: none; -position: static; -width: auto -} -header { -padding-right: 320px -} -section, -section-auditorium { -border: none; -width: auto; -padding: 0 0 0 0; -margin: 40px 0 40px 0; -} -section > p:first-child, -section > p:last-child, -section-auditorium > p:first-child, -section-auditorium > p:last-child { -margin: 0 0 40px 0; -} -} - - - - -@media screen and (max-width: 480px) { -body { -font-size: 14px; -line-height: 1.3; -padding: 15px; -word-wrap: break-word; -} -h1, -h2 { -font-size: 20px; -line-height: 1.3; -margin: 0 0 20px 0; -} -h3, -h4 { -font-size: 14px; -line-height: 1.3; -margin: 30px 0 15px 0; -} -h4 strong { -font-size: 28px; -} -header { -padding: 0 -} -.logo { -margin: 0; -} -hr { -margin: 60px 0 0 0; -} -blockquote { -margin: 15px 0 15px 0; -} -.row { -justify-content: space-between; -} -.row h4:first-child { -margin-right: 0; -} -.table-full-width { -width: 100%; -} -td { -padding-right: 0; -} -} -