/** The contact page allows users to send personal message to the author
*/
contact
margin: 50px auto 0px auto /** The contact page header */ #contact-page-header font-size: 34px font-weight: 600 text-align: center color: $color-custom-primary /** The contact page message */ #contact-page-message margin: 20px auto 20px auto font-size: 16px text-align: center /** The contact form for users to fill up */ #contact-form margin: 60px auto 50px max-width: 500px /** The fiels in the contact form */ .form-field .field-name color: $color-custom-primary /** The input handlers for the text entered by the users * * resize - Ensures that the textarea is not resizable */ .input-handler, .textarea-handler width: 100% padding: 10px resize: none border: 1px solid $color-custom-secondary /** The input fields when in focus */ &:focus outline: none border-width: 2px border-color: $color-custom-primary /** The textarea is generally larger for messages */ .textarea-handler height: 250px /** The div that wraps the send button */ .submit-wrap text-align: center /** The send button for users to send the message to mail */ [type="submit"] width: 33% margin: 0 padding: 0 outline: none font-size: 20px background: $color-custom-secondary color: white /** The send button when the cursor hovers over it */ &:hover background: $color-custom-primary
@media screen and (max-width: 768px)
#contact /** Making sure there is a small gap on the left and right sides between the * form and the screen */ #contact-form width: 90% text-align: center