alien-minimalistic 0.10.0

data/_sass/2-base/milligram/_Table.sass

@@ -0,0 +1,19 @@
+
+// Table
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+table
+	border-spacing: 0
+	width: 100%
+
+td,
+th
+	border-bottom: .1rem solid $color-quinary
+	padding: 1.2rem 1.5rem
+	text-align: left
+
+	&:first-child
+		padding-left: 0
+
+	&:last-child
+		padding-right: 0

data/_sass/2-base/milligram/_Typography.sass

@@ -0,0 +1,48 @@
+
+// Typography
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+b,
+strong
+	font-weight: bold
+
+p
+	margin-top: 0
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+	font-weight: 300
+	letter-spacing: -.1rem
+	margin-bottom: 2.0rem
+	margin-top: 0
+
+h1
+	font-size: 4.6rem
+	line-height: 1.2
+
+h2
+	font-size: 3.6rem
+	line-height: 1.25
+
+h3
+	font-size: 2.8rem
+	line-height: 1.3
+
+h4
+	font-size: 2.2rem
+	letter-spacing: -.08rem
+	line-height: 1.35
+
+h5
+	font-size: 1.8rem
+	letter-spacing: -.05rem
+	line-height: 1.5
+
+h6
+	font-size: 1.6rem
+	letter-spacing: 0
+	line-height: 1.4

data/_sass/2-base/milligram/_Utility.sass

@@ -0,0 +1,18 @@
+
+// Utility
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// Clear a float with .clearfix
+.clearfix
+
+	&:after
+		clear: both
+		content: ' ' // The space content is one way to avoid an Opera bug.
+		display: table
+
+// Float either direction
+.float-left
+	float: left
+
+.float-right
+	float: right

data/_sass/2-base/milligram/_milligram.sass

@@ -0,0 +1,19 @@
+
+// Sass Modules
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+@import Color
+@import Base
+@import Blockquote
+@import Button
+@import Code
+@import Divider
+@import Form
+@import Grid
+@import Link
+@import List
+@import Spacing
+@import Table
+@import Typography
+@import Image
+@import Utility

data/_sass/3-sections/_404.sass

@@ -0,0 +1,25 @@
+/** This is a custom 404 page that Github Pages would load if the user tries
+  * to access invalid paths in the website
+  */
+#error-404
+  text-align: center
+  margin-top: 50px
+
+  /** The main header of the page that shows the error code 404
+    */
+  #header-404
+    font-weight: 600
+    font-size: 15vw
+
+  /** The message for the users regarding the 404 error
+    */
+  .message-404
+    margin: 0px auto 0px auto
+
+    /** There should be some margin after the first statement
+    &:first-of-type
+      margin-bottom: 20px
+
+    /** Margin at the bottom of the message
+    &:last-of-type
+      margin-bottom: 50px

data/_sass/3-sections/_about.sass

@@ -0,0 +1,62 @@
+/** The about page talks about the background of the author
+  */
+#about
+  margin-top: 50px
+  margin-bottom: 50px
+
+  /** The container that holds the profile-picture
+    */
+  #about-image
+    display: block
+    width: 200px
+    height: 200px
+    margin: auto
+
+    /** The image element that loads the profile-picture
+      *
+      * border-radius - Ensures the profile-picture is placed in a circle and
+      * not a box
+      */
+    #profile-picture
+      width: 100%
+      height: 100%
+      border-radius: 50%
+
+  /** The container that hold the header and the 'about' content
+    */
+  #about-content
+    width: 100%
+    max-width: 1012px
+    margin: 50px auto 50px auto
+
+    /** The intro statement of the author
+      */
+    #about-intro
+      font-size: 34px
+      font-weight: 600
+      color: $color-custom-primary
+
+@media screen and (max-width: 768px)
+  #about
+
+    /** Resizing the image container
+      */
+    #about-image
+      width: 180px
+      height: 180px
+
+    /** Resizing the intro statement's font
+      */
+    #about-content
+      #about-intro
+        font-size: 30px
+
+@media screen and (max-width: 400px)
+  #about
+      /** Making sure the profile picture according to the width and
+        * height percentages
+        */
+      #profile-picture
+        width: 90%
+        height: 90%
+        border-radius: 50%

data/_sass/3-sections/_articles.sass

@@ -0,0 +1,42 @@
+/** The articles table of content presents the list of articles on the site to
+  * the users
+  */
+#table-of-articles
+  width: 90%
+  max-width: 1012px
+  margin: 50px auto 50px auto
+
+  /** The articles page header
+    */
+  #article-page-header
+    margin: 0px auto 0px auto
+    font-size: 34px
+    font-weight: 600
+    text-align: center
+    color: $color-custom-primary
+
+  /** The div holding the article title and date of publication
+    */
+  .post
+    border-bottom: 1px solid $color-light-grey
+
+    /** The first instance should be 50px away from the page header
+      */
+    &:first-of-type
+      margin-top: 50px
+
+    /** The last instance should not have a border-bottom
+      */
+    &:last-of-type
+      border: none
+
+    /** The article title
+      */
+    .post-title
+      font-size: 18px
+      margin-bottom: 0px
+
+    /** The article data of publication
+      */
+    .post-date
+      margin-top: 0px

data/_sass/3-sections/_contact.sass

@@ -0,0 +1,84 @@
+/** 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

data/_sass/3-sections/_footer.sass

@@ -0,0 +1,76 @@
+/** The most important thing about the footer is it is stuck to the bottom of
+  * the screen even when the content is less than the height of the screen
+  *
+  * position - Needed to make the footer stick to the bottom
+  * right, bottom, left - Set to 0 to not move the footer if the content is less
+  * z-index - Set to place the footer behind the mobile-header-extended-background
+  */
+#site-footer
+  position: absolute
+  right: 0
+  bottom: 0
+  left: 0
+  width: 100%
+  z-index: -1
+
+  /** As the name suggests, it separates the footer from the rest of the page
+    *
+    * margin - Set to auto to center the hr in the page
+    */
+  #footer-demarcation
+    max-width: 1012px
+    width: 30%
+    margin: auto
+    border-top: 1px solid $color-light-grey
+
+  /** Holds the footer navigation and fine print
+    */
+  #footer-nav-container
+    width: 50%
+    margin: 30px auto 10px auto
+    text-align: center
+
+    /** Holds the the footer navigation
+      */
+    #footer-nav-menu-icons-container
+      width: 100%
+      height: 50px
+
+      /** The styles for the individual footer icon
+        */
+      .footer-menu-icon
+        display: inline-block
+        width: 50px
+        height: 50px
+        margin: 0 5px 0 5px
+        fill: $color-custom-secondary
+
+        &:hover
+          fill: $color-dark-grey
+
+    /** Holds the fine print text
+      */
+    #fine-print
+      margin-top: 30px
+      margin-bottom: 30px
+
+      /** The styles for the fine print test
+        */
+      .fint-print-text
+        margin: auto
+        font-size: 14px
+        text-align: center
+
+@media screen and (max-width: 768px)
+  #site-footer
+
+    /** Changing the length of the separator with respect to the screen for
+      * mobile devices
+      */
+    #footer-demarcation
+      width: 90%
+
+    /** Changing the width of the footer's body
+      */
+    #footer-nav-container
+      width: 90%

data/_sass/3-sections/_header.sass

@@ -0,0 +1,241 @@
+/** Setting the main header background strip at the top
+  *
+  * position - This will fix the header at the top even while scrolling
+  */
+#site-header
+  position: fixed
+  width: 100%
+  height: 110px
+  background: $color-custom-secondary
+
+  /** The vegburger toggle box and the mobile expanded mode
+    * header background div are turned off for the moment
+    */
+  #header-vegburger-toggle, #mobile-header-extended-background
+    display: none
+
+  /** The main navigation control container holds the logo
+    * and navigation icons
+    *
+    * max-width - The navgiation container won't expand beyond 1012px
+    * margin - Set to auto to center the container inside the header
+    */
+  #header-nav-container
+    width: 85%
+    height: 100%
+    max-width: 1012px
+    margin: auto
+
+    /** Setting up the site's logo text
+      *
+      * margin - Removing the default margins set in the standard overrides
+      * line-height - Vertically aligns the text (by setting to height of the div)
+      */
+    #logo-text
+      float: left
+      width: 320px
+      height: 100%
+      margin: auto
+      line-height: 110px
+      font-weight: 700
+      font-size: 3rem
+
+      /** Couldn't change the color of the text from the parent h1 tag for some
+        * reason
+        */
+      a
+        color: $color-white
+
+      &:hover
+        a
+          color: $color-light-grey
+
+    /** The vegburger icon is turned off for the moment
+      *
+      * user-select - Stops highlighting the vegburger icon when selected
+      */
+    #vegburger
+      display: none
+      user-select: none
+
+    /** Setting up the sub container which holds the navigation icons and menu
+      */
+    #header-nav-menu-icons-container
+      float: right
+      width: 300px
+      height: 100%
+
+      /** Handling the individual menu items
+        *
+        * float - Not sure why this is required, without it the menu
+        * items overflow from the container
+        */
+      .header-nav-menu-item
+        float: left
+        width: 75px
+        height: 110px
+
+        &:hover
+          /** Moves the menu icon up when the mouse hovers over the menu item
+            */
+          .header-nav-menu-icon
+            position: relative
+            bottom: 10px
+
+          /** Displays the menu name when the mouse hovers over the menu item
+            */
+          .header-nav-menu-text
+            display: block
+
+        /** Sets up the navigation icon
+          *
+          * margin - Set to auto to center the icon inside the div
+          * fill - Gives a color to the svg icon
+          */
+        .header-nav-menu-icon
+          width: 60%
+          height: 100%
+          margin: auto
+          fill: $color-white
+
+        /** Sets up the menu name text
+          *
+          * position - Set to relative to move the text inside the menu-icon
+          * display - Sets the text to none until mouse hover
+          * bottom - Offset required to move the text so that it overlaps
+          * with the menu icon
+          */
+        .header-nav-menu-text
+          display: none
+          position: relative
+          bottom: 33px
+          width: 100%
+          height: 30%
+          margin: 0px
+          text-align: center
+          font-size: 14px
+          color: $color-white
+/**
+  * Since the header is positioned to be fixed, the content in the page
+  * can slip behind the header at the top as one scrolls down.
+  * So, a header-spacer is required to make the content
+  * appear after the header at the top.
+  */
+.header-spacer
+  height: 110px
+
+@media screen and (max-width: 768px)
+  /** Changing the header size
+    */
+  #site-header
+    height: 80px
+
+    /** When the vegburger icon is pressed, it sets the toggle (checkbox)
+      * input to checked. This triggers the nav bar to go into the expanded
+      * mode in mobile devices
+      *
+      * display - The flat black background is made visible
+      * position - Fixed so that it moves with the header until it is closed
+      * height & width - vh and vw allows for the background to be set to
+      * the height and width of the viewport
+      * z-index - Puts the background behind the logo and vegburger icon in DOM
+      * stack
+      */
+    #header-vegburger-toggle:checked + #mobile-header-extended-background
+      display: block
+      position: fixed
+      z-index: 1
+      width: 100%
+      height: 100%
+      width: 100vw
+      height: 100vh
+      background-color: $color-custom-secondary
+
+    /** On toggle behind checked, the menu icons and text need to be
+      * shown in mobile devices.
+      */
+    #header-vegburger-toggle:checked + #mobile-header-extended-background + #header-nav-container
+      /** Resetting the height to make the container ready to hold
+        * header-nav-menu-icons-container
+        */
+      height: 500px
+      position: relative
+      z-index: 1
+
+      /** Resets the height of the logo text
+        */
+      #logo-text
+        height: 80px
+
+      /** The navigation icons can now be showed
+        */
+      #header-nav-menu-icons-container
+        display: block
+        width: 100%
+        height: 300px
+
+        /** The menu items now need to appear like in a list
+          * under the main header
+          *
+          * border-top: Demarcation between the menu items
+          */
+        .header-nav-menu-item
+          display: block
+          width: 100%
+          height: 50px
+          margin: 10px 0px 10px 0px
+          border-top: 1px solid $color-secondary
+
+          /** Sets the menu icon
+            */
+          .header-nav-menu-icon
+            position: static
+            float: left
+            width: 35px
+            height: 100%
+
+          /** Sets the menu text
+            */
+          .header-nav-menu-text
+            display: block
+            position: static
+            float: right
+            width: 80%
+            height: 100%
+            text-align: left
+            font-size: 20px
+            line-height: 50px
+
+    /** Sets up the initial look for the header-nav-container
+      */
+    #header-nav-container
+      #logo-text
+        width: 200px
+        font-size: 2rem
+        line-height: 80px
+
+      /** Setting up the vegburger icon
+        *
+        * cursor - Turns the cursor to a pointer while hovering over the icon
+        */
+      #vegburger
+        display: block
+        float: right
+        width: 30px
+        height: 80px
+        margin: 0px
+        line-height: 80px
+        text-align: center
+        font-size: 2.5rem
+        color: $color-white
+        cursor: pointer
+
+      /** Icons are not displayed until the vegburger is selected
+        */
+      #header-nav-menu-icons-container
+        display: none
+
+  /** Resetting the header-spacer height to match new header's height
+    */
+  .header-spacer
+    height: 80px