159 templates/website/assets/styles/features.css
View file
@@ -3,12 +3,10 @@
*
* 1. features
* 1.1 title
* 1.2 title sub
* 1.3 box
* 1.2 box
* 1.3 toggle
* 1.4 list
* 2. query
* 2.1 medium min
* 3. logic
* 2. logic
*
* @since 3.0.0
*
@@ -20,14 +18,12 @@

/* @section 1.1 title */

/* todo: use var(rs-font-accent) and gray() everywhere */
/* todo: add margin-top: 1em; and margin-bottom: 1em */
.rs-title-feature
{
border: none;
color: var(--rs-color-primary);
font: 2.5em Pacifico, arial, sans-serif;
margin-bottom: 0.5em;
font: 2.5em var(--rs-font-accent);
margin-bottom: 1em;
text-align: center;
}

@media (--media-medium-min)
@@ -38,41 +34,16 @@
}
}

/* @section 1.2 title sub */
/* @section 1.2 box */

.rs-title-sub-feature
{
color: var(--rs-color-primary);
font-size: 1.5em;
font-weight: 300;
position: relative;

&:before
{
font-size: 2em;
line-height: 1em;
position: absolute;
/* why right 101% */
right: 101%;
top: -0.125em;
}
}

/* @section 1.3 box */
/* todo: please remove the border-radius - don't like */
.rs-box-feature
{
background: gray(255);
border-radius: 0.25em;
border-top: 0.25em solid var(--rs-color-primary);
box-sizing: border-box;
margin-bottom: 3em;
font-size: 1.25em;
margin-bottom: 4em;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0 2em 2em;
position: relative;
text-align: center;
padding: 2em;
}

.rs-box-homepage + .rs-box-feature
@@ -84,92 +55,78 @@
{
.rs-box-feature
{
font-size: 1.25em;
width: 80%;
}
}

/* @section 1.4 list */
/* @section 1.3 toggle */

/* todo: rename to rs-wrapper-feature + add new section */
.rs-wrapper-list-feature
.rs-wrapper-label-feature
{
margin-top: 3em;
text-align: center;
}

.rs-list-feature
.rs-label-feature-developer,
.rs-label-feature-designer
{
text-align: left;
transition: transform 0.5s;

& li
{
box-sizing: border-box;
margin-bottom: 2em;
padding-left: 3em;
}

&.rs-is-designer
{
transform: translateX(100%);
}

&.rs-is-developer
{
transform: translateX(-100%);
}
border-radius: 0.125em;
cursor: pointer;
display: block;
font-size: 1.5em;
padding: 0.5em;
text-align: center;
text-transform: uppercase;
}

/* @section 2. query */

/* @section 2.1 medium min */

/* todo: does not work, the list are not next to each other */
@media (--media-medium-min)
{
.rs-list-feature
.rs-label-feature-developer,
.rs-label-feature-designer
{
display: flex;
flex-wrap: wrap;
justify-content: center;

& li
{
padding: 0 1em 0 4em;
width: 50%;
}
display: inline-block;
margin: 0 1em;
width: 6em;
}
}

/* @section 3. logic */
.rs-fn-status-feature-developer:checked ~ .rs-has-feature .rs-label-feature-developer,
.rs-fn-status-feature-designer:checked ~ .rs-has-feature .rs-label-feature-designer
{
background: var(--rs-color-tertiary);
color: gray(255);
transition: background 0.1s, color 0.1s;
}

/* put this section to the top of the file */
.rs-fn-status-feature
/* @section 1.4 list */

.rs-wrapper-list-feature
{
display: none;
margin-top: 4em;
}
.rs-list-feature
{
column-gap: 2em;
columns: 2;
}

&:checked + .rs-label-feature
{
background: #323e4c;
color: #fff;
}
.rs-title-feature-sub
{
color: var(--rs-color-primary);
font-size: 1.5em;
}

.rs-label-feature
/* @section 2. logic */

.rs-fn-status-feature-developer,
.rs-fn-status-feature-designer,
.rs-is-feature-developer,
.rs-is-feature-designer
{
background: rgb(215, 215, 215);
border-radius: 1.5em;
cursor: pointer;
display: inline-block;
font-size: 1.25em;
margin: 0 1em;
padding: 0.5em 1em;
text-transform: uppercase;
transition: background 0.1s, color 0.1s;
display: none;
}

.rs-fn-status-feature-developer:checked ~ .rs-wrapper-list-feature .rs-is-developer,
.rs-fn-status-feature-designer:checked ~ .rs-wrapper-list-feature .rs-is-designer
.rs-fn-status-feature-developer:checked ~ .rs-has-feature .rs-is-feature-developer,
.rs-fn-status-feature-designer:checked ~ .rs-has-feature .rs-is-feature-designer
{
transform: translateX(0);
display: block;
}
159 templates/website/assets/styles/homepage.css
View file
@@ -3,10 +3,9 @@
*
* 1. homepage
* 1.1 box
* 1.2 title
* 1.3 text
* 1.4 link
* 1.5 button
* 1.2 branding
* 1.3 button
* 1.4 badge
*
* @since 3.0.0
*
@@ -23,8 +22,8 @@
background: var(--rs-color-tertiary);
box-sizing: border-box;
color: gray(200);
height: 90vh;
min-height: 32em;
min-height: 30em;
min-height: 75vh;
padding: 2em 2em 6em;
text-align: center;
}
@@ -35,107 +34,129 @@
{
align-items: center;
display: flex;
font-size: 1.25em;
justify-content: center;
}
}

/* @section 1.2 title */
/* todo: do this at the end: move this to the default template (branding.css) and use the look for the install.php too */
/* todo: rename to rs-title-branding */
.rs-title-header
/* @section 1.2 branding */

.rs-title-branding
{
height: 5em;
margin-left: auto;
margin-right: auto;
position: relative;
text-indent: -999em;
width: 5em;

&:before
{
background: url('../../../../templates/default/assets/images/redaxscript.svg') no-repeat center center / 55%, linear-gradient(to top, gray(230), gray(255));
background: var(--rs-url-branding) no-repeat center/ 55%, linear-gradient(to top, gray(230), gray(255));
border-radius: 0.05em;
bottom: 0;
content: '';
display: inline-block;
height: 1.5em;
width: 1.5em;
}

/* todo: why display none? remove the link from html */
& a
{
display: none;
left: 0;
position: absolute;
right: 0;
text-indent: 0;
top: 0;
}
}

/* todo: do this in combination with the homepage layout class */
@media (--media-medium-min)
.rs-text-branding
{
.rs-title-header:before
{
height: 2.5em;
width: 2.5em;
}
font-size: 1.5em;
margin-bottom: 1em;
margin-top: 2em;
}

/* @section 1.3 text */
/* @section 1.3 button */

.rs-text-header
.rs-button-download,
.rs-button-demo
{
display: block;
font-size: 1.25em;
font-weight: 300;
margin-bottom: 3em;
margin-top: 1em;
@extend %rs-button;
font-size: 1.5em;
min-width: 8em;
}

/* @section 1.4 link */
/* todo: rename to rs-wrapper-homepage */
.rs-wrapper-link-header
.rs-button-download
{
margin-top: 1em;
background: var(--rs-color-secondary);
color: gray(255);

& a
&:hover
{
border-bottom: 0.125em solid var(--rs-color-secondary);
display: inline-block;
margin: 0 1em;
padding: 0.125em;
position: relative;

&:before
{
position: absolute;
right: 100%;
top: 0.25em;
}
background: var(--rs-color-secondary-light);
}
}

/* @section 1.5 button */
/* todo: use the rs-button-download and rs-button-demo and extend from the button placeholder instead of modding button default */
.rs-button-default,
.rs-button-light
.rs-button-demo
{
font-size: 1.375em;
font-weight: 300;
margin: 0.5em 0;
min-width: 8em;
padding: 0 0.5em;
}

.rs-button-light
{
@extend %rs-button;
background: gray(230);
color: var(--rs-color-tertiary);

&:hover
{
background: gray(255);
color: var(--rs-color-tertiary);
}
}
/* todo: think about adding margin: 1em to the initial styling */

@media (--media-medium-max)
{
.rs-button-download,
.rs-button-demo
{
margin-top: 1em;
}
}

@media (--media-medium-min)
{
.rs-button-default,
.rs-button-light
.rs-button-download,
.rs-button-demo
{
margin: 1em;
}
}

/* @section 1.4 badge */

.rs-wrapper-badge-beta
{
height: 10em;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}

.rs-box-badge-beta
{
background: var(--rs-gradient-beta);
box-shadow: 0 -0.125em 0 gray(0, 0.2) inset;
color: gray(255);
font-size: 2em;
font-weight: bold;
padding: 2em 3em 0.5em;
text-transform: uppercase;
transform: rotate(45deg) translate(1.5em, -3em);
z-index: 1;
}

.rs-wrapper-badge-shield
{
margin-bottom: 1em;
margin-top: 6em;

& a
{
margin: 0 0.5em;
}

& img
{
height: 1.5em;
}
}
2 templates/website/dist/styles/website.min.css
View file
2 templates/website/link.phtml
View file
@@ -4,7 +4,7 @@

<?php echo Tag::link()
->init('website')
->appendFile('//fonts.googleapis.com/css?family=Pacifico&text=Who are you?;subset=' . Helper::getSubset())
->appendFile('//fonts.googleapis.com/css?family=Pacifico&text=What are you?;subset=' . Helper::getSubset())
->appendFile('templates/website/dist/styles/website.min.css')
->rewrite(
[
14 templates/website/main.phtml
View file
@@ -9,12 +9,14 @@
->findOne()
->text; ?>

<!-- features -->

<?php echo Tag::articleRaw()
->where('alias', 'features')
->findOne()
->text; ?>
<!-- feature -->

<div class="rs-box-feature">
<?php echo Tag::articleRaw()
->where('alias', 'features')
->findOne()
->text; ?>
</div>
</main>

<!-- else default -->
16 templates/website/menu.phtml
View file
@@ -8,8 +8,14 @@

<!-- list -->

<?php echo Tag::navigation('categories',
[
'class' => 'rs-fn-dropdown rs-fn-menu rs-list-menu',
'limit' => 5
]); ?>
<ul class="rs-fn-dropdown rs-fn-menu rs-list-menu">
<li>
<a href="download">Download</a>
</li>
<li>
<a href="documentation">Documentation</a>
</li>
<li>
<a href="features">Features</a>
</li>
</ul>