|
9 | 9 | <meta name="keywords" content="">
|
10 | 10 | <meta name="description" content="">
|
11 | 11 |
|
12 |
| - <!-- CSS --> |
13 | 12 | <link type="text/css" rel="stylesheet" href="dist/main.css">
|
14 | 13 |
|
15 | 14 | <link rel="shortcut icon" href="favicon.ico">
|
|
33 | 32 | <div id="loading"></div>
|
34 | 33 |
|
35 | 34 | <!-- Header -->
|
36 |
| - <header> |
| 35 | + <header class="header"> |
37 | 36 |
|
38 |
| - <!-- Title --> |
39 |
| - <a id="title"></a> |
| 37 | + <div class="header__toolbar header__toolbar--public"> |
40 | 38 |
|
41 |
| - <!-- Buttons --> |
42 |
| - <div class="toolbar" id="tools_albums"> |
43 |
| - <a class="button button--left" id="button_settings" title="Settings"> |
44 |
| - <svg class="iconic"><use xlink:href="#cog"></use></svg> |
45 |
| - </a> |
46 |
| - <a class="button button--left" id="button_signin" title="Sign In"> |
| 39 | + <a class="button" id="button_signin" title="Sign In"> |
47 | 40 | <svg class="iconic"><use xlink:href="#account-login"></use></svg>
|
48 | 41 | </a>
|
49 |
| - <a id="hostedwith">Hosted with Lychee</a> |
50 |
| - <a class="button button--right button_add" title="Add"> |
| 42 | + |
| 43 | + <a class="header__title"></a> |
| 44 | + |
| 45 | + <a class="header__hostedwith">Hosted with Lychee</a> |
| 46 | + |
| 47 | + </div> |
| 48 | + <div class="header__toolbar header__toolbar--albums"> |
| 49 | + |
| 50 | + <a class="button" id="button_settings" title="Settings"> |
| 51 | + <svg class="iconic"><use xlink:href="#cog"></use></svg> |
| 52 | + </a> |
| 53 | + |
| 54 | + <a class="header__title"></a> |
| 55 | + |
| 56 | + <input class="header__search" type="text" name="search" placeholder="Search …"> |
| 57 | + <a class="header__clear">×</a> |
| 58 | + <a class="header__divider"></a> |
| 59 | + <a class="button button_add" title="Add"> |
51 | 60 | <svg class="iconic"><use xlink:href="#plus"></use></svg>
|
52 | 61 | </a>
|
53 |
| - <a class="button_divider"></a> |
54 |
| - <input id="search" type="text" name="search" placeholder="Search …"> |
55 |
| - <a id="clearSearch">×</a> |
| 62 | + |
56 | 63 | </div>
|
57 |
| - <div class="toolbar" id="tools_album"> |
58 |
| - <a class="button button--left" id="button_back_home" title="Close Album"> |
| 64 | + <div class="header__toolbar header__toolbar--album"> |
| 65 | + |
| 66 | + <a class="button" id="button_back_home" title="Close Album"> |
59 | 67 | <svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
|
60 | 68 | </a>
|
61 |
| - <a class="button button--right button_add" title="Add"> |
62 |
| - <svg class="iconic"><use xlink:href="#plus"></use></svg> |
| 69 | + |
| 70 | + <a class="header__title"></a> |
| 71 | + |
| 72 | + <a class="button button--eye" id="button_share_album" title="Share Album"> |
| 73 | + <svg class="iconic iconic--eye"><use xlink:href="#eye"></use></svg> |
63 | 74 | </a>
|
64 |
| - <a class="button_divider"></a> |
65 |
| - <a class="button button--right" id="button_trash_album" title="Delete Album"> |
66 |
| - <svg class="iconic"><use xlink:href="#trash"></use></svg> |
| 75 | + <a class="button" id="button_archive" title="Download Album"> |
| 76 | + <svg class="iconic"><use xlink:href="#cloud-download"></use></svg> |
67 | 77 | </a>
|
68 |
| - <a class="button button--right button--info" id="button_info_album" title="About Album"> |
| 78 | + <a class="button button--info" id="button_info_album" title="About Album"> |
69 | 79 | <svg class="iconic"><use xlink:href="#info"></use></svg>
|
70 | 80 | </a>
|
71 |
| - <a class="button button--right" id="button_archive" title="Download Album"> |
72 |
| - <svg class="iconic"><use xlink:href="#cloud-download"></use></svg> |
| 81 | + <a class="button" id="button_trash_album" title="Delete Album"> |
| 82 | + <svg class="iconic"><use xlink:href="#trash"></use></svg> |
73 | 83 | </a>
|
74 |
| - <a class="button button--right button--eye" id="button_share_album" title="Share Album"> |
75 |
| - <svg class="iconic iconic--eye"><use xlink:href="#eye"></use></svg> |
| 84 | + <a class="header__divider"></a> |
| 85 | + <a class="button button_add" title="Add"> |
| 86 | + <svg class="iconic"><use xlink:href="#plus"></use></svg> |
76 | 87 | </a>
|
| 88 | + |
77 | 89 | </div>
|
78 |
| - <div class="toolbar" id="tools_photo"> |
79 |
| - <a class="button button--left" id="button_back" title="Close Photo"> |
| 90 | + <div class="header__toolbar header__toolbar--photo"> |
| 91 | + |
| 92 | + <a class="button" id="button_back" title="Close Photo"> |
80 | 93 | <svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
|
81 | 94 | </a>
|
82 |
| - <a class="button button--right" id="button_more" title="More"> |
83 |
| - <svg class="iconic"><use xlink:href="#ellipses"></use></svg> |
84 |
| - </a> |
85 |
| - <a class="button_divider"></a> |
86 |
| - <a class="button button--right" id="button_trash" title="Delete"> |
87 |
| - <svg class="iconic"><use xlink:href="#trash"></use></svg> |
| 95 | + |
| 96 | + <a class="header__title"></a> |
| 97 | + |
| 98 | + <a class="button button--star" id="button_star" title="Star Photo"> |
| 99 | + <svg class="iconic"><use xlink:href="#star"></use></svg> |
88 | 100 | </a>
|
89 |
| - <a class="button button--right" id="button_move" title="Move"> |
90 |
| - <svg class="iconic"><use xlink:href="#folder"></use></svg> |
| 101 | + <a class="button button--eye" id="button_share" title="Share Photo"> |
| 102 | + <svg class="iconic"><use xlink:href="#eye"></use></svg> |
91 | 103 | </a>
|
92 |
| - <a class="button button--right button--info" id="button_info" title="About Photo"> |
| 104 | + <a class="header__divider"></a> |
| 105 | + <a class="button button--info" id="button_info" title="About Photo"> |
93 | 106 | <svg class="iconic"><use xlink:href="#info"></use></svg>
|
94 | 107 | </a>
|
95 |
| - <a class="button_divider"></a> |
96 |
| - <a class="button button--right button--eye" id="button_share" title="Share Photo"> |
97 |
| - <svg class="iconic"><use xlink:href="#eye"></use></svg> |
| 108 | + <a class="button" id="button_move" title="Move"> |
| 109 | + <svg class="iconic"><use xlink:href="#folder"></use></svg> |
98 | 110 | </a>
|
99 |
| - <a class="button button--right button--star" id="button_star" title="Star Photo"> |
100 |
| - <svg class="iconic"><use xlink:href="#star"></use></svg> |
| 111 | + <a class="button" id="button_trash" title="Delete"> |
| 112 | + <svg class="iconic"><use xlink:href="#trash"></use></svg> |
101 | 113 | </a>
|
| 114 | + <a class="header__divider"></a> |
| 115 | + <a class="button" id="button_more" title="More"> |
| 116 | + <svg class="iconic"><use xlink:href="#ellipses"></use></svg> |
| 117 | + </a> |
| 118 | + |
102 | 119 | </div>
|
103 | 120 |
|
104 | 121 | </header>
|
105 | 122 |
|
106 | 123 | <!-- Content -->
|
107 |
| - <div id="content"></div> |
| 124 | + <div class="content"></div> |
108 | 125 |
|
109 | 126 | <!-- ImageView -->
|
110 | 127 | <div id="imageview"></div>
|
111 | 128 |
|
112 | 129 | <!-- Sidebar -->
|
113 |
| - <div id="sidebar"> |
114 |
| - <div class='header'> |
| 130 | + <div class="sidebar"> |
| 131 | + <div class="sidebar__header"> |
115 | 132 | <h1>About</h1>
|
116 | 133 | </div>
|
117 |
| - <div class='wrapper'></div> |
| 134 | + <div class="sidebar__wrapper"></div> |
118 | 135 | </div>
|
119 | 136 |
|
120 | 137 | <!-- Upload -->
|
|
0 commit comments