mirror of
https://github.com/arsenetar/arsenetar.github.io.git
synced 2026-03-16 10:31:38 +00:00
Convert Assets
Assets have been converted as follows: - Change to gulp instead of grunt for build system - Remove bower and manage with npm instead - Change to postcss instead of sass - Change to Pure.css instead of foundation (lighter weight) - Update Icon Font - Initial rework of site styling (layout will be committed with updated style later) - Removed extra js which was not really needed - Built js and css will be in the assets/dist directory This really should have been probably 20 commits with a rebase or something...
This commit is contained in:
25
assets/css/_icon_codes.css
Normal file
25
assets/css/_icon_codes.css
Normal file
@@ -0,0 +1,25 @@
|
||||
.icon-fork:before { content: '\e800'; } /* '' */
|
||||
.icon-lightbulb:before { content: '\e801'; } /* '' */
|
||||
.icon-bug:before { content: '\e802'; } /* '' */
|
||||
.icon-leaf:before { content: '\e803'; } /* '' */
|
||||
.icon-database:before { content: '\e804'; } /* '' */
|
||||
.icon-up-open:before { content: '\e805'; } /* '' */
|
||||
.icon-award:before { content: '\e806'; } /* '' */
|
||||
.icon-key:before { content: '\e807'; } /* '' */
|
||||
.icon-megaphone:before { content: '\e808'; } /* '' */
|
||||
.icon-linkedin:before { content: '\e809'; } /* '' */
|
||||
.icon-github:before { content: '\e80a'; } /* '' */
|
||||
.icon-gamepad:before { content: '\e80b'; } /* '' */
|
||||
.icon-plug:before { content: '\e80c'; } /* '' */
|
||||
.icon-terminal:before { content: '\e80d'; } /* '' */
|
||||
.icon-beaker:before { content: '\e80e'; } /* '' */
|
||||
.icon-gauge:before { content: '\e80f'; } /* '' */
|
||||
.icon-suitcase:before { content: '\e810'; } /* '' */
|
||||
.icon-music:before { content: '\e811'; } /* '' */
|
||||
.icon-videocam:before { content: '\e812'; } /* '' */
|
||||
.icon-camera:before { content: '\e813'; } /* '' */
|
||||
.icon-book:before { content: '\e814'; } /* '' */
|
||||
.icon-tasks:before { content: '\e815'; } /* '' */
|
||||
.icon-chart-bar:before { content: '\e816'; } /* '' */
|
||||
.icon-bookmark:before { content: '\e817'; } /* '' */
|
||||
.icon-tag:before { content: '\e818'; } /* '' */
|
||||
130
assets/css/_icons.css
Normal file
130
assets/css/_icons.css
Normal file
@@ -0,0 +1,130 @@
|
||||
/*
|
||||
* PostCss Icon Fonts
|
||||
*/
|
||||
|
||||
/*
|
||||
* Main File icons.css
|
||||
* Version: 0.5
|
||||
* Created By: Andrew Senetar
|
||||
* Date: August, 7 2013
|
||||
* Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello
|
||||
*/
|
||||
|
||||
/*
|
||||
* Defaults
|
||||
*/
|
||||
:root {
|
||||
--set: voltaicideas;
|
||||
|
||||
/* Colors (from Font Awesome) */
|
||||
--iconBorderColor: #eee;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "var(--set)";
|
||||
src: url("../fonts/var(--set)");
|
||||
src: url("../fonts/var(--set).eot#iefix") format('embedded-opentype'),
|
||||
url("../fonts/var(--set).woff") format('woff'),
|
||||
url("../fonts/var(--set).ttf") format('truetype'),
|
||||
url("../fonts/var(--set).svg#fontello") format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* global icon styles (from Foundation Icons + Font Awesome)
|
||||
*/
|
||||
|
||||
/* Icon font Styles */
|
||||
[class*='icon-'] {
|
||||
background-image: none;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
display: inline;
|
||||
height: auto;
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
speak: none;
|
||||
font-family: "var(--set)";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-decoration: inherit;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
[class*='icon-']:before {
|
||||
text-decoration: inherit;
|
||||
display: inline-block;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
/* Icon borders (from Font Awesome) */
|
||||
|
||||
[class*="border icon-"] {
|
||||
border: solid 1px var(--iconBorderColor);
|
||||
padding: .2em .25em .15em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Icon sizes (from Font Awesome) */
|
||||
|
||||
[class*="large icon-"]:before {
|
||||
vertical-align: -10%;
|
||||
font-size: 1.333em;
|
||||
}
|
||||
|
||||
[class*="huge icon-"]:before {
|
||||
vertical-align: -17%;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
[class*="2x icon-"] {
|
||||
font-size: 2em;
|
||||
& .border {
|
||||
border-width: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="3x icon-"] {
|
||||
font-size: 3em;
|
||||
& .border {
|
||||
border-width: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="4x icon-"] {
|
||||
font-size: 4em;
|
||||
& .border {
|
||||
border-width: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="5x icon-"] {
|
||||
font-size: 5em;
|
||||
& .border {
|
||||
border-width: 5px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Fixes
|
||||
*/
|
||||
|
||||
/* makes sure icons active on rollover in links (from Font Awesome) */
|
||||
|
||||
a [class*="icon-"]:before {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*
|
||||
* Actual Icons
|
||||
*/
|
||||
@import "_icon_codes";
|
||||
36
assets/css/_pygments.css
Normal file
36
assets/css/_pygments.css
Normal file
@@ -0,0 +1,36 @@
|
||||
.highlight{
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
font-family: 'Source Code Pro', 'Consolas', Monaco, monospace;
|
||||
overflow: auto;
|
||||
margin-bottom: 16px;
|
||||
pre{
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
font-family: inherit;
|
||||
background-color: var(--secondaryColor);
|
||||
border-radius: var(--globalRadius);
|
||||
padding: 3px;
|
||||
padding-left: 5px;
|
||||
line-height: 23px;
|
||||
overflow-x: auto;
|
||||
word-break: inherit;
|
||||
margin: 0;
|
||||
|
||||
code {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&.language-text {
|
||||
color: color(var(--secondaryColor) contrast(75%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--secondaryColor);
|
||||
color: color(var(--secondaryColor) contrast(75%));
|
||||
padding: 3px 7px;
|
||||
border-radius: var(--globalRadius);
|
||||
}
|
||||
1
assets/css/_pygments_friendly.css
Normal file
1
assets/css/_pygments_friendly.css
Normal file
@@ -0,0 +1 @@
|
||||
/*
|
||||
10
assets/css/_settings.css
Normal file
10
assets/css/_settings.css
Normal file
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Settings for Stylesheets
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primaryColor: #9b160d;
|
||||
--secondaryColor: #e7e7e7;
|
||||
--globalBgColor: #ffffff;
|
||||
--globalRadius: 3px;
|
||||
}
|
||||
255
assets/css/_sideMenu.css
Normal file
255
assets/css/_sideMenu.css
Normal file
@@ -0,0 +1,255 @@
|
||||
/*
|
||||
* Layout modified from the Pure.css Responsive Side Menu Example
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Variables
|
||||
*/
|
||||
:root {
|
||||
--menuWidth: 220px;
|
||||
--menuSelectedColor: var(--primaryColor);
|
||||
--menuBgColor: var(--secondaryColor);
|
||||
}
|
||||
|
||||
/*
|
||||
* Add transition to containers so they can push in and out.
|
||||
*/
|
||||
#layout,
|
||||
#menu,
|
||||
.menu-link {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
/*
|
||||
* This is the parent `<div>` that contains the menu and the content area.
|
||||
*/
|
||||
#layout {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
|
||||
&.active {
|
||||
#menu {
|
||||
left: var(--menuWidth);
|
||||
width: var(--menuWidth);
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
left: var(--menuWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Main area of the page containing the header, content, and footer.
|
||||
*/
|
||||
#main {
|
||||
background-color: var(--globalBgColor);
|
||||
|
||||
/* Main Header of the page with title and subtitle */
|
||||
#mainHeader {
|
||||
margin: 0;
|
||||
color: color(var(--globalBgColor) contrast(60%));
|
||||
text-align: center;
|
||||
padding: 2.5em 2em 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h1 {
|
||||
margin: 0.2em 0;
|
||||
font-size: 3em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-weight: 300;
|
||||
color: color(var(--globalBgColor) contrast(0%) l(+30%));
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main content area of the page */
|
||||
#mainContent {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0 2em;
|
||||
max-width: 800px;
|
||||
margin-bottom: 50px;
|
||||
line-height: 1.6em;
|
||||
|
||||
.content-subhead {
|
||||
margin: 50px 0 20px 0;
|
||||
font-weight: 300;
|
||||
color: color(var(--globalBgColor) contrast(0%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
|
||||
appears on the left side of the page.
|
||||
*/
|
||||
|
||||
#menu {
|
||||
margin-left: -var(--menuWidth); /* "#menu" width */
|
||||
width: var(--menuWidth);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000; /* so the menu or its navicon stays above all content */
|
||||
background: var(--menuBgColor);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/*
|
||||
* All anchors inside the menu should be styled like this.
|
||||
*/
|
||||
a {
|
||||
color: color(var(--menuBgColor) contrast(40%));
|
||||
border: none;
|
||||
padding: 0.6em 0 0.6em 0.6em;
|
||||
}
|
||||
|
||||
/*
|
||||
*Remove all background/borders, since we are applying them to #menu.
|
||||
*/
|
||||
.pure-menu {
|
||||
/* Header item */
|
||||
.pure-menu-heading {
|
||||
background: var(--menuSelectedColor);
|
||||
font-size: 110%;
|
||||
color: color(var(--menuSelectedColor) contrast(100%));
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
li {
|
||||
/* Hover and focus background */
|
||||
a:hover, a:focus {
|
||||
background: color(var(--menuBgColor) l(+5%));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Border to divide groups */
|
||||
.menu-item-divided {
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
/* Selected item */
|
||||
.pure-menu-selected {
|
||||
background: var(--menuSelectedColor);
|
||||
|
||||
a {
|
||||
color: color(var(--menuSelectedColor) contrast(75%) s(0%));
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: color(var(--menuSelectedColor) l(+5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
|
||||
|
||||
/*
|
||||
The button to open/close the Menu is custom-made and not part of Pure. Here's
|
||||
how it works:
|
||||
*/
|
||||
|
||||
/*
|
||||
`.menu-link` represents the responsive menu toggle that shows/hides on
|
||||
small screens.
|
||||
*/
|
||||
.menu-link {
|
||||
position: fixed;
|
||||
display: block; /* show this only on small screens */
|
||||
top: 0;
|
||||
left: 0; /* "#menu width" */
|
||||
background: color(var(--globalBgColor) contrast(100%));
|
||||
background: color(var(--globalBgColor)B3 contrast(100%));
|
||||
font-size: 10px; /* change this value to increase/decrease button size */
|
||||
z-index: 10;
|
||||
width: 2em;
|
||||
height: auto;
|
||||
padding: 2.1em 1.6em;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: color(var(--globalBgColor) contrast(100%));
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span, span:before, span:after {
|
||||
background-color: color(var(--globalBgColor) s(0%));
|
||||
width: 100%;
|
||||
height: 0.2em;
|
||||
}
|
||||
|
||||
span:before, span:after {
|
||||
position: absolute;
|
||||
margin-top: -0.6em;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
span:after {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- Responsive Styles (Media Queries) ------------------------------------- */
|
||||
|
||||
/*
|
||||
Hides the menu at `48em`, but modify this based on your app's needs.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
.header,
|
||||
.content {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
#layout {
|
||||
padding-left: var(--menuWidth); /* left col width "#menu" */
|
||||
left: 0;
|
||||
}
|
||||
#menu {
|
||||
left: var(--menuWidth);
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
position: fixed;
|
||||
left: var(--menuWidth);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout.active .menu-link {
|
||||
left: var(--menuWidth);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
/* Only apply this when the window is small. Otherwise, the following
|
||||
case results in extra padding on the left:
|
||||
* Make the window small.
|
||||
* Tap the menu to trigger the active state.
|
||||
* Make the window large again.
|
||||
*/
|
||||
#layout.active {
|
||||
position: relative;
|
||||
left: 0; /* var(--menuWidth); */
|
||||
}
|
||||
}
|
||||
5422
assets/css/app.css
5422
assets/css/app.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user