Skip to content

Commit

Permalink
[docs] demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@romelperez
romelperez committed May 31, 2017
1 parent e610c45 commit a3d34e0
Show file tree
Hide file tree
Showing 10 changed files with 314 additions and 169 deletions.
116 changes: 14 additions & 102 deletions demos/app1/app1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,113 +2,25 @@

@include arwes-all();

.arwes {
background-image: url(/img/background1.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
.arwes-frame {
margin-bottom: $arwes-global-margin;

.arwes__pattern {
min-height: 1000px;
min-height: 100vh;
background-image: url(/img/glow.png);
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
}
.arwes__intern {
position: fixed;
z-index: 5;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.arwes__main {
position: relative;
z-index: 10;
}
.arwes__puff {
position: absolute;
display: block;
width: 1px;
height: 1px;
box-shadow: 0 0 10px 10px rgba($color1, 0.5);
border-radius: 50%;
h3 {
margin: 0;
}
}
* .arwes-frame:last-child {
margin-bottom: 0;
}

.box {
.container {
display: block;
margin: #{$global-margin * 2} auto;
width: 100%;
margin: 0 auto 20px;
max-width: 800px;

border-style: solid;
border-color: $color1;
border-width: 1px 1px 1px 1px;
box-shadow: 0 0 4px rgba($color1, $color-alpha);

text-align: left;
font-size: 1.125rem;

.box-frame {
position: relative;
}
.box-m {
z-index: 1;
position: absolute;
width: 30px;
height: 30px;
border-style: solid;
border-color: $color1;
}
.box-lt {
left: -3px;
top: -3px;
border-width: 2px 0 0 2px;
}
.box-lb {
left: -3px;
bottom: -3px;
border-width: 0 0 2px 2px;
}
.box-rt {
right: -3px;
top: -3px;
border-width: 2px 2px 0 0;
}
.box-rb {
right: -3px;
bottom: -3px;
border-width: 0 2px 2px 0;
}
.box-c {
z-index: 2;
position: relative;
padding: $global-padding;
background-color: rgba($color-background2, 0.9);
}

&.box--stretched {
margin: 0 auto;
max-width: none;

.box-c {
min-height: 100px;
}
}
&.box--down {
border-width: 0 0 4px 0;
}
&.box--up {
border-width: 1px 0 0 0;
}
}

img {
display: block;
margin: 0 0 $global-margin;
width: 100%;
border: 1px solid $color1-dark;
.header,
.footer {
.container {
margin-bottom: 0;
}
}
53 changes: 2 additions & 51 deletions demos/app1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,58 +8,9 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Electrolize">
<link rel="stylesheet" href="/css/app1.css">
<script src="/js/app1.js" async></script>
</head>
<body>
<div class="arwes">
<div class="arwes__pattern">
<div class="arwes__intern"></div>
<div class="arwes__main">

<div class="box box--stretched box--down">
<div class="box-frame">
<div class="box-c">

<div style="margin:0 auto;max-width:800px;">
<code>~$ romelperez</code>
</div>

</div>
</div>
</div>

<div class="box">
<div class="box-frame">
<div class="box-m box-lt"></div>
<div class="box-m box-lb"></div>
<div class="box-m box-rt"></div>
<div class="box-m box-rb"></div>
<div class="box-c">

<h1>Lorem ipsum dolor sit amet</h1>
<p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]) is a high-level, dynamic, untyped, and <b>interpreted programming language</b>.[7] It has been standardized in the ECMAScript language specification.[8] Alongside HTML and CSS, <a href="#">JavaScript is one of the three core technologies</a> of World Wide Web content production.</p>
<p>And all <em>modern Web browsers support</em> it without the need for plug-ins.[7] JavaScript is prototype-based with first-class functions, making it <a href="#">a multi-paradigm language</a>, supporting object-oriented,[9] imperative, and functional programming styles.</p>
<hr>
<h2>Lorem ipsum dolor sit amet</h2>
<p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]) is a high-level, dynamic, untyped, and <b>interpreted programming language</b>.[7] It has been standardized in the ECMAScript language specification.[8] Alongside HTML and CSS, <a href="#">JavaScript is one of the three core technologies</a> of World Wide Web content production.</p>
<img src="/img/wallpaper.jpg">
<p>And all modern Web browsers support it without the need for plug-ins.[7] JavaScript is prototype-based with first-class functions, making it <a href="#">a multi-paradigm language</a>, supporting object-oriented,[9] imperative, and functional programming styles.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]) is a high-level, dynamic, untyped, and <b>interpreted programming language</b>.[7] It has been standardized in the ECMAScript language specification.[8] Alongside HTML and CSS, <a href="#">JavaScript is one of the three core technologies</a> of World Wide Web content production; <i>the majority of websites employ it</i>, and all modern Web browsers support it without the need for plug-ins.[7] JavaScript is prototype-based with first-class functions, making it <a href="#">a multi-paradigm language</a>, supporting object-oriented,[9] imperative, and functional programming styles.</p>

</div>
</div>
</div>

<div class="box box--stretched box--up">
<div class="box-frame">
<div class="box-c">
</div>
</div>
</div>

</div>
</div>
</div>
<div id="app"></div>
<script src="/js/app1.js" async></script>
</body>
</html>
Loading

0 comments on commit a3d34e0

Please sign in to comment.