CSS Snapshot
You feel preserved.
As of
What's the point of posting all of this, can't I just get it with Ctrl + Shift + C, or by inspecting the source?That doesn't give you a snapshot of what it was today, though.Why not just look at your git?Git is too involved sometimes.just save a copy somewhere lol 😂bro thats what im doinnnnn 💀💀💀
Points of Interest
- File arrangement loosely based on SMACCS, though the guide was not followed rigidly if it was a drag to implement
- Root variables associated with colors, horizontal screen padding, line height, margins between elements, and one-sided margins between elements, respectively
- Padded style makes HTML elements pad correctly to the page without defining class
- images in particular will fill an entire phone screen, but be padded on larger screens
- the original implementation is commented out; more compatible, but more cumbersome
- Leader Lists are useful for menus and create the following effect (the leaders are the dots)
Coffee ...................... 4.00 Cheetos ..................... 2.00 Chicken .................... 12.00
- Image and Blog Lists for link galleries
- Dynamic Navigation and Footer
- navigation is currently disabled but it's modelled off of YouTube's placement
- footer stays in place
- Dialog Quotes as seen above; not difficult, but they're cute, no? Will definitely be useful for certain applications
Future Goals
- make the variables efficient; you can make the root variables modal based on screen dimensions, instead of every element and class
- unify variable categories
- more on efficiency
- naming compatibility
- better organization
Complete CSS
/*
* BASE =====================
*/
@font-face {
font-family: fremont;
src: url("./fonts/fremont.ttf");
}
@font-face {
font-family: raleway;
src: url("./fonts/raleway.ttf");
}
@font-face {
font-family: jost;
src: url("./fonts/jost.ttf");
}
:root {
--primary: #2f847c;
--secondary: #f7b733;
--success: ;
--danger: ;
--warning: ;
--info: ;
--light: #dddddd;
--dark: #111111;
--muted: #333333;
--white: #eeeeee;
--advanced-white: #fafafa;
--light-muted: #888888;
--dt-width: 40rem;
--mb-padding: 1rem;
--tb-padding: 4rem;
--dt-padding: 4rem;
--mb-lineheight: 1.7rem;
--tb-lineheight: 2rem;
--dt-lineheight: 2rem;
--sm-vertmargin: 1rem 0;
--md-vertmargin: 2rem 0;
--lg-vertmargin: 3rem 0;
--hg-vertmargin: 5rem 0;
--sm-onemargin: 1rem;
--md-onemargin: 2rem;
--lg-onemargin: 3rem;
--hg-onemargin: 5rem;
/*
--mb-padding: 0.6rem;
--tb-padding: 2rem;
--dt-padding: 4rem;
--dt-width: 50rem;
*/
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100vh;
font-family: sans-serif;
scroll-behavior: smooth;
background-image: url('/img/background.webp');
background-attachment: fixed;
background-size: 100vw auto;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: var(--muted);
}
h2, h3, h4 {
margin: var(--md-vertmargin);
text-align: justify;
}
h1 {
font-size: 1.4rem;
font-family: sans-serif;
display: inline-block;
border-style: solid;
border-width: 0.35rem;
border-radius: 0;
padding: 3.5rem;
}
h2 {
font-family: serif;
font-size: 2rem;
font-weight: bolder;
}
@media only screen and (min-width: 30rem) {
h2 {
font-size: 3rem;
}
}
h3 {
font-size: 1.4rem;
}
@media only screen and (min-width: 30rem) {
h3 {
font-size: 1.5rem;
}
}
h4 {
font-size: 1rem;
}
@media only screen and (min-width: 30rem) {
h4 {
font-size: 1.3rem;
}
}
h5 {
margin: var(--sm-vertmargin);
}
pre {
display: block;
overflow: auto;
}
code {
border: 0.1rem dashed var(--primary);
background: var(--advanced-white);
display: block;
color: var(--primary);
padding: 1rem;
margin: var(--sm-vertmargin);
font-size: 0.7rem;
overflow: auto;
max-height: 50em;
}
.convo {
margin: var(--md-vertmargin);
}
.convo > i, .convo > b {
display: block;
padding: 1.5rem;
font-size: 0.9rem;
width: fit-content;
margin: var(--sm-vertmargin);
font-style: normal;
font-weight: normal;
}
.convo > i {
background: var(--primary);
color: var(--advanced-white);
border-radius: 1.5rem 1.5rem 1.5rem 0;
}
.convo > b {
background: var(--advanced-white);
color: var(--primary);
border-radius: 1.5rem 1.5rem 0 1.5rem;
margin-left: auto;
}
ul,
ol {
padding: 0;
margin: var(--sm-vertmargin);
margin-left: 1em;
display: block;
line-height: var(--mb-lineheight);
}
@media only screen and (min-width: 30rem) {
}
@media only screen and (min-width: 45rem) {
ul,
ol {
line-height: var(--dt-lineheight);
}
}
li {
}
p {
text-align: justify;
line-height: var(--mb-lineheight);
margin: var(-sm-vertmargin);
}
@media only screen and (min-width: 30rem) {
p {
}
}
@media only screen and (min-width: 45rem) {
p {
line-height: var(-md-vertmargin);
}
}
hr {
border-top: 0.1rem dashed var(--primary);
margin: var(--md-vertmargin);
}
em {
font-variant: small-caps;
font-family: serif;
font-style: italic;
}
small {
display: block;
}
address {
font-style: normal;
}
a {
font-family: serif;
cursor: pointer;
color: var(--primary);
}
a:hover {
color: var(--dark);
}
img {
display: block;
width: 100%;
}
button,
input[type=submit],
input[type=reset],
input[type=text] {
width: 100%;
border-width: 0.1rem;
border-style: solid;
margin: 0.12rem 0;
}
button,
input[type=submit],
input[type=reset] {
border-color: var(--primary);
background-color: none;
color: var(--primary);
padding: 0.4em 0.8em;
}
@media only screen and (min-width: 30rem) {
button,
input[type=submit],
input[type=reset] {
width: auto;
}
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background-color: var(--primary);
color: var(--light);
cursor: pointer;
}
input[type=text] {
text-align: right;
background-color: var(--advanced-white);
padding: 0.2em 0.4em;
border-color: var(--muted);
}
/*
* LAYOUT ===================
*/
.width-limit {
max-width: var(--dt-width);
margin: 0 auto;
height: inherit;
}
.padded {
height: inherit;
}
@media only screen and (max-width: 29.9rem) {
.padded > *:not(img,
.image-list,
button,
input[type=submit],
input[type=reset],
code,
hr,
input[type=text]) {
padding: 0 var(--mb-padding);
}
.padded > button,
.padded > input[type=submit],
.padded > input[type=reset],
.padded > code,
.padded > hr,
.padded > input[type=text] {
margin-left: var(--mb-padding);
width: calc(100% - 2*var(--mb-padding));
}
}
@media only screen and (min-width: 30rem) {
.padded > *:not(button,
input[type=submit],
input[type=reset],
code,
hr,
input[type=text]) {
padding: 0 var(--tb-padding);
}
.padded > button,
.padded > input[type=submit],
.padded > input[type=reset],
.padded > code,
.padded > hr,
.padded > input[type=text] {
margin-left: var(--tb-padding);
width: calc(100% - 2*var(--tb-padding));
}
}
@media only screen and (min-width: 45rem) {
.padded > *:not(button,
input[type=submit],
input[type=reset],
code,
hr,
input[type=text]) {
padding: 0 var(--dt-padding);
}
.padded > button,
.padded > input[type=submit],
.padded > input[type=reset],
.padded > code,
.padded > hr,
.padded > input[type=text] {
margin-left: var(--dt-padding);
width: calc(100% - 2*var(--dt-padding));
}
}
/*.padded {
* height: inherit;
*}
*
*.padded h1,
*.padded h2,
*.padded h3,
*.padded h4,
*.padded h5,
*.padded ul,
*.padded ol,
*.padded address,
*.padded p,
*.padded small,
*.padded form {
* padding: 0 var(--mb-padding);
*}
*@media only screen and (min-width: 30rem) {
* .padded h1,
* .padded h2,
* .padded h3,
* .padded h4,
* .padded h5,
* .padded ul,
* .padded ol,
* .padded address,
* .padded p,
* .padded small,
* .padded form {
* padding: 0;
* }
*}
*
*.padded > p,
*.padded > small,
*.padded > address,
*.padded > h1,
*.padded > h2,
*.padded > h3,
*.padded > h4,
*.padded > h5,
*.padded > ul,
*.padded > ol,
*.padded > hgroup,
*.padded > div,
*.padded > span,
*.padded > img,
*.padded > form,
*.padded > button {
*}
*@media only screen and (min-width: 30rem) {
* .padded > p,
* .padded > small,
* .padded > address,
* .padded > h1,
* .padded > h2,
* .padded > h3,
* .padded > h4,
* .padded > h5,
* .padded > ul,
* .padded > ol,
* .padded > hgroup,
* .padded > div,
* .padded > span,
* .padded > img,
* .padded > form {
* padding: 0 var(--tb-padding);
* }
* .padded > button {
* margin-left: var(--tb-padding);
* margin-right: var(--tb-padding);
* }
*}
*@media only screen and (min-width: 45rem) {
* .padded > p,
* .padded > small,
* .padded > address,
* .padded > h1,
* .padded > h2,
* .padded > h3,
* .padded > h4,
* .padded > h5,
* .padded > ul,
* .padded > ol,
* .padded > hgroup,
* .padded > div,
* .padded > span,
* .padded > img,
* .padded > form {
* padding: 0 var(--dt-padding);
* }
* .padded > button {
* margin-left: var(--dt-padding);
* margin-right: var(--dt-padding);
* }
*}
*/
section {
padding: var(--lg-vertmargin);
margin-bottom: 4rem;
background-color: var(--white);
}
@media only screen and (min-width: 30rem) {
section {
padding: var(--hg-vertmargin);
margin-bottom: 6rem;
}
}
main > section:first-of-type,
main > .section-sel:first-of-type {
margin-top: 4rem;
}
@media only screen and (min-width: 30rem) {
main > section:first-of-type,
main > .section-sel:first-of-type {
margin-top: 6rem;
}
}
main > section > div > *:first-child,
main > section > *:first-child {
margin-top: 0;
}
main > section > div > *:last-child,
main > section > *:last-child {
margin-bottom: 0;
}
nav {
background-color: var(--white);
position: fixed;
bottom: 0;
height: 3rem;
width: 100%;
z-index: 2;
border-top: solid;
border-width: 0.1rem;
border-color: silver;
}
@media only screen and (min-width: 30rem) {
nav {
top: 0;
border-top: none;
border-bottom: solid;
border-width: 0.1rem;
border-color: silver;
}
}
#page {
flex: 1 0 auto;
/* margin-bottom: 3rem; */
}
@media only screen and (min-width: 30rem) {
#page {
/* margin-top: 3rem; */
}
}
#sec-news {
background-color: var(--muted);
color: var(--light);
padding: 0.5rem 0;
margin-bottom: 0;
border: none;
border-radius: 0;
}
header {
background-color: var(--white);
padding: 3rem;
text-align: center;
}
header a {
text-decoration: none;
color: var(--muted);
}
#sec-location h3 {
text-align: left;
}
#sec-location p {
}
footer {
background-color: var(--dark);
color: var(--muted);
flex-shrink: 0;
/* margin-bottom: 3rem; */
}
@media only screen and (min-width: 30rem) {
footer {
/* margin-bottom: 0; */
}
}
footer a {
color: inherit;
}
footer a:hover {
color: var(--light-muted)
}
footer p {
text-align: center;
}
footer img {
width: 4rem;
margin: 0 auto;
}
.row {
display: block;
}
@media only screen and (min-width: 30rem) {
.row {
display: flex;
justify-content: space-between;
}
}
.column {
display: block;
}
@media only screen and (min-width: 30rem) {
.column {
flex-flow: row wrap;
}
}
.column :first-child {
}
@media only screen and (min-width: 30rem) {
.column > :first-child {
margin-top: 0;
}
}
.half.column {
}
@media only screen and (min-width: 30rem) {
.half.column {
width: 49%;
}
}
.one-third.column {
}
@media only screen and (min-width: 30rem) {
.one-third.column {
width: 33%;
}
}
.two-thirds.column {
}
@media only screen and (min-width: 30rem) {
.two-thirds.column {
width: 66%;
}
}
/*
* MODULE ===================
*/
p.text-center {
text-align: justify;
}
@media only screen and (min-width: 30rem) {
p.text-center {
text-align: center;
}
}
.nav-bar {
display: table;
content: ' ';
clear: both;
height: inherit;
width: 100%;
}
.nav-bar > a {
font-family: fremont;
font-weight: bolder;
text-decoration: none;
height: inherit;
color: inherit;
font-size: 1.8rem;
float: left;
display: none;
}
@media only screen and (min-width: 30rem) {
.nav-bar > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.nav-bar > span {
width: 100%;
float: right;
height: inherit;
}
@media only screen and (min-width: 30rem) {
.nav-bar > span {
width: 10rem;
}
}
.nav-bar > span a {
float: left;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(100% / 3);
text-decoration: none;
color: inherit;
height: inherit;
font-size: 0.7rem;
}
@media only screen and (min-width: 30rem) {
.nav-bar > span a {
width: calc(100% / 4);
}
}
.nav-bar > span a:hover {
cursor: pointer;
}
.nav-bar > span i {
display: block;
font-size: 1.2rem;
}
.scroll-point {
position: relative;
top: -1.5rem;
}
@media only screen and (min-width: 30rem) {
.scroll-point {
top: -4.5rem;
}
}
.link-gallery {
display: table;
content: ' ';
clear: both;
margin: 0 auto;
}
.link-gallery a {
float: left;
display: inline-block;
width: calc(100% / 3);
min-width: 5rem;
max-width: 10rem;
padding: 0 var(--mb-padding);
}
@media only screen and (min-width: 30rem) {
.link-gallery a {
padding: 0 var(--mb-padding);
}
}
.link-gallery img {
border: dashed;
border-width: 0.1rem;
color: var(--dark);
}
.image-list {
display: flex;
flex-flow: row wrap;
gap: calc(var(--mb-padding) / 2);
}
.image-list a {
text-decoration: none;
position: relative;
display: block;
flex: 0 1 calc(50% - calc(var(--mb-padding) / 3.9));
background-color: rgba(0,0,0,0.3);
}
.image-list span {
display: block;
font-family: sans-serif;
font-weight: light;
color: var(--light);
font-size: 0.7em;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0,0,0,0.6);
padding: 0.5em;
}
@media only screen and (min-width: 30rem) {
.image-list {
display: flex;
flex-flow: row wrap;
gap: calc(var(--tb-padding) / 2);
}
.image-list a {
display: block;
flex: 0 1 calc(50% - calc(var(--tb-padding) / 3.9));
}
}
@media only screen and (min-width: 45rem) {
.image-list {
gap: calc(var(--dt-padding) / 3);
}
.image-list a {
flex: 0 1 calc(33% - calc(var(--dt-padding) / 5));
}
}
.image-list i {
font-size: 2em;
text-align: center;
display: block;
}
.image-list p {
text-align: left;
line-height: 1em;
}
.blog-list {
display: flex;
flex-flow: row wrap;
gap: calc(var(--mb-padding) / 2);
font-size: small;
}
.blog-list a {
display: block;
position: relative;
flex: 0 1 calc(50% - calc(var(--mb-padding) / 3.9));
text-decoration: none;
color: inherit;
font-family: sans-serif;
}
.blog-list div {
position: relative;
width: 100%;
padding-top: 75%;
}
.blog-list img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-list i {
font-style: normal;
display: block;
margin: 0.2rem 0;
}
.blog-list small {
color: var(--light-muted);
margin: 0;
font-size: inherit;
line-height: 1.2rem;
}
.blog-list time {
white-space: nowrap;
}
@media only screen and (min-width: 30rem) {
.blog-list {
display: flex;
flex-flow: row wrap;
gap: calc(var(--tb-padding) / 2);
}
.blog-list a {
display: block;
flex: 0 1 calc(50% - calc(var(--tb-padding) / 3.9));
}
}
@media only screen and (min-width: 45rem) {
.blog-list {
gap: calc(var(--dt-padding) / 3);
}
.blog-list a {
flex: 0 1 calc(33% - calc(var(--dt-padding) / 5));
}
}
#piper {
width: 6rem;
margin: 1rem;
float: right;
opacity: 50%;
}
.leader-list {
padding: 0;
overflow: hidden;
list-style: none
}
.leader-list li {
margin-bottom: 0.6rem;
}
.leader-list li:after {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}
.leader-list span:first-child {
padding-right: 0.33em;
background-color: var(--white);
font-weight: light;
font-size: 1rem;
font-style: italic;
}
@media only screen and (min-width: 45rem) {
.leader-list span:first-child {
font-size: 1.2rem;
}
}
.leader-list span + span {
float: right;
background-color: var(--white);
position: relative;
z-index: 1;
font-weight: bold;
font-size: 1rem;
}
@media only screen and (min-width: 45rem) {
.leader-list span + span {
font-size: 1.2rem;
}
}
#menuList p {
text-align: left;
}
/*
* STATE ====================
*/
.mb-hide {
display: none !important;
}
@media only screen and (min-width: 30rem) {
.mb-hide {
display: flex !important;
}
}
/*
* THEME ====================
*/