I am working on the structure of the HTML and the php Codes for the deployment of the project.
The index page have the features as follow:
- Container and content now have 100% width
- Sidebar now is the part of the content
- Footer is also part of the container
- Remove navigations
- Replace sandbox_global_nav() function to produce better menu
The header page have the feature as follow:
- Position absolute, z-index: 0, so it is parallax
- Background using an image that was edit using Photoshop so the gradient of the background look natural.
The menu page have the feature as follow:
- Position relative, z-index: 10, parallax
- Covering the header when scrolled
- Have SVG drawn line on the bottom
The body page have the feature as follow:
- Background using svg image
- Position absolute, z-index: 1, to create parallax scrolling
The two logo in the header are floated to the right while the menu logo ( The Bird) is the logo that was already Photoshop by Sindy, it is float left and given some controlled space from the top, so it looks like as if it sticks on the menu bar. That is why i called it Menu-Logo. While the position is relative therefore it is Parallax.
The container and the contents have the features as follow:
- The index shows highlighted posts
- To separate highlighted posts in index with normal post (the page that is opened when user click a post), highlighted posts in index are grouped with css class: home-post; while normal posts are with css class: post (following the wordpress rule)
- All home-post index have display:block property, so they are shown one post at one time.
- Each home post has controlled margin and padding so the page looks neat: 35px margin top, 15 px margin bottom, padding-top: 30px, padding-left: 3%, padding-bottom: 40px, and padding-left: 3%
- Each home post has shadow, made using css filter property, to create floated feel
Types of home-post in the index :
- post-sidebar
- The only home-post that is connected to wordpress CMS, the other are hardcoded
- Before, sidebar is separated from content, now it is part of the content as one of the home-post
- This has posts list that are shown side-by-side with sidebar for easy
- The sidebar was float-right and the posts beside it was no 100% width. But now, the float property is lost and the sidebar is placed side-by-side with the posts using inline-block property.
- Video-1
- this home-post has a big video, intended for the most important video.
- The video is auto-played.
- User can click on it to play-pause the video
- multi-image
- this has multiple images side-by-side and description for each image is shown when the user hover on it. The animation is done by javascript which is made by Sindy.
- image
- This is just a normal image-description post.
- To keep the page neat when zooming, the image and description inside have width and height in percentage.
- Limitation on this theme: not yet responsive
- video-2
- This is just a normal video-description post which exactly follows image home-post, but using video.
- post-slideshow-1
- This is a typical image-description post with slideshow images. It has multiple images but one image is show at one time and user may change shown image by clicking arrows.
- This was made using javascript, in collaboration with Sindy
- Footer is part of the container, so it is also parallax.
- Add .footer-content class so we can manipulate styles of the footer content
All the file below are using .php format :
- Archive, category, author, search and image
- Those pages show list of post based on date, category, author, image
- Remove navigation bar because not necessary and to remove empty space between menu and the posts
- Remove sidebar
- All posts are styled in .post class and looks similar to home-post
- Make the page-title larger and centered.
- single (for single post), page
- Already looks okay
- Only move the footer to the container (so the footer become parallax)
- Adjusting margins and paddings in the #comment-list and #respond to make it neat.
- Enlarge the navigation links (nav-prev and nav-next)
- Before nav-next is floated right, but nav-prev is display: block, causing nav-next be pushed down. Make nav-prev display: inline-block, problem is solved
