diff --git a/Makefile b/Makefile index 01fd2a6..d1b726d 100644 --- a/Makefile +++ b/Makefile @@ -2,7 +2,7 @@ help: @echo " setup" @echo " Build the containers and install dependencies." @echo " bootstrap" - @echo " Create a KMS key and initialize the database." + @echo " Set up keys and seed databases." @echo " IMPORTANT: this wipes any existing data in your local database." setup: @@ -13,7 +13,6 @@ setup: @docker-compose run server go mod download @docker-compose run kms go mod download @docker-compose run accounts pip install --user -r requirements.txt -r requirements-dev.txt - @docker-compose run homepage pip install --user -r requirements.txt @echo "Successfully built containers and installed dependencies." @echo "If this is your initial setup, you can run 'make bootstrap' next" @echo "to create the needed local keys and seed the database." diff --git a/README.md b/README.md index 7d86e1a..ccaa460 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,19 @@ You can test your setup by starting the application: $ docker-compose up ``` -which should enable you to access seeing a successful response. +which should enable you to access and use the `auditorium` + +### Developing the homepage + +In order to ease sharing of styles, the site is also part of this repository. It runs in a separate development environment: + +``` +$ cd homepage +$ make setup +$ docker-compose up +``` + +A live reloading development server will run on . ### License diff --git a/docker-compose.yml b/docker-compose.yml index 51e0f51..b541138 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -126,18 +126,6 @@ services: SERVER_HOST: http://server:8080 SESSION_SECRET: vndJRFJTiyjfgtTF - homepage: - build: - context: '.' - dockerfile: Dockerfile.python - working_dir: /offen/homepage - volumes: - - .:/offen - - homepagedeps:/root/.local - command: make devserver - ports: - - 8000:8000 - volumes: kmsdeps: serverdeps: @@ -145,4 +133,3 @@ volumes: auditoriumdeps: vaultdeps: accountdeps: - homepagedeps: diff --git a/homepage/Makefile b/homepage/Makefile index a4fd9af..39c13fd 100644 --- a/homepage/Makefile +++ b/homepage/Makefile @@ -71,5 +71,8 @@ endif publish: $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS) +setup: + @docker-compose run homepage pip install --user -r requirements.txt + .PHONY: html help clean regenerate serve serve-global devserver stopserver publish diff --git a/homepage/docker-compose.yml b/homepage/docker-compose.yml new file mode 100644 index 0000000..0d43786 --- /dev/null +++ b/homepage/docker-compose.yml @@ -0,0 +1,17 @@ +version: '3' + +services: + homepage: + build: + context: '.' + dockerfile: ./../Dockerfile.python + working_dir: /offen/homepage + volumes: + - ..:/offen + - homepagedeps:/root/.local + command: make devserver + ports: + - 8000:8000 + +volumes: + homepagedeps: diff --git a/homepage/theme/static/css/fonts.css b/homepage/theme/static/css/fonts.css new file mode 100644 index 0000000..91ec524 --- /dev/null +++ b/homepage/theme/static/css/fonts.css @@ -0,0 +1,31 @@ +@font-face { + font-family: 'Noto Sans'; + font-weight: 400; + font-style: normal; + src: url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.eot"); + src: url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-400"), url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.woff2") format("woff2"), url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.woff") format("woff"), url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.ttf") format("truetype"), url("/theme/styles/fonts/Noto-Sans-400/Noto-Sans-400.svg#NotoSans") format("svg") +} + +@font-face { + font-family: 'Noto Sans'; + font-weight: 700; + font-style: normal; + src: url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.eot"); + src: url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("/theme/styles/fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg") +} + +@font-face { + font-family: 'Noto Sans'; + font-weight: 400; + font-style: italic; + src: url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.eot"); + src: url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("/theme/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg") +} + +@font-face { + font-family: 'Noto Sans'; + font-weight: 700; + font-style: italic; + src: url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot"); + src: url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("/theme/styles/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg") +} diff --git a/homepage/theme/static/css/style.css b/homepage/theme/static/css/style.css index aa3e591..dd818cd 100644 --- a/homepage/theme/static/css/style.css +++ b/homepage/theme/static/css/style.css @@ -1,459 +1 @@ -@font-face { - font-family: 'Noto Sans'; - font-weight: 400; - font-style: normal; - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot"); - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-400"), url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff2") format("woff2"), url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff") format("woff"), url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.ttf") format("truetype"), url("https://www.offen.dev/theme/fonts/Noto-Sans-400/Noto-Sans-400.svg#NotoSans") format("svg") -} - -@font-face { - font-family: 'Noto Sans'; - font-weight: 700; - font-style: normal; - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot"); - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg") -} - -@font-face { - font-family: 'Noto Sans'; - font-weight: 400; - font-style: italic; - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot"); - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("https://www.offen.dev/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg") -} - -@font-face { - font-family: 'Noto Sans'; - font-weight: 700; - font-style: italic; - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot"); - src: url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("https://www.offen.dev/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg") -} - - - - -/* 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; -} - -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; -} - -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; -} - -.button-wrapper:first-of-type { -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:first-child { -margin-right: 30px; -} - - - - -/* 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; -} -} - - - - -/* AUDITORIUM QUICK FIX -------------------------------------------------------------- */ -.bottom { -display: block; -margin: 60px; -} +/** styles specific to homepage diff --git a/homepage/theme/static/styles b/homepage/theme/static/styles new file mode 120000 index 0000000..4babb2b --- /dev/null +++ b/homepage/theme/static/styles @@ -0,0 +1 @@ +./../../../styles \ No newline at end of file diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html index 44dc6f7..2db1ff1 100644 --- a/homepage/theme/templates/base.html +++ b/homepage/theme/templates/base.html @@ -18,6 +18,8 @@ + + {% if OFFEN_ACCOUNT_ID %} diff --git a/homepage/theme/static/fonts/LICENSE b/styles/fonts/LICENSE similarity index 100% rename from homepage/theme/static/fonts/LICENSE rename to styles/fonts/LICENSE diff --git a/homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.eot b/styles/fonts/Noto-Sans-400/Noto-Sans-400.eot similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.eot rename to styles/fonts/Noto-Sans-400/Noto-Sans-400.eot diff --git a/homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.svg b/styles/fonts/Noto-Sans-400/Noto-Sans-400.svg similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.svg rename to styles/fonts/Noto-Sans-400/Noto-Sans-400.svg diff --git a/homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.ttf b/styles/fonts/Noto-Sans-400/Noto-Sans-400.ttf similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.ttf rename to styles/fonts/Noto-Sans-400/Noto-Sans-400.ttf diff --git a/homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.woff b/styles/fonts/Noto-Sans-400/Noto-Sans-400.woff similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.woff rename to styles/fonts/Noto-Sans-400/Noto-Sans-400.woff diff --git a/homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.woff2 b/styles/fonts/Noto-Sans-400/Noto-Sans-400.woff2 similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-400/Noto-Sans-400.woff2 rename to styles/fonts/Noto-Sans-400/Noto-Sans-400.woff2 diff --git a/homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.eot b/styles/fonts/Noto-Sans-700/Noto-Sans-700.eot similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.eot rename to styles/fonts/Noto-Sans-700/Noto-Sans-700.eot diff --git a/homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.svg b/styles/fonts/Noto-Sans-700/Noto-Sans-700.svg similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.svg rename to styles/fonts/Noto-Sans-700/Noto-Sans-700.svg diff --git a/homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.ttf b/styles/fonts/Noto-Sans-700/Noto-Sans-700.ttf similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.ttf rename to styles/fonts/Noto-Sans-700/Noto-Sans-700.ttf diff --git a/homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.woff b/styles/fonts/Noto-Sans-700/Noto-Sans-700.woff similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.woff rename to styles/fonts/Noto-Sans-700/Noto-Sans-700.woff diff --git a/homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.woff2 b/styles/fonts/Noto-Sans-700/Noto-Sans-700.woff2 similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700/Noto-Sans-700.woff2 rename to styles/fonts/Noto-Sans-700/Noto-Sans-700.woff2 diff --git a/homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.eot b/styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.eot similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.eot rename to styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.eot diff --git a/homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.svg b/styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.svg similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.svg rename to styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.svg diff --git a/homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.ttf b/styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.ttf similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.ttf rename to styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.ttf diff --git a/homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff b/styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff rename to styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff diff --git a/homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff2 b/styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff2 similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff2 rename to styles/fonts/Noto-Sans-700italic/Noto-Sans-700iItalic.woff2 diff --git a/homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.eot b/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.eot similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.eot rename to styles/fonts/Noto-Sans-italic/Noto-Sans-italic.eot diff --git a/homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.svg b/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.svg similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.svg rename to styles/fonts/Noto-Sans-italic/Noto-Sans-italic.svg diff --git a/homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf b/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf rename to styles/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf diff --git a/homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.woff b/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.woff rename to styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff diff --git a/homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2 b/styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2 similarity index 100% rename from homepage/theme/static/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2 rename to styles/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2 diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..898da23 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,422 @@ +/* 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; +} + +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; +} + +.button-wrapper:first-of-type { +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:first-child { +margin-right: 30px; +} + + + + +/* 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; +} +} +