diff --git a/style/alt.style.css b/style/alt.style.css index ae55ffe..ff5c6b6 100755 --- a/style/alt.style.css +++ b/style/alt.style.css @@ -94,14 +94,54 @@ body { font-family: Utopia, "Liberation Serif"; } +a { + background-color: transparent; + color: #1e6bb8; + text-decoration: none; +} + +a:active, +a:hover { + outline: 0; +} + +.btn { + display: inline-block; + margin-bottom: 1rem; + color: var(--primary); + background-color: var(--secondary); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 0.3rem; + transition: color 0.7s, background-color 0.7s, border-color 0.7s; +} + +.btn:hover { + background-color: white; + border-color: white; + color: black; +} + +.btn + .btn { + margin-left: 1rem; +} + @media screen and (min-width: 64em) { .project-name { font-size: 8rem; } - .main-content { + .main-content, + .project-tagline { font-size: 1.5rem; } + + .btn { + padding: 0.75rem 1rem; + } + + .site-footer { + font-size: 1rem; + } } @media screen and (min-width: 42em) and (max-width: 64em) { @@ -109,9 +149,19 @@ body { font-size: 4rem; } - .main-content { + .main-content, + .project-tagline { font-size: 1.25rem; } + + .btn { + padding: 0.6rem 0.9rem; + font-size: 0.9rem; + } + + .site-footer { + font-size: 1rem; + } } @media screen and (max-width: 42em) { @@ -119,66 +169,11 @@ body { font-size: 2rem; } - .main-content { + .main-content, + .project-tagline { font-size: 1rem; } -} -a { - background-color: var(--transparent); -} - -a:active, -a:hover { - outline: 0; -} - -a { - color: var(--tertiary); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -.btn { - display: inline-block; - margin-bottom: 1rem; - color: var(--primary); - background-color: var(--secondary); - border-color: rgba(255, 255, 255, 0.2); - border-style: solid; - border-width: 1px; - border-radius: 0.3rem; - transition: color 0.2s, background-color 0.2s, border-color 0.2s; -} - -.btn:hover { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - background-color: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.btn + .btn { - margin-left: 1rem; -} - -@media screen and (min-width: 64em) { - .btn { - padding: 0.75rem 1rem; - } -} - -@media screen and (min-width: 42em) and (max-width: 64em) { - .btn { - padding: 0.6rem 0.9rem; - font-size: 0.9rem; - } -} - -@media screen and (max-width: 42em) { .btn { display: block; width: 100%; @@ -190,6 +185,10 @@ a:hover { margin-top: 1rem; margin-left: 0; } + + .site-footer { + font-size: 0.9rem; + } } * { @@ -255,24 +254,6 @@ input::-moz-focus-inner { font-family: "Montserrat", sans-serif; } -@media screen and (min-width: 64em) { - .project-tagline { - font-size: 1.25rem; - } -} - -@media screen and (min-width: 42em) and (max-width: 64em) { - .project-tagline { - font-size: 1.15rem; - } -} - -@media screen and (max-width: 42em) { - .project-tagline { - font-size: 1rem; - } -} - footer, site-footer { font-family: "Montserrat", sans-serif; @@ -280,24 +261,6 @@ site-footer { display: block; } -@media screen and (min-width: 64em) { - .site-footer { - font-size: 1rem; - } -} - -@media screen and (min-width: 42em) and (max-width: 64em) { - .site-footer { - font-size: 1rem; - } -} - -@media screen and (max-width: 42em) { - .site-footer { - font-size: 0.9rem; - } -} - sub, sup { font-size: 75%; diff --git a/style/style.css b/style/style.css index 3b9a274..982dae6 100755 --- a/style/style.css +++ b/style/style.css @@ -7,10 +7,6 @@ html { -webkit-text-size-adjust: 100%; } -body { - margin: 0; -} - article, aside, details, @@ -45,15 +41,6 @@ template { display: none; } -a { - background-color: transparent; -} - -a:active, -a:hover { - outline: 0; -} - abbr[title] { border-bottom: 1px dotted; } @@ -229,6 +216,20 @@ body { font-size: 16px; line-height: 1.5; color: #606c71; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==") + repeat 0 0; + -webkit-animation: bg-scrolling-reverse 0.92s infinite; + /* Safari 4+ */ + -moz-animation: bg-scrolling-reverse 0.92s infinite; + /* Fx 5+ */ + -o-animation: bg-scrolling-reverse 0.92s infinite; + /* Opera 12+ */ + animation: bg-scrolling-reverse 0.92s infinite; + /* IE 10+ */ + -webkit-animation-timing-function: linear; + -moz-animation-timing-function: linear; + -o-animation-timing-function: linear; + animation-timing-function: linear; } #skip-to-content { @@ -250,31 +251,30 @@ body { } a { + background-color: transparent; color: #1e6bb8; text-decoration: none; } +a:active, a:hover { - text-decoration: underline; + outline: 0; } .btn { display: inline-block; margin-bottom: 1rem; - color: rgba(255, 255, 255, 0.7); - background-color: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.2); - border-style: solid; - border-width: 1px; + color: var(--primary); + background-color: var(--secondary); + border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.3rem; - transition: color 0.2s, background-color 0.2s, border-color 0.2s; + transition: color 0.7s, background-color 0.7s, border-color 0.7s; } .btn:hover { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - background-color: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); + background-color: white; + border-color: white; + color: black; } .btn + .btn { @@ -361,23 +361,6 @@ a:hover { } } -body { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==") - repeat 0 0; - -webkit-animation: bg-scrolling-reverse 0.92s infinite; - /* Safari 4+ */ - -moz-animation: bg-scrolling-reverse 0.92s infinite; - /* Fx 5+ */ - -o-animation: bg-scrolling-reverse 0.92s infinite; - /* Opera 12+ */ - animation: bg-scrolling-reverse 0.92s infinite; - /* IE 10+ */ - -webkit-animation-timing-function: linear; - -moz-animation-timing-function: linear; - -o-animation-timing-function: linear; - animation-timing-function: linear; -} - @media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem;