diff --git a/index.html b/index.html deleted file mode 100644 index a6fad63..0000000 --- a/index.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - - Landing Page – Layout Examples – Pure - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- Your Site - - -
-
- -
-
-

Big Bold Text

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. -

-

- Get Started -

-
-
- -
-
-

Excepteur sint occaecat cupidatat.

- -
-
- -

- - Get Started Quickly -

-

- Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. -

-
-
-

- - Responsive Layouts -

-

- Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. -

-
-
-

- - Modular -

-

- Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. -

-
-
-

- - Plays Nice -

-

- Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. -

-
-
-
- -
-
- File Icons -
-
- -

Laboris nisi ut aliquip.

- -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor. -

-
-
- -
-

Dolore magna aliqua. Uis aute irure.

- -
-
-
-
- - - - - - - - - - - - -
-
-
- -
-

Contact Us

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- -

More Information

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

-
-
- -
- -
- View the source of this layout to learn more. Made with love by the YUI Team. -
- -
- - - - - - diff --git a/css/fontawesome.css b/themes/openAV-Luppp/static/css/fontawesome.css similarity index 100% rename from css/fontawesome.css rename to themes/openAV-Luppp/static/css/fontawesome.css diff --git a/css/grids-responsive-min.css b/themes/openAV-Luppp/static/css/grids-responsive-min.css similarity index 100% rename from css/grids-responsive-min.css rename to themes/openAV-Luppp/static/css/grids-responsive-min.css diff --git a/css/grids-responsive-old-ie-min.css b/themes/openAV-Luppp/static/css/grids-responsive-old-ie-min.css similarity index 100% rename from css/grids-responsive-old-ie-min.css rename to themes/openAV-Luppp/static/css/grids-responsive-old-ie-min.css diff --git a/css/layouts/marketing-old-ie.css b/themes/openAV-Luppp/static/css/layouts/marketing-old-ie.css similarity index 100% rename from css/layouts/marketing-old-ie.css rename to themes/openAV-Luppp/static/css/layouts/marketing-old-ie.css diff --git a/css/layouts/marketing.css b/themes/openAV-Luppp/static/css/layouts/marketing.css similarity index 94% rename from css/layouts/marketing.css rename to themes/openAV-Luppp/static/css/layouts/marketing.css index 5e8b212..a644187 100644 --- a/css/layouts/marketing.css +++ b/themes/openAV-Luppp/static/css/layouts/marketing.css @@ -4,10 +4,12 @@ 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; @@ -29,17 +31,19 @@ label { height: auto; } + /* * -- LAYOUT STYLES -- * These are some useful classes which I will need */ + .l-box { padding: 1em; } .l-box-lrg { padding: 2em; - border-bottom: 1px solid rgba(0,0,0,0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .is-center { @@ -47,11 +51,11 @@ label { } - /* * -- PURE FORM STYLES -- * Style the form inputs and labels */ + .pure-form label { margin: 1em 0 0; font-weight: bold; @@ -66,10 +70,12 @@ label { margin-bottom: 1em; } + /* * -- PURE BUTTON STYLES -- * I want my pure-button elements to look a little different */ + .pure-button { background-color: #1f8dd6; color: white; @@ -93,11 +99,13 @@ a.pure-button-primary { .home-menu { padding: 0.5em; text-align: center; - box-shadow: 0 1px 1px rgba(0,0,0, 0.10); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10); } + .home-menu { background: #2d3e50; } + .pure-menu.pure-menu-fixed { /* Fixed menus normally have a border at the bottom. */ border-bottom: none; @@ -118,6 +126,7 @@ a.pure-button-primary { .home-menu a { color: #6FBEF3; } + .home-menu li a:hover, .home-menu li a:focus { background: none; @@ -149,12 +158,17 @@ a.pure-button-primary { height: 50%; margin: auto; position: absolute; - top: 100px; left: 0; bottom: 0; right: 0; + 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; @@ -166,17 +180,21 @@ a.pure-button-primary { 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; @@ -185,15 +203,18 @@ a.pure-button-primary { min-height: 12%; z-index: 2; background: white; - } + /* We want to give the content area some more padding */ + .content { padding: 1em 1em 3em; } + /* This is the class used for the main content headers (

) */ + .content-head { font-weight: 400; text-transform: uppercase; @@ -201,26 +222,35 @@ a.pure-button-primary { 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; } - .content-subhead i { - margin-right: 7px; - } + +.content-subhead i { + margin-right: 7px; +} + /* 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; @@ -228,59 +258,55 @@ a.pure-button-primary { 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) { +@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; - } - + .home-menu ul { + float: right; + } /* We increase the height of the splash-container */ -/* .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%; } - - /* 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%; } -} +} \ No newline at end of file diff --git a/css/pure-min.css b/themes/openAV-Luppp/static/css/pure-min.css similarity index 100% rename from css/pure-min.css rename to themes/openAV-Luppp/static/css/pure-min.css diff --git a/themes/openAV-Luppp/static/css/responsive-style.css b/themes/openAV-Luppp/static/css/responsive-style.css new file mode 100644 index 0000000..bb42627 --- /dev/null +++ b/themes/openAV-Luppp/static/css/responsive-style.css @@ -0,0 +1,38 @@ +@media only screen and (min-width: 0em) { + .splash-container { + background-size: 50%; + } +} + +@media only screen and (min-width: 25.5em) { + .splash-container { + background-size: 33.3334%; + } +} + +@media only screen and (min-width: 48em) { + .splash-container { + background-size: 25%; + } + .splash { + min-height: 20em; + } +} + +@media only screen and (min-width: 64em) { + .splash-container { + background-size: 20%; + } + .splash { + min-height: 24em; + } +} + +@media only screen and (min-width: 80em) { + .splash-container { + background-size: 10%; + } + .splash { + min-height: 24em; + } +} \ No newline at end of file diff --git a/themes/openAV-Luppp/static/css/style.css b/themes/openAV-Luppp/static/css/style.css new file mode 100644 index 0000000..9f06a34 --- /dev/null +++ b/themes/openAV-Luppp/static/css/style.css @@ -0,0 +1,64 @@ +.icon { + background-color: #00ff00; + background-image: url("../images/play.svg"); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: 12px 10px; + width: 42px; + height: 42px; + float: left; +} + +.button-text { + margin: 0.5em 2em; + line-height: 42px; +} + +.pure-menu-heading { + background-image: url("../images/luppp.svg"); + background-repeat: no-repeat; + background-position-y: 0em; + background-size: 2.3em; + padding-left: 55px; +} + +a.pure-button-primary { + padding: 0em 0em; + background: #2b2b2b; + color: white; + border-radius: 0px; + font-size: 120%; +} + +.splash { + background: #000000; + border: 2px solid #ff9900; +} + +.splash-head { + border: 0; + letter-spacing: 1em; + margin-left: 1em; +} + +.splash-head { + border-radius: 0px; +} + +.splash-container { + background-color: black; + background-image: url("../images/header.png"); + background-repeat: repeat-x; + background-position-y: 100px; + background-position-x: 5px; +} + +.ribbon, +.home-menu { + background: #2b2b2b; +} + +.home-menu a, +.content-subhead { + color: #ff9900; +} \ No newline at end of file diff --git a/img/common/file-icons.png b/themes/openAV-Luppp/static/images/common/file-icons.png similarity index 100% rename from img/common/file-icons.png rename to themes/openAV-Luppp/static/images/common/file-icons.png diff --git a/themes/openAV-Luppp/static/images/header.png b/themes/openAV-Luppp/static/images/header.png new file mode 100644 index 0000000..415f771 Binary files /dev/null and b/themes/openAV-Luppp/static/images/header.png differ diff --git a/img/luppp.png b/themes/openAV-Luppp/static/images/luppp.png similarity index 100% rename from img/luppp.png rename to themes/openAV-Luppp/static/images/luppp.png diff --git a/themes/openAV-Luppp/static/images/luppp.svg b/themes/openAV-Luppp/static/images/luppp.svg new file mode 100644 index 0000000..d6ce685 --- /dev/null +++ b/themes/openAV-Luppp/static/images/luppp.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + 2017 + + + Timothée Giet + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/openAV-Luppp/static/images/play.svg b/themes/openAV-Luppp/static/images/play.svg new file mode 100644 index 0000000..a3e5af4 --- /dev/null +++ b/themes/openAV-Luppp/static/images/play.svg @@ -0,0 +1,74 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/themes/openAV-Luppp/templates/index.html b/themes/openAV-Luppp/templates/index.html new file mode 100644 index 0000000..3bb7c75 --- /dev/null +++ b/themes/openAV-Luppp/templates/index.html @@ -0,0 +1,171 @@ + + + + + + + + {% block title %}{{ SITENAME }}{% endblock title %} + + + + + + + + + + + + + + + + + + + + + + +
+
+ {{ SITENAME }} + + +
+
+ +
+
+

{{ SITENAME }}

+

+ Your Free and Open Source Loop Station on Linux +

+

+ + + Get Started + +

+
+
+ +
+
+

Excepteur sint occaecat cupidatat.

+ +
+
+ +

+ Get Started Quickly +

+

+ Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. +

+
+
+

+ Responsive Layouts +

+

+ Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. +

+
+
+

+ Modular +

+

+ Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. +

+
+
+

+ Plays Nice +

+

+ Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. +

+
+
+
+ +
+
+ File Icons +
+
+ +

Laboris nisi ut aliquip.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor. +

+
+
+ +
+

Dolore magna aliqua. Uis aute irure.

+ +
+
+
+
+ + + + + + + + + + + + +
+
+
+ +
+

Contact Us

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. +

+ +

More Information

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. +

+
+
+ +
+ +
+ View the source of this layout to learn more. Made with love by the YUI Team. +
+ +
+ + + + + + + \ No newline at end of file