Commit bfabe51d authored by Daniel Shumway's avatar Daniel Shumway

style: typography and mobile improvements

parent 6ccd2129
Pipeline #35960596 passed with stage
in 48 seconds
......@@ -211,7 +211,7 @@
<section id="preamble">
<p class="header id=header">
<strong>Update: I<span class="quote single-close">'</span>ve talked with UBM<span class="quote single-close">'</span>s security team, they are currently working on fixes and say that they<span class="quote single-close">'</span>ll have more updates within around 7 days. I<span class="quote single-close">'</span>ll update this post with any new information as I get it.</strong>
<strong>Update:</strong> I<span class="quote single-close">'</span>ve talked with UBM<span class="quote single-close">'</span>s security team, they are currently working on fixes and say that they<span class="quote single-close">'</span>ll have more updates within around 7 days. I<span class="quote single-close">'</span>ll update this post with any new information as I get it.
</p>
</section>
......
......@@ -5,7 +5,7 @@
<link>https://danshumway.com</link>
<description>I build things on the Internet, and I post about them here.</description>
<atom:link href="https://danshumway.com/rss.xml" rel="self" type="application/rss+xml" />
<lastBuildDate>Thu, 08 Nov 2018 13:35:02 GMT</lastBuildDate><item>
<lastBuildDate>Fri, 09 Nov 2018 01:28:21 GMT</lastBuildDate><item>
<title>Disclosing Multiple Gamasutra Vulnerabilities</title>
<link>https://danshumway.com/blog/gamasutra-vulnerabilities</link>
<guid>https://danshumway.com/blog/gamasutra-vulnerabilities</guid>
......
......@@ -41,14 +41,20 @@
font-stretch: normal;
src: url("/fonts/WOFF/heuristica/700.woff") format("woff"), url("/fonts/OTF/Heuristica-Bold.otf") format("opentype"); }
/* ---------------- Resets --------------------- */
/* ----------- SITEWIDE VARIABLES--------------- */
/* ---------------- Mixins --------------------- */
/*
* Scale is probably unnecessary here, because setting font-size on its own is
* sufficient. But leave it for now. Maybe I'll want to do something special in
* the future.
*/
/* ------------ Global Styles ------------------- */
html, body, h1, h2 {
margin: 0;
padding: 0; }
/* ----------------- Page Styles ---------------- */
html {
background-color: whitesmoke;
background-color: #fcfcfc;
height: calc(100% - 0.2rem);
margin: 0.1rem;
width: calc(100% - 0.2rem); }
......@@ -78,25 +84,22 @@ header {
flex-direction: row;
align-items: baseline;
padding-bottom: 0.75rem; }
header nav ul .site-logo {
font-size: 2.5em;
font-weight: normal;
font-style: normal; }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent; }
header nav ul .site-logo::after {
/*content: ':';*/
/* For eventual nav */
/*margin-right: 0.25em;*/ }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent;
max-width: 0; }
header nav ul .resume {
margin-left: auto;
padding-right: 5em; }
@media only screen and (max-width: 45rem) {
header nav ul .resume {
padding-right: 1em; } }
main {
max-width: 80rem;
margin: 0 auto; }
......@@ -105,6 +108,10 @@ main {
* Hanging quotes:
*
* These are fairly font-dependent and may need to be updated in the future.
* Question -- how can I generalize these so that they're easy to update
* when used with other fonts?
*
* Probably set them as a mixin? Pass in the font somehow?
*/
.quote {
position: relative;
......
......@@ -41,56 +41,20 @@
font-stretch: normal;
src: url("/fonts/WOFF/heuristica/700.woff") format("woff"), url("/fonts/OTF/Heuristica-Bold.otf") format("opentype"); }
@font-face {
font-family: 'Source Serif Pro';
font-weight: 300;
font-style: normal;
font-stretch: normal;
src: url("/fonts/EOT/SourceSerifPro-Light.eot") format("embedded-opentype"), url("/fonts/WOFF/OTF/SourceSerifPro-Light.otf.woff") format("woff"), url("/fonts/OTF/SourceSerifPro-Light.otf") format("opentype"), url("/fonts/TTF/SourceSerifPro-Light.ttf") format("truetype"); }
@font-face {
font-family: 'Source Serif Pro';
font-weight: 400;
font-style: normal;
font-stretch: normal;
src: url("/fonts/EOT/SourceSerifPro-Regular.eot") format("embedded-opentype"), url("/fonts/WOFF/OTF/SourceSerifPro-Regular.otf.woff") format("woff"), url("/fonts/OTF/SourceSerifPro-Regular.otf") format("opentype"), url("/fonts/TTF/SourceSerifPro-Regular.ttf") format("truetype"); }
@font-face {
font-family: 'Source Serif Pro';
font-weight: 700;
font-style: normal;
font-stretch: normal;
src: url("/fonts/EOT/SourceSerifPro-Bold.eot") format("embedded-opentype"), url("/fonts/WOFF/OTF/SourceSerifPro-Bold.otf.woff") format("woff"), url("/fonts/OTF/SourceSerifPro-Bold.otf") format("opentype"), url("/fonts/TTF/SourceSerifPro-Bold.ttf") format("truetype"); }
@font-face {
font-family: 'Heuristica';
font-weight: 400;
font-style: normal;
font-stretch: normal;
src: url("/fonts/WOFF/heuristica/400.woff") format("woff"), url("/fonts/OTF/Heuristica-Bold.otf") format("opentype"); }
@font-face {
font-family: 'Heuristica';
font-weight: 400;
font-style: italic;
font-stretch: normal;
src: url("/fonts/WOFF/heristica/400i.woff") format("woff"), url("/fonts/OTF/Heuristica-Italic.otf") format("opentype"); }
@font-face {
font-family: 'Heuristica';
font-weight: 700;
font-style: normal;
font-stretch: normal;
src: url("/fonts/WOFF/heuristica/700.woff") format("woff"), url("/fonts/OTF/Heuristica-Bold.otf") format("opentype"); }
/* ---------------- Resets --------------------- */
/* ----------- SITEWIDE VARIABLES--------------- */
/* ---------------- Mixins --------------------- */
/*
* Scale is probably unnecessary here, because setting font-size on its own is
* sufficient. But leave it for now. Maybe I'll want to do something special in
* the future.
*/
/* ------------ Global Styles ------------------- */
html, body, h1, h2 {
margin: 0;
padding: 0; }
/* ----------------- Page Styles ---------------- */
html {
background-color: whitesmoke;
background-color: #fcfcfc;
height: calc(100% - 0.2rem);
margin: 0.1rem;
width: calc(100% - 0.2rem); }
......@@ -120,25 +84,22 @@ header {
flex-direction: row;
align-items: baseline;
padding-bottom: 0.75rem; }
header nav ul .site-logo {
font-size: 2.5em;
font-weight: normal;
font-style: normal; }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent; }
header nav ul .site-logo::after {
/*content: ':';*/
/* For eventual nav */
/*margin-right: 0.25em;*/ }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent;
max-width: 0; }
header nav ul .resume {
margin-left: auto;
padding-right: 5em; }
@media only screen and (max-width: 45rem) {
header nav ul .resume {
padding-right: 1em; } }
main {
max-width: 80rem;
margin: 0 auto; }
......@@ -147,6 +108,10 @@ main {
* Hanging quotes:
*
* These are fairly font-dependent and may need to be updated in the future.
* Question -- how can I generalize these so that they're easy to update
* when used with other fonts?
*
* Probably set them as a mixin? Pass in the font somehow?
*/
.quote {
position: relative;
......@@ -227,6 +192,14 @@ main {
main article nav {
display: none; } }
@media only screen and (max-width: 45rem) {
main {
display: block; }
main article {
padding-right: 1rem; }
main article aside {
display: none; } }
article {
margin-bottom: 4rem;
padding-left: 1rem;
......@@ -260,11 +233,11 @@ article {
article section {
width: 100%;
max-width: 40rem;
font-family: 'Heuristica', 'Georgia', serif;
color: #1e1515;
font-size: 1.1rem;
line-height: 1.45;
line-height: 1.4;
font-style: normal;
color: #111;
font-family: 'Heuristica', 'Georgia', serif;
/*
* Better in-article links:
*
......@@ -289,6 +262,7 @@ article {
padding-left: 1rem;
width: 12rem;
font-size: 0.85rem;
hyphens: auto;
border-color: #6e6e6e;
border-left-style: solid;
border-width: 1px; }
......@@ -306,9 +280,7 @@ article {
margin-left: 0em;
padding-left: 1.2rem; }
article section .header {
font-family: 'Source Serif Pro', 'Georgia', serif;
font-style: italic;
font-weight: 300;
margin-top: -1em; }
article section.footnotes {
font-family: 'Source Serif Pro', 'Georgia', serif;
......
@charset "UTF-8";
ul.badges {
display: inline-block;
list-style: none;
padding: 0;
margin: 0; }
ul.badges li {
float: left; }
ul.badges li .badge {
display: block;
text-align: center;
width: 4.5em;
text-decoration: none;
color: black;
margin: 1em;
margin-right: 0; }
ul.badges .badge::before {
box-sizing: border-box;
display: block;
content: '';
width: 4.5em;
height: 4.5em;
border-radius: 50%;
margin-bottom: 0.3em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: #ffffff;
border-color: rgba(78, 78, 78, 0.5);
border-style: solid;
border-width: 2px; }
ul.badges .badge:hover::before {
border-color: #4e4e4e; }
ul.badges .distilled::before {
background-image: url("/images/distilled-logo.png");
background-color: #7e7e7e; }
ul.badges .raise::before {
background-image: url("/images/raise-logo.png"); }
ul.badges .github::before {
background-image: url("/images/github-logo.jpg"); }
ul.badges .gitlab:before {
background-image: url("/images/gitlab-logo.png"); }
ul.badges .patreon:before {
background-image: url("/images/patreon-logo.png");
background-color: #f36854; }
ul.badges .medium:before {
background-image: url("/images/medium-logo.svg");
background-color: black; }
ul.badges .twitter:before {
background-image: url("/images/twitter-logo.svg");
background-color: #41a1f2; }
ul.badges .liberapay:before {
background-image: url("/images/liberapay-logo.svg");
background-color: #f6ca15; }
ul.badges .piglet:before {
background-image: url("/images/piglet-logo.svg");
background-color: #b3ff63; }
ul.badges .reset-hard:before {
background-image: url("/images/reset-hard-logo.png");
background-color: #000000;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges; }
@font-face {
font-family: 'Source Serif Pro';
font-weight: 300;
......@@ -103,14 +41,20 @@ ul.badges {
font-stretch: normal;
src: url("/fonts/WOFF/heuristica/700.woff") format("woff"), url("/fonts/OTF/Heuristica-Bold.otf") format("opentype"); }
/* ---------------- Resets --------------------- */
/* ----------- SITEWIDE VARIABLES--------------- */
/* ---------------- Mixins --------------------- */
/*
* Scale is probably unnecessary here, because setting font-size on its own is
* sufficient. But leave it for now. Maybe I'll want to do something special in
* the future.
*/
/* ------------ Global Styles ------------------- */
html, body, h1, h2 {
margin: 0;
padding: 0; }
/* ----------------- Page Styles ---------------- */
html {
background-color: whitesmoke;
background-color: #fcfcfc;
height: calc(100% - 0.2rem);
margin: 0.1rem;
width: calc(100% - 0.2rem); }
......@@ -140,25 +84,22 @@ header {
flex-direction: row;
align-items: baseline;
padding-bottom: 0.75rem; }
header nav ul .site-logo {
font-size: 2.5em;
font-weight: normal;
font-style: normal; }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent; }
header nav ul .site-logo::after {
/*content: ':';*/
/* For eventual nav */
/*margin-right: 0.25em;*/ }
header nav ul .site-logo img {
height: 5rem;
bottom: -0.75rem;
position: relative; }
header nav ul .site-logo .name {
font-size: 0;
color: transparent;
max-width: 0; }
header nav ul .resume {
margin-left: auto;
padding-right: 5em; }
@media only screen and (max-width: 45rem) {
header nav ul .resume {
padding-right: 1em; } }
main {
max-width: 80rem;
margin: 0 auto; }
......@@ -167,6 +108,10 @@ main {
* Hanging quotes:
*
* These are fairly font-dependent and may need to be updated in the future.
* Question -- how can I generalize these so that they're easy to update
* when used with other fonts?
*
* Probably set them as a mixin? Pass in the font somehow?
*/
.quote {
position: relative;
......@@ -203,6 +148,68 @@ main {
margin-right: 0.7ex;
display: inline-block; }
ul.badges {
display: inline-block;
list-style: none;
padding: 0;
margin: 0; }
ul.badges li {
float: left; }
ul.badges li .badge {
display: block;
text-align: center;
width: 4.5em;
text-decoration: none;
color: black;
margin: 1em;
margin-right: 0; }
ul.badges .badge::before {
box-sizing: border-box;
display: block;
content: '';
width: 4.5em;
height: 4.5em;
border-radius: 50%;
margin-bottom: 0.3em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: #ffffff;
border-color: rgba(78, 78, 78, 0.5);
border-style: solid;
border-width: 2px; }
ul.badges .badge:hover::before {
border-color: #4e4e4e; }
ul.badges .distilled::before {
background-image: url("/images/distilled-logo.png");
background-color: #7e7e7e; }
ul.badges .raise::before {
background-image: url("/images/raise-logo.png"); }
ul.badges .github::before {
background-image: url("/images/github-logo.jpg"); }
ul.badges .gitlab:before {
background-image: url("/images/gitlab-logo.png"); }
ul.badges .patreon:before {
background-image: url("/images/patreon-logo.png");
background-color: #f36854; }
ul.badges .medium:before {
background-image: url("/images/medium-logo.svg");
background-color: black; }
ul.badges .twitter:before {
background-image: url("/images/twitter-logo.svg");
background-color: #41a1f2; }
ul.badges .liberapay:before {
background-image: url("/images/liberapay-logo.svg");
background-color: #f6ca15; }
ul.badges .piglet:before {
background-image: url("/images/piglet-logo.svg");
background-color: #b3ff63; }
ul.badges .reset-hard:before {
background-image: url("/images/reset-hard-logo.png");
background-color: #000000;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges; }
main {
display: grid;
grid-template-columns: 60% 40%;
......@@ -216,11 +223,11 @@ main {
display: none; }
section {
font-family: 'Heuristica', 'Georgia', serif;
color: #1e1515;
font-size: 1.1rem;
line-height: 1.35;
line-height: 1.4;
font-style: normal;
color: #111;
font-family: 'Heuristica', 'Georgia', serif;
padding-bottom: 1.5rem;
margin: 0.2rem; }
section ul {
......@@ -244,7 +251,8 @@ section > *:not(h1) {
margin: 1em; }
section > p {
text-align: justify; }
text-align: justify;
hyphens: auto; }
section#content section {
/*nested sections still have margins - fix from above */
......@@ -271,7 +279,7 @@ section#content .blog .list .date {
padding-bottom: 0.2rem; }
section#content .blog .list .summary {
font-size: 1.05rem;
font-size: 1rem;
max-width: 23em; }
section#content .devlog .list {
......
......@@ -8,7 +8,7 @@
:keywords: gamasutra indie gamedev vulnerability exploit
.header
*Update: I've talked with UBM's security team, they are currently working on fixes and say that they'll have more updates within around 7 days. I'll update this post with any new information as I get it.*
*Update:* I've talked with UBM's security team, they are currently working on fixes and say that they'll have more updates within around 7 days. I'll update this post with any new information as I get it.
== Some brief background
......
@import "styles/fonts.style.scss";
/* ---------------- Resets --------------------- */
/* ----------- SITEWIDE VARIABLES--------------- */
html, body, h1, h2 {
margin: 0;
padding: 0;
$max-width: 80rem; // Highest screen width
//Breakpoints
$breakpoint-partial: 65rem;
$breakpoint-mobile: 45rem;
$color-font: #1e1515; // previously #111; - double check on contrast.
$color-background: #fcfcfc;
/* ---------------- Mixins --------------------- */
/*
* Scale is probably unnecessary here, because setting font-size on its own is
* sufficient. But leave it for now. Maybe I'll want to do something special in
* the future.
*/
@mixin font-primary($scale: 1) {
font-family: 'Heuristica', 'Georgia', serif;
color: $color-font;
font-size: $scale * 1.1rem;
line-height: 1.4; // Already based on font size, so no need to scale.
font-style: normal;
}
/* ------------ Global Styles ------------------- */
/* ----------------- Page Styles ---------------- */
html, body, h1, h2 { //Resets
margin: 0;
padding: 0;
}
html {
background-color: rgb(245, 245, 245);
background-color: $color-background;
height: calc(100% - 0.2rem);
margin: 0.1rem;
width: calc(100% - 0.2rem);
}
header {
header { // Top navigation
white-space: nowrap;
background-color: rgb(50, 50, 50);
box-sizing: border-box;
......@@ -38,6 +63,7 @@ header {
nav {
font-family: 'Heuristica', 'Georgia', serif;
box-sizing: border-box;
max-width: 80rem;
margin: 0 auto;
......@@ -50,9 +76,6 @@ header {
padding-bottom: 0.75rem;
.site-logo {
font-size: 2.5em;
font-weight: normal;
font-style: normal;
img { height: 5rem;
bottom: -0.75rem;
......@@ -63,11 +86,6 @@ header {
max-width: 0; }
}
.site-logo::after {
/*content: ':';*/ /* For eventual nav */
/*margin-right: 0.25em;*/
}
.resume {
margin-left: auto;
padding-right: 5em;
......@@ -76,6 +94,13 @@ header {
}
}
//TODO: I need to think about how I want to organize these.
//Should size-specific styles be mixed into universal styles at all?
@media only screen and (max-width: $breakpoint-mobile) {
header nav ul .resume { padding-right: 1em; }
}
main {
max-width: 80rem;
margin: 0 auto;
......@@ -85,6 +110,10 @@ main {
* Hanging quotes:
*
* These are fairly font-dependent and may need to be updated in the future.
* Question -- how can I generalize these so that they're easy to update
* when used with other fonts?
*
* Probably set them as a mixin? Pass in the font somehow?
*/
.quote {
position: relative;
......
@import "styles/fonts.style.scss";
@import "styles/base.style.scss";
main {
......@@ -53,6 +52,17 @@ main {
}
}
@media only screen and (max-width: $breakpoint-mobile) {
main {
display: block;
article {
padding-right: 1rem;
aside { display: none; }
}
}
}
article {
margin-bottom: 4rem;
padding-left: 1rem;
......@@ -103,6 +113,7 @@ article {
section {
width: 100%;
max-width: 40rem;
@include font-primary();
> * {
float: left;
......@@ -118,6 +129,7 @@ article {
width: 12rem;
font-size: 0.85rem;
hyphens: auto;
border-color: #6e6e6e;
border-left-style: solid;
......@@ -143,17 +155,8 @@ article {
}
}
font-size: 1.1rem;
line-height: 1.45;
font-style: normal;
color: #111;
font-family: 'Heuristica', 'Georgia', serif;
.header {
font-family: 'Source Serif Pro', 'Georgia', serif;
font-style: italic;
font-weight: 300;
margin-top: -1em;
}
......
@import "styles/badges.style.scss";
@import "styles/base.style.scss";
@import "styles/badges.style.scss";
main {
......@@ -20,12 +20,7 @@ main {
}
section {
font-size: 1.1rem;
line-height: 1.35;
font-style: normal;
color: #111;
font-family: 'Heuristica', 'Georgia', serif;
@include font-primary();
padding-bottom: 1.5rem;
margin: 0.2rem;
......@@ -59,6 +54,7 @@ section > *:not(h1) {
section > p {
text-align: justify;
hyphens: auto;
}
section#content {
......@@ -92,7 +88,7 @@ section#content {
}
.summary {
font-size: 1.05rem;
font-size: 1rem;
max-width: 23em;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment