diff --git a/server/static/sass/about.scss b/server/static/sass/about.scss new file mode 100644 index 0000000..7d177b9 --- /dev/null +++ b/server/static/sass/about.scss @@ -0,0 +1,307 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * -- BASE STYLES -- + * Most of these are inherited from Base, but I want to change a few. + */ +body { + line-height: 1.7em; + color: #7f8c8d; + background: whitesmoke; + font-size: 13px; +} + +h1, +h2, +h3, +h4, +h5, +h6, +label { + color: #34495e; +} + +.pure-img-responsive { + max-width: 100%; + height: auto; +} + +.l-box { + padding: 1em; +} + +.l-box-lrg { + padding: 2em; + border-bottom: 1px solid rgba(0,0,0,0.1); +} + +.is-center { + text-align: center; +} + +.card { + display: inline-block; + box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); + background: white; + margin: 20px; + margin-left: 25%; + margin-right: 25%; + margin-bottom: 50px; +} +.head-card { + display: inline-block; + box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); + background: whitesmoke; + margin: 20px; +} + + +/* + * -- PURE FORM STYLES -- + * Style the form inputs and labels + */ +.pure-form label { + margin: 1em 0 0; + font-weight: bold; + font-size: 100%; +} + +.pure-form input[type] { + border: 2px solid #ddd; + box-shadow: none; + font-size: 100%; + width: 100%; + margin-bottom: 1em; +} + +/* + * -- PURE BUTTON STYLES -- + * I want my pure-button elements to look a little different + */ +.pure-button { + background-color: #1f8dd6; + color: white; + padding: 0.5em 2em; + border-radius: 5px; +} + +a.pure-button-primary { + background: white; + color: #1f8dd6; + border-radius: 5px; + font-size: 120%; +} + + +.home-menu { + padding: 0.5em; + text-align: center; +} +.home-menu { + background: rgb(0, 14, 15); +} +.pure-menu.pure-menu-fixed { + border-bottom: none; + /* I need a higher z-index here because of the scroll-over effect. */ + z-index: 4; + padding-left: 25%; + padding-right: 25%; +} + +.home-menu .pure-menu-heading { + font-weight: 400; + font-size: 120%; +} + +.home-menu .pure-menu-selected a { + color: white; +} + +.home-menu a { + color: whitesmoke; +} +.home-menu li a:hover, +.home-menu li a:focus { + background: none; + border: none; + color: #AECFE5; +} + + +/* + * -- SPLASH STYLES -- + * This is the blue top section that appears on the page. + */ + +.splash-container { + background: #24344C; + background-image: url('https://media.gettyimages.com/photos/esports-team-winning-the-match-picture-id1129493258?s=2048x2048'); + z-index: 1; + overflow: hidden; + /* The following styles are required for the "scroll-over" effect */ + width: 100%; + height: 88%; + top: 0; + left: 0; + position: fixed; + -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%); + clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); + /* + transform-origin: top left; + transform: skewY(-3deg); + */ +} + +.splash { + /* absolute center .splash within .splash-container */ + width: 80%; + height: 50%; + margin: auto; + position: absolute; + top: 100px; left: 0; bottom: 0; right: 0; + text-align: center; + text-transform: uppercase; +} + +/* This is the main heading that appears on the blue section */ +.splash-head { + font-size: 20px; + font-weight: bold; + color: #DA2860; + padding: 1em 1.6em; + font-weight: 100; + border-radius: 5px; + line-height: 1em; +} + +/* This is the subheading that appears on the blue section */ +.splash-subhead { + color: white; + letter-spacing: 0.05em; + opacity: 0.8; +} + +/* + * -- CONTENT STYLES -- + * This represents the content area (everything below the blue section) + */ +.content-wrapper { + /* These styles are required for the "scroll-over" effect */ + position: absolute; + top: 87%; + width: 100%; + min-height: 12%; + z-index: 2; + background: white; + background: rgba(0,0,0,0); +} + +/* We want to give the content area some more padding */ +.content { + padding: 1em 1em 3em; + background: whitesmoke; +} + +/* This is the class used for the main content headers (

) */ +.content-head { + color: #F55753; + text-transform: uppercase; + letter-spacing: 0.1em; + margin: 2em 0 1em; +} + +/* This is a modifier class used when the content-head is inside a ribbon */ +.content-head-ribbon { + color: white; +} + +/* This is the class used for the content sub-headers (

) */ +.content-subhead { + color: #1f8dd6; + color: #DA2860; + text-align: center; +} + .content-subhead i { + margin-right: 7px; + } + p { + text-align: center; + } + +/* This is the class used for the dark-background areas. */ +.ribbon { + background: #2d3e50; + color: #aaa; +} + +/* This is the class used for the footer */ +.footer { + background: #111; + position: fixed; + bottom: 0; + width: 100%; +} + +/* + * -- TABLET (AND UP) MEDIA QUERIES -- + * On tablets and other medium-sized devices, we want to customize some + * of the mobile styles. + */ +@media (min-width: 48em) { + + /* We increase the body font size */ + body { + font-size: 16px; + } + + /* We can align the menu header to the left, but float the + menu items to the right. */ + .home-menu { + text-align: left; + } + .home-menu ul { + float: right; + } + + /* We increase the height of the splash-container */ +/* .splash-container { + height: 500px; + }*/ + + /* We decrease the width of the .splash, since we have more width + to work with */ + .splash { + width: 50%; + height: 50%; + } + + .splash-head { + font-size: 250%; + color: #DA2860; + font-weight: bold; + display: inline-block; + } + + + /* We remove the border-separator assigned to .l-box-lrg */ + .l-box-lrg { + border: none; + } + +} + +/* + * -- DESKTOP (AND UP) MEDIA QUERIES -- + * On desktops and other large devices, we want to over-ride some + * of the mobile and tablet styles. + */ +@media (min-width: 78em) { + /* We increase the header font size even more */ + .splash-head { + font-size: 300%; + } +} diff --git a/server/templates/about.tera b/server/templates/about.tera new file mode 100644 index 0000000..83e1b1a --- /dev/null +++ b/server/templates/about.tera @@ -0,0 +1,76 @@ + + + + + + + {{og_title}} + + + + + + + + + + + + + + + + + + +
+
+
+
+

+

+
+
+

+

+
+
+

+

+
+
+
+
+ + + + + \ No newline at end of file