From 548a652d6675425dc17a3e1fe0b18c203acc26e6 Mon Sep 17 00:00:00 2001 From: drewcassidy Date: Fri, 24 Nov 2017 14:33:51 -0800 Subject: [PATCH] Work on lots of CSS magic --- Makefile | 2 + _includes/flag.html | 12 +- _includes/head.html | 5 +- _includes/header.html | 12 +- _includes/sidebar.html | 6 + _layouts/default.html | 20 +-- css/fnoots.css | 96 ++++++++++++++ css/style.scss | 243 +++++++++++++++++++++++++++++++----- index.html | 35 +++++- {_svg => svg}/circuits1.svg | 0 {_svg => svg}/circuits2.svg | 0 svg/flag.svg | 3 + 12 files changed, 375 insertions(+), 59 deletions(-) create mode 100644 Makefile create mode 100644 _includes/sidebar.html create mode 100644 css/fnoots.css rename {_svg => svg}/circuits1.svg (100%) rename {_svg => svg}/circuits2.svg (100%) create mode 100644 svg/flag.svg diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..bc6f804 --- /dev/null +++ b/Makefile @@ -0,0 +1,2 @@ +all: + bundle exec jekyll serve diff --git a/_includes/flag.html b/_includes/flag.html index cbd26ae..a247382 100644 --- a/_includes/flag.html +++ b/_includes/flag.html @@ -1,8 +1,6 @@ -
-
- {{include.name}} -
- +
  • + {{include.name}} + +
    • \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 0900f3a..e471ff3 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -3,7 +3,6 @@ {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy - - - + + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index 2f674f6..e647c8f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,9 +1,9 @@
    -

    Andrew Cassidy

    -
    \ No newline at end of file diff --git a/_includes/sidebar.html b/_includes/sidebar.html new file mode 100644 index 0000000..79d4d50 --- /dev/null +++ b/_includes/sidebar.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 298f503..fdf6465 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,15 +1,21 @@ - {% include head.html %} - +{% include head.html %} + + +
    + {% include header.html %} +
    - {% include header.html %} + {% include sidebar.html %}
    - {{ content }} + {{ content }}
    - - {% include footer.html %}
    - + + +
    + + \ No newline at end of file diff --git a/css/fnoots.css b/css/fnoots.css new file mode 100644 index 0000000..1b0c723 --- /dev/null +++ b/css/fnoots.css @@ -0,0 +1,96 @@ +/* latin-ext */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 400; + src: local('Barlow Regular'), local('Barlow-Regular'), url(https://fonts.gstatic.com/s/barlow/v1/YzSyOHtZUWdWTGx210qb7X-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 400; + src: local('Barlow Regular'), local('Barlow-Regular'), url(https://fonts.gstatic.com/s/barlow/v1/85USsdxXrj0ktofu610mIuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} +/* latin-ext */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 700; + src: local('Barlow Bold'), local('Barlow-Bold'), url(https://fonts.gstatic.com/s/barlow/v1/yS165lxqGuDghyUMXeu6xYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 700; + src: local('Barlow Bold'), local('Barlow-Bold'), url(https://fonts.gstatic.com/s/barlow/v1/8hNuYABG6RcCB7awZe-wJ5Bw1xU1rKptJj_0jans920.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} +/* latin */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 600; + src: local('Barlow SemiBold'), local('Barlow-SemiBold'), url(https://fonts.gstatic.com/s/barlow/v1/STGn7jeR41qcJTicY9WE5ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} +/* latin */ +@font-face { + font-family: 'Barlow'; + font-style: normal; + font-weight: 500; + src: local('Barlow Medium'), local('Barlow-Medium'), url(https://fonts.gstatic.com/s/barlow/v1/kIIp0WfvDOeW2tTGAi2QqZBw1xU1rKptJj_0jans920.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} +/* latin-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} +/* cyrillic */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/RjgO7rYTmqiVp7vzi-Q5UYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} +/* greek-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/LWCjsQkB6EMdfHrEVqA1KYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/xozscpT2726on7jbcb_pAoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 7a2bda2..33e05a6 100644 --- a/css/style.scss +++ b/css/style.scss @@ -1,51 +1,226 @@ --- --- -$blue: #26A6A6; +$background: #2B2A27; +$foreground: #EDE0CE; +$margin: darken($background, 8%); +$shadow: rgba(black, 0.3); -header { - left: 0; -} -#sidebar { - width: 25%; - left: 0; -} -.flagText { - top: 0; - left: 0; - bottom: 0; - height: 30%; - width: 100%; - position: absolute; - text-align: center; - margin: auto; - z-index: 2; +$blue: rgb(39, 167, 167); +$orange: rgb(236, 103, 55); +$green: rgb(188, 212, 42); +$magenta: rgb(168, 66, 114); +$sidebar-text: $background; +$sidebar-font: 'Barlow', sans-serif; + +$title-text: $foreground; +$title-font: 'Barlow', sans-serif; + +$body-text: $foreground; +$body-font: 'Open Sans', sans-serif; + + +::selection { + color: white; + background: $orange; /* WebKit/Blink Browsers */ } -.flag { - position: relative; - margin-top: 10px; - height: 50px; - width: 175px; - fill-opacity: 0; - left: -10px; - - svg { - position: relative; - float:right; - right:-25px; - } +::-moz-selection { + color: white; + background: $orange; /* WebKit/Blink Browsers */ } -.flag:hover { - fill-opacity: 100 !important; -} .blue { fill: $blue; background-color: $blue; } +.orange { + fill: $orange; + background-color: $orange; +} + +.green { + fill: $green; + background-color: $green; +} + +.magenta { + fill: $magenta; + background-color: $magenta; +} + +body { + margin: 0; + background-color: $margin; + color-profile: sRGB; +} + + +#box { + background-color: $background; + max-width: 800px; + + margin-left: auto; + margin-right: auto; + margin-top: 0; + height: 100%; + box-shadow: 0 0 4px 5px $shadow; + -moz-box-shadow: 0 0 4px 5px $shadow; + -webkit-box-shadow: 0 0 4px 5px $shadow; +} + +// HEADER + +#title { + margin:0; + padding: 10px; + font-family: $title-font; + color: $title-text; + font-weight: normal; + font-size: 28px; + + a { + color: inherit; + text-decoration: none; + } + + a:hover { + color: inherit; + text-decoration: underline; + } +} + +.slash { + display: inline-block; + vertical-align: -10%; + font: { + size: 36px; + } +} + +#main { + display: flex; +} + +#content { + padding: { + right: 20px; + left: 20px; + } + flex-grow: 1; + font-family: $body-font; + color: $body-text; + line-height: 1.5em; + + p { + margin: { + top: 0; + bottom: 15px; + } + } +} + + + +#sidebar { + flex-shrink: 0; + width: 180px; + margin: 0; + + padding: { + top: 5px; + bottom: 5px; + left: 0px; + } + background-color: $background; +} + +.flag { + display: inline-block; + text-align: center; + + position: relative; + padding: { + top: 5px; + bottom: 5px; + left: 0px; + } + //height: 60px; + width: 90%; + left: -3px; + + fill-opacity: 0; + + + .flagButton { + //position: absolute; + display: block; + float: left; + + left: 0; + height: 50px; + width: 160px; + + border-radius: 0 5px 5px 0; + + .flagText { + z-index: 2; + float: right; + width: 160px; + text-align: center; + font-family: $sidebar-font; + color: $sidebar-text; + font-size: 20px; + text-align: center; + font-weight: 600; + + height: 60%; + top: 50%; + bottom: 50%; + padding-top: 10px; + } + } +} + +.flag:hover { + + .flagButton { + width: 170px; + border-radius: 0; + } + /* + content: ""; + display: inline-block; + position: absolute; + left: 0px; + top: 25px; + width: 0; + height: 0; + border-top: 25px solid transparent; + border-bottom: 25px solid transparent; + + } + + .blue::after { + border-left: 20px solid $blue; + } + + .orange::after { + border-left: 20px solid $orange; + } + + .green::after { + border-left: 20px solid $green; + } + + .magenta::after { + border-left: 20px solid $magenta; */ +} + + + footer { font-size: 1em; text-align: center; diff --git a/index.html b/index.html index 036c436..0385ac1 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,34 @@ +--- +layout: default --- -layout: default ---- \ No newline at end of file +

    Dispassionate extraterrestrial observer science! Hypatia Flatland, as a patch of light preserve and cherish that pale blue + dot, cosmos cosmic ocean, something incredible is waiting to be known? Vastness is bearable only through love! Across + the centuries, colonies Sea of Tranquility tendrils of gossamer clouds cosmos not a sunrise but a galaxyrise venture, + vanquish the impossible cosmos radio telescope. Consciousness! +

    + +

    As a patch of light Hypatia hundreds of thousands ship of the imagination? Intelligent beings! Circumnavigated. Vangelis. + Cosmic ocean Flatland trillion Tunguska event! Stirred by starlight vastness is bearable only through love as a patch + of light billions upon billions, rogue permanence of the stars white dwarf how far away vastness is bearable only through + love bits of moving fluff billions upon billions. +

    +

    Trillion rings of Uranus intelligent beings realm of the galaxies, prime number kindling the energy hidden in matter! Preserve + and cherish that pale blue dot. Apollonius of Perga billions upon billions culture concept of the number one Vangelis + paroxysm of global death. Cambrian explosion, hydrogen atoms intelligent beings cosmic fugue light years great turbulent + clouds hearts of the stars. Cambrian explosion rich in mystery of brilliant syntheses the sky calls to us, birth, rings + of Uranus. Billions upon billions. +

    +

    Descended from astronomers. Quasar something incredible is waiting to be known white dwarf, light years, Cambrian explosion + radio telescope the only home we've ever known hearts of the stars billions upon billions brain is the seed of intelligence + hydrogen atoms! Tendrils of gossamer clouds colonies extraordinary claims require extraordinary evidence tesseract the + sky calls to us network of wormholes from which we spring, birth, something incredible is waiting to be known, Rig Veda, + cosmic ocean inconspicuous motes of rock and gas made in the interiors of collapsing stars. +

    +

    The ash of stellar alchemy? Explorations dispassionate extraterrestrial observer paroxysm of global death! Are creatures + of the cosmos emerged into consciousness Orion's sword, Drake Equation, explorations. Bits of moving fluff radio telescope + galaxies a mote of dust suspended in a sunbeam rich in heavy atoms! Rig Veda consciousness, astonishment Sea of Tranquility, + decipherment as a patch of light. Rich in mystery. Science Vangelis, tesseract light years. Concept of the number one + Vangelis Flatland. Rings of Uranus tingling of the spine billions upon billions rogue, birth colonies at the edge of + forever white dwarf Flatland rings of Uranus. Gathered by gravity and billions upon billions upon billions upon billions + upon billions upon billions upon billions? +

    \ No newline at end of file diff --git a/_svg/circuits1.svg b/svg/circuits1.svg similarity index 100% rename from _svg/circuits1.svg rename to svg/circuits1.svg diff --git a/_svg/circuits2.svg b/svg/circuits2.svg similarity index 100% rename from _svg/circuits2.svg rename to svg/circuits2.svg diff --git a/svg/flag.svg b/svg/flag.svg new file mode 100644 index 0000000..0a064bd --- /dev/null +++ b/svg/flag.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file