mmoser/ildi-wp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

starting focused styling

Browse Source
This commit is contained in:
Mark Moser 2018-08-10 15:08:34 -05:00
parent 85602ff8f9
commit be874660e3
14 changed files with 510 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
dev/package-lock.json generated
View File

@ -54,7 +54,8 @@
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
"ansi-escapes": {
"version": "3.1.0",
@ -240,7 +241,8 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
},
"bcrypt-pbkdf": {
"version": "1.0.1",
@ -321,6 +323,7 @@
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -534,7 +537,8 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
},
"concat-stream": {
"version": "1.6.2",
@ -586,11 +590,6 @@
"boom": "2.x.x"
}
},
"css-parse": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
"integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs="
},
"css-tree": {
"version": "1.0.0-alpha25",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
@ -667,6 +666,7 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
@ -1229,7 +1229,8 @@
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"fstream": {
"version": "1.0.11",
@ -1350,6 +1351,7 @@
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
"integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -1872,6 +1874,7 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
@ -1880,7 +1883,8 @@
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true
},
"inquirer": {
"version": "3.3.0",
@ -2391,6 +2395,7 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -2398,12 +2403,14 @@
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
}
@ -2411,7 +2418,8 @@
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"multimatch": {
"version": "2.1.0",
@ -2551,14 +2559,6 @@
"abbrev": "1"
}
},
"normalize": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/normalize/-/normalize-0.3.1.tgz",
"integrity": "sha1-XfSj/hbALmH7Mf8vtEigf0pAhKY=",
"requires": {
"stylus": "*"
}
},
"normalize-package-data": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@ -2577,6 +2577,11 @@
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
},
"normalize.css": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz",
"integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A=="
},
"npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@ -2626,6 +2631,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1"
}
@ -2730,7 +2736,8 @@
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
"path-is-inside": {
"version": "1.0.2",
@ -3451,11 +3458,6 @@
}
}
},
"sax": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
"integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE="
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@ -3545,14 +3547,6 @@
"hoek": "2.x.x"
}
},
"source-map": {
"version": "0.1.43",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
"integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
"requires": {
"amdefine": ">=0.0.4"
}
},
"spdx-correct": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
@ -3720,19 +3714,6 @@
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true
},
"stylus": {
"version": "0.54.5",
"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
"integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
"requires": {
"css-parse": "1.7.x",
"debug": "*",
"glob": "7.0.x",
"mkdirp": "0.5.x",
"sax": "0.5.x",
"source-map": "0.1.x"
}
},
"supports-color": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
@ -4122,7 +4103,8 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
},
"write": {
"version": "0.2.1",

2
dev/package.json
View File

@ -16,7 +16,7 @@
},
"dependencies": {
"jquery": "^3.3.1",
"normalize": "^0.3.1",
"normalize.css": "^8.0.0",
"smoothscroll-polyfill": "^0.4.3"
},
"devDependencies": {

35
dev/scss/components/_global-head.scss
View File

@ -3,40 +3,31 @@
flex-wrap: wrap;
align-content: center;
align-items: center;
margin: 0 auto $gutter;
margin: 0 auto;
width: 83%;
> * { flex: 0 0 auto; }
.social-menu {
order: 1;
width: 100%;
}
.search-form {
order: 2;
width: 100%;
}
.logo-banner {
order: 3;
width: 100%;
}
.header-menu {
order: 4;
width: 100%;
> * {
flex: 0 0 auto;
}
.logo-banner { order: 1; }
.search-form { order: 2; }
.header-menu { order: 3; }
.social-menu { order: 4; }
}
@media screen and (min-width: #{$screen-tablet}) {
.global-head {
width: $container-tablet;
.social-menu { order: 1; }
.search-form { order: 2; }
.logo-banner { order: 3; }
.header-menu { order: 4; }
.social-menu,
.search-form {
flex: 1 1 auto;
flex: 1 0 auto;
width: auto;
}

58
dev/scss/components/_header-menu.scss
View File

@ -1,15 +1,63 @@
.header-menu {
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
margin: 0;
flex-direction: column;
align-content: flex-start;
align-items: flex-start;
justify-content: flex-start;
margin: 5px 0;
padding: 0;
width: 100%;
list-style: none;
line-height: 1;
li {
flex: 1 0 auto;
margin: 0;
padding: 5px 10px;
padding: 0;
width: 100%;
}
a {
display: block;
padding: $gutter 0;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.125ch;
color: $di-purple;
font-weight: 700;
&:hover,
&:active {
background-color: $di-purple;
color: $copy-light;
}
}
}
@media screen and (max-width: #{$screen-tablet - 1}) {
.header-menu {
margin-left: -$gutter;
width: calc(100% + #{$gutter * 2});
a {
padding-right: $gutter;
padding-left: $gutter;
}
}
}
@media screen and (min-width: $screen-tablet) {
.header-menu {
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-around;
li { width: auto; }
li,
a {
text-align: center;
}
}
}

3
dev/scss/components/_logo-banner.scss Normal file
View File

@ -0,0 +1,3 @@
.logo-banner {
width: 100%;
}

31
dev/scss/components/_search-form.scss
View File

@ -1,24 +1,25 @@
.search-form {
[type="search"],
[type="text"] {
border-radius: 0;
display: flex;
align-content: center;
align-items: center;
justify-content: flex-start;
margin: $gutter 0;
width: 100%;
[type="submit"] {
flex: 0 0 auto;
border-left-width: 0;
}
label {
flex: 1 1 auto;
width: 100%;
}
}
@media screen and (min-width: #{$screen-tablet}) {
.search-form {
display: flex;
align-content: center;
align-items: center;
justify-content: flex-end;
[type="submit"] {
flex: 0 0 auto;
}
label {
flex: 1 1 auto;
max-width: 250px;
}
label { max-width: 250px; }
}
}

30
dev/scss/components/_social-menu.scss
View File

@ -4,7 +4,8 @@
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
padding: $gutter 0;
width: 100%;
list-style: none;
line-height: 1;
@ -12,5 +13,32 @@
flex: 0 0 auto;
margin: 0;
padding: 2px 8px;
&:first-of-type {
padding-left: 0;
}
}
a {
text-decoration: none;
color: $di-purple;
font-size: 14px;
&:hover,
&:active {
border-bottom: 1px solid $di-purple;
color: $di-purple;
}
}
footer & {
justify-content: flex-end;
}
}
@media screen and (max-width: #{$screen-tablet - 1}) {
.social-menu {
header & { display: none; }
}
}

11
dev/scss/elements/_inputs.scss
View File

@ -5,10 +5,21 @@ textarea,
[type="search"],
[type="tel"],
[type="text"] {
border-width: 1px;
border-style: solid;
border-radius: 0;
border-color: $gray-dark;
background-color: $white;
padding: 8px;
width: 100%;
}
[type="submit"] {
border-color: $gray-dark;
background-color: $white;
padding: 8px;
}
.select-wrapper {
padding: 7px 6px 6px;
width: 100%;

1
dev/scss/main.scss
View File

@ -43,6 +43,7 @@
// specific UI components. This is where majority of our work takes place
// and our UI components are often composed of Objects and Components
@import 'components/header-menu';
@import 'components/logo-banner';
@import 'components/home-loop';
@import 'components/global-head';
@import 'components/search-form';

6
dev/scss/settings/_colors.scss
View File

@ -6,3 +6,9 @@ $black: #000;
$copy-light: $white;
$copy-gray: $gray-light;
$copy-dark: $black;
$di-purple: #561eae;
$di-purple-light: #716f9f;
$di-orange: #f60;
$di-orange-light: #e68d48;

4
dev/scss/settings/_variables.scss
View File

@ -1,12 +1,12 @@
$container-tablet: 90vw;
$container-tablet-lg: 810px;
$container-desktop: 1080px;
$container-desktop-lg: 1680px;
$container-desktop-lg: 1080px;
$screen-tablet: 600px;
$screen-tablet-lg: 900px;
$screen-desktop: 1200px;
$screen-desktop-lg: 1800px;
$screen-desktop-lg: 1200px;
$gutter: 15px;

2
footer.php
View File

@ -1,4 +1,4 @@
<footer class="container">
<?php ildi_nav('social-menu'); ?>
<?php get_sidebar('footer-sponsors'); ?>
<?php ildi_nav('social-menu'); ?>
</footer>

344
style.css
View File

File diff suppressed because one or more lines are too long

2
style.css.map
View File

File diff suppressed because one or more lines are too long