diff options
Diffstat (limited to 'src/css')
| -rw-r--r-- | src/css/mobile-styles.css | 23 | ||||
| -rw-r--r-- | src/css/styles.css | 243 |
2 files changed, 266 insertions, 0 deletions
diff --git a/src/css/mobile-styles.css b/src/css/mobile-styles.css new file mode 100644 index 0000000..36553cc --- /dev/null +++ b/src/css/mobile-styles.css @@ -0,0 +1,23 @@ +@media screen and (min-width: 900px) { + body { + width: 100%; + /* margin: auto; */ + } + .card-img { + display: flex; + flex-flow: row wrap; + align-content: flex-start; + } + .card img { + width: 400px; + } + form input[type=text], input[type=password], input[type=email] { + max-width: 600px; + } + form textarea { + max-width: 600px; + } + form input[type=submit] { + margin-left: 0px; + } +}
\ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..b89a373 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,243 @@ +:root { + --background: #fff; + --background-accent: #f0f0f0; + --accent: #ada; + --text: #000; + --btn-color: #2d2; + --btn-text: #000; + --btn-hover: #0a0; + --light-text: #aaa; +} + +body { + width: 60%; + min-width: 500px; + margin: auto; + /* margin: 0px; */ + background-color: var(--background); + font-family: Arial, Helvetica, sans-serif; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +h1, h2 { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: 150; +} + +h1 { + font-size: 30pt; + margin: auto; + margin-bottom: 0; + margin-left: 20px; +} + +.card-title { + margin-left: 0; +} + +@keyframes zoom-left { + 0% {left: 100%; } + 100% {left: 0;} +} + +footer { + text-align: center; + padding-top: 1em; + padding-bottom: 2em; + border-top: 1px solid var(--light-text); + color: var(--light-text); + background-color: var(--background-accent); +} + +footer a { + color: var(--light-text); + text-decoration: underline; +} + +.essay{ + width: 70%; +} + +.figure { + border: 1px solid #777; + background-color: #ddd; + padding: 10px; +} + +img { + image-orientation: from-image; +} + +a { + text-decoration: none; +} + +.card-title { + +} + +.card { + margin: 1em; + padding: 2%; + border: 1px solid var(--text); + border-radius: 3px; + display: inline; + min-width: 200px; + background-color: var(--background-accent); +} + +.card img { + width: 100%; + margin: 2%; + border: 2px solid #888; +} +.spacer { + width: 1em; + display: inline-block; +} +#feed { + width: 100%; +} +.feed { + /* width: 80%; */ + min-width: 200px; + margin: auto; + display: flex; + flex-direction: column; + margin-top: 8px; + animation-name: zoom-left; + animation-duration: .5s; + animation-iteration-count: 1; + position: relative; +} + +p { + margin-top: 0; +} + +.titlebar { + padding: 5px; + border-top: 1px solid var(--light-text); + border-bottom: 1px solid var(--light-text); + background-color: var(--background-accent); + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + + +.titlebar a{ + margin: auto; + max-width: 10%; + min-width: 100px; + flex-grow: 1; +} + +.btn { + display: inline-block; + padding: 1px 3px; + border: 1px solid var(--btn-text); + border-radius: 3px; + max-width: 100px; + line-height: 2em; + text-align: center; + vertical-align: middle; + white-space: nowrap; + text-decoration: none; + cursor: pointer; +} + +.btn-primary { + width: 100%; + height: 2em; + font-size: 20px; + background-color: var(--btn-color); + color: var(--btn-text); +} + +.btn-primary:hover{ + background-color: var(--btn-hover); +} + +.btn-secondary { + background-color: var(--btn-color); + color: var(--btn-text); +} + +.btn-secondary:hover{ + background-color: var(--btn-hover); +} + +.date { + font-style: italic; + margin: 0em; +} +.tag { + font-style: normal; + padding-left: 1em; + font-weight: lighter; + font-size: .8em; + text-decoration: none; + color: var(--light-text); +} +.tag::before{ + content: "#"; +} + +.url-table, .ip-table { + width: 30%; +} + +form { + width: 85%; +} + +input[type=text], input[type=password], input[type=email] { + height:1.5em; + width: 100%; + display: block; + margin-top: 5px; +} + +input[type=submit] { + height:2em; + width: 50%; + margin-top: 5px; + margin-left: 25%; +} + +td { + padding-right: 10px; +} + +textarea { + border-radius: 4px; + border: 2px solid var(--background-accent); + width: 100%; + height: 10em; +} + +.feed h1 { + font-size: 24pt; +} + +a.navigation:visited, a.navigation:link { + color: var(--accent); + text-decoration: none; +} + +.email::after { + content: "@marks.kitchen"; +} + +.cool { + float: right; +} + +dl > dt { + font-weight: bold; +} + |