Skip to content

Commit a91e2f0

Browse files
afonsopaciferafonsopacifer
committed
Adicionando SPA com sennajs
1 parent 0c8553f commit a91e2f0

File tree

7 files changed

+18
-7
lines changed

7 files changed

+18
-7
lines changed

‎out/assets/styles/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ body {
8888
display: flex;
8989
justify-content: center;
9090
align-items: center;
91+
height: 100%;
92+
}
93+
.flipped {
94+
height: 100%;
9195
}
9296
.container {
9397
border: 1px dashed #000;

‎out/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><meta charset="utf-8"><meta name="description" content="Projeto Front-End Description"><meta name="robots" content="index,follow"><title>Projeto Front-End Title</title><meta property="og:type" content="website"><meta property="og:title" content="Projeto Front-End Title"><meta property="og:description" content="Projeto Front-End Description"><meta property="og:url" content="https://csshortcut.github.io/csshortcut-app"><meta property="og:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Projeto Front-End Title"><meta name="twitter:description" content="Projeto Front-End Description"><meta name="twitter:url" content="https://csshortcut.github.io/csshortcut-app"><meta name="twitter:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><link rel="stylesheet" href="assets/styles/style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400"></head><body><header class="header"><div class="container"><nav class="menu"><ul class="menu-itens"><li class="menu-item"> <a class="menu-link" href="index.html">Perfil</a></li><li class="menu-item"> <a class="menu-link" href="projects.html">Projects</a></li></ul></nav><div class="profile-header"><img class="profile-header-img" src="assets/img/afonso-perfil-mini.jpg" alt="Afonso Pacifer Perfil"><span class="profile-text">Afonso Pacifer</span></div></div></header><main class="main container-centered"><div class="profile"><img class="profile-img" srcset="assets/img/afonso-perfil-1x.jpg 1x, assets/img/afonso-perfil-2x.jpg 2x, " src="assets/img/afonso-perfil-1x.jpg" alt="Afonso Perfil"><h1 class="heading-lv1">Afonso Pacifer</h1><p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur sem quis rutrum fermentum. Maecenas eget dignissim justo. Etiam suscipit, felis a faucibus condimentum, ante nunc efficitur odio, ac lacinia eros metus nec leo. Duis tempus purus accumsan tincidunt porta. Nullam at ullamcorper dui</p></div></main><footer class="footer container-centered"><svg xmlns="http://www.w3.org/2000/svg" class="heart-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg></footer><script type="text/javascript" src="assets/scripts/script.js" async></script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><meta charset="utf-8"><meta name="description" content="Projeto Front-End Description"><meta name="robots" content="index,follow"><title>Projeto Front-End Title</title><meta property="og:type" content="website"><meta property="og:title" content="Projeto Front-End Title"><meta property="og:description" content="Projeto Front-End Description"><meta property="og:url" content="https://csshortcut.github.io/csshortcut-app"><meta property="og:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Projeto Front-End Title"><meta name="twitter:description" content="Projeto Front-End Description"><meta name="twitter:url" content="https://csshortcut.github.io/csshortcut-app"><meta name="twitter:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><link rel="stylesheet" href="assets/styles/style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400"></head><body data-senna><header class="header"><div class="container"><nav class="menu"><ul class="menu-itens"><li class="menu-item"> <a class="menu-link" href="index.html">Perfil</a></li><li class="menu-item"> <a class="menu-link" href="projects.html">Projects</a></li></ul></nav><div class="profile-header"><img class="profile-header-img" src="assets/img/afonso-perfil-mini.jpg" alt="Afonso Pacifer Perfil"><span class="profile-text">Afonso Pacifer</span></div></div></header><main class="main" data-senna-surface id="content"><div class="container-centered"><div class="profile"><img class="profile-img" srcset="assets/img/afonso-perfil-1x.jpg 1x, assets/img/afonso-perfil-2x.jpg 2x, " src="assets/img/afonso-perfil-1x.jpg" alt="Afonso Perfil"><h1 class="heading-lv1">Afonso Pacifer</h1><p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur sem quis rutrum fermentum. Maecenas eget dignissim justo. Etiam suscipit, felis a faucibus condimentum, ante nunc efficitur odio, ac lacinia eros metus nec leo. Duis tempus purus accumsan tincidunt porta. Nullam at ullamcorper dui</p></div></div></main><footer class="footer container-centered"><svg xmlns="http://www.w3.org/2000/svg" class="heart-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg></footer><script type="text/javascript" src="assets/scripts/script.js" async></script><script type="text/javascript" src="https://cdn.jsdelivr.net/senna.js/2.1.5/senna-min.js"></script></body></html>

‎out/projects.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><meta charset="utf-8"><meta name="description" content="Projeto Front-End Description"><meta name="robots" content="index,follow"><title>Projeto Front-End Title</title><meta property="og:type" content="website"><meta property="og:title" content="Projeto Front-End Title"><meta property="og:description" content="Projeto Front-End Description"><meta property="og:url" content="https://csshortcut.github.io/csshortcut-app"><meta property="og:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Projeto Front-End Title"><meta name="twitter:description" content="Projeto Front-End Description"><meta name="twitter:url" content="https://csshortcut.github.io/csshortcut-app"><meta name="twitter:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><link rel="stylesheet" href="assets/styles/style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400"></head><body><header class="header"><div class="container"><nav class="menu"><ul class="menu-itens"><li class="menu-item"> <a class="menu-link" href="index.html">Perfil</a></li><li class="menu-item"> <a class="menu-link" href="projects.html">Projects</a></li></ul></nav><div class="profile-header"><img class="profile-header-img" src="assets/img/afonso-perfil-mini.jpg" alt="Afonso Pacifer Perfil"><span class="profile-text">Afonso Pacifer</span></div></div></header><main class="main container"><div class="projects"><section class="projects-list"><h1 class="heading-lv1">Projects</h1><article class="project"><h2 class="project-name">scrollindo.js</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Simple abstraction for scroll interactions.</p></article><article class="project"><h2 class="project-name">slush-banana</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Generator for BananaCSS Projects.</p></article><article class="project"><h2 class="project-name">slush-gulp-plugin</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">A slush generator for gulp plugins.</p></article><article class="project"><h2 class="project-name">gulp-banana</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Gulp plugin for compile Banana code to CSS.</p></article><article class="project"><h2 class="project-name">css-ast-iterations</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Provide a very simple API for complex iterations on the CSS abstract syntax tree (AST).</p></article><article class="project"><h2 class="project-name">banana-style-guide</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Banana NodeJS code style guide.</p></article><article class="project"><h2 class="project-name">bananacss</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">The brazilian CSS superset writen in NodeJS.</p></article><article class="project"><h2 class="project-name">vue-meditation</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Timer for meditation built with Vue.JS</p></article></section></div></main><footer class="footer container-centered"><svg xmlns="http://www.w3.org/2000/svg" class="heart-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg></footer><script type="text/javascript" src="assets/scripts/script.js" async></script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><meta charset="utf-8"><meta name="description" content="Projeto Front-End Description"><meta name="robots" content="index,follow"><title>Projeto Front-End Title</title><meta property="og:type" content="website"><meta property="og:title" content="Projeto Front-End Title"><meta property="og:description" content="Projeto Front-End Description"><meta property="og:url" content="https://csshortcut.github.io/csshortcut-app"><meta property="og:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Projeto Front-End Title"><meta name="twitter:description" content="Projeto Front-End Description"><meta name="twitter:url" content="https://csshortcut.github.io/csshortcut-app"><meta name="twitter:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png"><link rel="stylesheet" href="assets/styles/style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400"></head><body data-senna><header class="header"><div class="container"><nav class="menu"><ul class="menu-itens"><li class="menu-item"> <a class="menu-link" href="index.html">Perfil</a></li><li class="menu-item"> <a class="menu-link" href="projects.html">Projects</a></li></ul></nav><div class="profile-header"><img class="profile-header-img" src="assets/img/afonso-perfil-mini.jpg" alt="Afonso Pacifer Perfil"><span class="profile-text">Afonso Pacifer</span></div></div></header><main class="main" data-senna-surface id="content"><div class="container"><div class="projects"><section class="projects-list"><h1 class="heading-lv1">Projects</h1><article class="project"><h2 class="project-name">scrollindo.js</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Simple abstraction for scroll interactions.</p></article><article class="project"><h2 class="project-name">slush-banana</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Generator for BananaCSS Projects.</p></article><article class="project"><h2 class="project-name">slush-gulp-plugin</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">A slush generator for gulp plugins.</p></article><article class="project"><h2 class="project-name">gulp-banana</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Gulp plugin for compile Banana code to CSS.</p></article><article class="project"><h2 class="project-name">css-ast-iterations</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Provide a very simple API for complex iterations on the CSS abstract syntax tree (AST).</p></article><article class="project"><h2 class="project-name">banana-style-guide</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Banana NodeJS code style guide.</p></article><article class="project"><h2 class="project-name">bananacss</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">The brazilian CSS superset writen in NodeJS.</p></article><article class="project"><h2 class="project-name">vue-meditation</h2><div class="project-star"><svg xmlns="http://www.w3.org/2000/svg" class="star-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg><span class="project-star-count">999</span></div><p class="project-description">Timer for meditation built with Vue.JS</p></article></section></div></div></main><footer class="footer container-centered"><svg xmlns="http://www.w3.org/2000/svg" class="heart-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg></footer><script type="text/javascript" src="assets/scripts/script.js" async></script><script type="text/javascript" src="https://cdn.jsdelivr.net/senna.js/2.1.5/senna-min.js"></script></body></html>

‎src/assets/styles/modules/container.styl‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
display: flex;
77
justify-content: center;
88
align-items: center;
9+
height: 100%;
10+
}
11+
12+
.flipped {
13+
height: 100%;
914
}
1015

1116
.container {

‎src/index.pug‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
extends ./layouts/default.pug
22

33
block content
4-
main.main.container-centered
4+
div.container-centered
55
div.profile
66
img(srcset="assets/img/afonso-perfil-1x.jpg 1x, assets/img/afonso-perfil-2x.jpg 2x, " src="assets/img/afonso-perfil-1x.jpg" class="profile-img" alt="Afonso Perfil")
77
h1.heading-lv1 Afonso Pacifer

‎src/layouts/default.pug‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,13 @@ html(lang="en")
3737
//- ===========================================
3838
link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400")
3939

40-
body
40+
body(data-senna)
4141
include ./../partials/header.pug
4242

43-
block content
43+
main(data-senna-surface)#content.main
44+
block content
4445

4546
include ./../partials/footer.pug
4647

47-
script(type="text/javascript" src="assets/scripts/script.js" async)
48+
script(type="text/javascript" src="assets/scripts/script.js" async)
49+
script(type="text/javascript" src="https://cdn.jsdelivr.net/senna.js/2.1.5/senna-min.js")

‎src/projects.pug‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
extends ./layouts/default.pug
22

33
block content
4-
main.main.container
4+
div.container
55
div.projects
66
section.projects-list
77
h1.heading-lv1 Projects

0 commit comments

Comments
 (0)