Skip to content

Commit b9c02df

Browse files
samuil4samuil4
committed
adding base styles
1 parent ef83ab6 commit b9c02df

File tree

3 files changed

+153
-4
lines changed

3 files changed

+153
-4
lines changed

‎EXERCISE/Exercise 4/app/templates/templates.js

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,30 @@ var app = app || {};
99

1010
layout: {
1111
header: '<header id="template-header">Header</header>',
12-
footer: '<footer id="template-footer">Footer</footer>',
13-
content: '<section id="template-content">CONTENT</section>'
12+
footer: '<nav class="menu"><ul><li class="start"><a href="#" class="icon-smile"></a></li><li class="window-tab"><a href="#" class="icon-browser"></a></li></ul></nav>',
13+
content: ''
1414
},
1515

16-
windowTemplate: '<div>Window :) yeeeh</div>'
16+
windowTemplate: ['<section class="window" id="test">',
17+
'<header class="header">',
18+
'<div class="window-actions">',
19+
'<span class="action icon-dash"></span>',
20+
'<span class="action icon-popup"></span>',
21+
'<span class="action icon-delete-circle"></span>',
22+
'</div>',
23+
'<h2>Title</h2>',
24+
'</header>',
25+
'<div class="pure-g">',
26+
'<aside class="pure-u-1 pure-u-md-1-5 sidebar">',
27+
'Additional actions',
28+
'</aside>',
29+
'<main class="pure-u-1 pure-u-md-4-5 content">',
30+
'Main content',
31+
'</main>',
32+
'</div>',
33+
'<footer class="footer">',
34+
'<strong> Status bar :) </strong>',
35+
'</footer>',
36+
'</section>']
1737
};
1838
})();

‎EXERCISE/Exercise 4/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Exercise 4</title>
6-
<link rel="stylesheet" href="css/style.css?v=1.0.0.1">
6+
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
7+
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
8+
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
9+
<link rel="stylesheet" href="https://fontastic.s3.amazonaws.com/TNDvpdpnxYaMnnPcunypuU/icons.css">
10+
<link rel="stylesheet" href="styles/style.css?v=1.0.0.2">
711
</head>
812
<body>
913

‎EXERCISE/Exercise 4/styles/style.css

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
a {
2+
text-decoration: none;
3+
}
4+
5+
body {
6+
overflow-y: hidden;
7+
}
8+
9+
.wrapper {
10+
box-sizing: border-box;
11+
/*position: relative;*/
12+
width: 100%;
13+
padding: 2% 2%;
14+
/*background-color: #f0f5f6;*/
15+
}
16+
17+
.wrapper .menu {
18+
box-sizing: border-box;
19+
position: absolute;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
border-top: 1px solid #ccc;
24+
height: 32px;
25+
background-color: #ecf0f1;
26+
}
27+
28+
.wrapper .menu ul {
29+
height: 100%;
30+
margin: 0;
31+
padding: 0;
32+
}
33+
34+
.wrapper .menu li {
35+
display: inline-block;
36+
vertical-align: top;
37+
list-style: none;
38+
width: 40px;
39+
height: 100%;
40+
text-align: center;
41+
padding: 14px 10px 0 10px;
42+
background-color: #ecf0f1;
43+
border-right: 1px solid #ccc;
44+
}
45+
46+
.wrapper .menu li:hover {
47+
cursor: pointer;
48+
background-color: #ccc;
49+
}
50+
51+
.wrapper .menu li.start a {
52+
color: #000;
53+
font-size: 1.5em;
54+
}
55+
56+
.wrapper .menu li a {
57+
font-size: 1.3em;
58+
color: #31535c;
59+
}
60+
61+
.window {
62+
max-width: 70%;
63+
min-width: 400px;
64+
border: 1px solid #ccc;
65+
}
66+
67+
.window .header {
68+
position: relative;
69+
font-size: 1.2em;
70+
padding: 1px 0.2% 4px 3.2%;
71+
background-color: #05b4ba;
72+
border-bottom: 1px solid #ccc;
73+
}
74+
75+
.window .header .window-actions {
76+
position: absolute;
77+
right: 1%;
78+
top: 14%;
79+
}
80+
81+
.window .header .window-actions .action {
82+
display: inline-block;
83+
padding: 10px 12px 4px 10px;
84+
font-size: 0.9em;
85+
cursor: pointer;
86+
}
87+
88+
.window .header .window-actions .action:hover {
89+
background-color: #9fc5d1;
90+
}
91+
92+
.window .header h2 {
93+
padding-top: 11px;
94+
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
95+
letter-spacing: 0.2em;
96+
font-size: 1.4em;
97+
text-transform: uppercase;
98+
font-weight: 700;
99+
margin: 5px;
100+
}
101+
102+
.window .content {
103+
box-sizing: border-box;
104+
padding: 1%;
105+
background-color: #fafdfe;
106+
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
107+
font-style: normal;
108+
font-variant: normal;
109+
font-weight: 500;
110+
line-height: 26.3999996185303px;
111+
}
112+
113+
.window .footer {
114+
border-top: 1px solid #ccc;
115+
padding: 1%;
116+
background-color: #ecf0f1;
117+
}
118+
119+
.window .sidebar {
120+
box-sizing: border-box;
121+
padding: 1% 1%;
122+
border-right: 1px solid #ccc;
123+
background-color: #ecf0f1;
124+
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
125+
}

0 commit comments

Comments
 (0)