diff --git a/public/css/styles.css b/public/css/styles.css index 3f7f05c..5b94956 100755 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -57,7 +57,8 @@ Contact: me@bateleur.org, me@hexaitos.com. } * { - font-family: Merriweather, Merriweather Sans + box-sizing: border-box; + font-family: Merriweather, Merriweather Sans; } q { @@ -103,11 +104,7 @@ h3 { } .main img { - max-width: 100% -} - -div.pfp { - padding: .5em + width: 100% } div.main { @@ -117,21 +114,6 @@ div.main { min-height: 500px } -.pfp img { - border: 5px double #a72f14; - border-radius: 10px; - max-width: 150px; - display: block; - margin-left: auto; - margin-right: auto -} - -.pfp p { - text-align: center; - font-style: italic; - font-size: 12px -} - div.menu { background: var(--menu-bg); padding: .5em; @@ -182,52 +164,6 @@ a.webring-btn:hover { text-decoration: none; } -div.contact { - text-align: center; -} - -.contact a { - color: #fff; - text-decoration: none; - padding: .8em .8em; - text-align: center; - background-color: var(--btn-col); - display: grid; - font-size: medium; - border-radius: 10px; - margin-bottom: 1em -} - -a.webring-btn { - color: #fff; - text-decoration: none; - padding: .5em .5em; - margin-right: .5em; - margin-left: .5em; - min-width: 75px; - text-align: center; - background-color: var(--btn-col); - display: inline-block; - font-size: medium; - border-radius: 10px -} - -div.webring { - border-top: 2px solid var(--btn-hov); - border-bottom: 2px solid var(--btn-hov); - text-align: right; - display: flex; - align-items: center; - height: 50px; - justify-content: space-between; - margin-top: 5px -} - -.webring span { - float: left; - padding: auto 0 -} - footer { background: var(--foot-bg); padding: 1em; @@ -279,162 +215,6 @@ footer p:last-of-type { } } -div.art { - display: flex; - justify-content: center -} - -div.gallery { - border: 5px double rgba(167, 47, 20, .3) -} - -div.gallery:hover { - border: 5px double #dba047 -} - -div.gallery img { - width: 100%; - height: 200px; - object-fit: scale-down -} - -div.desc { - padding: 10px; - text-align: center -} - -* { - box-sizing: border-box -} - -.responsive { - padding: 0 6px; - float: left; - width: 24.99999% -} - -section.colour-cols { - display: flex; - flex-direction: column; - justify-content: space-around; - text-align: center -} - -div[class*=colour-col-] { - display: flex; - justify-content: center -} - -div[class*=colour-col-]>div { - height: 75px; - width: 25% -} - -div[class*=colour-col-][class*="1"] :nth-child(1) { - background-color: #2b2623 -} - -div[class*=colour-col-][class*="1"] :nth-child(2) { - background-color: #db9f47 -} - -div[class*=colour-col-][class*="1"] :nth-child(3) { - background-color: #ae4e26 -} - -div[class*=colour-col-][class*="1"] :nth-child(4) { - background-color: #a72f14 -} - -div[class*=colour-col-][class*="2"] :nth-child(1) { - background-color: #fff -} - -div[class*=colour-col-][class*="2"] :nth-child(2) { - background-color: #133042 -} - -div[class*=colour-col-][class*="2"] :nth-child(3) { - background-color: #2b2623 -} - -div[class*=colour-col-][class*="3"] :nth-child(1) { - background-color: #c0b6ad -} - -div[class*=colour-col-][class*="3"] :nth-child(2) { - background-color: #9f9387 -} - -div[class*=colour-col-][class*="3"] :nth-child(3) { - background-color: #2b2623 -} - -div[class*=colour-col-][class*="3"] :nth-child(4) { - background-color: #894518 -} - -div[class*=hex-code-col-] { - display: flex; - justify-content: center; - flex-direction: row; - margin-bottom: 15px -} - -div[class*=hex-code-col-]>span { - width: 25%; - display: inline; - text-align: center; - font-family: monospace -} - -span.colour-heading { - margin-bottom: 5px; - font-size: large -} - -img.refsheet { - width: 100% -} - -@media only screen and (max-width: 700px) { - .responsive { - width: 49.99999%; - margin: 6px 0 - } - div.art { - display: inherit; - justify-content: inherit - } -} - -@media only screen and (max-width: 500px) { - .responsive { - width: 100% - } - div.art { - display: inherit; - justify-content: inherit - } - a.webring-btn { - min-width: 40px; - margin-right: .2em; - margin-left: .2em - } -} - -.clearfix:after { - content: ""; - display: table; - clear: both -} - -code { - font-family: monospace; - background-color: #d3d3d3; - border: 1px gray -} - @media(prefers-color-scheme: dark) { :root { --body-bg: rgb(49, 49, 49); @@ -446,8 +226,7 @@ code { } code { background-color: #a9a9a9 - } - div.gallery { + } div.gallery { border: 5px double #a72f14 } .main a, footer a {